グリッドシステム

グリッド設定: 12カラム、ガター24px、マージン左右48px、最大幅1200px

レイアウト設計:

• ヘッダー: 12カラム幅（全幅）。ロゴ左寄せ、ナビ右寄せ
• メインビジュアル: 8カラム幅。大きな記事画像＋見出し
• サイドバー: 4カラム幅。人気記事ランキング
• 記事一覧: 4カラム×3列。各カードが4カラム幅

レスポンシブ変換:

• タブレット: メインビジュアル8カラム全幅、サイドバー下に移動。記事一覧は4カラム×2列
• モバイル: すべて4カラム全幅の1列。縦に積み重ね

同じコンテンツがどの画面でもグリッドに沿って整然と表示。デザイン制作時間が従来比30%短縮された。

課題: ダッシュボード画面でデザイナー3名がそれぞれ異なる余白を使用。同じ画面内で12px、15px、20px、18pxの余白が混在し「なんか整っていない」印象。

改善: 8pxグリッドを導入。すべての余白を8の倍数に制限。

• コンポーネント内パディング: 8px / 16px
• カード間のガター: 16px / 24px
• セクション間: 32px / 48px

結果: デザイナー間の余白のばらつきがゼロに。ユーザビリティテストで「整っている」「見やすい」の評価が48%から82%に上昇した。

課題: 50ページのECサイト。ページごとにレイアウトが異なり、新ページ追加のたびにゼロから設計。1ページの制作に平均2日。

改善: 12カラムグリッド＋5つのレイアウトテンプレートを定義。

• テンプレートA: 全幅（ランディングページ用）
• テンプレートB: 8+4（商品一覧＋サイドフィルター）
• テンプレートC: 6+6（比較ページ）
• テンプレートD: 12（記事・ブログ用）
• テンプレートE: 3+6+3（商品詳細＋サイドバー×2）

新ページの制作時間が平均2日から0.8日に短縮。50ページ全体の統一感が格段に向上した。