コワーキングスペース LP(デザイン)

OVERVIEW

SHElikes PROデザイナーコースの実践課題 【担当範囲】情報設計、デザイン、コーディング 【使用ツール】Figma、Photoshop 【制作時間】情報設計5時間 デザイン20時間

YEAR 2025

| 制作物


| 課題要件

◆ クライアント情報

クライアント名:Work inc.

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


◆ サイトの目的

  • 新規会員の獲得
  • 広告やSNSから流入してきた方へ利用申し込みや見学予約へ繋げたい

  • ブランドの世界観や信頼感は守りたいので、ゴリゴリの営業にはしたくない


◆ ターゲット

  • 都内で働くキャリア志向の強い方
  • 外交的で、自己成長に積極的なタイプのビジネスパーソン
  • 30代前後
  • 経済的に余裕があって、自己投資によって更なるメリットを得ようとしている方


◆ 施設の特徴

  • 落ち着いたデザインと程よい刺激を得られる空間
  • コワーキングスペースとしての基本的な機能に加えて、交流スペースやカフェコーナーも利用できる
  • 女性の会員が多い
  • セキュリティ完備
  • 空間の居心地の良さや体験としての付加価値にこだわっている


| ペルソナ

◆ 基本プロフィール

  • 川上 望美 (32)
  • 東京都目黒区在住
  • 既婚、夫と2人暮らし
  • T系メガベンチャー勤務 8年目 広報部部長


◆ ライフスタイル・価値観

  • 平日の過ごし方:フルタイム勤務、夜は会食や副業
  • 休日の過ごし方:本屋や展示会めぐり、スキルアップのための勉強、夫や友人と過ごす
  • 趣味/関心ごと:キャリアアップ、インテリア、デザイン、人との会話
  • 大切にしていること:成長、自由、選択肢、上質な環境


◆ 背景・課題

  • これまではリモートワーク中心だったが、週3-4の出社が求められるようになった
  • せっかくの外出や出社の機会を前向きに捉えたい
  • 通勤ラッシュの時間帯をずらして時間を有意義に使いたい


◆ ペルソナに届けたい価値

  • 家でもオフィスでもない居心地の良い第三の場所
  • 安心で充実した作業空間
  • 社外での出会い、自己成長の機会提供、コミュニティとしての価値


| 改善提案


| デザインコンセプト

◆ ムードボード

◆ キーワード

  • 高級感
  • 余白
  • 落ち着いた
  • 向上心
  • 洗練された
  • シンプル


◆ 配色

・BASE COLOR

すっきりとした安心感と落ち着きのあるホワイトをベースに使用しています

・MAIN COLOR

ビジネスを想起する濃いネイビーをメインカラーとして使用しています。

また、不透明度を調整して使用することで、統一感を出しつつも、薄いネイビーの下にイメージ写真を入れるなどの世界観を伝える工夫もしています。

・ACCENT COLOR

高級感を想起するゴールドをアクセントカラーとして使用しています。

見学予約を促すCTAに使用し、ネイビーとのコントラストが分かりやすく、ボタンを目立たせることができています。

また、不透明度を調整してセクションの背景色としても使用しています。不透明度を下げるとベージュに近い色味になり、シンプルや落ち着きといった雰囲気にも合うカラーとして、コワーキングスペースの世界観を作り出してくれています。


◆ フォント

・和文:游明朝体

高級感を演出しながらも、クセが少なく視認性の高いフォントを選びました。

・英数字:Aboreto

主にセクション見出しに使用しています。游明朝の雰囲気を引き継ぎながら、繊細な雰囲気も感じられるフォントとして選びました。

・CTAボタン:Inter

画面上での読みやすさを最優先に設計フォントであり、游明朝・Aboretoのような細いフォントが並ぶ中で、視認性が高く、ボタンに目が留まるフォントであると考え、選びました。


| 工夫したところ

◆ ヘッダー

  • コワーキングスペース全体の雰囲気がわかる写真を少しでも多く感じていただけるように、ヘッダーは背景なしとしました
  • エントリーボタンも含め、ヘッダーを追従させることで、気になったタイミングでいつでも利用申し込み・見学予約ボタンを押してもらえるようにしました
  • 高級感を意識して、グローバルナビゲーションは英語表記のみとし、洗練した雰囲気が感じられるようにしました


◆ メインビジュアル

  • 中央にWORK lounge AOYAMAのロゴを配置し、直下に申し込みボタンを設置することで、必要な情報が中心に集まるようにしました
  • 背景画像は、高級感あふれる施設の雰囲気が感じていただける魅力たっぷりの写真を選定しました
  • 施設写真の上からうっすらとメインカラーのネイビーを重ねており、世界観を崩さないことと、CTAボタンを目立たせることを両立させました


◆ CONCEPTセクション

  • 窓際のお席から見える景色を背景に使用し、「理想の姿に向かって頑張るあなたへ」というメッセージと重ねながら、施設の利用イメージを想像していただけるように意識しました
  • 右側には実際に施設を利用している女性のイメージ写真を掲載し、施設を利用する方の属性や雰囲気が伝わることを意識しました
  • コンセプトセクションの本文余白は、他のセクションと比べて行間をゆったり設け、読みやすいことと、ゆったりと落ち着いた雰囲気であることの両面を意識しました


SPACEセクション

  • 3つのエリアの魅力が伝わる写真を選定し、シンプルなカードにまとめました
  • ほしい情報のみをピックアップしやすいことを意識しています


FACILITIESセクション

  • コンセプトや施設内の3つのエリアの情報を見て、実際に利用してみたいと考えるユーザーは、設備面が気になるのではと考え、FACILITIESセクションを入れました
  • どんなにコンセプトに共感しても、Wi-Fiやコンセントがあるのかないのかわからない状態では利用したいと思えないのではと考え、読み込まなくてもわかるアイコンを大きく配置しました


◆ BENEFITSセクション

  • ペルソナに届けたい価値である「家でもオフィスでもない居心地の良い第三の場所」「安心で充実した作業空間」について、WORK lounge AOYAMAならではの魅力として具体的に掲載しました
  • 3つのカードが縦に並ぶシンプルな配置ですが、1つ1つのメリットがスクロールするたびに見えてくるワクワクも感じられるのではと思います


◆ EXPERIENCEセクション

  • ペルソナに届けたい価値である「社外での出会い、自己成長の機会提供、コミュニティとしての価値」の部分が伝わる内容を、写真を大きく配置しながら伝わるようにしました
  • 新たな学びや出会いを求めるユーザーに対し、施設内での活用イメージが湧きやすいように、生成AIを使用してイメージに合う画像を用意しました


◆ SYSTEMセクション

  • 来店時の利用の流れはとてもシンプルなので、3つのフローを図式化しました
  • アイコンも使用することで、視覚的にも伝わるように工夫しました


◆ PLANセクション

  • 3パターンの料金体系について、見比べるポイントが左右に並ぶようにレイアウトすることで、ユーザーが自分に合うプランを選び取りやすいようにしました
  • 1枚1枚のカードの上部におすすめ属性を記載することで、情報の取捨選択をしやすくしました
  • 使用できる設備がプランによって異なるため、STANDARDプラン以外では利用ができない設備については、アイコンをグレーにしておき、プラン外のサービスであることを伝わりやすくしました


◆ VOICEセクション

  • 元々のワイヤーフレームには含まれていなかった項目ですが、それぞれのプランを利用されているユーザーのリアルな声を事前に知ることで、施設の利用イメージをつけていただくことを目的としました
  • WORK lounge AOYAMAを利用し始めたきっかけや、さまざまなキャリアの方と出会えるというペルソナに届けたい価値の部分とマッチするコメントを抜粋しています


◆ FAQセクション

  • 質問と回答をすっきりとカードにして配置しました
  • FAQは見たい項目だけ見ていただけるようにアコーディオンタイプを選択されることが多いと思いますが、情報量の多いサイトの終盤では、ユーザー側で情報を取捨選択することは大変なのではと思います。
  • あえてオープンな状態にしておき、流し見・キーワードだけピックアップという形で情報を確認していただけるように配慮しました


◆ CTAセクション

  • 全体を通して、ユーザーには自身を投影しながらサイトを見てほしいという思いがあり、男性・女性両方の後ろ姿が見える写真を選定しました
  • CTAボタンは大きく配置したことと、背景写真の上に薄くネイビーを敷くことで、コントラストが生まれ、ボタンに視線が集まるように工夫しています


| 課題を通して学んだこと

  • この課題を通して、初めてLPサイトの構成を考えてデザインに落とし込むという家庭を経験し、ユーザーを飽きさせずに必要な情報をしっかり伝えるには?という部分にとても頭を悩ませました
  • 参考にしたLPサイトもいくつかあり、なんとなくいいなと思うサイトの「いいな」の部分を言語化することで、「高級感」「落ち着き」「余白」といったキーワードに辿り着きました
  • なんとなく「かっこいいな」、なんとなく「かわいいな」、と思ってきたクリエイティブに対し、なぜいいと思ったのか?を言語化するトレーニングを重ね、自分自身のデザインに対して、自信を持って意味や理由を伝えられるようになりたいと思いました


| いただいたFBのコメント

  • 上質な世界観が表現できている
  • 写真を多く掲載した構成になっているため、施設の雰囲気がわかりやすい

といったコメントをいただきました。

クライアント様のご意向や届けたい想い・価値をしっかり理解した上で、必要な情報が最後までしっかり届けられるデザインができるよう、これからも頑張りたいと思います