オススメのChrome拡張機能5選

こんにちは。
いつもFAbankブログをご覧くださりありがとうございます。
「十条銀座」を言うとき、いつも噛んでしまうデザイン担当のハシビロコウです。
「じゅうじょうぎんぢゃ」ってなってしまいますよね。
「三車線」も苦手です。

まず、最近ワタシ的にショッキングだったお話をひとつ。
先日Yahoo!ニュースでも取り上げられていたので
目にされた方もいらっしゃるのではないでしょうか。

★マジョマジョ、終わったな…」魔法が抜けた新ビジュアルに嘆きの声

そうです!
「資生堂/マジョリカマジョルカ」のサイトが一新されていました。
おとぎ話の世界に迷い込んだかのような魔法の世界観がサイト全体で
作り上げられていたあの「マジョマジョ」のサイトが!!!
普通のただの「きれいなサイト」になっていましたΣ( ̄ロ ̄lll)
『あんなサイトが作れるようになりたい!』と目指していたサイトが
なくなってしまったのは大変ショックです。
「きれいなデザイン」のサイトは探せばいくらでもありますが、
マジョマジョの秀逸なところは、デザインとブランドコンセプトが
すごくマッチしていました。本当に本当に残念です。

 

さて、本日のテーマは
『オススメのChrome拡張機能5選』

今回は、私が日々の業務で使用している便利なGoogle Chromeの拡張機能を
ご紹介します。
どの拡張機能も、『CHROME に追加』ボタン1発でインストールできて
難しい説明書を読まなくても直感的に使えるので大変便利です。
気に入ったものがあればぜひ活用してみてください。

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
1.ColorPick Eyedropper
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

ColorPick Eyedropper

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

サイトで使用されている色を抽出してくれる機能拡張です。
例えば、私がデザインしていてよく迷うのが「赤」です。
明るすぎず、暗すぎずといった「赤」はなかなか難しいです。

他のサイトをいろいろと見ているときに
『この色いいな!』
と思ったら、すぐにこれを使います。
マウスをあてると、カラーコードを表示してくれます。
その際に「#」での表示だけではなく、rgbやhslのコードも
一緒に表示してくれるので大変便利です。
クリックすると、そのカラーコードがポップアップで表示されるので
コピペも簡単です。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
2.FireShot
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

FireShot
https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja

私はワイヤーやモックを作る際に、ダミー画像をあてたりするんですが
その際にスクリーンショットで撮った画像を使用します。
そのスクリーンショットを撮影する機能拡張です。

他にも「Full Page Screen Capture」を併用していますが
FireShotの便利なところは、
・全体(スクロールもすべて)
・目に見える範囲(画面上で表示されている部分だけ)
・必要な範囲(例えばバナーやボタンだけとか必要な部分だけ)
と選べるところです。
保存形式もpngやjpg、pdfなど選べます。
ただ、画質の面では「Full Page Screen Capture」のほうが
良いような気がします(使い方の問題?)。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
3.WhatFont
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

WhatFont
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

こちらは、サイト内で使用されているフォントの種類を
調べてくれる機能拡張です。

例えば、
『このフォント、カッコイイなぁ!サイズ、行間も読みやすい!』
と思ったときに、わざわざソースコードを見なくても
この機能拡張を使えば、テキスト上にマウスオーバーするだけで
「font-family」が表示されます。
さらにクリックすると
・font-weight
・font-family
・font-size
・line-height
・color
までポップアップで表示してくれるんです。
デザインしていて、line-heightに迷うときは、これを使って
「気持ちの良い」サイト作りに活用しています。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
4.Page Ruler
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

Page Ruler
https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn

こちらはサイト上の任意の箇所のサイズを測ってくれる機能拡張です。
例えば
『この画像、サイズいくつだろう』
『ここのマージン、読みやすくていいな』
というときに、わざわざソースコードを見なくても
調べられるので大変便利です。

使い方は簡単。測りたいサイズの上でドラッグするだけ。
・Width
・Height
・Left
・Top
・Right
・Bottom
が表示されます。
ホワイトスペースを活かしたサイトをデザインする際に
他のサイトなどを参考にできるので活用しまくっています。
formやボタンなどのサイズを決める際にも活かされています。

 

★ここからは番外編

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
5.その本、図書館にあります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

その本、図書館にあります。
https://chrome.google.com/webstore/detail/%E3%81%9D%E3%81%AE%E6%9C%AC%E3%80%81%E5%9B%B3%E6%9B%B8%E9%A4%A8%E3%81%AB%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82/ldidobiipljjgfaglokcehmiljadanle?hl=ja

みなさんは本を購入したあとで、「この本、ハズレだったな」ってこと
ありませんか?
マンガや小説など好きな作家さんであれば私も無条件で買いますが、
デザイン本や技術系の本など買う際、高価なだけに大変迷います。
レビューなどを参考にしますが、自分にそれが合うかは
ある種ギャンブルです。
そこで、まずは図書館で借りて、自分に合うか使用してみてから
購入を検討します。

これは名前そのまんまですね。
Amazonで欲しい本を見つけたときに、その本が図書館にあるか
調べてくれます。
この機能拡張は、まず自分が利用する図書館を登録しておけば
Amazonで本を調べたときに、その本が
・図書館にあるか?
・利用可能か貸し出し中か
を瞬時に調べてくれます。
さらに便利なのが「予約する」をクリックすると、登録した図書館の
サイトに飛んでくれるという機能付き!!
技術系の本だけでなく、ミステリー好きで月に20冊以上乱読する私には大助かり!
本当にこの機能拡張を作ってくれた方には感謝です。

 

今回ご紹介するにあたり、「気持ちの良い」というワードを
多用してしまいましたが、見やすい・使いやすいサイトを作る上で、
フォントの種類、行間、色使い、余白は大変重要です。
自分が見て「いいな!」と思ったサイト(デザイン)は、
こういった便利な機能拡張を使い調べまくって、自身のデザインの
引き出しを増やすことをオススメします(^O^)

また、Chromeでのご紹介でしたが、Firefox版にもあると思います。
Chrome、Firefox問わず、同じような機能のものはたくさんあります。
いろいろと追加してみて、自分にあったひとつを見つけてはいかがでしょうか。
ではまた次回。

ハシビロコウ

ハシビロコウ について

ハシビロコウさんと、古墳、埴輪、お城、商店街めぐりが 大好きなデザイナーです。 野望は、「日本の城100選」のコンプリート!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です