LP制作(PCデザイン・SPワイヤーフレーム)

OVERVIEW

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

YEAR 2020

✴︎ クライアント情報 ✴︎

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

✴︎ 要件 ✴︎

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

ターゲット ▶︎ 2.30代の女性、"自分らしさ" を追求したいと考えている人

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

✴︎ 工夫したこと ✴︎

1. 目的やターゲットを理解したトンマナ設定

PCデザインカンプの制作では「あなたらしい美しさ」というジムのコンセプトイメージに合うトンマナを考えデザイン制作しました。「内側の美」からピンク色を連想し、かつ20代~30代女性に好まれる落ち着いたイメージを出したかったのでメインカラーとアクセントカラーにスモーキーピンクを使用しました。


2. 配色・余白・あしらいで表現する「ぬけ感」

画像はトンマナに合うように明るさとカラーバランスを整え、たっぷりと余白を使ったり、さりげないあしらいを使うことによって、リラックスしたおしゃれ感である「ぬけ感」が出るようにしました。


3. コーポレートロゴの要素を組み込んだデザイン

BODYMAKEYのロゴに使われている二つの円が重なっているモチーフをデザインに組み込みました。例えば、「まずはお気軽に無料体験にお越しください」というセクションの画像部分で、円を重ねたあしらいを付け足しました。


4. 直感的に操作できるUIを意識

見出しのフォントにアクセントカラーを使用したり、セクションの背景に交互に色を付けたりすることで、セクションの切り替えをわかりやすくしました。「無料体験を予約する」ボタンにはアクセントカラーをベタ塗りで使用し、ボタンということが一目でわかるようにしました。

✴︎ 制作したPCデザインカンプとSPワイヤーフレーム ✴︎

※トップメニューと無料体験予約ボタンは常にページ上部に固定されます。

✴︎ 制作を通して学んだこと ✴︎

1. 目的やターゲットを考え抜くことで軸がぶれないデザインができる

デザイン制作にとりかかる前に、LPの目的やターゲットについてしっかり噛み砕いて理解することで、途中で方向性がぶれずに効率よく制作ができることを学びました。ターゲットのペルソナを具体的にイメージしてトンマナを設定したことで、配色やフォント、画像選びをスムーズに行うことができました。


様々な既存サイトを参考にし、余白や文字の大きさに一定のルールを設けて制作しました。デザイン原則を則ることによって全体にまとまりのあるデザインになったと思います。