第4章 フロントエンド・デザイナー向け ── UIとCSSの検証・設計
フロントエンド・デザイン作業のブラウザ上トイル
フロントエンドエンジニアとデザイナーにとって、ブラウザは「確認の場」であり「インスペクションの場」でもある。
典型的なトイルは4種類だ。
- CSS・スタイルの把握コスト：他サイトのデザインを参考にする際、CSSを読み解く作業
- レスポンシブ確認のコスト：複数デバイスでの表示を手動で確認する作業
- デザイン仕様の取得コスト：フォント・カラー・余白の特定
- フィードバック・バグ報告のコスト：スクリーンショット+注釈の作成と共有
CSS・スタイル検証系
CSS Peeper
解決するトイル：参考サイトのCSSを確認する際、DevToolsで要素を選択→Styleパネルを読む作業が必要。
CSS Peeper の機能：
1. クリックした要素のスタイルを一覧表示
→ フォントサイズ・カラー・マージン・ボーダー半径
→ DevToolsを開かずに確認
2. カラーパレット抽出
→ ページ全体で使われているカラーを自動リスト化
→ HEX値をワンクリックコピー
3. アセット一覧
→ ページ上の画像・アイコン・SVGを一覧表示
→ ダウンロード可能
実用：
「競合サイトのカードコンポーネントのpaddingは何px？」
→ CSS Peeer でクリックして即確認
→ コピーしてFigmaに反映Hoverify
解決するトイル：CSS検証・レスポンシブ確認・アセット抽出・SEO確認に複数の拡張機能が必要。
Hoverify が統合する機能：
Inspector（CSS確認）
→ ホバーでリアルタイムにスタイルを表示
→ 値の直接編集（ライブプレビュー）
Responsive Tester
→ デバイス幅をスライダーで変更
→ 360px〜1920pxを即座に切り替え
Assets Explorer
→ ページ上の全画像・フォント・SVGを一覧化
→ ドラッグでダウンロード
Color Picker
→ ページ上の任意の色をピック
→ HEX / RGB / HSL でコピー
Screenshot
→ 全画面・選択範囲のキャプチャ
1つの拡張機能が5つの拡張機能の役割を担う。Pesticide
解決するトイル：CSSレイアウトの問題（余白の崩れ・要素の重なり）を目視で発見するのが難しい。
Pesticide の動作：
ボタンをクリックするとページ上の全要素に
カラフルなボーダーを追加表示する。
div → 赤
p → 青
span→ 緑
img → 黄
効果：
「なぜかレイアウトがずれる」問題の原因要素が即視覚化される。
Flexbox/Grid の崩れが一目瞭然。
「.container の margin が意図せず重なっていた」
のような問題発見に特に有効。フォント・カラー特定系
WhatFont
解決するトイル：Webサイトのフォントを特定するために、DevToolsのComputedスタイルを調べる必要がある。
WhatFont の使い方：
拡張機能を有効化 → マウスをテキストに合わせる
→ フォント名・サイズ・ウェイト・カラーをツールチップ表示
確認できる情報：
Font family: "Inter"
Font size: 16px
Font weight: 500
Color: #1F2937
Line height: 1.5
実用：
「このサイトの見出しフォントは何？」
→ WhatFont 有効 → テキストにマウスを合わせる → 即回答ColorZilla
解決するトイル：ページ上の色を特定してHEX値を取得する作業。スクリーンショットを撮影→画像編集ツールで色取得が従来の手順。
ColorZilla の機能：
スポイトツール
→ ページ上の任意の点の色をピック
→ ピック後に自動でクリップボードにコピー
カラー履歴
→ ピックした色の履歴を保持
→ 後から再利用可能
CSSグラデーション生成
→ 2色を指定してCSS linear-gradient を生成
ページカラー分析
→ ページ全体で使われている色を頻度順で表示Site Palette
解決するトイル：Webサイトのカラーシステムを理解するために、カラーを1つずつ手動で収集する。
Site Palette の機能：
ページ全体からカラーを自動抽出
→ 頻度の高い色を上位に表示
→ デザインシステムのカラーパレットを逆算
エクスポート形式：
SCSS変数 / CSS変数 / SVG / Adobe Swatchファイル
実用：
リブランドや参考デザインのカラースキームを
デザインシステムに取り込む際の出発点として使う。レスポンシブ確認・デバイステスト系
Window Resizer
解決するトイル：スマートフォン・タブレット表示の確認時に、ブラウザウィンドウを手動でリサイズする。
設定可能なプリセット：
iPhone 12 Mini: 360×780
iPhone 14 Pro: 393×852
iPad Air: 820×1180
MacBook 13": 1280×800
Full HD: 1920×1080
1クリックでブラウザをそのサイズに変更。
「デザインがXSで崩れているか確認」の作業が
ブラウザのリサイズ操作なしで完了。フィードバック・バグ報告系
Usersnap
解決するトイル：UIのバグ報告で「スクリーンショットを撮影→ペイントや Annotely で注釈→Jiraチケット作成→添付」という5ステップが必要。
Usersnap のフロー：
1. 拡張機能のボタンをクリック
2. バグのある領域を矩形で選択
3. 矢印・テキスト・ステッカーで注釈
4. "Send to Jira" (または Linear・Slack・Trello)
5. 完了
効果：
スクリーンショット付きのJiraチケットが
ブラウザから離れずに30秒で作成できる。
URLとブラウザ情報（バージョン・OS・画面サイズ）が
自動付与されるため、再現情報を別途記載する必要がない。パフォーマンス・品質系
Lighthouse
解決するトイル：ページのパフォーマンス・SEO・アクセシビリティの問題を把握するために、別環境での計測が必要。
計測項目：
Performance (Core Web Vitals)
LCP (Largest Contentful Paint): 最大コンテンツ描画
CLS (Cumulative Layout Shift): レイアウトシフト
INP (Interaction to Next Paint): インタラクション応答
Accessibility
色コントラスト比
ALT属性の有無
フォーカス管理
SEO
メタタグ
canonicalタグ
構造化データ
Best Practices
HTTPS
セキュリティヘッダー
ワンクリックで全項目のスコアと修正案が得られる。
「画像のlazy loadingを追加するとLCPが○秒改善される」
という具体的なアドバイス付き。フロントエンド・デザイナー向け拡張機能マップ
| カテゴリ | 拡張機能 | 主な用途 |
|---|---|---|
| CSS確認 | CSS Peeper | 要素のスタイルを即確認 |
| CSS確認（総合） | Hoverify | 検査・レスポンシブ・アセット一括 |
| CSS可視化 | Pesticide | レイアウト崩れの発見 |
| フォント特定 | WhatFont | フォント名・サイズを即確認 |
| カラー取得 | ColorZilla | ページ上の色をピック |
| カラーパレット | Site Palette | サイト全体のカラースキーム |
| レスポンシブ | Window Resizer | デバイスサイズ切り替え |
| バグ報告 | Usersnap | スクリーンショット+注釈+チケット |
| パフォーマンス | Lighthouse | Core Web Vitals + SEO + A11y |