ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

WEB制作に関わる人なら絶対おすすめ!Chrome拡張機能5選

  • その他

あなたはWEBサイトの閲覧にどのブラウザを使っていますか?WEB制作に関わっている方や企業のWEB担当者の方なら、Google Chromeを使っているという方が多いのではないでしょうか。

Chromeの人気の理由は、動作の軽さや使いやすさ。そして、今回ご紹介するような拡張機能の豊富さにあります。Chrome拡張機能について紹介している記事はWEB上にもたくさんありますが、紹介されている機能拡張の数も多すぎて、何を入れればいいかわからない!と迷った経験がある方もいらっしゃるかもしれません。そこで今回は、WEB制作に携わっている経験から、「これだけは入れておいて損はない」というものを、あえて5つに絞って選んでみました。

世界ではトップシェアを誇るGoogle Chrome

最初に少し。いまGoogle Chromeがどれくらい利用されているのか、軽く見ておきましょう。ウェブレッジによる「Webブラウザシェア」の2015年5月段階のデータによると、世界的にはGoogle Chromeのシェアがトップで約4割。日本でもInternet Explorerの次に多く使われており、PCでの閲覧に使われているブラウザの約3割がGoogle Chromeとなっています。

browser_share_201505 のコピー

絶対入れた方がいいとおすすめできるChrome拡張機能

では、ここからは本題に入って、おすすめの機能拡張を5つ、ご紹介していきます。使い方の参考になるサイトのアドレスも紹介していますので、詳細はそちらも参考にしてください。

ついつい数多く開いてしまうタブをまとめて管理できる「OneTab」

onetab_01 のコピー

https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall

同業他社のサイトをチェックしたり、調べ物をしたりしているうちに、気がついたら異常に多くのタブが開いたまま…ってこと、ありますよね。開いたタブの数が多くなると、見た目にもわかりにくいだけでなく、メモリが消費されてブラウザの動きも遅くなってしまいます。

そんな問題を解決してくれる機能拡張が「OneTab」です。数多く開いてしまったタブをワンクリックで1つにまとめて、保存。ページのタイトルがリンク集のようなかたちで一覧表示され、クリックすると各ページを開けます。それをウェブページとして保存しておいて、後で開くことも可能。これって、かなり便利だと思いませんか?

1つにまとめることで負荷が減り、ブラウジングがスムーズになるというメリットもありますが、最初からまとめて保存する目的で利用し、ブックマークのように使うのもおすすめです。

onetab_02 のコピー

気になるWEBサイトをまとめOneTabでグループ化して保存するという使い方も便利。1つ1つブックマークするよりも管理がしやすいので、かなり便利に使えます。他にも工夫すれば、いろいろな使い方ができると思うので、あなたらしい活用方法を見つけてくださいね。

<OneTabの使い方・参考記事>
「開きまくったタブをまとめるChrome拡張機能『OneTab』で調べ物はずっと効率良くなる」

ブログを効率良く拡散!SNS予約投稿サービス「Buffer」

buffer のコピー

https://chrome.google.com/webstore/detail/buffer/noojglkidnpfjbincgijbaiedldjfbhh

ブログを更新しているWEB担当者の方も多いと思いますが、難しいのは記事を書いたあとにどうやって多くの方に読んでもらうかという拡散のさせ方。FacebookやTwitterなどのSNSを活用している方も多いと思います。とはいえ、SNSにはいろいろな種類がありますし、投稿する時間やタイミングが悪いと迷惑がられてしまう可能性もあり、悩むことも多いと思います。そんな時に重宝するのが、このSNS予約投稿サービス「Buffer」。Bufferでできることは、大きく次の2つです。

  1. 記事をFacebook、Twitter、Google+など自分の選んだSNSに同時投稿できる
  2. 予約投稿も行える。

ブログ記事が書けたら選んだSNSにまとめて投稿!時間の予約ができるので、例えば昼間に書いた記事であっても、「ターゲット層がこの記事を読みそうなのは、仕事が一段落した頃や帰宅後だな」と思えば、20時に予約投稿する…などという設定も、都度簡単にできてしまうわけなのです。

このように自社のコンテンツや記事について投稿するという使い方はもちろんなのですが、自社の事業分野に関わるニュースなどを、Bufferで複数のSNSに投稿するなどという使い方もできますよ。Facebookページを開設したものの、ブログの投稿記事や自社ネタがあまりない…、とお悩みの方は、このような使い方も良いのではないでしょうか。

<Bufferの使い方・参考記事>
「Bufferはこんなに便利!Twitter自動投稿をブログ運営に役立てよう」

全画面キャプチャーが簡単に行える『Awesome Screenshot』

awesome-screenshot のコピー

https://chrome.google.com/webstore/detail/awesome-screenshot-minus/bnophbnknjcjnbadhhkciahanapffepm?hl=ja

WEBに関わっていると、WEBページのキャプチャーを撮る機会は多いはず。しかし、モニターにページ全体が入ることは少ない(スクロールするものが大半)ので、通常のスクリーンショットでは、全体のキャプチャーを撮ることができませんよね。

そんな問題を簡単に解決してくれるのがこの「Awesome Screenshot」。どんなに長いページでも、全画面キャプチャーが簡単に撮れてしまいます。気になったサイトを残しておきたい場合は、Awesome Screenshotのアイコンをクリックすることを習慣にしておけば、自分だけのWEBサイト・アーカイブも手軽につくれてしまいます。

例えばキャンペーンサイトなどでは、あらためて参考に見ようとしてもクローズしていることもありますよね。見た時にキャプチャーしておくと確実です。しかも、キャプチャー画像に説明コメントをつけるなどの編集機能もとても充実しているので、撮った画面に書き込みをして資料としてメールで送るなどということも手軽にできます。これは便利!ぜひ活用してみてください。

<Awesome Screenshoの使い方・参考記事>

「Chromeでサイトのスクリーンショットを取り、書き込みもできる拡張機能 Awesome Screenshotで遊ぼう!!」

WEBサイトで使われている色が簡単にわかる「ColorPick Eyedropper」

colorPick-eyedropper のコピー

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

WEBサイト制作で、なかなか決めにくいものの1つに色味があります。印刷物なら、絵の具を混ぜるように赤と青を混ぜると紫…などと色のイメージも比較的つかみやすく、まだ説明もしやすいのですが、WEBの場合はカラーコードで色を指定するので、なかなか難しいところがありますよね。

もしも、気になるWEBサイトで使われている色をクリックするだけで、そのカラーコードが取得できたらかなり便利だと思いませんか?それを可能にしてくれるのが、この「ColorPick Eyedropper」です。

色の細かい指定をしたい時などに、このWEBページのこの部分のような色味にして欲しいというイメージがあれば、「ColorPick Eyedropper」を使って実際のカラーコードを伝えることができます。それをデザインに反映してもらえればイメージ通りの仕上がりに…。WEB制作を円滑に行うためにもおすすめの機能拡張です。

<ColorPick Eyedropperの使い方・参考記事>
「Webサイトで使われている『カラーを調べる』方法【Chrome拡張機能】

WEBサイトで使われているソフトウェアが一目でわかる「Appspector」

Appspector_01 のコピー

https://chrome.google.com/webstore/detail/appspector/homgcnaoacgigpkkljjjekpignblkeae?hl=ja

WEB担当者なら、他社のサイトを分析することも多いと思います。時にはこのサイトは何でできているの?と、使われている技術を確認したいこと、ありますよね。そんな時に便利な拡張機能が「Appspector」です。閲覧中のWEBページで使われているサーバーやフレームワーク、ライブラリなどを手軽にチェックできます。

使い方も簡単で、Appspectorをダウンロードしておくだけ。アドレスバーの右端にアイコンが表示されるので、例えばそのサイトがCMSを使って作られているかどうかなどが簡単にわかります。ちなみに当社のこのインバウンドブログはWordPressを使っていますので、Appspectorを入れたあとでサイトに接続していただけば、以下のようにWordPressの「W」のアイコンが表示されます。クリックすると使われているPHPやJQueryのバージョンなども確認できます。

Appspector_02

<Appspectorの使い方・参考記事>

「Web制作者向け拡張「Appspector」で仕事を効率的に」

今回のまとめ

以上、数を絞って「絶対に入れておいて間違いなし!」というChrome拡張機能5種をご紹介しました。どれも実際にWEB関係の仕事で使えるものばかりなので、ぜひ、この機会に試してみてください。

WEB関連の作業では、ちょっとしたツールを導入するだけで、驚くほどスピードアップにつながることが多くありますよね。さらに、それらがブラウザの機能として一本化されていれば、ツールをいちいち起動させる必要もありません。Chrome拡張機能は、作業効率化、時短テクニックとしても活用できるものが多いので、これらを手始めとしてぜひいろいろ取り入れてみてください。

<関連記事>
【保存版】WEB担当者の業務効率化に役立つ便利ツール11選

WEB担当者のデザイン力を高めるための3つの基本ポイント

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  5. 5

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  6. 6

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  7. 7

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  8. 8

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  9. 9

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  10. 10

    結果につなげるLINE@活用。最新集客事例に学ぶ成功の6つのポイントとは?

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」