Webサイト デザイン解析

公開Webサイトを実際のブラウザで表示し、見えている要素の色、文字、余白、レイアウトをデザイン仕様として整理します。ページのHTML・CSS・文章・画像をコピーするツールではありません。

解析できる項目

基本情報、カラーパレット、フォントと文字サイズ、余白、角丸、Shadow、コンテンツ幅、主要セクション、Button・Card・Input、Header・Footer、画像利用、DesktopとMobileの表示差を確認できます。

Webサイトから色を調べる方法

ブラウザが最終的に計算した背景色・文字色・枠線色を取得し、RGBやHEXの表記違いを統一します。単純な一覧ではなく、使用頻度と表示面積を考慮して主要色を並べます。

Webサイトからフォントを調べる方法

各要素へ実際に適用されたfont-family、font-size、font-weight、line-heightを集計します。CSS変数、継承、media query、JavaScriptで変化したスタイルもレンダリング後の値で確認します。

解析したデザインの活用方法

参考サイトの特徴を言語化したり、デザイントークンのたたき台を作ったり、制作チームへ共通認識を伝える用途に使えます。「Markdownでコピー」から抽象化された仕様書を取得できます。

解析できないサイト

ログイン、Cookie認証、Basic認証が必要なページ、社内サイト、localhostやprivate network、アクセス制限・CAPTCHA・paywallがあるページには対応しません。入力した1ページのみを解析し、サイト全体は巡回しません。

1. 公開されているWebページのURLを入力します。
2. 「デザインを解析」を押し、DesktopとMobileの解析完了を待ちます。
3. 色・Typography・Layout・Component・Sectionを確認します。
4. 必要なら「Markdownでコピー」で仕様書として利用します。