サイト制作に役立つ Chrome 拡張機能 9 選

Webサイト制作時に欠かせないChrome拡張機能

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

私がサイトを制作している時、このブログを運営している時に、よく使う Chrome 拡張機能のご紹介です。

全部で 9 つ。どれも欠かせないものばかり。

紹介順は、ABC 順です。

45to75

45to75

Chrome ウェブストア

ドラッグで選択した範囲の文字数を計測する拡張機能。

日本語の場合には、文章の 1 行の文字数は 35 ~ 42 文字が適切だと言われています。

文字数が少なくても多くても読みにくくなる。

ただ、サイトをデザインする時に、いちいち文字数を数えるのは面倒です。

そこで出番となるのが 45to75 。

テキストをドラッグで範囲選択し、右クリックすると「 Measure:文字数 」が表示されます。

45to75での文字数の計測例

簡単かつ瞬時に 1 行の文字数を確認できます。

ちなみに、45to75 の名前は、英語の場合の 1 行の文字数が 45 ~ 75 文字が最適だと言われていることから付けられています。

AMP Validator

AMP Validator

Chrome ウェブストア

公式サイト

AMP エラーが出ていないかを瞬時に検証できる拡張機能。

AMP 検証ツール The AMP Validator と同等の検証が可能です。

ツールバーに表示されるアイコンの色で、AMP 対応の状態を確認できます。

通常ページにアクセスすると、アイコンの色はグレーか青で表示されます。

グレーだと、そのページには AMP ページがありません。

AMPページがない時のグレーのアイコン

リンクアイコン付きの青だと、そのページには AMP ページが存在します。

AMPページがある時の青いアイコン

アイコンが青の場合には、アイコンをクリックすると AMP ページに移動できます。

AMP ページに移動後は、アイコンの色が緑か赤で表示されます。

緑だと、AMP 検証に合格しています。

AMP検証に合格している時の緑のアイコン

赤だと、AMP エラーが出ています。また、表示される数字で、エラーの数を確認できます。

AMP検証でエラーが出ている時の赤いアイコン

アイコンが赤の場合には、アイコンをクリックするとエラーの内容が表示されます。

AMPエラーの表示例

また、Debug をクリックすると The AMP Validator に移動し、より詳細な検証が可能です。

アイコンの色を見るだけで、AMP 検証の結果が分かる優れものです。

Awesome Screenshot

Awesome Screenshot

Chrome ウェブストア

公式サイト

スクリーンショットを撮影できる拡張機能。

撮影範囲は、「現在見えている範囲」「ページ全体」「任意に選択」など自由に選べます。

また、撮影後に、文字や図形を入れることが可能。

さらに、WebM 形式の動画も撮影できます。

このブログで使っているスクリーンショットや動画の多くは、Awesome Screenshot で撮影しています。

ChromeLens

ChromeLens

Chrome ウェブストア

公式サイト

視覚障害や色覚障害の方が、どのように見えているかが分かる拡張機能。

サイトのアクセシビリティを視覚的に把握できます。

インストール後は、デベロッパーツールのタブに「 ChromeLens 」が追加されます。

デベロッパーツールのChromeLensタブ

「 Enable lens 」にチェックを入れ、視覚・色覚の種類を選ぶと、画面の表示が自動的に切り替わります。

色覚が変わった表示例Deuteranopia (green-blind)の例

また、「 Run accessibility checks 」ボタンをクリックすると、重大なアクセシビリティエラーがないかの検証ができます。

重大なエラーがある場合には、エラー項目が表示されます。

Run accessibility checksのエラー項目の例

エラー項目をクリックするとデベロッパーツールの Elements タブに遷移し、エラー箇所を教えてくれます。

アクセシビリティの確認に欠かせない拡張機能です。

Clear Cache

Clear Cache

Chrome ウェブストア

Chrome のキャッシュなどをワンクリックで削除できる拡張機能。

CSS を変更すると、変更内容が反映しない時があります。

原因は、キャッシュされた古い CSS でサイトが表示されるため。

また、古いキャッシュが原因で、表示が崩れる、正常に動作しないなど不具合が発生することもあります。

Chrome の設定を開きキャッシュを削除すればいいのですが、ちょっと面倒です。

Clear Cache を使えば、ツールバーのアイコンをクリックするだけでキャッシュを削除できます。

オプションから何を削除するのかを選択でき、キャッシュのほかに、履歴や Cookie などもワンクリックで削除が可能。

Clear Cacheのオプション

インストールをしておいて、損はありません。

Google 翻訳

Google 翻訳

Chrome ウェブストア

公式サイト

日本の Web サイトは、海外のサイトと比べると 5 年ほど遅れていると言われています。

IE の高いシェアが原因の 1 つですが、最新技術のドキュメントが英語で書かれていることも原因として挙げられます。

けれど、Google 翻訳があれば、英語で書かれたドキュメントもすらすら読める。

昔と比べると、翻訳の精度は飛躍的に向上しています。

英語が話せない私には、なくてはならない存在です。

JSON Viewer

JSON Viewer

Chrome ウェブストア

公式サイト

JSON 形式で書かれたファイルが見やすくなる拡張機能。

例えば、JSON 形式の WordPress の WP REST API を取得すると、ブラウザには縮小された状態で表示されます。

WP REST APIの表示例

このままでは、まともに内容を確認できません。

しかし、JSON Viewer をインストールすれば、自動的に見やすく整えてくれます。しかも、ハイライト表示で。

ハイライト表示で見やすくなったWP REST API

ハイライト表示のテーマは、デフォルトのほかに、ライト系が 7 種類、ダーク系が 19 種類も用意されています。

また、フォントサイズなども変更できるので、より見やすくなるよう調整できます。

Retina Check Extension

Retina Check Extension

Chrome ウェブストア

公式サイト

サイトで使っている画像が、Retina ディスプレイできれいに表示されるかを確認できる拡張機能。

ツールバーのアイコンをクリックすると、そのページ内の全ての画像を検証してくれます。

Retina Check Extensionの検証結果

検証結果は、3 つの色で区別されます。

  • 赤 : 画像サイズが小さく、Retina ディスプレイでは荒くなる
  • 緑 : Retina ディスプレイできれいに表示され、かつ画像サイズが最適
  • 紫 : Retina ディスプレイできれいに表示されるが、画像サイズが大きすぎ

また、サイト上の画像に、検証結果の色でフィルターがかかります。

例えば、黄色の画像が…。

Retina Check Extensionの検証前の画像

緑がかった色になります。つまり、この画像は、きれいに表示される上にサイズが最適です。

Retina Check Extensionの検証後の画像

Retina ディスプレイ搭載の MacBook などを持っていなくとも、簡単に画像のチェックができます。

Save to Pocket

Save to Pocket

Chrome ウェブストア

公式サイト

Web サイトを保存するサービスの Pocket に、ワンクリックで保存できる拡張機能。

いいアイデアや問題の解決方法などが書かれたサイトを簡単に保存できます。

また、保存後はすぐにタグ付けもでき、思いどおりに分別できます。

Pocket はアプリもあるため、保存したサイトは PC からでもスマホからでも読み返せます。

Google Play

App Store