ウェブサイトのデザインを解剖しよう！色・フォント・サイズを簡単に調べられる便利ツール集

魅力的なウェブサイトは、インターネット時代における小さな傑作とも言えます。カスタマイズの幅は非常に広く、WordPressテーマのちょっとした修正から、サイトの外観をゼロから設計する本格的な制作まで、自分のスキルや目的に応じて自由に選べます。

こうしたサイトを閲覧していると、「この配色を自分のプロジェクトでも使いたい」「このフォントは何だろう？」と感じる瞬間にきっと出会うはずです。この記事では、ウェブサイトが持つあらゆるデザイン情報を読み取るための必須ツールをご紹介します。

色を調べる：ColorZilla

ColorZilla

ColorZillaはもともとFirefox向けに開発された拡張機能ですが、現在ではChromeおよびその関連ブラウザでも利用できるようになっています。

インストールすると、ブラウザのUIに新しいボタンが追加され、ウェブ上のほぼすべての要素の色を特定できるようになります。さらにColorZillaは単純なカラーピッカーにとどまらず、パレット管理機能にも対応しているのが魅力です。

フォントを調べる

WhatFont?（Chrome）

厳密に言えば、WhatFont?拡張機能がなくてもサイトのフォントを調べることは可能です。しかし、これほど手軽な方法は他にありません。代わりの手段となると、スタイルシートを開いて目的の記述をひたすら探すことになってしまいます。

WhatFont?をインストールすると、ブラウザUIに新しいアイコンが表示されます。ブラウザを完全に再起動しない場合は、フォントを識別したいページを一度再読み込みしてから、ブラウザのボタンをクリックしましょう。

するとウェブページの右上に新しいボタンが現れ、テキストにマウスを合わせるだけでフォント名が表示されます。フォント名をクリックすれば、サイズに関する追加情報も確認可能です。さらにフォントスタック内の代替フォントまで特定してくれるため、開発者がどんな代替書体を想定していたのかを知りたいときにも便利です。

Font Finder（Firefox）

ChromeのWhatFont?と同様の機能を持つ、Firefox専用の拡張機能です。

インストールすると、右クリックのコンテキストメニューに新しいオプションが追加されます。

調べたいテキストを見つけたら、それを選択して右クリックメニューを開きます。「Analyse Selection（選択範囲を分析）」を選べば、知りたかった情報がすべてわかります。

表示される詳細情報は圧倒的な充実ぶりです。テキストが「(stack)」と表示されている場合、インストール済みフォントの中でスタックの先頭にあるものが採用されます。スタックは通常、例のように「sans-serif」といった総称で終わります。万一、スタック内の他のフォントがインストールされていない場合でも、システムのデフォルトのサンセリフ体へ自動的にフォールバックします。

さらに「Adjust Element」オプションを使えば、要素のカスタマイズも思いのままです。拡張機能がフォントファミリー名の入力を求めてきたら、あとは自由に試せます。実際にWikipedia上のほぼすべてのフォントを別のものへ変更してみたところ、独特のミックス感あふれる表示になりました。もちろん、これらの変更は一時的なもので、ページを再読み込みすれば元に戻ります。

「Replace font (entire DOM)」を使えば、ページ上の特定フォントをまとめて置き換えることも可能です。Roboto（当サイトでもメインのサンセリフ体として採用しています）がお好みでないなら、このオプションを選択し、ページ上のフォントリストから「Roboto」をクリックして、代わりに使いたいフォント名を入力するだけです。こちらも永続的な変更ではありませんが、お気に入りサイトのデザインを一時的にでも遊び心で試せるのは楽しいものです。

サイズを測る

Page Ruler（Chrome）

「定規？本当に必要？」と思うかもしれません。Page Rulerは画面上で使える定規ツールですが、名前から想像するものとは少し違います。最初は半信半疑になるのも無理はありません。

ウェブデザインにおいて、要素の配置は非常に重要です。ページ内の各要素が適切な間隔で配置されてこそ、本来の魅力が発揮されます。こうした情報はかなりニッチなものですが、Page Rulerを使えば誰でも簡単に把握できます。

他の拡張機能と同様にインストールすると、ブラウザUIにボタンが追加されます。ただし、セキュリティ上の理由により、Chromeの内蔵ページでは使用できないため、通常のウェブページを開いて試す必要がある点に注意してください。

ボタンをクリックすると、アドレスバー直下に情報バーが表示されます。マウスでクリック＆ドラッグして図形を描くと、その寸法が自動的に計算され、バー上に表示されます。グリッド表示のオン/オフも切り替え可能で、正確に測定したいならグリッドを有効にしておくと便利です。

矩形の色もデフォルトの青から変更できます。どの色を選んでも自動的に半透明処理が施されるため、下にあるコンテンツを確認しながら作業を進められます。

Page Rulerはミニマルな設計が特徴で、必要な情報をウィンドウ上部の小さなバーにすべて凝縮している点も高く評価できます。

MeasureIt（Firefox／Chrome両対応）

MeasureItはPage Rulerと同じ用途に使えるツールで、FirefoxとChromeの両方で利用可能です。

インストール後、ボタンをクリックすればドラッグ操作だけで矩形を作成できます。矩形の横にはピクセル数が表示されるため、正確な位置決めのための測定が行えます。

マウスだけでの測定が不安な方もご安心ください。矢印キーでハイライト領域のサイズを微調整できるため、想像以上に簡単に精密な測定が可能です。また、設定の「Area」オプションにチェックを入れておくのもおすすめです。ソフトウェアの動作は変わりませんが、描いた矩形が占める面積を把握できるようになります。

ハイライト表示された画面上にどれだけ多くのピクセルが存在し、それがどれほどの面積を占めるのか、初めて見ると驚かされるはずです。「画面の不動産（スクリーン・リアルエステート）」という言葉の意味を、痛感することになるでしょう。

まとめ

これらの拡張機能を使いこなすには多少の慣れが必要ですが、貴重なデザイン情報へ簡単にアクセスできる強力な味方になってくれます。操作にはすぐ慣れるはずですが、もしフォントの置き換えがうまくいかない場合は、入力したフォント名が正確かどうかを確認してください。「Comic Sans」では動作せず、Officeなどで表記される「Comic Sans MS」と入力する必要があります。

すべての拡張機能において、入力する情報の正確さが求められます。この点を押さえておけば、これらのツールを最大限に活用し、ウェブデザインの学習をぐっと加速させられるはずです。