デザインに役立つ オンラインツールまとめ

• Web Create
• 2021.10.21

今回は実際に使用してみてデザイン作成時に役に立ったオンラインツールをご紹介いたします。

whatamesh

whatameshはアニメーションするグラデーションメッシュを作成、コードを発行してくれるジェネレーターです。
cssとjsを発行してくれるため、そのままサイトに使用することができます。
難しいグラデーションを作成できるためキャプチャを使用してデザインの背景などにも使用できました。

whatamesh ： https://whatamesh.vercel.app/

SVG Gobbler

ChromeとFirefoxで配布されている拡張機能
こちらは指定したページで使用されているSVGファイルを一括ダウンロード、コードでの入手が可能です。

SVG Gobbler ： https://chrome.google.com/webstore/detail/svg-gobbler/mpbmflcodadhgafbbakjeahpandgcbch/related

lordicon

アニメーション付きのSVGアイコンが数多く登録されています。
ホバーでアニメーションがすぐに確認できるため、自分でアニメーションを作る際にも参考になります。

lordicon ： https://lordicon.com/icons

Measure

こちらもChrome拡張機能です。
Webページ上でハイライト（選択）したテキストの文字数をカウントしてくれるツールになります。
仮データで50文字入る想定など、文字数を確認する際にとても便利なツールになります。

Measure ： https://chrome.google.com/webstore/detail/measure/bbompmbliibpeaaloikpoahdokhjdmeg/related

Accessible Brand Colors

背景色と文字色の組み合わせが「読みやすい」か「読みにくい」かを教えてくれるサイト、単色毎でのチェックしかできませんが、画像など登録できるようになったら嬉しいですね。

Accessible Brand Colors ： https://abc.useallfive.com/

BEAUTIFUL WEB TYPE

Google fontsを使用した組み合わせを多数掲載しくれているサイト
フリーフォントをうまく使用している実例が多くとても参考になります。

BEAUTIFUL WEB TYPE ： https://beautifulwebtype.com/

type-scale.com

ベースとなるフォントサイズを入力すると、美しく見えるサイズバランス表示してくれるサイトです。
デフォルトは白銀比（1.414）ですが、黄金比やカスタム数値を選択・入力することもできます。
日本語フォントも確認できるため非常に役に立っています。

type-scale.com ： https://type-scale.com/

Syncope

要素の縦スペースを揃えるバーティカル・リズムを作成できるツール。
h1、h2、h3、h4と別々に表示して確認することができるためとても便利なツールです。

おまけ

How I Experience Web Today

いろいろな機能が増えていく一方、ウェブがいかに「不便」になったかを体験できる皮肉サイト。付け加えすぎると不便になってしまうのが見ていて参考になりました。

How I Experience Web Today ： https://how-i-experience-web-today.com/detail.html#