あなたのWeb制作をサポートしてくれるWebツール13選

Web制作をサポートしてくれるツールを10個紹介します。 mix-blend-mode や grid レイアウト、 transform などのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。

Fuze – CSS Gradient Animator

グラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。

ちなみに、テキストカラーは当サイトのトップページでも採用しています（ トップページへ ）。

CSS 3D Transform Examples

CSSのみで表現する3Dデザイン用のコードを取得できるツール。 transform を使ってどのように立体的に表現できるか確認することができます。hoverでアニメーションや、div一つで擬似要素を駆使したコーディングは応用できるので、コーディングの勉強にもなります。ぜひともおさえておきたいツールです。

Clippy — CSS clip-path maker

CSSの clip-path を視覚的に設定ができるCSSジェネレーター。多用なかたちに変えることができ、アンカーポイントをこまかく指定できるので、 clip-path を使用するさいは、まずClippyを開くことをおすすめします。

Draggable Blend Generator

CSSの mix-blend-mode の表示確認ができるCSSジェネレーター。IEが無くなった今となっては表現の選択肢の一つとしておさえておきたいものなので、ぜひチェックしてみてください。

Wordmark

PCにインストールしてあるフォントを一覧で確認することができるツール。利用していないフォントは何気に忘れがちで「こんなフォントあったんだ！」ということは少なくないはず。私も年に数回チェックするようにしています。

Griddy

CSSの grid レイアウトを視覚的に設定できるツール。 grid-template-columns と Grid Template Rows 、 column-gap など細かい設定が可能です。 grid レイアウトの勉強に使えるので、本番で使用する前に確認しておくといいかと思います。

Neumorphism.io

ニューモーフィズムをCSSで設定するためのCSSジェネレーター。トレンドはいつの間にか去ったようですが、 box-shadow の設定や、要素の凹みや膨らみをこまかく調整するさいに便利です。

Vivus Instant

SVGファイルをストロークアニメーションSVGに変換してくれるWebツール。ファイルをドラッグ＆ドロップするだけなので手軽に作成できるのが嬉しい。複雑なものは作成できませんが、シンプルなアニメーションであれば十分かと。手持ちのSVGファイルで一度試してみてください。

Dashed Border Generator

さまざまなサイズの破線をCSSで表現するためのツール。 border でも線の太さや色を変えて表現できるのですが、 background だと点線の長さ、点線の感覚の長さ、点線の角度なども変更することができます。視覚的に設定できるのは嬉しいですね。

簡単QRコード作成工房

QRコード作成するWebツール。URL、テキスト、メール、SMS、Zoom、Wi-Fi、イベントといった情報をQRコードにしてくれます。

私はリンクを使用しています。Chromeにはデフォルトで現在表示しているページURLをQRコード化してくれる機能があるのですが、ダウンロードできる形式がpngのみなので、SVGでほしいときにはこちらが手軽で便利です。

Haikei

さまざまな背景画像を作成できるWebツール。波線、ドット、ポリゴン、星など15パターンあります。色やコントラストなどを指定でき、SVGかpngでダウンロードできます。

The VS Code Theme Editor

Visual Studio Code(VSCode)用のテーマカラーを自作できるツール。人によって見やすい背景色やテキストカラーはあるので、配布されているテーマで好みのものがなければ自作してみてください。

サイト内には他の人が作成したテーマを配布していて、それを使うことができますし、それをベースにして好みに変えるということもできます。