Webサイトは実際にブラウザ上で表示されて初めてユーザーやGoogleなどのロボットに届きます。
そこで今回はWebデザイナーやWebディレクターといったWeb制作者の方にのおすすめのChrome拡張についてまとめたいと思います。
デザインに役立つやつだったり、SEO対策、Webアクセシビリティ向上のためのものだったりとさまざまジャンルのものを紹介しますので、ぜひ参考にしてみてください。
Web制作者全般向け
1：サイト内の画像情報とMeta情報をみる
▶︎ インストールする
Alt & Meta viewer
Webサイト上の画像の情報（alt、size、src）とMeta情報（OGP、Title、Descriptionなど）を見れるものです。
主にMeta情報をさくっとみたいときに使用します。Webサイトを制作するときに、SEOのためにTitleやDescriptionなどを設定することが多いです。その設定がしっかりとされているのかの確認や、他のサイトがどのような設定をしているのかを確認する時に使用しています。
またシェアした時にどんな画像が表示されるのかの確認にも使用しています。
▲ 画像の情報（引用：公式Chrome Store）
2：リンク切れを確認する
▶︎ インストールする
Check My Links
Webサイト内のどのリンクが切れているのかを色分けで直感的に表示します。
インストールしたらまずは初期設定をしてください。Chrome拡張のアイコンを右クリックして、オプションを開きます。
設定画面で以下にチェックを入れて、最後に画面下部の「Save my preferences」をクリックします。
項目 | 内容 |
|---|---|
Parse DOM after hashtag | ID指定のページ内リンクもチェック対象にする。 |
Trailing '#' | hrefが"#"のみで指定していないページ内リンクもチェック対象にする。 |
Empty Link | リンク先の設定をしていない（hrefが空の状態）リンクもチェック象にする。 |
Check My Linksをクリックしてリンク切れをチェックしましょう。
リンクを順番にチェックしていきQueueが0になったら完了です（量が多かったら時間がかかります）
結果は以下のように分かりやすく色分けで分類されるので、WarningsやInvalid Linksがあった場合は、一つずつクリックしてリンク切れを確認してください。
項目 | 内容 |
|---|---|
Valid links | 有効なリンク |
Valid redirecting links | 有効なリダイレクトリンク |
Warnings | ページ内リンクなどの設定に誤りがある |
Invalid links | 無効なリンク（リンク切れ） |
ちなみにデフォルトでは、リンクのrel属性が'nofollow'のリンクはチェック対象外になっています。
3：サイトの構造を知りたい
▶︎ インストールする
headingsMap
H1、H2といったHTMLの階層構造を一覧でみれるものです。
WebデザイナーもHTMLの構造を確認する機会が多いかと思いますので、ぜひ色々なサイトがどんな構造になっているのかを確かめてみてください。
SEO対策にもぴったりです。
4：サイト全体のキャプチャを撮る
▶︎ インストールする
FireShot
Webページ全体のキャプチャ（スクリーンショット）を撮って、自分のパソコン上に保存することができます。
Webデザイナー向け
1：サイト内の色を調べる
▶︎ インストールする
ColorZilla
サイトから色を抽出できる、カラーピッカーです。ヒストリー保存やページ全体から抽出できる機能などがあり便利です。
2：サイト内のフォントを調べる
▶︎ インストールする
Fonts Ninja
サイト上で使用しているフォントの種類や大きさなどを調べることができます。さらに、特定のフォントを指定した文字での見え方まで検証することができます。
サイト上のフォントを特定の文字での見え方の検証
3：サイト内の文字変えたり、大きさを知りたい
▶︎ インストールする
VisBug
サイト内の文字を直接変更できたり、要素の大きさや要素間の距離などを直感的に検証することができます。
詳しい使い方は、みんなこちらに載っていますのでぜひ参考にしてみてください。
このツールはなんでもできるので、とりあえずこれを入れておけば安心です。
4：サイト内の画像をブックマークしたい
▶︎ インストールする
Pinterest 保存ボタン
画像共有サービスであるPinterest（ピンタレスト）への保存を簡単にするためのものです。
この拡張をいれておくことで、サイト内の画像に赤い保存ボタンが表示されるようになります。このボタンをクリックすることで画像をPinterest上に保存できます。
まとめ
今回は普段から利用頻度高めのWebデザイナー、Web制作者向けChrome拡張を紹介しました。Web業界に携わる方なら参考になるものもあるかと思います。
気になるものがあればぜひすぐに試してみてください。
