【自主制作】コワーキングスペースを運営する会社のLPデザイン

【使用ツール】photoshop、figma

【制作期間】約３週間

（ワイヤーフレーム制作：１週間、デザインカンプ：２週間）

【作成範囲】ワイヤーフレーム作成～デザインカンプ作成まで

📍目次

・制作物

・課題要件、ペルソナ

・情報設計

・デザインコンセプト

・デザインの工夫

・本学習で学んだこと

📝制作物

📝課題要件

◆クライアント情報

・【クライアント名】Worklounge AOYAMA

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

◆目的

・新規会員の獲得。広告やSNSからの流入客から、施設問合せや見学の申込の獲得。

→獲得を目的としつつもブランドの信頼感を守りたいので、ゴリゴリの営業感はNO、会社の世界観を保つ。

◆ターゲット

・都内で働くキャリア志向が高い方

・外交的、自己成長に積極的なビジネスパーソン

・年齢は30代（経済的に余裕）

・自己投資によってさらなる高みへ成長しようとしている方

◆トンマナ要望

・明確なこだわりはなく、ペルソナを意識して作成してほしい。

・ムードボードでビジュアルイメージのすりあわせからはじめる。

◆入れたい要素

・提示されたワイヤーフレームを参照

・自己成長の機会となるコミュニティとしての価値も訴求

◆ペルソナ

📝情報設計

以下、課題要件を基に設定・考察しました。

〈構成〉

メインビジュアルでは、実際のコワーキングスペースの写真を使用することを想定し、空間の雰囲気がひと目で伝わるようにしました。「ここを利用してみたい」と感じてもらえるよう、利用シーンを自然にイメージできる構成にしています。

続くコンセプトでは、この場所がどのような価値を提供しているのかを丁寧に伝え、共感につなげることを意識しました。

その後、施設紹介やスペシャルイベントの内容を見せることで、単なる作業スペースではなく、「新しいつながりや成長のきっかけが得られる場所」であることを伝えています。読み進める中で、「ここを使ってみたい」という気持ちが少しずつ高まる流れを意識しています。

また、「見学予約」「利用申込」のCTAは、各セクションの区切りに合わせて配置しました。ユーザーの興味が高まったタイミングでスムーズに行動できるようにし、離脱を防ぎながら自然に予約へつなげる導線設計としています。

１ ファーストビュー

２ コンセプト

３ 施設紹介、スペシャルイベント

４ 見学予約・利用申込（CTA）

５ 利用方法

６ 利用プラン

７ 見学予約・利用申込（CTA）

８ よくある質問

９ 見学予約・利用申込（CTA）

10 アクセス

📝ビジュアル設計

◆コンセプト

洗練された空間での新たな出会いと自己成長」をコンセプトに設計しました。

ターゲットを、日常的に自己研鑽に取り組む意識の高いビジネスパーソンと想定しています。そのため、デザイン全体は「アーバン」「モダン」「スタイリッシュ」といった印象を軸に構築しました。

◆カラー設計

カラー設計においては、ブラックやネイビーをベースに使用しています。これらの色は多くのコワーキングスペースやビジネス系サービスで採用されていますが、これは「信頼感」「落ち着き」「知的さ」といった印象を与えやすく、ターゲットユーザーの求める“集中できる環境”や“質の高い空間”を視覚的に表現できるためだと考えています。本LPでも同様に、安心感と洗練された印象を持たせるためにベースカラーとして採用しました。

その上で、アクセントカラーとして少しくすんだオレンジを取り入れています。オレンジは「交流」「活発さ」「前向きさ」といった印象を持つ色であり、コワーキングスペースにおける“人とのつながり”や“新たなきっかけ”を表現するのに適していると考えました。さらにトーンを落ち着かせることで、全体の雰囲気を崩さず、洗練された印象の中にほどよい温かみを加えています。

◆フォント

フォントには「Noto Sans JP」を使用しています。可読性が高く、シンプルでクセがないため、情報量の多いLPでもストレスなく読み進められる点を重視しました。また、装飾性を抑えることで、写真やコンテンツの魅力を引き立てる役割も持たせています。

レイアウト面では、余白を広めに確保し、情報の整理と視線誘導を意識しました。要素同士の間隔や整列を揃えることで、視覚的なノイズを減らし、「落ち着いて作業できる空間」というブランドイメージをデザイン全体で表現しています。

〈デザインの工夫〉

◆FV

・ナビゲーションは、洗練された都会的なサイトの雰囲気を統一したかったため、アルファベットで表記しました。

・CTAボタンではアクセントカラーであるオレンジを用い、こなれ感や”らしさ”を出しました。

◆「コンセプト」

・FVに続くコンセプトは、メインビジュアルで使用している写真にグラデーションをかけ、つながり感を出しました。

◆「スペース」

・カルーセル方式を用いて、実施されたイベントが流れて表示されるよう想定しました。

◆「PLAN」

・直観的に理解できるようテキストで羅列するだけではなく、利用可能な設備は視認性の高いオレンジアイコンを、利用不可の設備はあえて視認性を下げたグレーアイコンを用いました。

◆各セクション

・スタイリッシュさを保ちながらも冷たい印象になりすぎないよう、図形やボタンの角をわずかに丸め、親しみやすさとのバランスを調整しました。 

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

今回はクライアントからワイヤーフレームをいただいていたため、完成イメージを想像しながら制作を進めることができました。一方で、これをゼロから考える難しさも感じ、情報設計の重要性を実感しました。

デザイン面では、見た目だけでなくコーディングやレスポンシブ対応も意識しながら制作を進めました。特に、余白の取り方や要素の間隔、テキスト量のバランスは何度も調整し、「見やすさ」と「実装のしやすさ」を両立できるポイントを探りました。また、CTAの配置についても、どのタイミングで配置すると自然に行動につながるかを意識し、位置や見せ方を試行錯誤しています。

さらに、情報の優先順位付けにも悩みました。どの内容を目立たせるか、どこで興味を引き、どこで不安を解消するかを考えながら、構成や見せ方を細かく調整しています。

クライアントの意図とユーザーの行動、両方を意識しながら設計する難しさを感じつつも、デザインは見た目だけでなく「目的に向けて設計するもの」だと学べた、非常に良い経験になりました。