WORKS：HARU整体院（Landing Page Design & Branding）

本案件では、症状特化型（肩こり・腰痛・骨盤矯正）の整体院を対象とした ランディングページ制作を担当。単なる情報掲載ではなく、 「本当に良くなるのか？」というユーザーの不安に、 訪問直後から段階的に答えていく“心理導線設計型”のLPとして構築しています。

ファーストビューでは地域名と症状（横浜・肩こり・腰痛など）を明確に打ち出し、 共感 → 差別化 → 安心 → 行動 の順にコンテンツを配置。 Google のE-E-A-T（経験・専門性・権威性・信頼性）を意識した構成により、 医療・整体系LPに求められる検索評価も同時に高める設計としています。

また、CTA（予約ボタン）はLINE・Web・電話の3導線を用意し、 「今すぐ相談したい層」から「まずはLINEで気軽に」という層まで 取りこぼさない予約動線を設計しています。

［担当・技術］

• 担当範囲：コンセプトワーク / 配色・タイポグラフィ設計 / UI・UXデザイン / WordPress実装 / SEO設計
• 使用技術：HTML5, CSS3, JavaScript, WordPress（Astra + Elementor）, Photoshop ,Illustrator

全工程を可視化した緻密なスケジュール管理を実施。

• 総計：46時間 / 全8ブロック構成（約6営業日想定）
• 構成設計：8時間
• 配色・タイポグラフィ設計：4時間
• 素材選定・画像調整（施術風景・院内写真）：6時間
• コーディング（HTML/CSS/JS実装）：8時間
• WordPress実装（Elementor）：8時間
• SEO対策：4時間
• レスポンシブ対応：8時間

※レスポンシブ対応（ブレイクポイント 768px / 検証含む）

① 配色：セージグリーン × 清潔感ホワイト

• メインカラー / Main（#5E9F88）
  「健康・信頼・落ち着き」を象徴するセージグリーン。ヘッダーや見出しの軸色。
• ベース / base（#FFFFFF）
  セクション背景に使用し、清潔感と柔らかさを演出。
• アクセント / Accent（#C98B6A）
  料金の強調表示など、視線を集めたい箇所に限定使用するテラコッタ色。
• CTAカラー / Button（#43B26D）
  「安心して押せる緑」として予約ボタンに採用。成約率を最優先した色設計。
• 見出し / Heading（#333333）
  黒をすこしやわらかくし、専門性・信頼感を強調。
• 本文 / Text（#454F5E）
  可読性を最優先した基本テキストカラー。

② タイポグラフィ(文字の見せ方)：信頼感と読みやすさの両立

• 見出し・本文（Noto Sans JP、Shippori Mincho）
  情報伝達を最優先しつつ、圧迫感のない可読性を確保。
  一部、Shippori Minchoを使用し和文の明朝体で、医療・整体系に求められる信頼感と落ち着きを演出。

装飾を増やすのではなく、色と余白の使い分けで 「安心して読み進められる情報設計」を優先しています。

整体院LPの訪問者は、ほぼ次の順番で不安を抱えていると考えます。 「本当に良くなるのか？」→「信頼できる院か？」→「いくらかかるのか？」→ 「通える場所か？」→「予約しても大丈夫か？」。 この心理の流れを妨げないよう、ページ構成をそのまま導線として設計しています。

• 【共感】FV〜悩み共感：地域名＋症状を明示し「これ私のことだ」と感じさせる
• 【差別化】選ばれる理由：検査・オーダーメイド施術・国家資格を根拠に信頼を構築
• 【安心】施術の流れ：5ステップで初来院の不安を解消
• 【証明】お客様の声：年代・症状を明記した口コミで社会的証明を強化
• 【行動】料金〜予約CTA：初回特典を提示し、LINE・Web・電話の3導線で後押し

本サイトは、整体院LPとして「装飾ではなく導線」を設計思想の中心に据えています。 症状を絞り込むことで訴求メッセージを明確化し、 広告費対効果の高いページになるよう構成しています。

写真素材は 院内の清潔感や施術者の人柄が伝わることを重視しました。

スマホでの閲覧時にお問い合わせが常に視界に入るよう、 検証しながら実装しています。

SEO面では、SEOの基本設定（タイトル・メタディスクリプション・見出し構成など）は実施しております。 なお、ポートフォリオとして公開しているため、検索エンジンにはインデックスされない設定としております。

今後は表示速度のさらなる最適化（画像のWebP化）や、 SEO施策、導線改善を行うことで、 集客力・成約率のさらなる向上が期待できます。