LPデザイン自主制作

OVERVIEW

SHElikes MULTI CREATOR PROJECTの課題。女性専用パーソナルジムのLP制作に取り組みました。クライアントからの要件書とワイヤーフレームを元に、PCのデザインカンプとSPのワイヤーフレームを制作しました。(制作時間:42時間)

YEAR 2020

【クライアント情報 】

2.30代の女性をメインターゲットとしている女性専用のパーソナルジム。ただ痩せるのではなく、自分らしい美しさを目指すことを大切にしており、どのような姿を目指していくかの目標設定から寄り添い、トレーニングはもちろん日々の食事管理までを徹底してサポートしてくれるのが特徴。

【要件】

目的 ▶︎ 無料体験が予約できるLPを制作して集客ツールとして活用したい。

ターゲット ▶︎ 2.30代の女性、ただ痩せるのではなく、"自分らしさ" を追求したいと考えている人。

トンマナ ▶︎ 明確に定まっていないため、自由に提案してほしい。

【こだわったポイント】

1、目的やターゲットを意識したトンマナ設定

 ただ痩せるのではなく、自分らしさを追求している女性専用のパーソナルジム、というコンセプトだったので、全体的に女性らしさがあって開放感がある、でも可愛すぎずシンプルで凛とした強さもあるようなイメージで色やフォントを選びました。ベースカラー、メインカラー、アクセントカラーを意識して配色しました。写真にも緑があり、爽やかに汗を流すイメージで緑を用いて、美しさや女性らしさを表す淡い紫に、アクセントとしてエネルギーを感じる濃い目のピンクを入れました。

ファーストビューで魅力を感じてもらえるように、美しさと凛とした強さが共存するメインビジュアルを目指してデザインしました。白い余白で開放感を出したり、黒いボタンで可愛すぎないように締めたりしました。ピンクの斜めの筆記体で女性らしさを表しました。

また、以前課題でトレースしたハロースクーターのサイトや、Ladiaskids様のストレッチのバナーを作成したときのイメージで、斜めにすると「前進」「前向き」「活動的」といったイメージがあったことから、全体的に背景の図形を斜めにレイアウトしました。

数字を大きくしたり写真と文字を重ねたり、メリハリがあって動きを感じるレイアウトを意識しました。

体験内容の部分のイラストは、親しみが持てるようなイメージで自分で描きました。


2. 直感的に操作できるUI・実装を意識

 ユーザーの視線に立って考えて、フォームの部分等操作しやすいようにデザインしました。また、お申し込みのボタンなど、重要なところが目立つようにしました。また、実装を意識してフォントを選んだり、パーツごとの余白や配置を考えました。

【制作したデザインカンプ(PC)】

【制作したワイヤーフレーム(SP)】

スマホのワイヤーフレームでは、縦積みのレイアウトで中央揃えにしたり、カルーセルにするなどして、1つ1つの要素が縦にスクロールして見やすいようにしました。

【制作を通して学んだこと】

LPのデザインでは、ファーストビューのインパクトが大切であることが分かりました。濃いめの色を入れた時は、色数を減らすとまとまりが出て、背景等に置く場合は不透明度で調整したり、その他は白黒やグレスケを使うと良いと学びました。四角や丸のバランス、色など、上から下までトンマナを揃え、統一感が出るようにデザインする事が今後の課題です。「押せそう」「パッとみて分かる」と行った、ーザー目線に立ったUIデザインの大切さも学びました。また、フォントや行間、レイアウトなどルールを決め、実装を意識してデザインすることが重要であるため、今後も意識してデザインしたいです。