架空LPデザイン制作（会員限定のカフェ＆コワーキングスペース）

藤岡 伽織

目次

① 要件
② 制作したLP
③ 工夫したこと
④ 制作を通して学んだこと

-----------------------------------------------------------------------------------

①要件

  • クライアント情報

＜クライアント名：WORK,inc.＞

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

  • 目的

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

  • ターゲット

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

  • ペルソナ

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

②作成したLP（PCのみ）

③工夫したこと

■ゴールの設定

クライアントの目的「WORK lounge AOYAMAについて知ってもらう」について、ターゲット別にさらに取って欲しい行動（ゴール）を設定しました。

  • ビジネススクールWORK 会員
    ：WORK lounge AOYAMAに来てもらうために、アプリのダウンロードを促す。
  • ビジネススクールWORK 非会員
    ：ビジネススクールWORKについて知ってもらうため、アプリのダウンロードを促す。

■コンテンツの再検討

  • コワーキングスペースを利用する際の思考の流れとして理解しやすいよう、
    ❶どういうところで、誰が利用できるのか（コンセプト）
    ❷なにが用意されているのか（サービス）
    ❸どうやって利用するのか（システム）を上部にまとめました。
  • 上記を受け、「カフェメニュー」の情報自体は優先度が低いと考え、文字のみにまとめて順番を他のセクションよりも位置を下げました。
  • ペルソナはスキル向上だけでなく、人脈作りを望んでいるため、「イベント」など交流ができることがわかるコンテンツを追加しました。

■配色

  • 20代後半〜30代前半、繋がりを求めるキャリアウーマンというペルソナから、以下2つのキーワードとそのイメージカラーを設定しました。

「ビジネス」→ 緑：知的　スタイリッシュ　都会的　スマート

　　　　　　　 赤：アクティブ　行動的　活発

「交流」→ ベージュ：やわらかさ　親しみやすさ　落ち着いた　自然な

  • 女性らしさを演出するために、緑や赤は透明度を低く調整しました。
  • フォントカラーは真っ黒ではなくグレー系に設定し、全体のトンマナを揃えました。

■文字

  • ゴシック体で、親しみやすいカジュアルさを出しました。

■レイアウト

  • 目線の動きを流れるように誘導できるようコンテンツを交互に配置しました。

■写真

  • 場所、雰囲気が伝わるような写真やコンテンツを追加しました。

■UI

  • ボタンや目立たせたいコンテンツの背景にアクセントカラー（グラデーション）を適用しました。
  • ボタンサイズを画面幅に合わせ、押しやすくなるように変更しました。

■余白

  • スクロールが長いと離脱につながるため、コンテンツ間の余白を100pxにし、余白を取りながらも間隔を近づけました。

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

■WEBデザインの基本について
PCのデザインを作るにあたり、フォントサイズや余白感、コンテンツの幅など、デザインの基本を学ぶことができました。また、コンテンツや構成等は＜同業種＞、装飾等の細かい部分についてはターゲットが似た＜異業種＞など、参考サイトの探し方についても幅を広げることができました。

■ペルソナを考慮したスタイルガイドの必要性
ペルソナに響くデザインを考える上で、スタイルガイドを作ることで、色味の調整などトンマナが合わせやすく、全体の統一感が出ることを学びました。