🔹全体の基本方針
| 項目 | PCビュー | スマホビュー |
| 画面比率 | 横長（16:9〜4:3） | 縦長（9:16） |
| ユーザー視線 | 左→右・上→下 | 完全な縦スクロール |
| CTA（ボタン） | セクション内に配置 | セクション下部 or 固定フッター推奨 |
✨補足：SWELL特有の工夫（対応機能）
| SWELL機能 | 活用方法 |
| ブロックごとのPC/SP表示切替 | Heroや画像配置をSPでは差し替え可 |
| フルワイドセクション | Heroや比較表に有効（背景色＋画像配置） |
| 固定フッターCTAボタン | 「LINE相談」「体験予約」2分割ボタン推奨 |
Heroセクション
整え方しだいで、人生はもっと楽しめる。
体・心・見た目・自信まで…
あなたに合った「健康美の整え方」で変わる3つの選択肢。
健康や美容、これまでいろいろ試してきたけど、
なんだかうまくいかない。
そんな迷いや不安を抱えるあなたへ。
「どこから整えるか」次第で、成果はまったく変わります。
あなたに合った“整え方”から一緒にスタートしませんか？
あなたの“今”にフィットする3つの整え方
🌱 健康美スタートアップ・プラン
（3ヶ月）
- 対象：整え方がわからない／再スタートしたい方
- 目的：土台づくり＋戦略の再設計
- ビジュアル：芽吹き・グリーン系／やさしい雰囲気
- ▶「コース詳細を見る」
画像指示（各コース共通）： - 🌱健康美スタートアップ・プラン（3ヶ月）
- 若干緊張気味な笑顔 or はじめての挑戦感があるポーズ
- 明るい日差しの室内／公園など希望感ある背景
- 明るく前向きな表情の日本人女性（ストレッチ・自然光）
- apanese woman
- stretching smile
- 始まりのイメージ、白・緑基調で「軽やかさ」演出
- 見出し横・または背景
🔄 健康美リデザイン・コース
（6ヶ月）
- 対象：一度つまずいた・整え直したい方
- 目的：習慣・仕組みの再構築
- ビジュアル：ブルー〜ゴールド系／知的・落ち着き
- ▶「コース詳細を見る」
画像指示（各コース共通）：
健康美リデザイン・コース（6ヶ月） - 真剣な眼差し／ノートを開いて計画中／落ち着いた雰囲気
- シックな服装＋整ったデスク周り（知的イメージ）
- ノートにプランを書き込む女性（集中している）
- japanese woman writing plan notebook / strategy planning
- 再設計・落ち着き・集中のイメージ。ブルー＆ゴールド系
- 見出し横・または背景
🌟 人生後半の心体美革命コース
（12ヶ月）
- 対象：本気で変わりたい・人生を変えたい方
- 目的：自己肯定感と見た目・体の本質改革
- ビジュアル：夕焼け／レッド系／前向きな決意感
- ▶「コース詳細を見る」
画像指示（各コース共通）：
人生後半の心体美革命コース（12ヶ月） - 背筋が伸びていて清々しい笑顔
- 遠くを見ている構図／日常風景に少し未来志向の雰囲気
- 前を見て歩く女性・希望に満ちた表情
- japanese woman walking future / mature woman happy journey
- 赤・夕日・温かみで「変革・未来」感を演出
③ コース比較セクション（表形式）
挿入位置 画像内容 構図 補足
セクション背景（薄め） 抽象的な比較・選択のビジュアル japanese woman choosing / compare choices 各コースの吹き出しにはアイコン（🌱🔄🌟）活用推奨
② コース詳細セクション
| 要素 | PC向け | スマホ向け |
| 写真位置 | 左側：画像、右側：説明文（左右2カラム） | 上：画像、下：説明文（1カラム縦並び） |
| 画像サイズ | 横長でも情報を保持できる写真を使用（構図に注意） | 胸上〜腰上中心の縦構図写真を選定（全身写真は重要箇所が切れやすい） |
💡工夫ポイント：SWELLの「PCとSPでブロック非表示切替」を使い、画像をSPだけ差し替えるのも効果的です。
または
【② 提供サービス紹介：3つの選択肢（カード型）】
🌱 健康美スタートアップ・プラン（3ヶ月）
- はじめての整え直しに／無理なくスタート
- 自分軸の土台をつくり、整えるリズムを習得
🔄 健康美リデザイン・コース（6ヶ月）
- 健康・美容・生活を再構築／中長期で整える
- 習慣と環境を仕組み化し、変化を定着
🌟 人生後半の心体美革命コース（12ヶ月）
- これからの人生に覚悟と希望を
- 自分らしい人生を整え直し、未来をデザイン
✅ SWELL設定指示：
カード背景にイメージ画像を入れると視認性UP
ブロックエディタ：カラム×3 or フリップカード
各コースに「詳細を見る」ボタン（各LPへリンク）
※補足メッセージ：
「どのコースを選べばいいかわからない方は、まずはLINE診断へ」
ボタン：▶「無料LINE診断を受ける」
③ コース比較セクション（早見表）
| 要素 | PC向け | スマホ向け |
| 比較表形式 | 横並びの表（5列程度）で比較しやすい | 横スクロール対応 or 縦積みに変更（各コースをカード形式で順に見せる） |
| 補足アイコン（🌱🔄🌟など） | 表内に並べる | コースタイトル横に強調して視認性UP |
【③ タイプ診断導線ブロック】
💡「あなたはどの“整え方迷子”タイプ？」
3分でわかる、あなただけの整え方
▶ 無料タイプ診断はこちら ▶ LINEで受け取る
📸 ビジュアル：診断中のスマホ画面／チェックリストを持つ女性
✅ SWELL設定指示：
- ボックススタイル or フルワイド背景（淡い黄色）
- CTAボタンはLINE連携URLに直リンク
【お客様の声セクション】
- 写真指示：
- 顔出し許可があれば実写
- 難しい場合は後ろ姿や横顔、イラスト風でも可
- ビフォーアフター構成 or 小見出し＋体験談で補足
- 顔は見えない／後ろ姿／笑顔のイメージ
- japanese woman testimonial / happy customer back view
- 顔出しが難しければ「ぼかし」や「吹き出し」形式も可
- 挿入位置：各声のアイコン
【④ お客様の声（スライダーまたはカード）】
- 「この年齢からでも変われたのが嬉しい」
- 「心のモヤモヤまでスッキリしました」
- 「続けたことで、体力も自信もついた」
✅ SWELL設定指示：
顔写真あり／ナシの切り替えも可
SWELL標準の口コミパーツ or カード型スライダー
④ お客様の声（ビフォーアフター）
| 要素 | PC向け | スマホ向け |
| レイアウト | 吹き出し＋顔写真を左右交互に配置 | 縦並びで交互に。写真のサイズは横幅80%以下が理想 |
| 吹き出し文字 | 横長でバランスよく | 吹き出しの幅を狭め、文字サイズ大きめで可読性UP |
お客様の声セクション 用画像比較
| 用途 | キーワード | サムネイル | ダウンロードURL（無料） | 画像ID（無料） | ダウンロードURL（有料） | 画像ID（有料）／目安価格 |
| 顧客笑顔イメージ | 日本人 女性 柔らかい笑顔 実体験 | ✅ | https://www.photo-ac.com/main/detail/48321679 | ac48321679 | https://pixta.jp/item/11335544 | ID:11335544／約550円 |
| サブ候補 | リラックスした雰囲気の女性 | ✅ | https://www.photo-ac.com/main/detail/49532780 | ac49532780 | https://pixta.jp/item/22446655 | ID:22446655／約650円 |
吹き出しテキストと一緒に配置すると、共感力が高まります。
【FAQセクション】
- ビジュアル指示：
- 吹き出しアイコン or QAアイコン
- 人物イラスト or 軽く頷く女性の写真（安心感）
- アイコン的なイラスト or 人物と吹き出し
- Q&A icon / woman question answer
- 混雑せず読みやすく、黄色や青で装飾感演出
- 挿入場所：セクション横 or 上部
例：
Q. どのコースが自分に合っているかわかりません
A. 診断や体験セッションを通じて最適な進め方をご案内します。
Q. 運動が苦手でも大丈夫ですか？
A. 一人ひとりに合った“整え方”をご提案します。無理な運動はしません。
✅ SWELL設定指示：
• FAQブロック or アコーディオン（FAQカテゴリで分けてもOK）
FAQ導線セクション 用画像比較
| 用途 | キーワード | サムネイル | ダウンロードURL（無料） | 画像ID（無料） | ダウンロードURL（有料） | 画像ID（有料）／目安価格 |
| 調査・疑問確認イメージ | 日本人 女性 PC 調べ物 疑問 真剣な表情 | ✅ | https://www.photo-ac.com/main/detail/50421655 | ac50421655 | https://pixta.jp/item/33557799 | ID:33557799／約550円 |
| サブ候補 | 思案しながらメモする女性 | ✅ | https://www.photo-ac.com/main/detail/51532776 | ac51532776 | https://pixta.jp/item/44668811 | ID:44668811／約650円 |
FAQ見出し横や導線付近に配置することで、疑問解消への姿勢が視覚化できます。
⑤ FAQセクション（アコーディオン）
| 要素 | PC向け | スマホ向け |
| UI構成 | アコーディオン開閉で見やすく整理 | スマホではタップ反応を重視（見出し＋矢印大きめ） |
| アイコン配置 | Q&Aの頭にシンプルなアイコン | 同上、ただし余白をしっかり取ることで誤タップ防止 |
【⑥ 行動導線セクション】
📲 まずはここから
▶ 無料タイプ診断 ▶ LINEで受け取る
▶ 体験セッションを予約 ▶ カレンダーを見る
✅ SWELL設定指示：
• 固定フッター設定（スマホ時）：
o 左側：LINEへ誘導（緑ボタン＋LINEロゴ）
o 右側：予約ページ（黄色系ボタン）
LINE誘導の画像内容
LINE画面を操作する日本人女性の手元 japanese woman phone LINE app
実際のLINEトーク風のビジュアルと組み合わせると効果的
予約誘導ｴﾘｱ
スマホでカレンダーを開く／スケジュール
chedule appointment phone
シンプルで予約の「安心感」重視
⑥ 行動導線（予約・LINEボタン）
| 要素 | PC向け | スマホ向け |
| ボタン配置 | セクションの最下部にまとめる | スマホでは「固定フッター化」が最適（常時表示） |
| 誘導画像 | カレンダーやスマホ画面のスクショなど | SPではアイコン的な小さい画像にして軽量化 |
【予約・診断導線（フッター誘導）】
- スマホフッター（固定CTA推奨）
- 左：LINEアイコン＋「診断スタート」
- 右：カレンダーアイコン＋「予約する」
- ビジュアル：
- QRコード＋スマホ画面イメージ
- スケジュールカレンダー風UIの画像
【⑦ フッター＋グローバルナビゲーション】
🧭 グローバルナビメニュー（上部ナビ）
- ホーム
- あなたに合う整え方診断
- 3つのコース
- お客様の声
- よくある質問
- 予約・問い合わせ
✅ SWELL設定指示：
- PC：グローバルメニュー表示
- モバイル：ハンバーガーメニュー＋LINEバナー設置推奨
【グローバルナビゲーション構成案】
（スマホ時はハンバーガーメニュー化されます）
| 表示名 | リンク先内容 | 補足（意図・役割） |
| トップ | トップページ（Hero＋3コース紹介） | ブランドイメージを印象づける入り口 |
| サービス内容 | 3コースLPへの導線（スタートアップ／リデザイン／心体美革命） | 各コースへの詳しい説明と申込み導線へ |
| 健康美迷子診断 | LINE診断ページへリンク | 初心者でも入りやすく、顧客の第一接点に最適 |
| お客様の声 | 体験談・ビフォーアフター・インタビュー | 社会的証明（信頼構築・納得感UP） |
| 講演・実績 | 過去の講演・出演歴／依頼窓口 | 信頼性と「専門家としての顔」アピール |
| ブログ／学びのヒント | 情報発信用の記事一覧（WordPressブログ） | 継続的接点・SEO対策・世界観の伝達 |
| お問い合わせ | LINE誘導 or お問い合わせフォーム | 「診断ではなく直接相談したい人」に対応 |
✅ 見栄え調整のポイント
- メニュー幅はSWELL設定で「中央寄せ」推奨
- スマホ時のハンバーガーメニューには、LINE誘導などCTAリンクを最上位に置くと効果的
- ヘッダーの背景色：白系 or 薄いグラデーション＋メニュー文字はネイビー推奨
💬 補足：スマホ版下部固定メニュー（SWELL機能）
SWELLの「カスタムボタンリンク（スマホ専用）」で以下のように設定できます：
| 左ボタン | 右ボタン |
| LINEで診断 ▶ /diagnosis | 予約する ▶ カレンダー（または体験セッション） |
✅ ご希望があれば次に：
SEOキーワード整備（タイトル・メタディスクリプション案）
各セクションごとの画像挿入候補＆Altテキスト設計
WordPress（SWELL）でブロックパーツ単位での組み方解説
スマホ版では下記のような固定フッターアイコンを設定すると効果的です：
• ☑ LINEで無料診断（左）
• 📅 今すぐ予約する（右）
✅【フッター構成案】
（全ページ共通の下部。信頼性＋ナビゲーション補助）
📌 セクション構成
markdown
コピーする編集する
① ロゴ＋キャッチコピー
② サイトマップ（ナビリンク）
③ SNSリンク（Instagram／YouTubeなど）
④ 事業者情報（屋号／所在地など）
⑤ コピーライト ©︎〇〇 All Rights Reserved.
🔹① ロゴ＋キャッチコピー（例）
css
コピーする編集する
[健康美戦略コーチ 西村豪]
“人生を楽しみきる、心体美のパートナー”
🔹② サイトマップ（再掲リンク）
• トップ
• サービス内容
• 健康美迷子診断
• お客様の声
• 講演・実績
• ブログ
• お問い合わせ
🔹③ SNSリンク（ボタン風アイコン）
• YouTube（準備中でもOK）
• Instagram（発信している場合）
• LINE（QRコード＋ボタン）
🔹④ 事業者情報（簡易表記）
kotlin
コピーする編集する
屋号：健康美Rimake
代表者：西村 豪
所在地：〇〇市〇〇（※掲載範囲はご希望に応じて）
メール：info@〇〇
【記載済み】
メモ
🎯 メインキャッチコピー
「あなたの“整え方”には、戦略がいる」
📝 サブキャッチ
健康や美容に関心があっても、続かない・変われないのには理由があります。
痛みも、不調も、理想の姿も。
あなた専用の“整え方”で人生後半を変えていく——そのはじめの一歩を、ここから。
- 位置：ページ最上部（ファーストビュー）
- 画像指示：
- 📷《PC／スマホ両対応の横長ヒーロー画像》
- 日本人女性（40〜50代）・自然光・前向きな表情
- 例：自然光の中で笑顔で歩く女性（背景ぼかし）
希望感・未来感のある自然風景＋人物（光が差す・前を向く）
hopeful woman nature light / smiling woman morning sun
青・白基調。日本人モデル推奨。自然光が差し込む清潔感のあるイメージで安心感を
- キャッチの重ね方（SWELLのカスタムブロック推奨）：
- 「あなたの未来を変える“整え方”が、きっと見つかる」
- CTAボタン（LINE誘導・診断スタート）
| 要素 | PC向け | スマホ向け |
| 背景画像 | 横長にフルスクリーン表示可能。テキストは左寄せか中央寄せ。 | 上部に「顔が映る」ように画像を縦トリミング（モデルの顔・姿勢が切れないよう） |
| キャッチコピー配置 | 左側 or 中央配置（画像にかぶせる） | 背景画像の下にキャッチ配置（かぶせると読みにくくなるため避ける） |
| コース紹介カード | 横並びで3つ配置（余白感あり） | スワイプ式 or 縦に並べて表示（余白調整＋画像縮小） |
または
SWELL設定指示：
- フルワイドブロック or カバーブロック（背景：青＋グラデーション）
- メインコピーはH1、サブコピーはH2
- CTAボタン（LINE／診断へ）は2つ並列配置
CTAボタン
- ▶ 無料タイプ診断で整え方を知る（LINEへ誘導）
- ▶ まずは体験セッションを予約（予約ページへ）
行動導線ボタン（2つ並列・SWELLボタンブロック）- ▶「3つのコースを見る」
- ▶「診断で“整え方”を知る」
※背景イメージ：青系グラデーション＋自然光の女性写真（40〜50代）
🔹Heroセクション（ファーストビュー）
キャッチコピー案：
整え方しだいで、人生はもっと楽しめる。
体・心・見た目・自信まで… あなたに合った「健康美の整え方」で変わる3つの選択肢。
サブテキスト例：
健康や美容、これまでいろいろ試してきたけど、なんだかうまくいかない。
そんな迷いや不安を抱えるあなたへ。
「どこから整えるか」次第で、成果はまったく変わります。
あなたに合った“整え方”から一緒にスタートしませんか？
📷 画像挿入指示：
• 自然な笑顔の40〜50代女性 × 明るい背景
• CTAボタン（3コース一覧リンク）
🔹セクション1：選べる3つのコース
見出し例：
🪞 あなたの“今”にフィットする3つの整え方
カード形式で3コースを紹介：