WEB DESIGN
Mellow Body | パーソナルジム 新規サイト制作
※架空のパーソナルジムを想定した自主制作事例です。
「上野・御徒町エリアに新しくオープンする、女性向けの完全個室パーソナルジム」という想定で、市場調査・ターゲット設計・ワイヤーフレーム・デザイン・Studioでのコーディング実装までを、すべて一人で手がけました。
担当範囲｜使用ツール
担当範囲
市場調査・ディレクション・Webデザイン・Studioでのコーディング実装（全4ページ）／構成：自身で設計
使用ツール
Figma・Studio
TARGET & CHALLENGE
ターゲットと課題
ターゲット
・26〜35歳の女性、上野・御徒町エリア在住または勤務
・デスクワーク中心の会社員・フリーランスで、肩こり・腰痛・姿勢の崩れに悩んでいる
・「ジムに行く＝ガチな人の場所」と感じていて、体型を見られることにも抵抗がある
・「頑張りすぎずに、でも変わりたい」という気持ちがあり、「自分を大切にしている人として見られたい」とも思っている
想定する事業課題・目的
・大手チェーンジムの「画一的・ストイック」なイメージと差別化し、「個別最適化×親しみやすさ」というポジショニングを確立する
・「頑張りすぎずに変わりたい」という気持ちに応えて、初心者でも入りやすい雰囲気をつくる
・トレーナーの人柄を伝えて、「ジムが怖い」という不安をやわらげる
PROCESS
市場調査から制作開始までの流れ
この制作では、デザインの前段階となる上流工程にもAIを活用して取り組みました。
STEP 01｜市場調査・競合分析
台東区のパーソナルジムを調べた範囲では、検索上位に出てくるのは大手チェーンが中心でした。価格は1回あたり数千円〜1万円台半ばまで幅があり、デザインは黒や赤を使った強めの印象が目立ちました。（情報収集にはAIを使い、各社の公式サイトで自分でも確認しました。）
そこで、画一的な感じではなく、一人ひとりに合わせた丁寧さと、威圧感のない親しみやすさを両立できる立ち位置があるのではと考えました。
STEP 02｜ターゲット・ペルソナ設定
エリア特性（デスクワークの方が多い）を踏まえて、26〜35歳、上野・御徒町あたりに在住、もしくは勤務する女性をペルソナに設定しました。
「体の不調を専門家にちゃんと見てほしい」
「ジムって本気の人が行く場所というイメージがある」
「頑張りすぎたくないけど変わりたい」
「自分を大切にしている人だと思われたい」
という4つの本音を言葉にしてみました。
STEP 03｜ポジショニング／コンセプト設計
横軸「ストイック⇔親しみやすい」、縦軸「スタイリッシュ・洗練⇔柔らかい・可愛らしい」の2軸で競合を整理したところ、大手チェーン系は「ストイック×スタイリッシュ」、女性向けの小規模ジムは「親しみやすい×可愛らしい」に寄っていました。
Mellow Bodyは「親しみやすさ」を持ちながら、可愛らしさよりも「スタイリッシュで洗練された」方向を狙う、空いている可能性が高いポジションだと考えました。
あわせて、入会金0円・1回約9,000円台という価格設計で、体験へのハードルを下げています。
STEP 04｜情報設計（サイト構成）
ファーストビュー・コンセプト・選ばれる理由・トレーナー紹介・ご利用の流れ・料金プラン・空間について・お客様の声・FAQ・アクセス・CTAのセクション構成でワイヤーフレームを設計し、ターゲットの悩みや気持ちに応える順番で、セクションを並べることを意識しました。
STEP 05｜制作着手
ワイヤーフレームをもとに、色（ベージュを基調にテラコッタを差し色に）、写真（筋肉や苦しい表情を強調しない自然な雰囲気）、レイアウト（詰め込みすぎず余白を多めにとる）、文章（言い切らない、やさしい言い回し）の方向性を決めて、Studioでの実装に着手しました。
DESIGN POINT
制作のポイント
「ジムっぽくない」配色設計
競合に多い「黒・赤で強そうに見せる」配色を避け、ベージュを基調にテラコッタなど温かみのある色を差し色として使いました。派手な色は使わず落ち着いたトーンでまとめることで、ターゲットが好む「カフェっぽい」雰囲気と、他のジムとの違いの両方を出せるようにしました。
トレーナーの「人柄」を見せる「プライベート」セクション
「ジムへの恥ずかしさ・抵抗感」という気持ちには、単なる説明文では応えきれないと考え、あえて趣味嗜好や食べ物など「仕事関係じゃない」情報を見せるセクションを設けました。
トレーナーを「指導者」ではなく「隣人」に近い距離感で見せることで、ジムに行くことへの抵抗感をやわらげたいと考えました。
「安心感」を4ステップの図解で伝える流れ設計
初めての人がもっとも知りたいのは「何をされるかわからない」ことだと考え、体験から入会までの流れを、4ステップのアイコン＋数字で見せました。流れがシンプルだと伝えることで、初めての人でも安心して来られるようにしました。
スクロールで止まり、写真が切り替わる「プライベート」セクションの演出
プライベートセクションは、ページを読み進める手を一度止めて、トレーナーの人柄にじっくり向き合ってもらいたいと考えました。そこで、スクロールするとそのセクションに留まり、その間に写真が切り替わる演出を採用。情報を一度に見せるのではなく「めくる」ような体験にすることで、トレーナーへの親近感がより深まるよう工夫しました。