calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

サイト制作が助かった!おすすめのChrome拡張まとめ34

Chrome_Extensions

「あの便利な拡張機能なんだっけ?」と思い出せない

配色、デザイン、SEO、プログラム、ブログを書く時はとくに。今回はWeb関係者、サイトやブログをなんとなく作ってみた人に向けて

「初心者でも使いやすい拡張機能」をジャンルごとに厳選してまとめました。

Webの人じゃなくても、サイトやブログ作るときに便利なので、この中から必要なものをチョイスしてインストールしてみましょう!

便利なものが見つかったらこの記事に追加していきます。

PR
IT/WEB業界への転職なら
Sponsored Link

Chrome拡張一覧

1.CSS
2.サイトを作る時
3.配色
4.画像編集
5.画像保存
6.スクリーンショット/キャプチャ
7.SEO
8.開発/制作補助
9.Chrome拡張を制作してみる/作り方

1.CSS

1ー1.Code Cola

Code_Cola

要素のスタイルを編集と同時進行で表示してくれる。綺麗なインターフェイスなので使用頻度高くなりそうです。CSS3をテストしたり出来ます。

1ー2.CSS Reloader

CSS_Reloader

スタイルシート反映後、リロードなしで更新後を見れる。アドセンスを何度も更新したくないっていう人むけ。

1ー3.CSSViewer

CSSViewer

アイコンを押すだけで、要素を簡単にチェックできる拡張機能。見やすいテキストと色分けで分かりやすい。

1ー4.Live CSS Editor

live_css_editor

cssを簡単に検証したいときに。テキストボックスに入力するだけでOK。このシンプルなデザインが素敵です。

2.サイトを作る時

2-1.HTML5 Outliner

HTML5_Outliner

h1 /h2 /h3 などのテキスト本文の見出し、サイト構造が簡単に分かる。

2-2.Chrome Sniffer

chrome_sniffer

サイトの構成(どのような仕組みでできているか)をみることができる拡張機能。WordPress使ってんだね~とか、Google Analytics埋め込んでないの?とか。

2-3.MeasureIt

MeasureIt

もう、ほとんどのデザイナーさんが入れてるツールじゃないでしょうか。そうです、ページ内で縦横サイズを測れる伸縮自在のメジャーです。

2-4.Popup Image Alt Attribute

PopupImage

alt属性を簡単に見れるようにポップアップする拡張機能です。

2-5.OneClick Cleaner

OneClick_Cleaner

ワンクリックで履歴を削除してくれます。[Shift]+[Ctrl]+[Delete]でもいいですが、ワンアクションといういうところがおすすめできます。

3.配色

3-1.ColorZilla

ColorZilla

サイト上の色を、カラーコードでコピーできる。任意の場所から取得する。2点間距離測定つき。

3-2.Eye Dropper

Eye_Dropper

こちらはシンプルなカラーピッカータイプ。色を抽出。カラーコードはhtml、RGB、HSB形式で取得可。

3-3.(un)clrd

unclrd

なんとモノクロにしてくれる。ブログの画像を作るときに画像をモノクロにしてキャプチャしたり、配色のバランスをとる時なんかに使えそうです。

4.画像編集

4-1.Sketchpad

Sketchpad

HTML5で作られた画像編集ペイントツール。簡単な操作でスケッチできるのが最大のセールスポイント。テクスチャパターンが豊富でシャレてます。

4-2.Lomo+

Lomo

写真を編集できる。Lomo+ Webページ上の画像を昔の写真風に変換して保存できるChromeアプリ | Webアプリのいいところに使い方が詳しく書いてあります。

4-3.BeFunky Photo Editor

BeFunky_Photo_Editor

写真加工アプリケーション。iPhoneアプリやオンラインツールでも提供されてます。エフェクトの種類が多くフィルターも簡単にできる。

5.画像保存

5-1.Image-Toolbar (beta)

ImageToolbar

画像をマウスオーバーで一発ダウンロード

5-2.Click and Save

Click_and_Save

保存先や画像のファイル名など詳細まで指定できる。

5-3.Show Title Tag

Show_Title_Tag

なぜ、これが必要かといいますと、長いタイトルってタブにおさまらず途中で途切れちゃいますよね。この拡張機能をインストールしておくとどんなに長いタイトルでも画面の四角に表示できるんです。

5-4.QR-Code Tag Extension

QR-Code_Tag_Extension

QRコードを表示。それ以上でも以下でもなし。

5-5.Create Link

Create_Link

有名すぎるけど一応おすすめします。ページからタイトル、URL、リンクなどをコピーできます。

6.スクリーンショット/キャプチャ

6-1.Lightshot

Lightshot

ブラウザの外側でも、スクリーン内をどこでもキャプチャできる。スクリーンショット系の拡張機能が一時使えなかったんですが、これだけは動作してくれました。

エクスプローラーなどブラウザ以外の場所でもキャプチャできるので、フリーソフトの使い方などのハウツー系を書いているブロガーさんにもおすすめです。

6-2.Webpage Screenshot

Webpage_Screenshot

こちらはブラウザ内をキャプチャできるが、テキストや囲みなど直接画像を編集できる。

6-3.Pixlr Grabber

Pixlr_Grabber

キャプチャだけでなく、ガンガン編集可能。

7.SEO

7-1.NoFollow

NoFollow

nofollowリンクを簡単に見たいときに。

7-2.SEOquake

SEOquake

PR、インデックス、twitter、facebook、google+、ドメイン年齢一覧をツールバーに表示するコンパクトな拡張。検索する時に、順位を横に出してくれるのは地味に便利です。SEO系ツールの中では一番おすすめです。

7-3.Mozbar

Mozbar

オーソリティ、総リンク数、canonical、キャッシュされた日、IPアドレスを調べたいときに。

7-4.Speed Tracer

Speed_Tracer

Chrome用拡張機能『Speed Tracer』 : ライフハッカー[日本版]で詳しく解説してありますが、フッターにページ速度詳細が出てきます。

7-5.文字数カウンタ

mozisu

文字数やちょっとしたメモならこの拡張で十分です。なんといっても軽い。

8.開発/制作補助

8-1.Web Developer

Web_Developer

カーソルに合わせて配色を表示。他JavaScriptやルーラー、アウトライン、リサイズなど機能が豊富。もちろんSEOもしっかり調べることができます。

8-2.PHP documentation - PHP.net

PHP_documentation

その場でPHPマニュアルが引ける。PHP関連の拡張機能ってあんまりないですけど、普通ローカルでテストするからまぁそうですよね。

8-3.Chrome リモート デスクトップ

desk

一時すごい話題になりました。外出先からでもパソコンを遠隔操作できるという拡張機能。Chromeリモート・デスクトップの使い方に詳しい設定が書いてあります。

8-4.Quick Javascript Switcher

Quick_Javascript_Switcher

一回でJavaScriptのオンオフ切り替え。この拡張機能のよいところは一度オフにしたページを記憶してくれるとこ。

8-5.IE Tab

IE_Tab

レンダリングをIEに変えてくれる。IE10の開発者ツールがまだ使いにくいのでプレビューだけ使います。

8-6.Resolution Test

Resolution_Test

ページの画面を色々なサイズに変更できる。自分用にカスタマイズも出来ます。スマートフォンサイトを作っている人は必須ともいえる拡張でしょう。

9.Chrome拡張を制作してみる/作り方

9-1.Chrome拡張入門

拡張の設計、書き方、HTML5など概要から作り方をスライドで解説。

9-2.開発手順

開発手順や各種API、デバッグツールなどExtensionsの導入や開発手順について。

9-3.プロセス

構成内容などChrome で拡張機能を作成する実際のプロセスを説明してあります。

chromeに関係するおすすめ記事

chromeの隠れた機能など、目からウロコです。
Chromeが圧倒的に軽くなる!拡張機能を使わない便利な小技13

google+を頻繁に使う人向けに。
厳選!Google+を快適にする7つのchrome 拡張機能

有料ソフトに負けないくらいのアプリを二つ

以上、Web制作者必見、おすすめの拡張機能まとめでした。

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください