制作目的
当ジムについて知ってもらう
無料体験の予約をしてもらう
ペルソナ
20〜30代社会人。
仕事にプライベートに忙しく、短時間で効果を出したいと思っている。
感覚より「数値・効率」重視。
デザインイメージ
スマートな雰囲気。ワイワイ楽しくというよりは、個人の目標に向かって黙々と取り組むイメージ。
「忙しくても、結果は出せる」というコンセプトが視覚で伝わるようにした。
使用ツール
ワイヤーフレーム： Photoshop
デザインカンプ：Photoshop
コーディング：Terapad
制作時間
デザイン: 15時間（リサーチ・ワイヤーフレーム・デザインカンプ）
コーディング: 25時間（HTML・CSS・レスポンシブ対応・サーバーアップ）
合計: 40時間
こだわりポイント①
視線を誘導するZ型のリズム
単調な羅列を避け、ユーザーが最後まで飽きずに読み進められるよう、画像とテキストを交互に配置する「ジグザグ（Z型）レイアウト」を採用しました。
こだわりポイント②
ユーザーデバイスに最適化した情報設計
ユーザーが最もスムーズに情報を読み取れるよう、デバイスごとにレイアウトを最適化しました。
PC版：一覧性を重視（横並び）
大きな画面を活かし、無料体験の全体像を一目で把握できるよう横型レイアウトを採用。ステップ間の繋がりを視覚的に強調しました。
モバイル版：可読性を重視（縦並び）
狭い画面でも文字や画像が小さくなりすぎないよう、1ステップずつ縦に配置。親指でのスクロール操作に合わせ、リズムよく読み進められる設計にしています。
