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

【使用ツール】Illustrator/Photoshop

目次

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

①要件

• クライアント情報
  ＜クライアント名：WORK,inc.＞
  女性向けのビジネススクールを展開している。 会員は20~30代の女性が多く、 キャリアアップのためにビジネススキルを学び、 さらにそのアウトプットの場として定期的にビジネスコンテストなどのイベントも開催されている。
• 目的
  会員様限定のカフェ＆コワーキングスペースをオープンすることになったため、WORK rounge Aoyamaについて知ってもらいたい
• ターゲット
  ビジネススクールWORKの会員様
  ビジネススクールWORKの会員ではないがWORKが気になっている方
• ペルソナ
  【属性】30代 既婚女性 東京在住
  【背景や行動】仕事が大好きで、スキルアップに投資をしてきた。同じような目標を持った同世代の女性と繋がり、お互いに切磋琢磨しあいたい。会社外での人脈を作りたい。
  【ニーズやゴール】仕事での成果をもっと出していきたい。経営への理解も含めてゆくゆくは役員になりたいが、起業も考えている。強いチームをつくるため、マネジメントやコーチングのスキルも学びたい。

②制作したLP

③工夫したこと

■一目で情報がわかりやすい構成

• それぞれのコンテンツを一画面で分かりやすく伝えれるように背景のホワイトとイエローを交互にしました。

■NEWS・FACILITYの追加

• ペルソナはスキル向上だけでなく、人脈作りを望んでいるため、「イベント」など交流ができることがわかるNEWSを追加しました

• 仕事や育児など毎日時間がタイトで忙しい人が考えられる為、ストレスなく身軽で通えるようにFACILITYを追加して安心して利用ができるように追加しました

■CTAセクションについて

• PCから見てSPにもダウンロードがすぐできるようにQRコードを表記しました。

■配色

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

「ビジネス」→ パープル：知的　スタイリッシュ　都会的　スマート
「交流」→ ホワイト、イエロー：やわらかさ　親しみやすさ　落ち着いた　自然な

• フォントカラーは真っ黒ではなくパープルベースのブラックに設定し、全体のトンマナを揃えました

■文字

• Noto Sans JPで、親しみやすいカジュアルさを出しました
• 英文はMontserratでブランドロゴと類似のフォントを使用しました
• フォントサイズを情報の優先順位や文字の読みやすさを意識して細かく設定しました

■余白

• グローバルナビゲーションは固定する前提です
• スクロールが長いと離脱につながるため、コンテンツ間の余白を100pxにし、余白を取りながらも間隔を近づけました

■レイアウト

• 全体的に要素を中心にまとめ離脱しないようにしました
• セクションごとにレイアウトを変えて飽きがこないように、目が流れないようにしました

■写真

• 場所、雰囲気が伝わるような写真やコンテンツを追加しました
• 明るい雰囲気のカフェなので、明度を調節しました。

■UI

• 目立たせたいコンテンツの背景にアクセントカラー（グラデーション）を適用しました
• ボタンはアクセントカラーのパープルにして、ボタンだと一目でわかるような形にしました。

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

■WEBデザインの基本について

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

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