【自主制作】LP制作(デザイン/コーディング・サーバーアップ)

OVERVIEW

キャリアスクールのWEBサイト制作課題。制作サイトテーマ設定からターゲット設定、サイトのコンセプト・デザイン・コーディングまでWEBページ制作の一連の流れを習得しました。架空のピラティススタジオのLPです。【制作時間】デザインカンプ20時間/コーディング:3日間/制作期間:1週間

YEAR 2023

●制作日:2023年4月3日~4月9日
●制作時間:45時間(デザインカンプ:20時間、コーディング25時間)
●担当範囲:情報設計、ワイヤーフレーム、デザイン、コーディング、レスポンシブ
●使用ツール:Photoshop、HTML、CSS、JQuery
●サイトURL:WEBサイトへ

概要

情報設計

1.ペルソナ

2.ユーザーストーリー

  • メインビジュアルで目を引き「コンセプト」「ピラティスの効果」「Feature」で共感・憧れを引き起こす流れ。
  • 「CLASS」でスタジオで提供しているクラスの内容を提示し関心を高める。
  • 体験レッスンができることや体験レッスン受ける当日の流れを提示し、一度スタジオに来てもらう。
  • 体験レッスンやピラティスについて疑問がある際は「よくある質問」で解決できる。
  • アクセスの詳細を確認し、職場もしくは家から通える場所にあるのか、検討してもらえる。

3.ビジュアルデザイン

ブランドイメージから「大人っぽい、おしゃれ、エネルギッシュ」等のキーワードを抽出しました。また、企業コンセプト「NEWMで出会う新しい自分」から、このスタジオを通うことで変われる自分を想像できるようデザインコンセプトを定義しました。 

制作のポイント

1.メインビジュアル

サイトへ訪れた瞬間に「美しさ」「健康美」といった印象をパッと伝えることにこだわりました。使用する写真の選定は、①ピラティススタジオであることが伝わること②写真の雰囲気から伝わる美しい姿勢、健康美、という条件を設定しました。でざいんコンセプトに合わせて写真のレタッチを行っています。

2.コンセプト

3.CTA

  • LPで最も目立たせたい箇所となるため、グラデーションで使用していたカラーそれぞれの単色を背景にして「体験レッスン」ボタンまでのFlowを表現しました。
  • 体験レッスンの流れを分かりやすくステップで説明することで、お客様が体験レッスンを通して得れる情報をイメージしやすくしました。
  • 体験レッスンへの興味を高めるために綺麗な美ボディを見せれるピラティスのポーズの写真を背景にし、「Let`s start NEWM さあ!NEWMで始めよう!」というマイクロコピーを記載しています。


WEBSITE