【自主制作】LPデザイン：会員専用カフェ＆コワーキングスペース

• 成果物
• 制作要件（要件定義、ペルソナ像、ユーザーストーリー）
• 制作ポイント
• ムードボード
• スタイルガイド
• 課題を通して学んだこと

◾成果物

◾️制作要件

【クライアント情報】

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

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

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

【要件定義】

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

　　　　　　20~30代ビジネス感度の高い女性

目的　       ：会員制用カフェ＆コワーキングスペースWORK & lounge AOYAMAの認知拡大

                        WORK & lounge AOYAMAをきっかけにビジネススクールworkの会員を増や                            すこと

【ペルソナ像（クライアント様より提供）】

30代女性、東京都在住、某メガベンチャー勤務　部長職（8年目）

背景や行動　　：・仕事に注力しており、キャリアアップのために積極的に交流する

　　　　　　　　・外交的である

ニーズやゴール：・仕事の成果を今以上に出したい

　　　　　　　　・経営者との交流を持ち、自身でも経営を理解していきたい

　　　　　　　　・経営まで行かずとも、役員のような立場になりたい

　　　　　　　　・スキルアップやキャリアアップに対しての志が高い

　　　　　　　　・マネジメントやコーチングなども学び強い組織を作っていきたい

【ユーザーストーリー】

◾️制作ポイント

【写真からサイトのトンマナを感じさせるFV】

FVは施設内の植物や街並みなど、緑を多く含む写真を使い、ヘッダーと合わせて「緑」の印象を演出。背景には塗りを加えず、間延び感が出ないよう配慮した。

【出会いを感じさせる追加セクションの提案】

ペルソナのニーズやゴールに近づける要素として、セクションを追加提案。

• ペルソナが重視する「外部との交流」への期待を、セクションタイトルで明確に伝えられるよう工夫。「繋がりを生む場所」というコピーで、ページを見た瞬間に交流の価値を想起させる狙いがある。

  画像ではカフェを利用したリラックスした会話シーンを選び、キャリアアップに繋がる出会いやコミュニティ形成をイメージしやすくした。

• クライアント提供のカフェメニュー画像も配置し、利用シーンを具体的に想像させている。
  クライアントがワイヤーフレームで提供してくれた意図を考慮し、優先順位や見せ方等の提案はしつつも、できる限り提供してもらった情報は活かすようデザインした。

【認識しやすいステップとアクションへの後押し】

• 施設利用に直結する重要なセクションのため、分かりやすさを最優先に設計。利用方法の詳細は白背景にし、情報の視認性を高めている。

  利用ステップは、行動順に番号と矢印で整理し、誰でも直感的に理解できる構成にしている。

• アプリダウンロード部分は行動促進が目的のため、目立つようアクセントカラーを使用。iOS・Android 両方のダウンロードボタンを配置し、モックアップを添えて視覚的にも伝わるよう工夫した。

【使いやすさを意識したFAQデザイン】

ユーザーが知りたい項目だけを選んで読めるよう、アコーディオン形式を採用。

開閉ボタンは「＋／−」のシンプルなアイコンを使い、見た目もすっきりとした印象にしている。

【波打つリボンのあしらい】

全体を通して洗練された落ち着きある印象にしつつ、キャリアアップを目指すペルソナの【エネルギー・躍動感】を表現。外向的で前向きな交流をイメージし、【しなやかさ・かろやかさ・繋がり】を感じられるリボンモチーフを採用した。

また、明るさや親しみやすさが伝わるよう、ベージュ系のカラーで構成。ホワイト背景のセクションにのみ配置することで視認性を高め、自然に次のセクションへ視線誘導できるよう工夫している。

◾️ムードボード

【コンセプト】

「更なるステージへ進むための、洗練されたリラックスコワーキングスペース」

ペルソナの外交的な性格や、キャリアアップに向けて積極的に行動している姿、

青山という都会的で洗練された立地などを考慮し、上記のコンセプトを決定した。

◾️スタイルガイド

【タイポグラフィ】

【游ゴシック体】
本文テキスト、要素内タイトルに使用。情報をわかりやすく伝えることを重視し、癖のないフォントを選択。

【游明朝体】
セクション日本語タイトルに使用。サイト全体の世界観でもある「落ち着いた大人の女性」を後押しする目的があるため大人っぽく、真面目で、落ち着いた印象のフォントを選択。

【Playair Display】
セクション英語サブタイトルに使用。日本語タイトルで使用した游明朝体に合わせて、大人っぽく重厚感のある印象を与えたいためセリフ体を選択。配色をアクセントカラーにするため、太さのあるデザインにした。

【Helvetica】
要素内の項目の数字に使用。シンプルで癖がないため、世界観よりも情報そのものをストレートに伝えられると考え、可読性を重視して選択。

【配色】

ダークグリーン：落ち着き、洗練された、癒し、都会感

ライトグリーン：爽やかさ、明るさ、安心感

ライトベージュ：柔らかさ、しなやかさ、ポジティブさ、優しさ

ブラウン：落ち着き、リラックス、カフェ

青山という立地を考えた際に、おしゃれで洗練された雰囲気をイメージした。さらに、都会でありながら緑が多く、落ち着いた雰囲気も感じられたことから、グリーンをベースとした配色にした。大人の女性の落ち着きや、女性としての柔らかさやしなやかさ、ペルソナのポジティブな躍動感も考慮し、配色を決めた。

またカフェの要素もあり、時にはリラックスできる空間でもあって欲しいという考えからも、グリーンやブラウンの配色が良いと考えた。

◾️課題を通して学んだこと

LPは情報量が多くページも長くなるため、セクション内だけではなく常に全体像を確認しながら作業を行い、サイト全体を通して画像やアイコンごとに統一感を持たせることが大切であると学びました。

実装することも考慮し、余白、フォントのルール化、アニメーションの付け方等をイメージしながらデザインカンプを作ることが重要だということも学びました。

制作の前段階ではムードボードの作成をしますが、その際参考デザインを深掘りして言語化することも重要であり、参考サイトのどの部分をどう活かすか明確にしてまとめることで、チームでの制作時はディレクターや他のデザイナー、クライアントと認識の共有ができるということにも気づきました。

統一感やルール化だけを重視してしまうと、全体的につまらない印象になりユーザーの離脱率に繋がってしまうため、情報の見せ方にも配慮したサイトデザインを行っていきたいです。