LP制作（PC /SP）

• 制作期間：2週間
• 使用ツール：Photoshop

📝要件

【クライアント名】WORK,inc

• 女性向けのビジネススクールを展開
• 会員は20〜30代の女性
• キャリアアップのためにビジネススキルを学び、アウトプットの場として定期的にビジネスコンテストやイベント開催

【クライアントの要望】
会員様限定のカフェ&コワーキングスペースをオープンすることになり、利用方法やアクセス情報を載せたWebサイトを制作したいと思っている。

【目的】
WORK lounge Aoyamaについて知ってもらうこと

【ターゲット】

• ビジネススクールWORKの会員様
• ビジネススクールWORKの会員ではないがWORKが気になっている方

✏️ワイヤーフレーム（見本と制作）

クライアントから頂いた見本をターゲット向けに情報設計し直しました。

✏️制作したPCとSPのデザインカンプ

✏️工夫した点

ペルソナ

届けたい人に届くように、クライアントから頂いたペルソナをさらに深掘りしました。
※深掘りした内容は青文字で記載しています。

ユーザーストーリ

伝えたい内容が伝わるようにユーザーストーリーから考えて情報設計をしました。ポイントはペルソナの川上さんは同じ目標を持った仲間と繋がりたい想いがあるため、繋がるチャンスがあるコワーキングスペースでのビジネスイベントに興味を持ってもらうように情報設計をしました。そのためLP上部にEVENTセクションを追加しています。

ビジュアルデザイン

【配色】

落ち着いて勉強と人との交流が出来るスペースとして、ベースカラーとメインカラーは淡い系の色を選びました。アクセントカラーにはエネルギッシュな女性たちが集まることと、パワーが出るようなスペースを連想させるために濃いイエローとネイビーでベースカラーとメインカラーとのトーン差をつけました。 各セクションごとにブルーとイエローをバランスよく使用することでサイト全体がまとまって見えるように工夫しています。

【フォント】

• 種類：クセがないシンプルなフォントを選びました。
  • 游ゴシック体
  • Helvetica
• サイズ：本文は基本16pxを使用して、補足分をそれ以下のサイズにしてメリハリをつけて見やすくしています。
  • 本文：9px,12px,14px,16px
  • 見出し：24px
  • フッター/ヘッター：13px
  • PCのTOP画面：50px

【装飾】

• 「SERVICEセクション」と「ダウンロードはこちらセクション」のブルー背景のカーブはしなやかさを表現しました。ペルソナの川上さんから「しなやかさ」のキーワードを連想したため、しなやかマインドを持つ女性たちのコワーキングスペースと考えデザインに落とし込みました。

• 「SERVICEセクション」にコワーキングスペースに関連するイラストを入れて女性らしさを表現しました。

【写真】

• LPのトンマナに合う写真を選びました。また写真の明るさを統一しています。
• 「CONCEPT」の写真は記載のある文言と合うように笑顔で清潔感のある女性を選びました。「EVENT」の写真も複数の女性が笑顔で勉強しているものを選んでワクワクを感じてもらえるようにしました。

【余白】

• 余白の大きさを5の倍数で割り切れるように設定し、LP全体がキレイに見えるようにしました。
• 「CONCEPT」はじっくり読んで欲しいため、他セクションより余白を多くとりました。

【行間・文字間】

• 行間：読みやすいように文字の2倍の数値に設定しました。
• 文字間：CONCEPTセクションのみじっくり読んで欲しいため、100に設定しました。 　　　　その他は0に設定しています。

✏️課題で学んだこと

もう1歩踏み込んだクライアントやターゲットの深堀りの重要性

クライアントの要望からさらに深掘りをして、ペルソナと情報設計を見直すことが出来、デザインの方向性を決めてからビジュアルデザインに取り掛かることが出来ました。ただ配色決めの際に自身の好みが出てしまい、中性的な配色になってしまいました。最終的には全体的にトーンを明るくして女性らしいLPになりましたが、もう1歩クライアントの事業やターゲットなどを深掘りして、届けたいターゲットに訴求出来るよう考える必要があると思いました。今後は自身の好みが出てしまうことも意識しながら、クライアントのゴールに向けたデザインを制作していきます。