こんにちは。
オークファンでWebデザイナーとして働いている
@aucfan_hasebe です。
ここ最近寒い毎日が続いてますが、残念なことに1月2月もっと寒くなるはずなので皆さん気合いを入れて頑張っていきましょう！
今日はデザイナーおすすめのデザイン制作に使えるGoogle Chromeの拡張機能を紹介していこうと思います。
デザイン制作時に使用できる機能
■ColorZilla
定番の機能で、サイト上で使用してる色をワンクリックで判定してくれます。
個人的にはすごい便利で毎日使用してるものになります。
■Site Palette
Webサイトから、使用されているカラーを抽出し、カラーパレットを生成するChromeの機能拡張になります。
Photoshop, Illustrator, Sketch用のスウォッチも作成できるので、カラーバリエーションに迷ったとき等におすすめです。
■WhatFont
こちらはWebサイトの使用フォントを知りたい時にテキストにマウスオーバーすると、font-familyが表示されます。
デベロッパーツールでも良いのですがマウスオーバーするだけでサクッと知れるので便利です。
コーディング時に使用できる機能
■Design Mode
設定するとページ内テキストを直接編集できる機能になります。
テキストの長さによってデザインの見え方が変わってしまう時のテスト用にサクッと使えるものになります。
■HTML エラーチェッカー
表示中のページのHTMLが正しく書かれているのかを手軽に確認できる拡張機能になります。
デザイナー間でレビューをする前にまずはこちらのチェッカーでチェックするのがおすすめです。
■PerfectPixel by WellDoneCode
デザインカンプとコーディングしたデータをブラウザ上でかさねて比較ができる機能になります。
デザインしたものと何か違って見える・・・という時に使用するとどこが違うのかすぐわかるので便利です。
■CSS Pepper
Webサイト内の要素をクリックすると、幅や高さ、padding、margin、font-family、色などを一気に調べることができる拡張機能。
他にも似たようなツールはいくつかあるのですがシンプルで使いやすいのがこちらになります。
その他の便利機能
■Pasty
クリップボードのURLを一括で表示することができる拡張機能です。
例えば
https://www.netsea.jp/
https://www.google.com/
https://www.yahoo.co.jp/
を一気に開きたいという場合にまとめてURLをコピーして、Pastyをクリックすると全ページ開くことができます。
一般的なデザイナーさんが使う事は少ないかと思いますが、ECサイトの商品を一気に確認したい時等に重宝してます。
■GoFullPage Full Page Screen Capture
Webページ全体のスクリーンショットを保存できます。
ブラウザに表示されてる部分だけや、自分で選んだピンポイントな部分だけのスクリーンショットも保存できるので
こちら一つ入れておくとデザインの参考にしたい時等に便利です。
■TabCopy
開いている全てのタブのタイトルとURLを取得できます。
現在オークファンでの業務では使用してないのですが、前職でURL一覧を送る時にこちらが使えないと相当焦りました。
むしろデザイナーじゃなくディレクターさんやその他業務の際におすすめになります。
■Lighthouse
SEOチェックを行いたいページで使用するとページの採点をしてくれます。
デザイナーとして使用する機会は少ないとも思いますがページの読み込み速度を改善するために必要なCSSやJavaScriptの最適化についての解説もあるので
参考にすることができます。
最後に
いかがだったでしょうか？もうちょっと技術的なことを書いた方が良いのでは・・・とも思ったのですが今回は時短になりそうな機能の紹介にしてみました！
昔の人が見たら「まあ！便利なものばかり使って！！手作業でやるから良いのよ！」と怒られそうな気もするのですが、ゆとり世代の中でも「究極のゆとり世代」に生まれた自分にとっては面倒な作業はどんどん便利にしてもらったほうがありがたいです。
作業を効率化できる部分は効率化してデザインを考える時間を多く確保できると楽しいデザイナーライフを送れると思います！
それではまた来年会いましょう〜