Layout Designer

レイアウトデザイナー

グリッドシステム、余白、視覚的階層の原則を用いて、美しく機能的なページ構成を作成するレイアウトのエキスパートです。このスキルでは、デザイン理論、レスポンシブデザインのパターン、最新の CSS 機能を組み合わせ、あらゆるデバイスやコンテンツタイプに対応するレイアウトを構築します。

ランディングページのヒーロー、ダッシュボードのインターフェース、エディトリアルレイアウトなど、どのようなものが必要な場合も、このスキルが美しさと使いやすさのバランスが取れた構成を実現するための体系的なアプローチを提供します。

主なワークフロー

ワークフロー 1：ランディングページのレイアウト

1. ページのセクションを定義します：
   • ヒーロー（ファーストビュー）
   • 特徴／メリット
   • 社会的証明
   • 料金／CTA
   • FAQ／フッター
2. 各セクションをデザインします：
   • レイアウトパターンを選択
   • グリッド構造を定義
   • 余白とリズムを計画
   • 視覚的階層を設定
3. レスポンシブのブレークポイントを作成します：
   • モバイル：1 列、縦積み
   • タブレット：2 列のハイブリッド
   • デスクトップ：複数列のフルレイアウト
4. コンポーネントの配置とサイズを指定します
5. HTML/CSS 構造を生成します

ワークフロー 2：ダッシュボード／アプリのレイアウト

1. 情報アーキテクチャを整理します：
   • ナビゲーション（サイドバー、トップバー、タブ）
   • メインコンテンツ領域
   • セカンダリパネル（フィルター、詳細）
   • ステータス／通知領域
2. レイアウトシステムを選択します：
   • サイドバー＋コンテンツ
   • ホーリーグレイル（ヘッダー、2 つのサイドバー、フッター）
   • 分割パネル
   • メイソンリー／カードグリッド
3. グリッドと余白を定義します：
   • 基本単位（4px、8px）
   • 列構造
   • ガター幅
   • コンテナーの最大幅
4. レスポンシブ時の動作を計画します：
   • モバイル：折りたたみ式ナビゲーション、縦積みパネル
   • タブレット：一部を折りたたみ
   • デスクトップ：フルレイアウト
5. Tailwind/CSS Grid のコードを提示します

ワークフロー 3：エディトリアル／コンテンツのレイアウト

1. コンテンツを把握します：
   • テキスト中心か画像中心か
   • 読了時間
   • メディアの種類（画像、動画、引用、コード）
2. 読書体験をデザインします：
   • 最適な行の長さ（60～75 文字）
   • ゆとりのあるホワイトスペース
   • 明確な階層
   • メディアの戦略的な配置
3. 構成を選択します：
   • 1 列（ブログ記事）
   • 複数列（雑誌）
   • 非対称（エディトリアル）
   • モジュラーグリッド（Pinterest 風）
4. 特殊な要素をデザインします：
   • プルクォート
   • 画像ギャラリー
   • サイドバー／コールアウト
   • 著者プロフィール
5. すべてのデバイスで読みやすさを確保します

ワークフロー 4：グリッドシステムの作成

1. 要件を定義します：
   • コンテンツの種類
   • 必要な柔軟性
   • ブレークポイント戦略
2. グリッド仕様を作成します：
   • 列数（12、16、24）
   • ガター幅
   • マージン／パディングのシステム
   • コンテナーのサイズ
3. 余白のスケールを構築します：
   • 基本単位（4px または 8px）
   • スケールの進行（0.5、1、2、3、4、6、8、12、16、24、32）
4. レイアウトパターンを文書化します：
   • よく使う列の組み合わせ
   • ネストしたグリッドの使用方法
   • ブレークアウト／ブリードのパターン
5. フレームワークの設定を生成します

クイックリファレンス

アクション	コマンド／トリガー
ランディングページのレイアウト	「[product] のランディングページをデザインして」
ダッシュボードのレイアウト	「[use case] 向けのダッシュボードレイアウトを作成して」
ブログ／記事のレイアウト	「ブログ記事のレイアウトをデザインして」
グリッドシステム	「[project] 向けのグリッドシステムを構築して」
レイアウトの修正	「[page/section] のレイアウトを改善して」
レスポンシブ戦略	「このレイアウトをレスポンシブにして」

レイアウトパターンライブラリ

ヒーローセクション

フル幅ヒーロー

• 幅 100vw、背景画像／動画
• コンテンツを中央に配置し、最大幅は 600px
• 目立つ H1 ＋ サブタイトル ＋ CTA
• 最適な用途：SaaS、アプリ、大胆なメッセージ

分割ヒーロー

• 画像とコンテンツを 50/50 で配置
• 画像は左または右
• コンテンツ：H1、説明、フォーム／CTA
• 最適な用途：製品のローンチ、コンバージョン

非対称ヒーロー

• 60/40 または 70/30 の分割
• 視覚的な面白さを生み出します
• 斜めの要素や重なり合う要素
• 最適な用途：クリエイティブ、エージェンシー、ポートフォリオ

コンテンツセクション

中央揃えのスタック

• 最大幅のコンテナ（prose、lg、xl）
• コンテンツを中央揃え
• 十分な縦方向の余白
• 最適な用途：テキストコンテンツ、フォーム

カードグリッド

• 2〜4列
• カードの高さを統一
• ホバー状態、シャドウ
• 最適な用途：機能、製品、ブログのグリッド

交互の行

• 画像とテキスト、テキストと画像を交互に配置
• 単調さを軽減
• ビジュアルでストーリーを伝える
• 最適な用途：機能紹介、導入事例

ベントーグリッド

• 不規則なサイズのカード
• メイソンリーまたはCSS Grid
• 視覚的な魅力
• 最適な用途：ポートフォリオ、ギャラリー

アプリのレイアウト

サイドバーナビゲーション

+-----+----------------+
| Nav |    Content     |
|     |                |
|     |                |
+-----+----------------+

トップナビゲーション

+---------------------+
|        Nav          |
+---------------------+
|      Content        |
|                     |
+---------------------+

ホーリーグレイル

+---------------------+
|       Header        |
+-----+--------+------+
| L   |  Main  |  R   |
| e   |Content | i    |
| f   |        | g    |
| t   |        | h    |
|     |        | t    |
+-----+--------+------+
|       Footer        |
+---------------------+

デザイン原則

視覚的階層

• 最も重要な要素を最も大きく、最もコントラストの高い状態にする
• サイズ、色、太さ、位置で視線を誘導する
• テキストが多い場合はFパターン、ランディングページではZパターンを使用する

余白

• 「空っぽ」の空間ではなく、ゆとりを生み出す空間です
• 関連する要素をまとめます
• リズムと流れを生み出します
• セクション間には最低でも1.5倍の間隔を設けます

整列

• すべての要素を何かに揃えます
• 左端を揃えます（LTR言語の場合）
• グリッドを使って一貫性を保ちます

近接

• 関連する項目は近くに配置します
• 関連しない項目は離して配置します
• 視覚的な関係性を生み出します

バランス

• 対称：フォーマルで安定感があります
• 非対称：躍動感があり、興味を引きます
• 放射状：中央に集まり、焦点が定まります

コントラスト

• サイズ、色、形、質感で表現します
• 注意を引きます
• 興味を生み出します
• スキャンしやすくします

ベストプラクティス

• モバイルファーストデザイン：小さい画面から始め、大きな画面向けに拡張します
• 一貫した間隔を使う：4pxまたは8pxを基本単位とするシステムに統一します
• 列のバリエーションを制限する：ブレークポイントが多すぎると、メンテナンスが困難になります
• ファーストビューを意識する：重要なコンテンツとCTAはファーストビュー内に配置しますが、詰め込みすぎないようにします
• 視覚的なアンカーを作る：視線を誘導する強い要素を配置します
• グリッドを使う：グリッドを崩す場合も、意図的に崩していることを把握します
• 実際のコンテンツでテストする：Lorem ipsumではレイアウトの問題が隠れてしまいます
• 読み取りパターンを考慮する：Fパターン、Zパターン、グーテンベルク・ダイアグラムを考慮します
• 余白を活用する：空間を恐れないでください。余白には大きな効果があります
• アスペクト比を維持する：画面が変わっても画像が歪まないようにします
• アクセシブルなフォーカスの流れ：論理的なタブ順序と明確なフォーカス状態を設定します
• 印刷用スタイル：該当する場合は、印刷レイアウトをテストします

グリッドシステム

12列グリッド

• 最も一般的
• 2、3、4、6で割り切れます
• ほとんどのレイアウトに柔軟に対応できます
• Bootstrap、Tailwindで使用されています

16列グリッド

• より細かな制御が可能です
• 複雑なダッシュボードに適しています
• 2、4、8で割り切れます

モジュラーグリッド

• 行と列の両方を使用します
• スイスデザインの伝統に基づいています
• エディトリアルや雑誌に最適です

ベースライングリッド

• 垂直方向のリズムを整えます
• テキストをベースラインに揃えます
• 調和を生み出します
• 8pxまたは4pxが一般的です

余白のスケール（8pxを基本単位とする）

0:   0px    (none)
1:   4px    (0.25rem) - tight
2:   8px    (0.5rem)  - base
3:   12px   (0.75rem)
4:   16px   (1rem)    - comfortable
5:   20px   (1.25rem)
6:   24px   (1.5rem)  - loose
8:   32px   (2rem)    - section spacing
10:  40px   (2.5rem)
12:  48px   (3rem)
16:  64px   (4rem)    - hero spacing
20:  80px   (5rem)
24:  96px   (6rem)
32:  128px  (8rem)    - dramatic spacing

レスポンシブブレークポイント

一般的なブレークポイント：

• xs：0px（基本のモバイル）
• sm：640px（大きめのモバイル）
• md：768px（タブレット）
• lg：1024px（小型デスクトップ）
• xl：1280px（デスクトップ）
• 2xl：1536px（大型デスクトップ）

コンテンツ優先のブレークポイント： 任意のデバイスサイズではなく、コンテンツが崩れる位置にブレークポイントを追加します。

成果物の形式

LAYOUT SPECIFICATION
Project: [Name]
Page: [Landing / Dashboard / Article]

STRUCTURE
[ASCII diagram of layout]

GRID SYSTEM
Columns: 12
Gutter: 24px (1.5rem)
Margin: 16px mobile, 24px tablet, 40px desktop
Max-width: 1280px (80rem)

SECTIONS
1. Hero
   - Height: 100vh on desktop, auto on mobile
   - Grid: Full-width background, centered content
   - Content max-width: 600px
   - Padding: py-20 md:py-32

2. Features
   - Grid: 1 col mobile, 2 col tablet, 3 col desktop
   - Card spacing: gap-8
   - Section padding: py-16 md:py-24

[... more sections ...]

SPACING SYSTEM
Base: 8px
Scale: [0, 0.5, 1, 1.5, 2, 3, 4, 6, 8, 12, 16, 20, 24, 32]
Section spacing: 64px (py-16)
Component spacing: 32px (py-8)

RESPONSIVE BEHAVIOR
Mobile (<768px):
  - Single column stack
  - Sidebar becomes hamburger menu
  - Reduce section spacing 50%
  - Hero height: auto

Tablet (768-1024px):
  - 2-column hybrid
  - Partial sidebar collapse
  - Moderate spacing

Desktop (>1024px):
  - Full multi-column
  - All content visible
  - Maximum spacing

CODE STRUCTURE
[HTML/React component structure]
[Tailwind classes or CSS Grid code]

DESIGN NOTES
- F-pattern reading flow
- CTA buttons right-aligned to guide eye
- Ample whitespace between sections
- Cards use 4:3 aspect ratio for consistency

ツールとの連携

• Tailwindを使ったレイアウトの実装には、ui-builderスキルを使用します
• 実際のブラウザーでレイアウトをテストするには、Playwrightを使用します
• レイアウトの参考例を探すには、WebSearchを使用します
• レイアウトのムードボードを作成するには、Midjourneyを使用します

よくある依頼

SaaSランディングページ：ヒーロー＋機能グリッド＋料金＋CTA
ブログ：中央のカラム＋サイドバー＋特集画像
ポートフォリオ：メイソンリーグリッド＋プロジェクト詳細ページ
ダッシュボード：サイドバーナビゲーション＋テーブル／チャートのグリッド
Eコマース：商品グリッド＋フィルター＋詳細ビュー
ドキュメント：サイドバーナビゲーション＋コンテンツ＋右サイドバーの目次