OVERVIEW
作品概要
架空の女性専用ピラティススタジオ「Pilates Lumiere」のWebサイトを自主制作しました。スタジオの特徴や料金、利用前の疑問を順に確認し、無料体験申し込みへ進める2ページ構成です。
ターゲットの悩みから情報構成を検討し、デザイン、HTMLとCSSによるコーディング、JavaScriptによる操作の実装、レスポンシブ対応まで行いました。
ターゲット
仕事や家事でまとまった運動時間を確保しにくく、肩こりや猫背、運動不足が気になっている女性を想定しました。運動経験が少なく、身体の硬さやレッスンについていけるか不安を感じている方も対象としています。
目的
「30分」「女性専用」「最大4名の少人数制」という特徴を分かりやすく伝え、初心者が感じやすい不安を解消しながら、無料体験申し込みへ自然に進めるサイトを目指しました。
| 制作期間 | 約3週間 |
| 制作形態 | 自主制作（架空サイト） |
| 担当範囲 | 情報設計 / デザイン / HTML・CSSコーディング / JavaScript実装 |
| 使用技術 | HTML / CSS / JavaScript |
| ページ数 | 2ページ |
| ページ構成 | TOP / 無料体験申し込み |
| 対応 | レスポンシブ対応 |
CONTENT FLOW
不安を一つずつ解消する情報構成
ファーストビューで「30分」「女性専用」「少人数制」という特徴を提示し、その後に、悩み、選ばれる理由、プログラム、料金、インストラクター、FAQ、アクセスの順で情報を配置しました。
利用前に確認したい情報を段階的に提示し、スタジオへの理解と安心感を深めながら、無料体験申し込みへ進める流れを意識しています。
01
特徴を提示
30分・女性専用・少人数制
02
不安に寄り添う
悩み・選ばれる理由
03
判断材料を提示
プログラム・料金・インストラクター・FAQ・アクセス
04
申込みへつなげる
無料体験の案内
DESIGN
情報の違いを伝えるデザイン
COLOR BALANCE
3色を基調とした配色設計
アイボリーとベージュを中心に落ち着いた印象を作り、グリーンを申込み導線のアクセントとして統一しました。主要色とアクセントカラーの使用範囲を整理し、やわらかさと行動導線の見つけやすさを両立しています。
LAYOUT / HIERARCHY
変化と統一感を両立したレイアウト
画像と文章を交互に配置するセクションに加え、カード、料金表、FAQなど情報に応じた表示形式を使い分けました。セクションごとに変化を付けながら、見出し、文字サイズ、余白を共通化し、長いページでも単調にならず情報の区切りが分かるよう調整しています。
RESPONSIVE
画面幅に応じた情報の見せ方
PC、タブレット、スマートフォンで表示を確認し、画面幅に応じてレイアウトを切り替えました。ナビゲーションは狭い画面でハンバーガーメニューへ変更しています。
文字サイズ、余白、画像の見え方を調整し、写真と文章の関係が崩れないよう確認しました。画面幅が変わっても無料体験への申込み導線を見失わない構成を意識しています。
CODING / INTERACTION
HTML / CSS
内容に応じたHTML要素を使い分け、Flexboxでレイアウトを構成しました。メディアクエリを使用し、画面幅に応じたレスポンシブ表示を実装しています。
JavaScript
ハンバーガーメニューとFAQアコーディオンをJavaScriptで実装しました。ヘッダーはスクロール時にもナビゲーションが確認しやすい表示へ切り替わるよう調整しています。
FORM
無料体験申込み用の別ページを制作し、入力項目とラベルを整理しました。ポートフォリオ用のデモフォームであることを明記し、実際には送信されないよう送信ボタンを無効化しています。
BASIC SEO
ページごとにtitleとmeta descriptionを設定し、ページ内容を端的に伝えるファーストビューのキャッチコピーをH1として1つだけ配置しました。H2以下はコンテンツ構造に沿って階層を整理し、画像には内容に応じたalt属性を設定しています。また、デモサイトのためnoindexを設定しています。
WORKFLOW
制作の流れ
01
訴求整理
訴求ポイント、キーワード、想定ユーザーを整理
02
情報設計
掲載情報、ページ構成、申込み導線を設計
03
デザイン・素材
文章や画像の生成案を確認・選定し、配色、レイアウト、素材を調整
04
実装
HTML、CSS、JavaScriptでPC・スマートフォン表示を実装
05
検証
表示、操作、文章、レスポンシブを確認して修正
LEARNING
制作を通して学んだこと
制作を通して、見た目を整えるだけでなく、ターゲットの不安を解消し、無料体験の申込みへ自然につなげるために、情報設計・デザイン・実装を一体で考える重要性を学びました。
デザインでは、文字サイズや余白、画像の大きさ・配置に変化をつけ、各セクションを区別しながら、重要な情報へ自然に視線が向くよう工夫しました。
実装後もPC・タブレット・スマートフォンで表示を確認し、文字幅や画像位置、ナビゲーションの見え方を改善しています。
また、ハンバーガーメニューやFAQの動作も複数の画面幅で検証しました。
制作と確認を繰り返すことで、サイトの目的に沿って改善を積み重ねることの大切さを学びました。