デザインに役立つ オンラインツールまとめ|Blog|株式会社トライム
デザインに役立つ オンラインツールまとめ
2021.10.21
![記事サムネイル](https://contents.try-m.co.jp/wp-content/uploads/2021/10/210830_00.jpg)
今回は実際に使用してみてデザイン作成時に役に立ったオンラインツールをご紹介いたします。
whatamesh
![](https://contents.try-m.co.jp/wp-content/uploads/2021/10/210830_01.jpg)
whatameshはアニメーションするグラデーションメッシュを作成、コードを発行してくれるジェネレーターです。
cssとjsを発行してくれるため、そのままサイトに使用することができます。
難しいグラデーションを作成できるためキャプチャを使用してデザインの背景などにも使用できました。
whatamesh : https://whatamesh.vercel.app/
SVG Gobbler
![](https://contents.try-m.co.jp/wp-content/uploads/2021/10/210830_02.jpg)
ChromeとFirefoxで配布されている拡張機能
こちらは指定したページで使用されているSVGファイルを一括ダウンロード、コードでの入手が可能です。
SVG Gobbler : https://chrome.google.com/webstore/detail/svg-gobbler/mpbmflcodadhgafbbakjeahpandgcbch/related
lordicon
![](https://contents.try-m.co.jp/wp-content/uploads/2021/10/210830_03.jpg)
アニメーション付きのSVGアイコンが数多く登録されています。
ホバーでアニメーションがすぐに確認できるため、自分でアニメーションを作る際にも参考になります。
lordicon : https://lordicon.com/icons
Measure
![](https://contents.try-m.co.jp/wp-content/uploads/2021/10/210830_04.jpg)
こちらもChrome拡張機能です。
Webページ上でハイライト(選択)したテキストの文字数をカウントしてくれるツールになります。
仮データで50文字入る想定など、文字数を確認する際にとても便利なツールになります。
Measure : https://chrome.google.com/webstore/detail/measure/bbompmbliibpeaaloikpoahdokhjdmeg/related
Accessible Brand Colors
![](https://contents.try-m.co.jp/wp-content/uploads/2021/10/210830_05-1.jpg)
背景色と文字色の組み合わせが「読みやすい」か「読みにくい」かを教えてくれるサイト、単色毎でのチェックしかできませんが、画像など登録できるようになったら嬉しいですね。
Accessible Brand Colors : https://abc.useallfive.com/
BEAUTIFUL WEB TYPE
![](https://contents.try-m.co.jp/wp-content/uploads/2021/10/210830_06.jpg)
Google fontsを使用した組み合わせを多数掲載しくれているサイト
フリーフォントをうまく使用している実例が多くとても参考になります。
BEAUTIFUL WEB TYPE : https://beautifulwebtype.com/
type-scale.com
![](https://contents.try-m.co.jp/wp-content/uploads/2021/10/210830_07.jpg)
ベースとなるフォントサイズを入力すると、美しく見えるサイズバランス表示してくれるサイトです。
デフォルトは白銀比(1.414)ですが、黄金比やカスタム数値を選択・入力することもできます。
日本語フォントも確認できるため非常に役に立っています。
type-scale.com : https://type-scale.com/
Syncope
![](https://contents.try-m.co.jp/wp-content/uploads/2021/10/210830_08-1.jpg)
要素の縦スペースを揃えるバーティカル・リズムを作成できるツール。
h1、h2、h3、h4と別々に表示して確認することができるためとても便利なツールです。
おまけ
How I Experience Web Today
![](https://contents.try-m.co.jp/wp-content/uploads/2021/10/210830_09-1.jpg)
いろいろな機能が増えていく一方、ウェブがいかに「不便」になったかを体験できる皮肉サイト。付け加えすぎると不便になってしまうのが見ていて参考になりました。
How I Experience Web Today : https://how-i-experience-web-today.com/detail.html#
Contact
お問い合わせ
トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。
03-6403-3259
受付:10:00 - 19:00
![ロゴ](/wp-content/themes/trym/images/top/contact-logo.png)