【自主制作】コワーキングスペース WORK lounge AOYAMA WebサイトLP

乃矢　桃叶音
“ときめき”をカタチにするWebデザイン
OVERVIEW

実案件を想定したデザイン短期集中型プログラム「SHElikes PRO デザイナー」にて、実践課題のLP制作に取り組み、クライアントから共有されたワイヤーフレームの修正（PC/SP）・LPデザインカンプを制作しました。

YEAR 2025

架空案件：コワーキングスペース「WORK lounge AOYAMA」の新規会員獲得のLP制作

【制作時期】2025年11月

【制作期間】24時間（７日）

【使用ツール】Figma

【目次】

◆制作物（PCデザインカンプ・SPワイヤーフレーム）

◆課題要件

◆情報設計の工夫

◆デザインの工夫

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

【制作物】

▼PCデザインカンプ（左）
　SPワイヤーフレーム（右）

【課題要件】

◆クライアント情報
＜クライアント名＞Work inc.

働く人々に新しい可能性を提供する事業を複数展開。事業のひとつに都内で働くビジネスパーソン向けのコワーキングオフィスを運営。会員は30代の女性が多く、キャリアアップのために日々仕事や勉強に励む意欲的な人々が集まるコミュニティとしても機能している。
家でもオフィスでもない、働く人のための新しい場所としてのコワーキングオフィス「WORK lounge AOYAMA」。

▼ヒアリング動画を視聴して要件書を作成


▼ペルソナ


【情報設計の工夫】

全体をすっきりとしたレイアウトにすることで、読み進めやすさを意識しました。文字量が多くなる箇所では、説明文だけに頼らずアイコンを使用し、一目で内容を理解できるよう工夫しています。

▼ページ設計

  • CONCEPTでは、ペルソナに語りかけることを意識し、テキストを左に配置しました。あわせて、視線が左を向いた女性の写真を使用することで、まるでメッセージを直接届けているかのような構図にしています。

  • SPACEでは、写真とテキストを縦に配置したカードを横並びにすることで、視覚的に情報を整理し、一目で理解しやすい構成にしています。

  • SYSTEMでは、流れをアイコンで図解することで、内容の流れを感覚的に把握できるようにしました。

  • EVENTは、当初いただいていた資料には含まれていませんでしたが、ヒアリング動画内で月に数回イベントを開催されていることを知り、今回のペルソナにとって関心度の高い情報だと判断し、提案として追加しました。イベントの魅力を伝えることで、より興味を深めてもらい、次のPLANセクションへ自然に誘導することを意識しています。

  • PLANは情報量が多く複雑なため、アイコンを使用して内容を整理しました。なかでも、施設を気軽に体験できる「DROP IN」を最も目に入りやすい左側に配置し、「おすすめ」のバッジを付けることで、プランの魅力が直感的に伝わるよう工夫しています。

  • FAQでは、気になる項目をタップして確認できる開閉式を採用しました。利用前の不安や疑問を解消することで、安心して次のCTAへ進んでもらうことを意識して設計しています。

  • 随所にCTAボタンを配置しつつ、LP全体を通して内容への理解と関心が高まったタイミングで、「申し込んでみよう」と自然に思ってもらえる流れを意識しました。

【デザインの工夫】

▼ムードボード


◆トンマナ
ペルソナがしっかり設定されていたため、それに合わせてトーン＆マナーを設計しました。落ち着いた雰囲気をベースに、かっちりしすぎない洗練された上品さと、人とのつながりを感じられるデザインを意識しています。

◆あしらい
すべてのアイコンはトーン＆マナーに合わせて制作しました。白抜きのアイコンにすることで、重くなりすぎず、それでいてしっかりとした印象を与えられるよう意識しています。

◆配色

  • ベースカラー：ベージュ
    人とのつながりや安心感を表現するため、メインカラーにベージュを採用しました。やわらかく落ち着いた印象を与え、全体の雰囲気をやさしくまとめる役割を持たせています。
  • メインカラー：くすみネイビー
    サイト全体を引き締め、信頼感や落ち着きを与えるため、ベースカラーにネイビーを採用しました。女性向けの印象を意識し、強くなりすぎないくすみトーンにすることで、柔らかさも感じられる配色にしています。
  • アクセントカラー：テラコッタ
    単調になりすぎないよう、温かみのあるテラコッタをアクセントとして使用しました。落ち着いた女性像をイメージし、感情や人のぬくもりが伝わるポイントカラーとして取り入れています。
  • サブカラー：ダークネイビー
    アクセントカラーほど強調はしないものの、押してほしいボタンの一つとして認識されるよう、サイト全体の統一感を意識し、文字色と同じ色を使用しました。

◆フォント
30代女性でキャリア志向の強いペルソナに合わせ、信頼感ときちんとした印象を与えられるフォントを使用しました。

◆ワイヤーフレームの修正

【制作を通して学んだこと】

クライアントとのヒアリング動画を視聴し、それをもとに要件定義を作成、ワイヤーフレームからデザインカンプまで一連の流れで制作できたことで、実際に案件を担当するデザイナーの視点を意識しながら取り組むことができました。この経験を通して、実務に近い形で制作を進めることの大切さを学びました。

また、ヒアリング動画から「クライアントにとって必要な情報」を汲み取ることで、ペルソナに響くセクションを追加するなど、より目的に沿った提案ができたと感じています。

さらに、デザインの世界観に合わせてアイコンを手作りすることも、表現の統一感や伝わりやすさにつながる重要な要素であると学びました。今回の課題を通して得たこれらの学びを、今後のデザイン制作にも活かしていきたいです。