design
デザインに役立つツール6選
LightShot
Windowsユーザーには必須のキャプチャツールです。
使い方は簡単で、インストールした後、「PrtScn」を押し、キャプチャしたい場所をドラッグして保存するだけです。
Windowsに元から入っているキャプチャは使いづらいなと感じていたところ、こちらのツールを知りました。いまでは無くてはならないツールです。ディレクターやクライアントとちょっとしたイメージを共有したいとき、デザインデータをその都度書き出すのは手間がかかります。そんなときは、使いたい部分のみをキャプチャし、チャットに添付して送るようにしています。時間もかからず、データも軽い状態で送れるので、一石二鳥です。
インストールはこちら
Gridulator
簡単にグリッドを作成できるWeb上のサービスです。
グリッド作成ツールはいくつかありますが、こちらはコンテンツ幅を自由に変えられて、PNG書き出しにも対応していて便利です。
いくつもの案件を同時に進めていると、案件によってコンテンツの幅が変わることがよくあります。同一サイズの複数のカラムを均等に配置したいとき、コンテンツの幅が異なると、その都度計算しなおさなければいけませんが、このサイトを使えば数字を入力するだけでOKです。PNGで書き出せばイメージがつかめるだけでなく、ダミーとして実際のデザインにあてはめて、バランスを確認することも簡単にできるのでいいですね。
wordmark.it
自分のPCに入っているフォントを一覧で確認できるWeb上のサービスです。Google Fontも確認できます。
テキストは任意に変えることができ、気になったフォントをいくつか選んで「Filter selected」ボタンを押すと、選んだフォントだけが表示されるので、フォントの比較も簡単です。
デザインに欠かせないフォント。求めるデザインの方向性に合ったフォントを一発で選ぶのは、なかなか至難の業ですよね。たとえばロゴを作成したいとき、このサイトで実際のロゴのテキストを入力すれば、自分のPCに入っているフォントで一覧で見ることができます。ひとつひとつフォントを確認するよりもずっと手軽で、意外なフォントを発見することもできるかもしれません。フォント選びで迷ったら、使ってみることをオススメします。
Page Ruler
こちらはGoogle Chromeの拡張機能です。
Webページ内の画像サイズや、コンテンツの高さなどを簡単に測ることができます。
参考にしたいサイトのコンテンツ幅を確かめたり、画像サイズを知りたいときに便利です。いろいろなサイズを測っていくうちに、次第にサイズ感がつかめるようになり、一々測らなくても済むように、自分なりの物差しを持てるようになりたいものですね。
インストールはこちら
web計
画像の比率、黄金比、白銀比を自動で計算してくれる寸法計算サイトです。
さきほど紹介した「Gridulator」と似ていますが、こちらではさらに画像の比率を計算することができます。さまざまなサイズの画像を多用するレスポンシブサイトを作成するときなどに重宝します。日本語サイトのため作業に迷わないのもメリットですね。
http://zeller-lab.com/img-width/
Color Tool
こちらのサイトでは、右側に配置されたカラーパレットから自由に色を選び、UI上で色のバランスを確認することができます。色は、カスタマイズすることもできます。
サイトをデザインする際、配色によって受け取る印象が大きく変わることはよくあります。配色で迷ったときには、こちらのサイトで使いたい色を選ぶだけで、UI上でどのような配色イメージになるのか、すぐに確認することができます。「ACCESSIBILITY」を押すと、テキストを置いた状態での見え方も確認することができるため、可読性の確認や、文字色の選択にも役に立ちます。
https://material.io/color/#!/?view.left=0&view.right=0
まとめ
以上、日頃よく使わせていただいているツール6選でした。サービスをご提供いただいている方々に感謝しつつ…日々の作業はできるだけストレスなく、効率よく進めたいものですね。
それではまた。
