さあ、未来へ旅立とう

日々のこと、チーム紹介

  • 26 Nov. 2015

    [デザイナー必見] Google Chrome 拡張機能(アドオン)おすすめ7選

    CATEGORYBlog Web制作 デザイン TAG

    最近、PS4を買ってウキウキしている綿引です。

    今回は、WEB制作におけるGoogle Chromeの拡張機能(アドオン)7選をご紹介します。

    Chrome使用で且つ拡張機能を使っている人となると少し限定的でしょうか。クリエイター関係の仕事をされている方であればいくつか入れているかと思いますが、ここでは7選としてご紹介させていただきます。

    まずは、Chrome ウェブストアへ…

    https://chrome.google.com/webstore/category/extensions?hl=ja

     

    ■ 1.ColorZilla

    スクリーンショット 2015-11-26 14.19.50 スクリーンショット 2015-11-26 14.19.57

    ウェブサイト上で気になった色をスポイトを使って簡単に情報を取得することができます。グラデーションの部分なども細かく確認が出来るのでかなり使い勝手が良いアドオンです。

     

    ■ 2.WhatFont

    WhatFont

    画像化されていないテキストの文字の種類を判別してくれます。フォントサイズや行間なども分かるため、いいなと思ったサイトでよく使って見ています。

     

    ■ 3.MeasureIt

    MeasureIt

    気になったボタンやバナーのサイズなど、簡単にこれを使って測ることができます。ただし、ドラッグして測るので正確な数値を出すのは少し難しいですが、大まか偶数で綺麗な数字になっていることがほとんどなので大体でも大丈夫です。

     

    ■ 4.Awesome Screenshot

    Awesome Screenshot

    簡単に画面キャプチャと注釈を入れたりすることが出来るアドオンです。Macのデフォルトの機能で画面キャプチャはありますが、注釈を入れたりすることは出来ないのでこのアドオンを使って簡単に修正指示を書き足せるので面倒な方はこちらをどうぞ。

     

    ■ 5.Google 翻訳

    スクリーンショット 2015-11-26 15.36.11Google 翻訳

    グーグル翻訳はよく使いますが、文章をいちいちコピーしてサイトに移動して貼り付けて確認する作業は面倒ですよね。そんな時は、アドオンのグーグル翻訳をポチっと押すだけで全て翻訳してくれます。海外サイトに飛ぶことも多いので大変助かる機能ですね。

     

    ■ 6.ato-ichinen

    スクリーンショット 2015-11-26 15.48.54

    検索ワードで引っかかった結果を1年以内にソートしてくれる機能です。システム関連など古い情報はいらないといった場合にこのソートが助かります。もちろん、1ヶ月など細かく設定することも出来るので探しもののスピードアップにどうぞ。

     

    ■ 7.similarweb

    SimilarWeb

    こちらもグーグル翻訳同様にサイトはあるものの、移動とコピーが面倒な方はアドオンのボタンを押すだけで今見ているサイトの簡単なアクセス状況がわかるツール。流入やキーワードも分かるため、サクッとチェックするには丁度良い。

     

    —————-

     

    【番外編】Google Chrome デベロッパーツール

    デベロッパーツール

    あらゆるWEBページのCSS、HTML、JavaScriptをリアルタイムに編集、デバッグすることができるツールということで直感的作業が出来るのは嬉しいです。

    アドオンにfirebugというデベロッパーツールがありますが、私はGoogle Chromeのデベロッパーツールを使用することが多いのでそちらも重宝しています。

    表示の出し方は「表示 → 開発/管理 → デベロッパーツール」(option + command + I )です。

    いかがでしたでしょうか。普段使用しているものから、あまり使ったことのないものまであったかと思います。また、役に立つ情報を載せていきますので是非ご覧ください〜。

    川崎市在住のデザインランボー。ムキムキ・ゴリゴリで常に攻めの姿勢から依頼を撃破。休みの日は丸い爆弾を蹴って生きていることを確認するハイリスクハイリターンの強靭。