CHANGEUP!(チェンジアップ)

デザインの作業効率を上げるChrome拡張機能

デザインの作業効率を上げるChrome拡張機能

WEBデザインを行う上で役立つChromeの拡張機能を紹介します!

もくじ

1、既存サイトの要素の大きさを測る「Page Ruler」

Page Ruler

Page Ruler

Page Rulerを使用すると既存サイト上で要素の大きさを簡単に測ることができます。

使い方

Page Rulerの使い方

Page Rulerのアイコンをクリックしたら、
調べたい大きさの要素の上で十字カーソルをドラッグするだけ。
ドラッグしおわると、ページ上部にサイズの詳細が表示されます。

2、既存サイトで使われている色をワンクリックで調べる「ColorPick Eyedropper」

ColorPick Eyedropper

ColorPick Eyedropper

ワンクリックで既存サイトのカラーコードを調べることができる拡張機能です。

使い方

ColorPick Eyedroppeの使い方

ColorPick Eyedropperのアイコンをクリックしたらマウスカーソルが十字キーに変化します。
この十字キーをカラーコードを知りたい要素にオンマウスすると、
カラーコードが表示されます。
オンマウスした箇所をクリックすると、コードがコピーできるようになります。

3、既存サイトで使われているフォントをワンクリックで調べる「WhatFont」

WhatFont

WhatFont

この拡張機能を追加することで既存サイトで使用されているWEBフォントの種類をオンマウスだけで知ることができます。

使い方

WhatFontの使い方

WhatFontをのアイコンをクリックしたら、アイコンの下に「Exit What Font」という表示が出ます。
この表示が出ていれば、拡張機能が起動していることを意味しています。

調べたい要素の上にオンマウスすると、使われているフォント名が表示されます。
クリックすれば、fontfamilyも表示されるので、コピーして使用することも可能です。

機能を終了したいときは、右上に表示された「Exit What Font」をクリックしましょう。

4、サイトの上から下までスクリーンショットが撮れる「Full Page Screen Capture」

Full Page Screen Capture

Full Page Screen Capture

この拡張機能を使うことで、サイトの上から下まで、フルサイズで1枚のスクリーンショットを撮影することができます。

使い方

Full Page Screen Captureの使い方

フルサイズのスクリーンショットを撮りたいサイトにアクセスしたら、Full Page Screen Captureのアイコンをクリックします。
自動でスクリーンショットの撮影がはじまり、パックマンのようなローディング表示が開始されます。
撮影が終了すすと、別ウィンドウで撮影した画像が表示されますので、こちらを保存しましょう。

5、PCで今見ているページをQRコードにする「The QR Code Extension」

The QR Code Extension

The QR Code Extension

テストサーバーにアップしたページをスマホで実機確認するときや、
PCで見ているページをスマホですぐに見たいとき、この拡張機能が役にたちます。

使い方

The QR Code Extensionの使い方

QRコードを作成したいページを開いたら、The QR Code Extensionのアイコンをクリックします。

すぐにQRコードが表示されるので、スマホで読み取りましょう。
「Edit this QR code」というボタンをクリックすることで、別ウィンドウで表示されたQRコードを画像として保存することも可能です。

6、HTMLのエラーをチェックしてくれる「HTMLエラーチェッカー」

HTMLエラーチェッカー

HTMLエラーチェッカー

コーディングをしてテストサーバーにアップしたら謎の崩れが起きていた…というときは、
このHTMLエラーチェッカーを使用しましょう。

使い方

HTMLエラーチェッカーの使い方

HTMLのチェックをしたいサイトを開いたら、HTMLエラーチェッカーのアイコンをクリックします。
自動でHTMLのチェックがはじまるので、終了まで少し待ちましょう。

チェック完了後、コードに問題がなければ上記のような表示がされますが、
エラーがある場合はエラー箇所を教えてくれるので、その箇所を修正しましょう。

7、コーディング前に画像を試し配置できる「PerfectPixel by WellDoneCode」

PerfectPixel by WellDoneCode

PerfectPixel by WellDoneCode

コーディングをしているときに、画像を微調整してアップし直す作業は結構面倒ですし、作業効率も悪くなります。
この拡張機能を使うことで、画像配置の作業効率をアップさせることができます。

使い方

PerfectPixel by WellDoneCodeの使い方

画像を配置したいサイトを開いたら、PerfectPixel by WellDoneCodeのアイコンをクリックします。

「Add your first layer!」と表示のされた領域をクリックすると、
画像が選択できるようになるので、そちらから使用したい画像を選びます。

画像が選択されると、画像の位置や透明度をコントロールするパネルと共に画像が表示されますので、表示の調整を行いましょう。

Layersの「Add new」を選択することで、複数枚の画像表示を調整することができますが、
複数枚を同時に調整することはできないようです。

8、流行のデザインや素敵な作品がまとめられた「Muzli2」

Muzli2

Muzli2

流行のデザインを確認したり、アイディアが思い浮かばない時はこの拡張機能を眺めているだけでも良いアイディアが浮かびます。

使い方

Muzli2を拡張機能として追加し、アイコンをクリックすると自動でページが起動します。
きになるデザインやアイディアを探してみましょう。

注意点としては、この拡張機能を追加するとChrome起動時はいつもMuzli2の画面になってしまうので、
その点が気になる方は追加しないほうが良いかもしれません。

9、ワンクリックでキャッシュ消去「Clear Cache」

Clear Cache

Clear Cache

画像の差し替えをしたのに何度リロードしても元の画像のまま。
悩みに悩んだ結果、キャッシュが残っていたのが原因だったということはよくあること。

そうならないためにも、ワンクリックでキャッシュを消去できるClear Cacheを追加しましょう。

使い方

Clear Cacheの使い方

デフォルトの設定値は、「1時間以内」の「キャッシュのみ」を消去。
Clear Cacheのアイコンをクリックするだけでキャッシュが消去されます。

この他にもキャッシュを消去する期間を設定できたり、キャッシュだけでなく、ダウンロード履歴やページ閲覧履歴を消去できる項目もあります。

設定は、オプションの画面からできるので、あなたの用途に合わせて設定してみてください。

10、レスポンシブサイトの確認に便利な「Window Resizer」

Window Resizer

Window Resizer

最後に紹介するのは、レスポンシブサイトを作っているときに便利な拡張機能です。
この拡張機能を使うことで、今見ているウィンドウを各デバイス幅に変更できます。

使い方

Window Resizerの使い方

Window Resizerのアイコンをクリックすると、
各デバイスやウィンドウサイズのメニューが表示されるので、
確認したいサイズのメニューをクリックするだけ。

自動でウィンドウサイズを変更することができます。

まとめ

WEB制作で役立つChromeの拡張機能を紹介しました。
作業効率をアップさせるためにも、便利な機能をかしこく使いこなしていきたいですね!

Twitterでシェアする Facebookでシェアする このエントリーをはてなブックマークに追加

執筆者

せりな

DTPデザイナー、雑貨屋さんのスタッフ、一般事務… 散々やりたいことをやり散らかして、WEBデザイナーに落ち着きました。ものを作っている時間が好き。

うさぎと音楽が好きすぎて、うさぎと音楽を無理やりこじつけたお洋服を作ったり、イベント企画をしたりもしています。

この記事を読んだ人はこんな記事も読んでいます

CHANGEUP!では、エンジニアの転職、
フリーランスの案件紹介を行なっています。

将来の働き方で迷っている方、転職をお考えの方、あなたのエンジニアとしての力を最大限発揮できる場所を提案させていただきます。

CHANGEUP!のサイトを見る

PAGE TOP