🎯 このガイドの目的
既存の「コーディングルール」「モバイル最適化」「画像最適化」を補完する、レスポンシブLP制作に特化した実践ガイドです。
デザイン判断、スペーシング、レイアウトの具体的な数値と判断基準を提供します。
1. ブレークポイント標準化
必須ブレークポイント
| ブレークポイント | デバイス | 用途 |
|---|---|---|
| デフォルト（1201px以上） | デスクトップ | PC表示 |
@media (max-width: 1200px) |
タブレット・小型PC | モバイルレイアウト切替 |
@media (max-width: 768px) |
タブレット縦・スマホ横 | スペーシング縮小 |
@media (max-width: 480px) |
スマホ縦 | 極小画面調整 |
プロジェクト固有ブレークポイント
- ヘッダーメニュー切替:
1135px（ロゴ+メニュー項目の実測値から決定） - 中間レイアウト:
1610px（カード2列表示等、必要に応じて）
重要: HTML Critical CSSとrenewal.cssで同じ値を使用すること。
2. スペーシング設計原則
基本単位（CSS変数化推奨）
| 変数名 | 値 | px換算 |
|---|---|---|
--space-xs | 0.5rem | 8px |
--space-sm | 0.75rem | 12px |
--space-md | 1rem | 16px |
--space-lg | 1.5rem | 24px |
--space-xl | 2rem | 32px |
--space-2xl | 2.5rem | 40px |
--space-3xl | 3rem | 48px |
レスポンシブスペーシングの法則
| 画面サイズ | padding-top | タイトル下 | カード間 | カードグリッド下 | 下部余白 |
|---|---|---|---|---|---|
| PC（1201px+） | 8rem | 2.5rem | 1rem | 1.5rem | - |
| タブレット（769-1200px） | 120px | 2.5rem | 1rem | 1.8rem | 40px |
| スマホ（768px以下） | 110px | 2rem | 0.75rem | 1.5rem | 40px |
ルール: 大→小で余白を縮小。重要要素（タイトル下、CTA前）は余白を確保。下部余白は必ず40px以上。
エディトリアル・タイポグラフィ（文字組み・改行）について
特有の行間（2.1〜）や文字間隔、およびスマホ表示での厳格な改行分離ルール（br禁止）については、「One Source of Truth」の原則に則り、以下のガイドに一元管理しています。
👉 📱 モバイル最適化ガイド（タイポグラフィ基準） を参照してください。
3. FOUC（一瞬の崩れ）対策
Critical CSS（HTML内）に含めるもの
✅ 含めるべきもの
- 基本リセット・CSS変数定義
- ヘッダー基本レイアウト
- ヒーローセクション基本構造（背景色、高さ、flex方向）
- 初期表示に必要な最小限のアニメーション
❌ 含めないもの
- コンポーネント固有のスタイル
- 詳細なデザイン（影、グラデーション等）
- メディアクエリ内の詳細スタイル
CSS読み込み戦略
メインCSSは通常読み込み（FOUC防止）:
<link rel="stylesheet" href="css/renewal.css?v=X.X" />
重要度が低いCSSのみ非同期:
<link rel="stylesheet" href="css/optional.css" media="print" onload="this.media='all'" />
4. レスポンシブカードレイアウト構成
グリッドテンプレート標準
PC: 3列
grid-template-columns: repeat(3, 1fr);
中間（1201-1610px）: 2列
@media (max-width: 1610px) { grid-template-columns: repeat(2, 1fr); }
タブレット・スマホ: 1列
@media (max-width: 1200px) { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
ルール: 3→2→1の段階的縮小。1列時はmax-widthで幅制限。
【厳禁】モバイルでの「Flex圧迫」と解決策
PC時の display: flex と width: 130px 等の固定数値をモバイルに持ち越すと、テキスト領域が極端に数ピクセルに押し込まれ、「1細2行」のような崩壊を起こします。
解決策（解放プロトコル）:
- カードレイアウトはモバイルで
flex-direction: column（縦積み） にして画像をフル幅バナー化する。 - ニュース等のリストはスマホ専用の
display: grid（上段にメタ情報、下段に画像とテキスト）で再設計する。
5. ヘッダーメニュー設計
項目数の目安
| デバイス | 項目数 | 備考 |
|---|---|---|
| PC | 5-7項目 + CTA | 画面幅に応じて調整 |
| モバイル | 制限なし | ハンバーガーメニュー内 |
必須要素
- ロゴ（左）
- ナビゲーション（中央）
- CTA（右端、目立つ色・LINE緑等）
- モバイルトグル（1135px以下）
ルール: 項目名は2-4文字が理想。ロゴとCTAの間隔は十分に確保。
6. ボタン・CTA設計
サイズガイドライン
| 種類 | padding | font-size | border-radius | max-width |
|---|---|---|---|---|
| プライマリCTA | 1.2rem 3rem | 1.25rem | 50px | 400px |
| セカンダリCTA | 0.75rem 1.6rem | 0.85rem | 50px | - |
⚠️ 重要: プライマリCTAは必ずmax-width設定！広い画面でボタンが伸びすぎるのを防止。
ホバー・インタラクション
- ホバー時:
transform: translateY(-2px)で軽く浮かす - アイコンとテキストの間隔:
gap: 4-8px
7. コード品質チェックリスト
必須チェック項目（目標: 90/100以上）
- ☐
!importantが0件 - ☐ ブレークポイントが統一されている
- ☐ HTMLにコンポーネントスタイルがない
- ☐ アニメーション定義が重複していない
- ☐ renewal.min.cssが同期されている
推奨チェック項目
- ☐ スペーシングが一貫している
- ☐ メディアクエリにコメントがある
- ☐ 未使用のCSSがない
8. コミットメッセージ規則
フォーマット
<type>(<scope>): <subject>
Type一覧:
feat: 新機能fix: バグ修正refactor: リファクタリングstyle: スタイル変更perf: パフォーマンス改善
9. アニメーション実装
配置ルール
| 場所 | 用途 | 例 |
|---|---|---|
| HTML（Critical CSS） | 初期表示用のみ | fadeInPride, scroll |
| renewal.css | その他すべて | fadeInTitle, shineText |
パフォーマンス
✅ 良い例（transform + opacity）:
animation: fadeIn 0.8s ease-out forwards;
❌ 避ける（width, height, left, top）:
レイアウト再計算が発生してパフォーマンス低下
ルール:
- transformとopacityのみ使用
- 0.8s以内の短いアニメーション
forwardsで状態維持
10. ファイル更新フロー
renewal.cssを編集Copy-Item -Force "css\renewal.css" "css\renewal.min.css"- git add/commit
ルール: .cssを編集したら必ず.min.cssに同期。画像はすべてWebP形式。
📊 これらのルールによる効果
- 🚀 開発速度: 30-50%向上
- 🎯 品質: 一貫して90点以上
- 🔧 保守性: 6ヶ月後も理解可能
- 📱 レスポンシブ: すべてのデバイスで最適
⭐ 最重要ルール TOP 3
- ブレークポイントは必ず統一
- スペーシングは計算された値を使用
- コミット前に必ず品質チェック