Webの最新トピックを配信中!

Webデザイナーが入れているChromeのアドオン13選

Webデザイナーなら作業を一気に高速化するGoogle Chromeのアドオン(「拡張機能」とも言います)を使いこなしましょう。もちろんすべて無料です。ブラウザにインストールしたらすぐに使えます。


これが僕がGoogle Chromeに入れているアドオンです。サイトのキャプチャを取るものから、HTMLのエラーをチェックするものなど様々なものがあります。
一つずつ紹介していきます。

The QR Code Extension

The QR Code Extension
The QR Code Extension

表示中のサイトのQRコードを発行してくれます。このQRコードをスマホのリーダーアプリで読み取って、スマホサイトの表示をチェックする際に使います。一番使用頻度が高いアドオンかもしれません。

Full Page Screen Capture

fullpage-screen-capture
Full Page Screen Capture

アドオンのボタンをワンクリックで、表示中のサイトのキャプチャを撮ってくれます。下で紹介するFireShotでも同じことができますが、これはワンクリックで楽なのでよく使っています。これも使用頻度高いですね。

FireShot

fireshot
FireShot

選択範囲を指定してキャプチャを撮る際に使っています。

SimilarWeb

similarweb
SimilarWeb

表示中のサイトの推定セッション(訪問回数)や直帰率などがわかっちゃう神ツールです。ただ、すべての数値は推定値であり、特にセッション数が少ないサイトでは全く正確な数値が見込めないおこともあるので要注意です。あくまで参考程度にしましょう。他に被リンク(どのサイトからリンクされているか)や、チャネル(リンクや検索等どの経路でサイトに来ているか)等もわかります。
イスラエルの会社が開発し、日本の代理店はギャプライズになります。有料版のSimilarWebPROは超高額ですがマーケッターにとっては定番のツールとなっています。

ColorZilla

colorzilla
ColorZilla

気になるパーツやアイコンの色(カラーコード)を取得できます。調べたい色を取得した後、Photoshopでその色を使用したりします。

Page Ruler

page-ruler
Page Ruler

パーツの間隔を調べる際に使います。ページ幅や画像の大きさ等はGoogleのインスペクタでサクッと調べちゃうのですが、パーツ同士の間隔などインスペクタで調べづらいものがある時に、これを使っています。

What Font


What Font

サイトで使用されているフォントを調べられます。日本語フォントなら種類は少ないので、なんとなく判別できるのですが、欧文フォントはGoogleが提供している無料フォントを含めるとものすごい数があるので、これで気になるフォントがサクッとわかり重宝しています。もちろんCSSをたどってfont-familyを見ればわかるのですが、やっぱりこれが楽ですねー。

HTMLエラーチェッカー


HTMLエラーチェッカー

HTMLの記述ミスを指摘してくれるアドオンです。タグの閉じ忘れが無いかをチェックする時に使っています。最近はDreamweaverがコードのミスをすぐに指摘してくれるのでそれほどミスはなくなりましたが、これを通すと意外に閉じ忘れがあったりして、自分に萎えたりします…。

テキストエンコーディング

text-encoding
テキストエンコーディング

JavaScriptのファイルをクローム上で開くと、日本語のコメントアウトが文字化けしていることがあります。ただそれをちゃんと表示するためだけに、このアドオンを使っています。右クリックのメニューに「テキストコーディング」という項目が追加されるので、JSのファイルのエンコードを指定してやれば、文字化けが直ります。

PerfectPixel by WellDoneCode


PerfectPixel by WellDoneCode

デザインを正確にコーディングするためのコーダー用のアドオンです。現在コーディング中のサイトにデザインデータを重ねて表示できます。これによってロゴや各パーツなどのズレがチェックできます。これはもうほんっとコーダーには最終チェックの段階で使ってほしいですね。「できましたー!」とか言ってぜんぜんデザインと行間とか間隔が違うじゃん!…ってことがよくあるので。

Page Analytics (by Google)

page-analytics
Page Analytics (by Google)

わざわざGoogleアナリティクスのページに行かずとも、対象のサイトを表示した状態でセッションや直帰率などを見ることができます。WebディレクターやWebマスター(サイト運営者)にとって便利なアドオンです。Google謹製です。

Alt & Meta viewer

altandmetaviewer
Alt & Meta viewer

サイトの画像のAltとMeta情報を表示してくれます。大企業のサイトになればなるほどレギュレーションが厳しく、Altが抜けてると注意されます。コーディング完了後に、チェックして使っています。

Clear Cache

clearchache
Clear Cache

サイトの一部を修正しアップしたのに、キャッシュが強くて表示が変更されない場合に、これでブラウザキャッシュを消して、正常に表示させます。Cookieやダウンロード履歴などを消す機能も付いています。

コラム:Webデザイナーを強くオススメする理由

あなたはたぶんエンジニアにはなれません。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。

でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。

ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『エンジニアカレッジ』に行きましょう。エンジニアカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。ここで、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

無料のプログラミング学校『エンジニアカレッジ』の詳細を読む

質問や感想などお気軽にどうぞ!

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

  • 管理人(ねこポン)について

    週3日だけ会社で働く30代前半ウェブデザイナーです!
    インテリ風&仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
    現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。

    > 僕の20代まるごと黒歴史ストーリー

  • なんでもWebの質問受け付け中 (^o^) /♪

  • Web制作会社を歩き回れるゲームを作ってみました!ぜひ探検してみてください。(注意:音が出ます!)

    一番上へ