日常業務でブラウザを使っていると、「こんなことができれば便利だな、楽だなぁ」という場面がありますよね。今回はそんなツールを紹介します。
あなたがウェブサイトやホームページ、画像処理などで困っていることがあれば、ぜひここで紹介するGoogle Chrome拡張機能を試してみてください。多忙なWebデザイナーが日常業務を楽にするために使っている厳選ツールばかり。きっと役に立ちます。
今回ツールを紹介してくれたのはエスキュービズムでデザイナーを担当している浜田さん(左の写真)。無数にある社内サイトを並行して管理していて、とっても多忙。以下の18のツールはその複雑な業務を助けているツールです。
調べもの系
ColorZilla
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.ad6faf0ec9498a27.636f6c6f727a696c6c612e706e67/colorzilla.png)
日本語の解説サイト
カラーピッカーです。ブラウザ上で取得できます。気になるあの色のカラーコードが分からなくて、調べるのに時間がかかることがあります。このツールを使えば、そういう時間を短縮できます。
ColorPick Eyedropper
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.84209392f4d10181.636f6c6f727069636b65796564726f707065722e706e67/colorpickeyedropper.png)
Webサイトで使われている『カラーを調べる』方法【Chrome拡張機能】
WhatFont
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.badd6f82b87fd160.77686174666f6e742e706e67/whatfont.png)
気になるフォント名がわかっちゃうツール。フォント名が分からなくて困っている、なんてときに重宝します。
キャプチャ系
FireShot
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.8d0fa64b8524b5e7.6669726573686f742e706e67/fireshot.png)
ウェブページのスクリーンショットをキャプチャします。ウェブサイトのキャプチャにはPrint Screenを使うより便利です。
Full Page Screen Capture
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.a712a55ac92fdf47.66756c6c2d706167652d73632e706e67/full-page-sc.png)
キャプチャ時のパックマンみたいな動きがかわいい!
キャッシュ系
OneTab
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.aaace39e6906d095.6f6e657461622e706e67/onetab.png)
日本語の解説サイト
Chromeのブラウザキャシュを簡単に削除する2つの方法+普通の方法
Clear Cache
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.aa47fbb72604cac0.636c65617263616368652e706e67/clearcache.png)
EditThisCookie
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.b660331935141511.6564697474686973636f6f6b69652e706e67/editthiscookie.png)
ブラウザに保存されているクッキーの追加、削除、編集、検索などができます。ブロックもできちゃいます!エンジニアには役立つツールです。
デザイン系
Page Ruler
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.aa1e4c5cecc8108d.7061676572756c65722e706e67/pageruler.png)
ブラウザ上でウェブサイトにグリッドをひくことができます。
Window Resizer
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.92c26564a664ac67.77696e646f77726573697a65722e706e67/windowresizer.png)
ブラウザをデバイスごとの画面サイズへ一瞬で変更します。iPhone5とiPhone6の画面サイズの違いなどをいちいち調べる必要がありません。
Responsive Web Design Tester
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.a6dcdc88677fb5cb.726573706f6e736976652d7765622e706e67/responsive-web.png)
CSS Shapes Edito
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.97bfc0ede91a1526.7368617065732d656469746f722e706e67/shapes-editor.png)
その他
The QR Code Extension
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.91bb447e45be7737.71722d636f64652d657874656e73696f6e2e706e67/qr-code-extension.png)
ウェブページのURLをQRコードにしてスマホなどでそのまま読み込めます。かなり便利。
Appspector
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.bccac7707e059ad5.61707073706563746f722e706e67/appspector.png)
日本語解説サイト
ウェブサイトを開くだけで使用しているCMSやアプリケーションなどの一部情報が分かります。WebエンジニアやWebディレクター向き。
ピンボタン
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.a3d4ae1a9f6707e9.70696e2e706e67/pin.png)
気に入ったウェブサイトをピンをつけてブラウザに保存できます。
Momentum
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.b230e0e2fc2a5a46.6d6f6d656e74756d2e706e67/momentum.png)
タブに魅力的な画像を表示させて気分転換に!
AutoPatchWork
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.b98101ba0a119eb3.6175746f7061746368776f726b2e706e67/autopatchwork.png)
AutoPatchWorkは 分割してるページの続きが同一ページ内に出てくるメチャ便利な機能です。
Share Extensions
![](/akamon_the_hima_com/static/uploads/contents/managed_html_file.name.8b91603672fbc371.73686172652d657874656e73696f6e732e706e67/share-extensions.png)
日本語の解説サイト
インストール済みの拡張機能の一覧をテキストに保存できる