作業の効率化に◎デザイナー必見!【Chrome拡張機能】

こんにちは。デザイナーのロッタです。

月末の作業でついブログがないがしろに…泣

昨日のツイートが少し反響があったので詳しく書いていきたいと思います!

案外初耳の方も多かったようなので、私のおすすめ機能ご紹介します!

使えるものは使ったもの勝ち!
効率を上げると、気持ちにも余裕が出るのでデザインも良くなる!はず!(笑)

もしまだ使ったことがないデザイナーさんはこの機会に是非作業の効率化始めましょう^^!

たくさん努力したほうがいいのはもちろんだけど、こういうツールをいち早く取り入れてインプットのスピードを速めるのが良いと思います。

なので私は、教えてるデザイナーさんにも、こういったツールを積極的に使っていくことをすすめてます。

ゆっくり勉強してると、案外もうすでに流行りにおいていかれてたりするので…。いかに効率よく自分に合った勉強法(作業法)見つけれるかですね!

今回はデザイナー視点で便利だなあと思ったものを紹介します。

Chrome拡張機能って?

Chromeの拡張機能を一文で説明するなら、「Chromeの機能を増やしたり強化したりする専用の追加プログラム」と表現できるでしょう。プログラムの実体は、JavaScriptやHTML、CSSといったWebの技術によって記述されています。Chromeにインストールされた拡張機能は、その上で実行され、Chrome提供のAPI(アプリケーションプログラムインタフェース)を使いつつ、本来のChromeにはないさまざまな機能を提供します。

http://www.atmarkit.co.jp/ait/articles/1502/05/news148.html

つまりインストールするだけで「便利」が手に入るのです~!
WPでいうプラグインみたいな!

不便だなとか手間だなとかめんどくさいなとかとかとか!デザイナーさんって地味な作業も多いので…。いかに便利を取り入れるか。効率を上げるか。

自分の作業の無駄を省くことが本っ当に!大切です!

ちょっとした手間が案外ストレスになっていることもあるんです!
今は便利な世の中ですので、使えるものは積極的に使っていきましょう。

https://chrome.google.com/webstore/category/extensions

いろいろあるので暇なときに見てみると楽しいかも♪


インストール方法

とっても簡単です。

「Chromeに追加」→「拡張機能を追加」

この2ステップだけ。

そうするとツールバーの右上にアイコンが追加されます!

使用したい時に、アイコンをクリックするだけでOK!

初めて拡張機能知った時は感動したなあ。
今ではなきゃやってらんない!

それではおすすめ拡張機能をご紹介しますー。

CSS Peeper

まずはコレ。まだ入れてないデザイナーさんはすぐ入れなさい。(笑)

「CSS Peeper」はデザイナーが知りたい
・カラーコード
・フォント
・クラス名
・余白
等を簡単に確認することが出来ます。

デベロッパーツールでももちろん良いのですが、その手間すらも省いてくれる優れものなのです。。!

個人的には配色がパレットで表示されるのでイメージがつかみやすく、断トツで一番よく使う拡張機能ですね。

一色だけでなくパレットで見ることで、色の使い方学べると思います♪
最初は全然こういうものを駆使してデザインするのがいいと思う。

かっこいいなと思ったサイト等は、最低でもカラーやフォントはコレで確認するようにしています♪

CSS Peeper – Chromeウェブストア

ColorPick Eyedropper

「ColorPick Eyedropper」は、クリックした部分のカラーコードを確認することが出来ます。

ロゴの色など、部分的な色を確認したい時に使ってます!
スムーズに色が確認できるので便利です!

こっちは先ほどの「CSS Peeper」と違って、一色ずつしか確認ができませんが、確認したい色をすぐにコードで見れるのでとっても楽です!

ColorPick Eyedropper – Chromeウェブストア

HTMLエラーチェッカー

HTMLの閉じミス等を見つけてくれる拡張機能です。

今はDW等でミスを教えてくれるので、そこまで使いませんが、サーバーに上げた後にミスを探すのに使ったり…。

なにかと使うときがくるので、消すに消せません(笑)

HTMLエラーチェッカー – Chromeウェブストア

FireShot

こちらは画面キャプチャの拡張機能です。所謂スクショですね。

ページ全体や選択範囲だけ保存ができるので重宝しています…!
Windows使うときはコレ入れとくと楽ですね。

FireShot – Chromeウェブストア

Dimensions

こちらは要素と要素の幅を測る機能です。

マウスカーソルを合わせるだけで、距離が測れます(px単位)

余白を考える時に使えます!(20px空くとこんな感じか…みたいな)

Dimensions – Chromeウェブストア

Page Ruler

そのまま!「定規」です。
ブラウザ上でサイズを測ることができる拡張機能です。

「Dimensions」と少し似ていますが、私は「Page Ruler」を良く使ってます~。

とにかくブラウザ上でサイズを測れるので、ツールを起動する手間もなく!めんどくさがりな私にはぴったりな拡張機能なんです!

Page Ruler – Chromeウェブストア

Screencastify-Screen Video Recorder

PCの画面録画をする拡張機能です。
最初の設定してしまえば、スムーズに使うことが出来ます♪

アニメーションなどの動きを保存しておきたいときに使います。

Screencastify – Chromeウェブストア

The QR Code Extension

これは地味によく使うかも!

ワンクリックで見ているサイトのQRコードが生成されるので、スマホで簡単に同じサイトを開ける!という拡張機能。

ブラウザ幅の確認ならPC上でもいいのですが、ゆっくり読みたい記事とか実際にスマホで動きを確認したい時とか…。

地味~によく使います(笑)

The QR Code Extension – Chromeウェブストア

最後に

私がよく使っているChromeの拡張機能をご紹介しました!
消さずに今でも使ってるのはやっぱりメジャーなやつばかりでした!

作業の効率化につながると思うので是非確認してみてくださいね。

今回はデザイナー視点でご紹介しましたが、まだまだまだまだ拡張機能はあります!すごい!

なんて便利な世の中なんだ~と思ったり。(笑)

でもこの「面倒だな」って感覚を大事にしてほしくて、、。
この面倒、手間?をなくすために色々な機能だったりサービスだったりが充実していくんですよね。

なので私は人より面倒だなあと言います!
(決してただの面倒くさがりではないです…!←)

そんなこんなで、拡張機能まとめてみました~!
最後まで読んでいただき、ありがとうございます。

スポンサードリンク