Webデザインのスキルは、ツールを上手く使うことで一気に引き上げることが出来ます。
そして、嬉しいことにスキルが上がるにつれて、Webデザインのセンスも磨かれていきます。
そこで今回は、webデザインの仕事を受注することもある僕が仕事でよく使っているな―と思う、12個のWebデザイン関連のツールを紹介させていただきます。
開発中のツール編
まずは、開発中に使っているツールです。
GoogleChromeデベロッパーツール
有名ですが、Google Chromeデベロッパーツールは外せません。HTMLのチェック、CSSの編集・確認、JavaScriptの挙動チェックなどができます。
使われていないCSSの記述を特定したり、スマホ表示にさせたり、HTMLを編集したりもできます。
ローカル環境で開発している場合は、CSSを直接編集・保存できるのも作業が捗る要素ですね。
Page Ruler
続いて、Page Rulerは、今表示しているWebサイト上で、pxの測定ができる定規みたいな機能がついたGoogleChromeの拡張機能です。
CSSで記述されていない余白などを測定する時に使っています。
余白のサイズがちょうどいいから綺麗に見えるのに、実際のpxがわからないといったことは多いのでそういう時に重宝します。
User-Agent Switcher for Chrome
User-Agent Switcher for Chrome
User-Agentは、GoogleChromeの拡張機能で、クリック一つでユーザーエージェントを切り替えられるツールです。
ユーザーエージェントというと分かりにくいので、ブラウザを切り替えられるというイメージを持ってください。今のデザインがIEやOperaで対応しているのかなどを確認することができます。
画像編集ツール編
次は、画像編集ツールです。もう最近は、画像が命といって良いほど綺麗な画像が重要になるので、このツール選びは大事ですね。
Adobe Photoshop CC
有名なAdobeのツールです。たまに、「Webデザインをやるには、Photoshopを使ったほうが良いですか？」という質問をもらいます。
仕事場のメンバー・仕事相手にPhotoshopを使う方がいる時点で使ったほうがいいかな？というのが結論です。
ただひとつ言えるのは、Photoshopにしたからといって画像が綺麗に成るわけでもないということです。結局は技量が必要です。
そのうち使う予定なら、技量を上げるために早く使われるのがおすすめです。
GIPHY Capture
これは、画面上でgif画像が撮影できるツールです。操作も非常に簡単なので、僕はよく使います。
例えば、CSSでのhoverアクションや、JavaScriptでの動きのあるコンテンツ、Canvasなどを使った際に、スクショだとイメージが伝えきれない時があります。
そういう時は、このgifで対応することが多いです。ただし、録りやすいからといって大量にやっていては、gifファイルが莫大な容量になって使い物にならないので注意です。
Monosnap
Mac専用(なのかな？)の画像編集ソフトです。
簡単な画像編集をする時は、Photoshopよりもこっちを使うことが多いです。
ただ、仕事で使うような画像は基本的にPhotoshopで編集するかな…全体的にパーツが可愛らしいです。
色選択ツール編
色選択用のツールです。個人的には、このパートが一番重要だと思っています。
もともと色彩センスが無い僕にとって、これらのツールは神のような存在でしたし、今でも使っています。
色見本と配色サイト – color-sample.com
このサイトは僕が一番使う色見本のサイトです。一つの色を選ぶと、配色なども全てオススメを出してくれます。
さらに、選んだ色の色相別、明度別、彩度別で一覧を出してくれるので、非常に選びやすいです。
ColorPick Eyedropper
これは、今見ているWebサイト上の特定の場所の色から、カラーコードを取り出せるツールです。
ほとんどの場合はCSSを見れば、カラーコードを取り出すことができるのですが、画像などの場合はそうもいきません。
画像だけどカラーコードが知りたいといったタイミングでこれを使うことが多いです。
Eye Dropper
これも一つ上のツールとほとんど機能は同じです。
個人的には、こちらのツールの方が使い勝手が良かったのですが、最近バグり始めたので乗り換えてしまいました。
(どこを選択しても黒、カラーコード#000が出てきたので…笑)
HUE/360
[ HUE / 360 ] The Color Scheme Application
これは、一つの色を選択すると、それに色相・明度・彩度を考慮してオススメの色を自動で選抜してくれるツールです。
簡単にいうと「この中から色を選んでいれば、大外れしないよー」っていうツールです。色彩に自信の無い方はこれを使うといいかもですね。
参考サイト保存ツール
最後に、普段ネットサーフィンをしていて「お！このサイトいい！」って思った時に、保存する時に役に立つツールです。
Full Page Screen Capture
これは、今開いているサイトを上から下までスクリーンショットとして保存してくれるGoogleChromeの拡張機能です。
普通にパソコンで閲覧していると、どれだけ頑張っても高さ1000pxくらいしか表示できないので、こういう機能があると非常に助かります。
仕事仲間などに、このデザイン見て！って送るときや、クライアントにイメージを掴んでもらうために送る時に重宝しています。
SimilarWeb
これは、今開いているサイトのおおよそのアクセス数を計測して表示してくれるツールです。
デザインは良いけれどアクセスが集まっていないサイトは、個人的には参考から除外しますので、そこの判断に使っています。
参考にしたいサイトは、「デザインがいいからユーザーが集まってきている」サイトなので、その判断基準に使っているという感じです。
webデザイン関連ツールのまとめ
以上、いかがでしたか？
まだ使っていないツールなどはありましたでしょうか？
実際のところは、全てを使う必要は無いと思われます。ただし、僕の紹介したツールのおかげで、あなたの勉強スピードが上がるきっかけになればなと思って紹介していきました。
参考程度に使ってみてください。最後まで読んでいただき、ありがとうございました。
