架空LPデザイン制作

＜目次＞

①制作要件
②制作したPC版デザインカンプ
③修正・制作したワイヤーフレーム
④工夫したポイント
⑤制作を通して学んだこと

=============================================

①制作要件

■クライアント情報
＜クライアント名：WORK,inc.＞
女性向けのビジネススクールを展開している。 会員は20~30代の女性が多く、 キャリアアップのためにビジネススキルを学び、 さらにそのアウトプットの場として定期的にビジネスコンテストなどのイベントも開催されている。

■目的
会員様限定のカフェ＆コワーキングスペースをオープンすることになったため、WORK rounge Aoyamaについて知ってもらいたい

■ターゲット
ビジネススクールWORKの会員様
ビジネススクールWORKの会員ではないがWORKが気になっている方

■ペルソナ
【属性】30代 既婚女性 東京在住
【背景や行動】仕事が大好きで、スキルアップに投資をしてきた。同じような目標を持った同世代の女性と繋がり、お互いに切磋琢磨しあいたい。会社外での人脈を作りたい。
【ニーズやゴール】仕事での成果をもっと出していきたい。経営への理解も含めてゆくゆくは役員になりたいが、起業も考えている。強いチームをつくるため、マネジメントやコーチングのスキルも学びたい。

②制作したPC版デザインカンプ

③修正・制作したワイヤーフレーム

④工夫したポイント

1）目的に即したコンテンツの再設計

■ゴールの設定

「WORK lounge Aoyamaについて知ってもらうこと」＋αで設定。

①「WORK lounge Aoyama」会員：専用アプリダウンロード→実際に足を運んでもらう

②「WORK lounge Aoyama」非会員：「ビジネススクールWORK」について知ってもらい会員になってもらう

■コンテンツの再設計

・ターゲットはキャリア志向が強いものの、「20〜30代女性向け」であることからコワーキングスペースの機能・ビジュアル面も重視すると想定し、フォトギャラリーやシステム欄を追加。また同世代女性との交流を求めている＆マネジメントを学びたいというニーズがあることからマネジメント勉強会などのイベント情報を追加。

・上記②達成のため、ボタンや目に入りやすいバナーの形でビジネススクールLPへのリンクを配置。

・他のコワーキングスペースと差別化を図るため、「コンセプト」「イベント情報」「ギャラリー」をLP上部に配置。元のWFに含まれていた「カフェメニュー」などは優先度が低いと判断し、下部に写真を1枚にまとめコンパクトに配置。

2）トンマナ・世界観の統一

■今回伝えたいイメージ

・ターゲットが「キャリア志向の20〜30代女性」であることから、「洗練された／上品、大人っぽい／あたたかみのある」イメージを想起させるデザインに。

■色

・ベース＆メイン：ベージュ、グレージュを入れながら、可愛くなりすぎないよう白も背景に敷く。

・アクセント：落ち着いたピンク、深緑、ネイビー  

■余白

各コンテンツ間の余白を大きめに取って統一し、視認性を高めるよう工夫した。

3）ユーザー視点でのUI/UX設計

・ターゲットにとってビジュアルが大きな訴求要因となると考えたので、メインビジュアルやギャラリーで写真を多く配置し、イメージしやすくなるようにした。

・ユーザーにアクションしてほしい「会員登録」やビジネススクールへのリンクボタンはアクセントカラーとドロップシャドウをつけて際立たせるようにした。

・SP版は全体的にテキストのフォントサイズを大きめにして可読性を高めた。またレイアウトもスマートフォンで見た時に最適な配置となるよう縦置きにするなど配慮した。

⑤制作を通して学んだこと

・ペルソナ、LP制作の目的に立ち返り、情報の取捨選択や優先順位づけをする必要があること

・配色やフォントなど、ターゲットやLP制作の目的に基づいて決定すること

・フォント選びや写真・イラストの選択をする際も、「なんとなく」ではなく「なぜそれを選んだのか？」言語化できる状態にした上でビジュアルデザインに取り掛かること

・PC、SPともにユーザーの目線に立って最適な配置、レイアウトとなるように考える必要あること