ステップ3 / デザイン方向性
Airbnb 的ポップ × プロフェッショナル
Tailwind ベースでゼロから構築。コーラル系の主役色 + 暖色の余白で「親しみやすさ」を、見出しの強さと数字の精度で「信頼感」を担保します。
shadow は原則使わないモバイル / タブレット ファーストタッチターゲット ≥ 44pxAIで生成した印象を残さない
ムード（参照）
- Airbnb: 大きな角丸（rounded-2xl/3xl）、コーラル主役、写真主導、温かい余白
- ivry.jp: 業界ごとに色を変えたアイコン、明快なグリッド、CTAの一貫性
- eyday らしさ: 「儲かる商いをふやす」 — クラフト感、商店街の活気、人の手触り
トークン設計の原則
- ・Tailwind v4 の
@themeで CSS 変数化 - ・カラーは hue 軸（brand / accent / mint / sky / ink / cream）で命名、50–900 のスケール
- ・角丸はやや大きめ: card は
rounded-2xl、Hero blob はrounded-[2.5rem] - ・shadow は使わない — 深度は
border/ 背景コントラスト / 余白で表現 - ・余白は
py-20 md:py-28をセクション基準
カラーパレット（案）
brand-50
#FFF1EC
brand-100
#FFE0D2
brand-300
#FF9A7A
brand-500
#FF5A3C
primary (Airbnb-coral)
brand-700
#C13A20
accent-300
#FFD66B
sunny accent
accent-500
#F7B500
mint-300
#7BD4B2
mint-500
#19B786
success/secondary
sky-300
#9DD6FF
sky-500
#2EA8FF
ink-900
#1B1815
warm black
ink-500
#6E665D
cream-50
#FFFAF3
page bg
cream-100
#FFF3E3
主役: brand-500（Airbnb 風コーラル） / 補助: accent-300（陽射しイエロー） / 信頼: mint-500 / リンク: sky-500 / 黒: ink-900（暖色寄せの黒）
タイポグラフィ
display / 4xl–6xl / 900
店舗ブランドを、まるごと管理。
h2 / 2xl–3xl / 800
単発の施策ではなく、運用へ。
body / base / 400
Google マップ、口コミ、ChatGPT や Gemini などの AI 検索。店舗の「見つけられ方」を一つの戦略で運用代行します。
label / xs / 600 / uppercase
Store Brand Management
和文: Noto Sans JP（400/500/700/900）/ 英文: Inter（400/600/800）/ ラベル: Inter mono
コンポーネント原型
すべて shadow なし。深度は border・背景・色で表現。
✨
Industry Card
クリニック
AI 検索で「指名される医院」へ。新規患者の流入を構造から作ります。
この業界の事例を見る →
Buttons
Metric
12 業界
対応業界 — 規制や季節性まで踏まえた運用ノウハウ
Chips / Tags
クリニック歯科美容・エステ飲食サロン整体
レスポンシブ設計（モバイル / タブレット ファースト）
ユーザーの大半がスマホ・タブレットです。デザインはモバイル幅から組み、PC は最後の調整として扱います。
ブレークポイント運用（細粒度）
| prefix | 幅 | 対象デバイス | 代表機種 | この幅で切り替えるもの |
|---|---|---|---|---|
| xs (default) | 320 〜 374 | 📱 ミニスマホ | iPhone SE (375 はギリ含む) / 小型 Android | 基準サイズ。px-4 / text-sm補助 / Hero縦積み |
| (default) | 375 〜 413 | 📱 標準スマホ縦 | iPhone 14/15, Pixel 8 | 本文 16px / 主要CTA 100% width |
| (default) | 414 〜 539 | 📱 大型スマホ縦 | iPhone Pro Max / Pixel XL | TrustBar 2col 維持 / 余白を増やす |
| sm: (640) | 640 〜 767 | 📱 スマホ横 / phablet 横 | iPhone 横向き / Galaxy Fold 開 | Problem 2col / TrustBar 4col / Process 2col |
| md: (768) | 768 〜 1023 | 📲 タブレット縦 | iPad mini / iPad 9.7 / iPad Pro 11 縦 | Hero 横並び / Why Now 3col / px-6→px-8 |
| lg: (1024) | 1024 〜 1279 | 💻 タブレット横 / 小型ノートPC | iPad Pro 11 横 / MacBook Air 13 (一部) | ナビ横展開 / Industries 3col / Pricing 3col / Process 横5 |
| xl: (1280) | 1280 〜 1535 | 💻 標準ノートPC | MacBook Pro 14 / 一般ノート | Industries 4col / コンテナ max-w-6xl / display最大級 |
| 2xl: (1536) | 1536 〜 | 🖥 大型ディスプレイ | iMac / 27"+ モニタ | これ以上は余白で受ける（コンテナを広げない） |
原則: モバイル設計後、sm → md → lg → xl → 2xl の順に必要な箇所だけ上書き。すべての BP を埋める必要はないが、境界値で見た目が崩れないか必ず検証。
モバイルでの原則
- ・タッチターゲット ≥ 44 × 44px（ボタン・リンク・タブ・FAQ開閉）
- ・本文 16px 以上（自動ズーム防止 / 可読性）
- ・フォーム入力は inputmode + 適切な type（電話:
tel、メール:email、数値:numeric） - ・下部固定 CTA バー（無料相談 + 資料DL の2分割）
- ・横スクロール完全禁止（
overflow-x-hidden+ 長い英単語にbreak-words） - ・1カラム前提 / 折り返し前提のレイアウト
- ・余白は控えめ: モバイル
py-12、md以上md:py-20 lg:py-28 - ・画像は最大幅 100% +
aspect-ratioでレイアウトシフト防止
タブレットでの原則
- ・2カラム化の境界は md（768px） から
- ・Industries グリッド: モバイル2 → タブレット2 → PC 3〜4列
- ・Hero: モバイル縦積み → md で横並び（テキスト3:ビジュアル2）
- ・ナビ: lg まではハンバーガー、lg 以上で横展開
- ・Pricing カード: モバイル縦スタック → タブレットでも縦推奨（比較しやすさ優先）
- ・FAQ: 常にアコーディオン1カラム（タブレットでも縦長）
- ・横向き対応（iPad 横）: Hero 高さを viewport 依存にしない
- ・safe-area-inset（ノッチ・ホームバー）対応
主要グリッドのレスポンシブ規則（細粒度）
全 5 ブレークポイントで挙動を定義。「→」は前段から変化なしを意味します。
| セクション | 📱 base | sm 640 | md 768 | lg 1024 | xl 1280 | 2xl 1536 |
|---|---|---|---|---|---|---|
| Hero | 縦積み | → | 2col 3:2 | → | → | → |
| 業界チップ | flex wrap | → | → | → | → | → |
| TrustBar (4枚) | 2col | 4col | → | → | → | → |
| Problem (6枚) | 1col | 2col | → | 3col | → | → |
| Solution 図解 | 縦積み | → | 2col | → | → | → |
| Why Now (3枚) | 1col | 2col | 3col | → | → | → |
| Services タブ | 横スクロール | → | → | 横並び | → | → |
| Services 機能リスト | 1col | 2col | → | 3col | → | → |
| Industries (12) | 2col | → | 3col | → | 4col | → |
| Cases (3枚) | 横スワイプ | → | → | 3col | → | → |
| Founder | 縦積み | → | 2col (写真1:文2) | → | → | → |
| Pricing (3プラン) | 縦スタック | → | → | 3col | → | → |
| Process (5stp) | 縦タイムライン | 2col | → | 横5col | → | → |
| FAQ | 1col | → | → | → | → | → |
| CTA Form | 縦積み | → | → | 2col 1:1 | → | → |
| Footer | 1col | 2col | → | 4col | → | → |
| グローバルナビ | ≡ ハンバーガー | → | → | 横展開 | → | → |
| 固定下部CTAバー | 表示 | → | → | 非表示 | → | → |
| コンテナ幅 | px-4 | → | max-w-3xl px-6 | max-w-5xl px-8 | max-w-6xl | →（広げない） |
| セクション余白 | py-12 | py-14 | py-20 | py-24 | py-28 | → |
流体タイポ（fluid typography）
ブレークポイント間のジャンプを避けるため、Hero など主要見出しは clamp() でなめらかに変化。離散ステップと併用。
| 用途 | 最小 (320px) | 最大 (1280px+) | clamp() 例 |
|---|---|---|---|
| Hero H1 | 28px | 64px | clamp(1.75rem, 1rem + 4vw, 4rem) |
| セクション H2 | 22px | 40px | clamp(1.375rem, 0.9rem + 2.2vw, 2.5rem) |
| カード見出し | 16px | 20px | clamp(1rem, 0.9rem + 0.4vw, 1.25rem) |
| 本文 | 15px | 17px | clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem) |
| セクション余白 | 48px | 112px | clamp(3rem, 1rem + 8vw, 7rem) |
コンテナクエリ（@container）の活用
親要素のサイズに応じて子の挙動を変えるパターンを、再利用カードで採用。グローバルなブレークポイントに依存しないため、グリッド列数が変わっても破綻しません。
対象
業界カード
カラム数で内部レイアウトを切替（コンパクト/詳細）
@container (min-width: 280px)対象
Pricing カード
単独配置時は横、3並びの時は縦
@container (min-width: 520px)対象
事例カード
Before/After を縦並びと横並びで切替
@container (min-width: 360px)実装時の Tailwind パターン
セクション余白（5段階）
py-12 sm:py-14 md:py-20 lg:py-24 xl:py-28コンテナ（段階拡張）
mx-auto max-w-3xl md:max-w-5xl xl:max-w-6xl px-4 sm:px-6 md:px-8本文（fluid 推奨）
text-[clamp(0.9375rem,0.88rem+0.25vw,1.0625rem)] leading-relaxedH1（fluid）
text-[clamp(1.75rem,1rem+4vw,4rem)] font-black tracking-tightボタン（タッチ44px+）
min-h-[44px] px-6 py-3 rounded-fullグリッド（5段階）
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4 md:gap-6下部固定 CTA（safe-area）
fixed inset-x-0 bottom-0 lg:hidden pb-[env(safe-area-inset-bottom)]Hero 高さ（svh/dvh）
min-h-[100svh] lg:min-h-[80dvh]画像
w-full aspect-[4/3] object-cover (next/image sizes=)flex 子の溢れ防止
min-w-0 break-wordsコンテナクエリ
@container ... @[280px]:grid-cols-2ナビ切替
hidden lg:flex / lg:hidden (ハンバーガー)検証マトリクス（必須 / 推奨）
機種だけでなく「境界値」と「向き」「文字サイズ拡大」「OS UI のオフセット」も検証対象に。
必須（境界値含む）
- ・320 × 568 — Galaxy Fold 閉 / 最小
- ・375 × 667 — iPhone SE 2/3
- ・390 × 844 — iPhone 14/15
- ・414 × 896 — iPhone 11 / XR
- ・430 × 932 — iPhone 15 Pro Max
- ・639 / 640 — sm 境界
- ・767 / 768 — md 境界（iPad mini 縦）
- ・834 × 1194 — iPad Pro 11 縦
- ・1023 / 1024 — lg 境界
- ・1279 / 1280 — xl 境界
- ・1440 / 1920 — ノートPC / FHD
状態別チェック
- ・横向き — iPhone / iPad の Hero高さが意図通り
- ・キーボード表示時 — フォーム送信ボタンが隠れない
- ・ノッチ / ダイナミックアイランド — Hero上端
- ・ホームインジケーター — 固定CTAバーが被らない（safe-area）
- ・テキスト 200% 拡大（WCAG）でも破綻しない
- ・ダークモード時の背景・コントラスト（採用しない場合は明示）
- ・タッチターゲット可視化（Chrome DevTools → Inspect → タッチ）
- ・スクロール途中で固定ヘッダ・固定CTAバーが重ならない
- ・hover が効かないタッチデバイスで CTA が認識可能か
- ・低速回線（Slow 3G）でも初期表示が崩れないか
よくある落とし穴
- ・100vh はモバイルで誤動作 →
100svh / 100dvh - ・position: fixed + iOS Safari の URL バー伸縮ズレ
- ・横スクロール: 長い英単語 / 大画像 / margin 漏れに注意
- ・iPad 横 = lg → ナビ展開で CTA に被らないか
- ・Hero 画像: モバイルで重い高解像度を読まない（srcset / next/image）
- ・font-size < 16px の input → iOS で自動ズーム
- ・tap-highlight:
-webkit-tap-highlight-color - ・safe-area-inset-bottom: 固定CTAバーは
pb-[env(safe-area-inset-bottom)] - ・aspect-ratio 未指定 → 画像読み込み中の CLS
- ・min-width: 0: flex 子の溢れ防止に必須
shadow なしで「深度」を作る手段
- ・border:
border border-neutral-200をカード基本に - ・背景コントラスト: 白カード × cream-50 セクション / cream-100 セクション × 白カード
- ・色付きborder:
border-[#FFC4A8]など主役色の薄い縁 - ・2 トーン: 上半身白 / 下半身 cream の分割で立体感
- ・太字 + 大角丸:
border-2 rounded-3xlで輪郭強調 - ・余白: 周囲に大きめのpaddingで「浮かせない代わりに浮かせる」
- ・hover 時のみ微 translate:
hover:-translate-y-0.5で触れる軽さ - ・分割線:
divide-y divide-neutral-200でリストを構造化
装飾・ポップ要素
- ・大角丸（
rounded-2xl / 3xl）を主役に - ・カラーアイコン背景（業界ごとに違うパステル）
- ・blob / 楕円のソフト形状を Hero 背景に
- ・手書き風アンダーライン（SVG / utilityで実装）
- ・絵文字や小さなイラストをアクセントに（過剰にしない）
- ・写真は人 + 店舗のリアル感（Unsplash 等）
- ・スクロール時の fade-in-up（控えめ）
- ・hover で微 translate（持ち上がる感じ。shadowは出さない）
「AI が作った感じ」を消すための指針
生成 AI で作った印象は、テンプレ的な構図・抽象的な単語・均質な装飾から滲み出ます。「人間が手で書き、手で組んだように見えるか」を全工程で問います。
コピーで避けること
- ・「〜を実現します」「〜を最適化」「シナジー」「DX」など抽象語の連発
- ・「3つの〜」「4つの強み」のような整いすぎた箱書き
- ・形容詞だけで成り立つ文（「革新的な」「強力な」「最先端の」）
- ・主語のない「貢献します」型
- ・全文 です・ます調で律儀すぎる（時に体言止め・倒置で抜く）
- ・絵文字を機能のアイコン代わりに使う 🚀✨📈
- ・「お客様の声」風の同じ文体・同じ褒め方
- ・「貴社」「弊社」を多用
- ・チェックリスト ✓ の機能羅列
コピーでやること
- ・具体名詞: 「Googleマップ」「ChatGPT」「Perplexity」と固有名詞で書く
- ・数字 + 期間 + 業界のセットで書く（「美容室3店舗・6ヶ月で+218件」）
- ・体験から書く: 「営業電話はしません。返信もメールだけです。」
- ・一人称で書く: 「私たちは」「代表の◯◯が」
- ・断定を減らす: 「〜だと考えています」「〜になる場合があります」
- ・短文 + 長文の混在でリズムを作る
- ・句読点の打ち方を一定にしない（読点で間を作る）
- ・失敗・限界も書く（「効果が出るまで3〜6ヶ月かかります」）
ビジュアルで避けること
- ・同サイズ・同色のカードがズラッと整列（情報が嘘っぽく見える）
- ・すべて中央揃えの Hero（ジェネリック SaaS LP の典型）
- ・ストック感の強い 3D アイコン・ジェネリックなイラスト素材
- ・パステル一色塗りカードの量産（業界カードでは色を散らす）
- ・数字をやたら大きく見せる定型（「+218%」だけの巨大表示）
- ・等間隔グリッドの繰り返し（リズムを変える / オフセットを入れる）
- ・絵文字をビジュアルの主役にする（要素として弱い）
- ・滑らかすぎるグラデ + 完全な左右対称
- ・テキスト over 画像でコントラスト不足のヒーロー
ビジュアルでやること
- ・写真を主役に（人 / 店舗 / 街のリアル感）
- ・不揃いの並び（カードサイズや並び順を崩す masonry / bento）
- ・手書き風アンダーライン / 矢印を SVG で 1〜2箇所
- ・カラーアイコンは業界ごとに色を変える（ivry 流）
- ・文字組: 改行位置を意図的に調整（
<br className="hidden md:inline"/>） - ・左揃え基調。中央揃えは Hero と CTA 周辺だけ
- ・余白の不均等: セクション間を均等にしない
- ・細部の手作り: アンダーライン、ステッカー風タグ、注釈バッジ
❌ AI っぽいコピー
革新的なAI技術を活用し、お客様のビジネスを最適化します。3つの強みで、貴社のDXを強力にサポート。
⭕ 手で書いたコピー
Googleマップで上位に行く、ChatGPTで店名が出てくる、口コミに丁寧に返事をする。
— 当たり前のことを、当たり前に続けられる体制を作ります。
「手作り感」のディテール候補
- ・キーワードに 手書き風アンダーライン（SVG path）
- ・タグを 少し回転（
rotate-[-1.5deg]）してステッカー感 - ・数字バッジに円形の手書き枠線（実線でない）
- ・Hero に blob 形状の暖色（楕円じゃない）
- ・カード一部に マーカー風ハイライト
- ・脚注に 小さな手書き矢印 ↘
- ・写真の角を 少しランダムに角丸（rounded-tr-[2rem] rounded-bl-[2.5rem]）
- ・業界カードの背景色を 12 種類用意（テンプレ感を消す）
やらないこと
- ・shadow（box-shadow）を多用しない — フラット基調を保つ
- ・テンプレ感の出る整いすぎたグリッド（崩しを入れる）
- ・絵文字・チェックマーク連発（AI 生成感の最たる例）
- ・「3つの〜」「4つの〜」のような枠ありき構成
- ・すべて中央揃えの Hero（左揃え基調で）
- ・派手すぎるグラデや虹色（チープに見える）
- ・ストック感の強い 3D アイコン（ジェネリック）
- ・過剰なアニメ（プロ感を損なう）
- ・「だ・である調」の強い断定文 / 形容詞だけの空コピー