Facebook フィットネスジム LP | 架空案件
Logo

フィットネスジム LP | 架空案件

クレジット
Avatar
WEBデザイナー
企画
制作ノート
作品ノート

制作目的

フィットネスジムの無料見学・体験予約の獲得を目的としたLPを制作しました。

ペルソナ設定

·        年齢:62歳

·        性別:男性

·        職業:自営業

·        家族構成:妻、独立した息子・娘

·        居住地:愛知県豊橋市

·        趣味:ゴルフ

背景・課題

1年前に脳梗塞を発症し、また過去にも大病を経験したことから、 「リハビリとしての運動を本気で始めたい」と考えている層を想定しました。 体力や健康面への不安を抱えつつも、安心して通える環境を重視する人物像です。

制作のポイント(余白・フォント・色調)

フォント設計

可読性と信頼感を重視し、汎用性の高い Notoファミリー を採用しました。

·        日本語:Noto Serif JP(落ち着き・安心感)

·        英語:Noto Sans(モダンで視認性の高い印象)

カラーデザイン

·        メインカラー: 落ち着いたスポーティさを表現する、グレイがかったブルー

·        サブカラー: メインカラーとホワイトの中間となる、ブルーがかったグレイ

·        アクセントカラー: メインカラーの三相色にあたる、落ち着いたグリーンとエンジ → CTAボタンに使用し、行動喚起を明確化

·        文字色:ブラック

 

全体として「安心感」「信頼感」「大人向け」を意識した配色としました。

 

構成・情報設計

1.    ヘッダー 電話番号を常時表示。スマートフォン版でもハンバーガーメニューは使用せず、 視認性の高いボタン配置で即時行動を促しました。

 

2.    ファーストビュー 視線導線を考慮し、左にテキスト、右にトレーナーと利用者の写真を配置。 下部にはジムの特徴を端的に伝えるジョンソンボックスを設置。

 

3.    CTA 完全会員制による人数制限をアクセントカラーで強調し、希少性を訴求。

 

4.    共感パート ペルソナの悩みに直結したメッセージを配置。 明度を抑えた写真を使用し、落ち着いたトーンで共感を促しました。

 

5.    コンセプト ペルソナの関心に応えるジムのコンセプトを、日本語・英語のキャッチフレーズとともに表現。

 

6.    選ばれる理由 3つの理由を、短く分かりやすい説明文と視認性の高いナンバリング・ラベリングで整理。

 

7.    トレーナー紹介 架空LPのためフリー素材を使用。 実案件では、資格や経歴だけでなく「人柄」が伝わる文章と写真を重視すべきと考えています。

 

8.    店舗紹介 入会時の不安要素になりやすいシャワールームについて言及。

 

9.    料金プラン 詳細な料金説明は避け、簡潔にまとめ、行動を促すボタンを配置。

 

10. お客様の声 実際の利用者の声と写真を使用する想定。 タイトルで内容を要約し、文章量に差が出ないよう配慮しました。

 

11. こんな方におすすめ ペルソナに直接当てはまる具体例を提示。

 

12. よくある質問 簡素な一問一答ではなく、不安に寄り添う丁寧な回答を用意。

 

13. 体験の流れ 無料見学・体験の内容を、簡潔な文章とビジュアルでイメージしやすく構成。

 

14. CTA 電話受付時間などの基本情報を明記。

 

15. フッター 会社名・住所・電話番号などの基本情報を掲載。

 

 

使用ツール

·        デザインカンプ:Figma

·        サイト制作:WordPress + Elementor

 

 

苦心した点

WordPress Elementorで共感パートの画像の形を平行四辺形にする方法を探した。 同じことをするやり方はWordPressのカスタマイズなど大きく3つあり、自分の場合はElementor ProのCSS Transformという機能を使った。

シェア
atushi_i@Webdesignの他の作品