拡張機能 – コバナツブログ

私が実際に使ってるChromeの拡張機能で、WEBデザイナーの仕事に役立つものを使用頻度の高い順にご紹介します。 WhatFont（WEBサイトのフォントチェック） 「WhatFont 」は、ウェブページ上の気になるフォントにカーソルを持っていくとフォント名を表示してくれます。参考にしたいウェブサイトのフォントがすぐわかるので便利です。 FireShot（スクリーンショット） おなじみかと思いますが、スクリーンショットをとれる機能です。ページ全体、表示部分、選択部分と範囲を選んでスクリーンショット。保存はPNG/JPG/PDFなど。プロの有料もありますが、無料でも十分使えます。 Wordmark Extension（自PCのフォントチェック） こちらの記事でも紹介していますが、自分のPCに入っているフォント全てが目で見て選べます。実際のテキストを入力して比較して選べるのでフォント選びがスムーズです。 OneTab（タブをまとめて管理） これに出会った時は感動しました！めちゃくちゃお気に入り。仕事をしているとChromeのタブが膨大になっていることが多いと思います。開きすぎるとPCのリソースも大量に消費されてしまううえに、探すのにウロウロして効率も悪くなります。 これは、開いているタブを一括してくれてリスト化してくれる機能で、メモリの消費も抑えられるし、何より見たいページをすぐに見つけられるので効率が良い～。 一度作ったタブは削除しない限り、Chromeを開き直してもまた「OneTab」のアイコンをクリックすると一覧が出てくるので、翌日以降でも「あのページどこだっけ？」とならないのです。 リストは複数作ることができたり、編集したり。とっても便利な機能です。 Pinterest（ピンタレスト保存ボタン） こちらもおなじみピンタレストの保存ボタンです。チェックしておきたいサイトや画像などをボタン一つで保存。使用するには、ピンタレストのアカウントが必要です。 ColorZilla（カラーピッカー） ページ上の気になる色のコードをチェックできるツール。スポイドで吸い取ってくれるイメージです。このサイトのカラーコードが知りたい！という時にぜひ。 HTMLエラーチェッカー https://chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf 作ったサイトの開始タグ・閉じタグ忘れなどをチェックできます。WordPressのオリジナルテンプレートだと、タグが抜け落ちていたりすることがあるので、最終これでチェックするとすぐに分かって便利ですよ。 Quick QR（QRコード作成） これも便利！見ているページのQRコードを画面上に出してくれて、スマホで読み込めば実機ですぐに確認できます。URLをスマホに送るなどしなくていいので効率がよくて便利な機能です。 Page Ruler Redux（サイズを計測） 「このサイトのベースの幅はいくつだろう？」という時にソースを見なくても、ページ上で計測できます。サイト幅だけでなく、パーツなども測れるので、初心者WEBデザイナーさんはデザイン作成の参考になると思います。 【Chrome拡張機能について】まとめ 私が実際に仕事で頻繁に使うChromeの拡張機能をご紹介しました。拡張機能は入れすぎると動作が重くなるので気をつけながら試してみてください。 それぞれの使い方は、触ってみると感覚的にわかるものが多いですがほとんどですが、わからないものについては、すみませんがググってみてください。ほとんど簡単に使い方が出てきます。 また、便利そうなものを見つけたらご紹介しますね。

【仕事効率があがる】WEBデザイナーにおすすめの【Chrome拡張機能9選】