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