Webデザイナーの仕事は、イラストレーターやFigma、XDといったデザインソフト向けだけでは完結しません。Webサイト上に実際どう表示されるのかを想定・確認するために実際のWebサイトを多く見る必要があります。そこで今回はWebデザイナーの方にのおすすめのChrome拡張についてまとめたいと思います。デザインに役立つやつだったり、効率化のためのものだったりとさまざまジャンルのものを紹介しますので、ぜひ参考にしてみてください！※日頃から利用頻度高めに活用しているものだけ紹介します！1：サイト内の画像情報とMeta情報をみたい▶︎ インストールするAlt & Meta viewerWebサイト上の画像の情報（alt、size、src）とMeta情報（OGP、Title、Descriptionなど）を見れるものです。主にMeta情報をさくっとみたいときに使用します。Webサイトを制作するときに、SEOのためにTitleやDescriptionなどを設定することが多いです。その設定がしっかりとされているのかの確認や、他のサイトがどのような設定をしているのかを確認する時に使用しています。またシェアした時にどんな画像が表示されるのかの確認にも使用しています。▲ 画像の情報（引用：公式Chrome Store）2：サイト内の色を調べたい▶︎ インストールするColorZillaサイトから色を抽出できる、カラーピッカーです。ヒストリー保存やページ全体から抽出できる機能などがあり便利です。引用：公式Chrome Store3：サイト内のフォントを調べたい▶︎ インストールするFonts Ninjaサイト上で使用しているフォントの種類や大きさなどを調べることができます。さらに、特定のフォントを指定した文字での見え方まで検証することができます。サイト上のフォントを特定の文字での見え方の検証4：サイトの構造を知りたい▶︎ インストールするheadingsMapH1、H2といったHTMLの階層構造を一覧でみれるものです。WebデザイナーもHTMLの構造を確認する機会が多いかと思いますので、ぜひ色々なサイトがどんな構造になっているのかを確かめてみてください。SEO対策にもぴったりです。5：サイト内の文字変えたり、大きさを知りたい▶︎ インストールするVisBugサイト内の文字を直接変更できたり、要素の大きさや要素間の距離などを直感的に検証することができます。詳しい使い方は、みんなこちらに載っていますのでぜひ参考にしてみてください。このツールはなんでもできるので、とりあえずこれを入れておけば安心です。6：サイト内の画像をブックマークしたい▶︎ インストールするPinterest 保存ボタン画像共有サービスであるPinterest（ピンタレスト）への保存を簡単にするためのものです。この拡張をいれておくことで、サイト内の画像に赤い保存ボタンが表示されるようになります。このボタンをクリックすることで画像をPinterest上に保存できます。7：サイト全体のキャプチャを撮りたい▶︎ インストールするFireShotWebページ全体のキャプチャ（スクリーンショット）を撮って、自分のパソコン上に保存することができます。まとめ今回は普段から利用頻度高めのWebデザイナー向けChrome拡張を紹介しました。Webデザイナー向けと言ったものの、Web業界に携わる方なら参考になるものもあるかと思います。気になるものがあればぜひすぐに試してみてください！