サイト制作が助かった！おすすめのChrome拡張まとめ３４
「あの便利な拡張機能なんだっけ？」と思い出せない
配色、デザイン、SEO、プログラム、ブログを書く時はとくに。今回はWeb関係者、サイトやブログをなんとなく作ってみた人に向けて
「初心者でも使いやすい拡張機能」をジャンルごとに厳選してまとめました。
Webの人じゃなくても、サイトやブログ作るときに便利なので、この中から必要なものをチョイスしてインストールしてみましょう！
便利なものが見つかったらこの記事に追加していきます。
エンジニア速報は Twitter の@commteで配信しています。
Chrome拡張一覧
１．CSS
２．サイトを作る時
３．配色
４．画像編集
５．画像保存
６．スクリーンショット/キャプチャ
７．SEO
８．開発/制作補助
９．Chrome拡張を制作してみる/作り方
１．CSS
１ー１．Code Cola
要素のスタイルを編集と同時進行で表示してくれる。綺麗なインターフェイスなので使用頻度高くなりそうです。CSS3をテストしたり出来ます。
１ー２．CSS Reloader
スタイルシート反映後、リロードなしで更新後を見れる。アドセンスを何度も更新したくないっていう人むけ。
１ー３．CSSViewer
アイコンを押すだけで、要素を簡単にチェックできる拡張機能。見やすいテキストと色分けで分かりやすい。
１ー４．Live CSS Editor
cssを簡単に検証したいときに。テキストボックスに入力するだけでOK。このシンプルなデザインが素敵です。
２．サイトを作る時
２－１．HTML5 Outliner
h1 /h2 /h3 などのテキスト本文の見出し、サイト構造が簡単に分かる。
２－２．Chrome Sniffer
サイトの構成（どのような仕組みでできているか）をみることができる拡張機能。WordPress使ってんだね～とか、Google Analytics埋め込んでないの？とか。
２－３．MeasureIt
もう、ほとんどのデザイナーさんが入れてるツールじゃないでしょうか。そうです、ページ内で縦横サイズを測れる伸縮自在のメジャーです。
２－４．Popup Image Alt Attribute
alt属性を簡単に見れるようにポップアップする拡張機能です。
２－５．OneClick Cleaner
ワンクリックで履歴を削除してくれます。[Shift]+[Ctrl]+[Delete]でもいいですが、ワンアクションといういうところがおすすめできます。
３．配色
３－１．ColorZilla
サイト上の色を、カラーコードでコピーできる。任意の場所から取得する。２点間距離測定つき。
３－２．Eye Dropper
こちらはシンプルなカラーピッカータイプ。色を抽出。カラーコードはhtml、RGB、HSB形式で取得可。
３－３．(un)clrd
なんとモノクロにしてくれる。ブログの画像を作るときに画像をモノクロにしてキャプチャしたり、配色のバランスをとる時なんかに使えそうです。
４．画像編集
４－１．Sketchpad
HTML5で作られた画像編集ペイントツール。簡単な操作でスケッチできるのが最大のセールスポイント。テクスチャパターンが豊富でシャレてます。
４－２．Lomo+
写真を編集できる。Lomo+ Webページ上の画像を昔の写真風に変換して保存できるChromeアプリ | Webアプリのいいところに使い方が詳しく書いてあります。
４－３．BeFunky Photo Editor
写真加工アプリケーション。iPhoneアプリやオンラインツールでも提供されてます。エフェクトの種類が多くフィルターも簡単にできる。
５．画像保存
５－１．Image-Toolbar (beta)
画像をマウスオーバーで一発ダウンロード
５－２．Click and Save
保存先や画像のファイル名など詳細まで指定できる。
５－３．Show Title Tag
なぜ、これが必要かといいますと、長いタイトルってタブにおさまらず途中で途切れちゃいますよね。この拡張機能をインストールしておくとどんなに長いタイトルでも画面の四角に表示できるんです。
５－４．QR-Code Tag Extension
QRコードを表示。それ以上でも以下でもなし。
５－５．Create Link
有名すぎるけど一応おすすめします。ページからタイトル、URL、リンクなどをコピーできます。
６．スクリーンショット/キャプチャ
６－１．Lightshot
ブラウザの外側でも、スクリーン内をどこでもキャプチャできる。スクリーンショット系の拡張機能が一時使えなかったんですが、これだけは動作してくれました。
エクスプローラーなどブラウザ以外の場所でもキャプチャできるので、フリーソフトの使い方などのハウツー系を書いているブロガーさんにもおすすめです。
６－２．Webpage Screenshot
こちらはブラウザ内をキャプチャできるが、テキストや囲みなど直接画像を編集できる。
６－３．Pixlr Grabber
キャプチャだけでなく、ガンガン編集可能。
７．SEO
７－１．NoFollow
nofollowリンクを簡単に見たいときに。
７－２．SEOquake
PR、インデックス、twitter、facebook、google＋、ドメイン年齢一覧をツールバーに表示するコンパクトな拡張。検索する時に、順位を横に出してくれるのは地味に便利です。SEO系ツールの中では一番おすすめです。
７－３．Mozbar
オーソリティ、総リンク数、canonical、キャッシュされた日、IPアドレスを調べたいときに。
７－４．Speed Tracer
Chrome用拡張機能『Speed Tracer』 : ライフハッカー［日本版］で詳しく解説してありますが、フッターにページ速度詳細が出てきます。
７－５．文字数カウンタ
文字数やちょっとしたメモならこの拡張で十分です。なんといっても軽い。
８．開発/制作補助
８－１．Web Developer
カーソルに合わせて配色を表示。他JavaScriptやルーラー、アウトライン、リサイズなど機能が豊富。もちろんSEOもしっかり調べることができます。
８－２．PHP documentation - PHP.net
その場でPHPマニュアルが引ける。PHP関連の拡張機能ってあんまりないですけど、普通ローカルでテストするからまぁそうですよね。
８－３．Chrome リモート デスクトップ
一時すごい話題になりました。外出先からでもパソコンを遠隔操作できるという拡張機能。Chromeリモート・デスクトップの使い方に詳しい設定が書いてあります。
８－４．Quick Javascript Switcher
一回でJavaScriptのオンオフ切り替え。この拡張機能のよいところは一度オフにしたページを記憶してくれるとこ。
８－５．IE Tab
レンダリングをIEに変えてくれる。IE10の開発者ツールがまだ使いにくいのでプレビューだけ使います。
８－６．Resolution Test
ページの画面を色々なサイズに変更できる。自分用にカスタマイズも出来ます。スマートフォンサイトを作っている人は必須ともいえる拡張でしょう。
９．Chrome拡張を制作してみる/作り方
９－１．Chrome拡張入門
拡張の設計、書き方、HTML5など概要から作り方をスライドで解説。
９－２．開発手順
開発手順や各種API、デバッグツールなどExtensionsの導入や開発手順について。
９－３．プロセス
構成内容などChrome で拡張機能を作成する実際のプロセスを説明してあります。
chromeに関係するおすすめ記事
chromeの隠れた機能など、目からウロコです。
Chromeが圧倒的に軽くなる！拡張機能を使わない便利な小技１３
google+を頻繁に使う人向けに。
厳選！Google+を快適にする7つのchrome 拡張機能
有料ソフトに負けないくらいのアプリを二つ
以上、Web制作者必見、おすすめの拡張機能まとめでした。
スポンサード リンク
関連記事
- 人生が変わる本！モノの見方も変わるラディカルな本まとめ
- 副業で資産をつくる、サラリーマン時短法
- Windows／Macを高速化！ブラウザや回線も「はやく」なるまとめ
- Chromeが圧倒的に軽くなる！拡張機能を使わない便利な小技１３
- 人生を変える～ジェームス・ボンドに学ぶ魔法のおっさんテクニック
- 魔法のように記事をすらすら読んでもらえる１１のコツ
- 素人でも超簡単に文章力アップ！正しい日本語を使えるようになるコツ
- 「イケダン、ゆるカワ、胸キュン男子！」～ぶん殴りたくなるほど素敵なキャッチコピーの作りかた
- お前が根拠なく「無理」と言うのなら、俺も根拠無く「できる」と言ってやる
- スランプから脱出する たった１つの強力な言葉
Comments
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
Leave a Comment