架空LP | コワーキングスペースWebサイト（PC/SPデザインカンプ）

01. 制作時間・使用ツール 

合計 24時間

期間）2週間

内訳）情報設計：10h、デザイン制作：14h 

使用ツール）Photoshop / illustlator

担当範囲

• 情報設計
• ワイヤーフレーム
• デザインカンプ（PC / SP）

02.制作物

03.クライアント概要・要件整理

|　クライアント

Work inc.様

|　事業内容

都内で働くビジネスパーソン向けに、「家でもオフィスでもない第三の場所」としてのコワーキングスタジオを運営。30代女性を中心に、キャリアアップや学びに前向きな利用者が集うコミュニティとしても機能している。

|　制作依頼内容

コワーキングスタジオ「WORK lounge AOYAMA」の新規会員獲得を目的としたLPサイト制作。

既存の会員向けサイトとは別に、初めて利用を検討するユーザーに向けて空間や体験価値を伝える専用サイトを制作する。

|　ターゲット

• 上昇志向のある30代前後のビジネスパーソン（女性利用者多め）
• 職場と自宅の間で、雰囲気の良いコワーキングスペースを探している
• 自己成長のための学びや投資ができる、経済的・心理的余裕がある
• 人とのつながりや刺激を求めている

|　目的

• コワーキングスペースの 新規会員・見学申込者を増やす

• 世界観を保ちつつ、ここでしか得られない 体験価値を伝える

• 初めてのユーザーが不安なく申込みまで進める導線設計

|　ゴール

「自分を高める時間を過ごせそう」と感じたユーザーが、見学・入会の申し込みへ自然に行動できる状態をつくること。

04. 情報設計・ワイヤーフレーム再構成

クライアントより提供されたワイヤーフレームをもとに、情報の整理・再構成から行い、サイト全体の構成と見せ方を再設計しました。
単にデザインを当てはめるのではなく、「どの情報を、どの順番で、どんな体験として伝えるか」を重視し、ペルソナ視点で構成・レイアウト・セクション構造を見直した上でデザイン提案を行っています。
※本制作はデザインカンプのみで、コーディング実装は行っていません。

|　ポイント

• ユーザーはどの順番で情報を見ると安心できるか

• 空間・体験・料金のバランスは適切か

• 感情の高まりとCTAの位置は合っているか

• 各セクションの情報粒度は揃っているか

05.  ムードボード・スタイルガイド

自分らしい時間を大切にしながら、日々の中で小さな癒しや心の余白を求める人に向けたコワーキングスペース。

コンクリートの洗練された質感、木のぬくもりや植物のやさしさが共存する空間を軸に、
都会の中でも自然と深呼吸できるような穏やかさを表現しました。

人と空間、人と人との間に、過度な干渉はないけれど、確かにつながりを感じられる。
静けさの中に温度を感じるトーンと、余白を活かしたレイアウトで上質で心地よい世界観を目指しています。

|　キーワード

• ナチュラルで落ち着いた配色

• 植物や自然光を感じる写真選定

• 知的さとやわらかさのバランス

06. デザインポイント

サイト全体のデザイン方針

ペルソナが大切にしている「成長・自由・上質な環境」を軸に、コワーキングスペースで過ごす時間そのものが心地よく想像できる世界観を目指しました。
過度な装飾や情報量は抑え、写真と余白を活かすことで、空間の広がりや落ち着いた雰囲気、そこで得られる体験価値が自然と伝わる構成としています。
また、世界観を重視しながらも、初めて訪れるユーザーが迷わず理解できるよう、情報設計は直感性を意識。
はじめての利用でも不安を感じにくく、「ここなら自分らしく過ごせそう」と感じてもらえる、安心感のあるトーンを大切にしました。

|　ファーストビュー・メインビジュアル

• デザイン意図

空間の雰囲気が一瞬で伝わる写真を大きく使用し、コワーキングスペースで過ごす時間を直感的に想像できる設計としました。テキスト量は最小限に抑え、「成長・自由・心地よさ」といった価値観を、言葉ではなく視覚から感じ取れることを重視しています。

• UI設計（CTA・情報配置）

利用プランへすぐにアクセスできるよう、右下に丸型のCTAボタンを配置。メインビジュアルの世界観を崩さず、視線の流れの中で自然に認識できる位置としています。
また、駅からの利便性がひと目で伝わるよう、駅から徒歩何分かが分かる情報をさりげなく配置し、初めて訪れるユーザーにも安心感を与える設計としました。

• 世界観表現

写真を主役に、背景にはコンクリートの質感を取り入れることで、自然光が差し込む洗練された空間の心地よさを表現。余白をしっかり確保しながら、メインビジュアル内で必要な情報が過不足なく伝わる、落ち着きと上質さのある世界観を目指しました。

|　EVENT（新規追加セクション）

ワイヤーフレームにはなかった「人とのつながり・学びの場」としての価値を、体験としての魅力を伝えるために新たに追加したセクションです。
写真を中心としたスライド形式の構成にすることで、イベントを通じた交流や成長のイメージ、ここでしか得られない体験価値が視覚的に伝わるよう設計しました。
単なる作業スペースではなく、“利用する場所”から“関わりが生まれる場所”へと印象づけることを意識しています。

|　SPACE

各スペースの特徴が一目で伝わるよう、写真＋簡潔なテキストの組み合わせで構成しました。見出しの隣にアイコンを配置することで、どんな使い方ができる場所なのかを直感的に理解できる設計としています。
用途ごとの違いや使い分けが感覚的に把握できるよう、情報量とビジュアルのバランスを重視しました。

|　FLOOR MAP（新規追加セクション）

初めて訪れるユーザーの不安を軽減するために追加したセクションです。
空間全体の配置や動線を把握できることで、利用イメージを具体化し、安心感につなげています。表現はシンプルな図解にまとめ、視覚的な分かりやすさを優先しました。

また、プランセクションで使用しているアイコンをフロアマップにも共通して配置することで、それぞれの場所がどのような雰囲気・用途なのかを直感的に理解できるよう設計。
「この場所を利用する自分」を自然と想起させることを意識しています。

フロアマップは Illustratorで制作し、情報整理と視認性のバランスを取りながら、サイト全体のトーンと統一感を持たせました。

|　PLAN（こだわったセクション）

情報量が多くなりがちな料金プランは、比較しやすさと視認性を最優先に再構成しました。料金がひと目で把握できるレイアウトにすることで、ユーザーが迷わず検討できる導線を意識しています。

また、初めて利用するユーザーにも選びやすくするため、あえて「おすすめ」の表記を設け、自分に合ったプランが自然と見つかるよう強弱をつけたデザインとしました。
施設で利用できる内容については、アイコンを用いて視覚的に整理し、テキストを読み込まなくても違いが理解できる構成としています。

|　PHOTO GALLERY（新規追加セクション）

言葉では伝えきれない空間の空気感や過ごし方を伝えるために追加したセクションです。
写真を通して世界観を深め、「ここで過ごす自分」を自然と想像できる余白として機能させています。

ギャラリーの下部には、キャッチコピーとCTAを配置。まず写真で雰囲気を感じてもらい、その体験イメージを言葉で補強したうえで、行動（申込み）へとつなげるレイアウトを意識しました。世界観の余韻を保ったまま、次のアクションへ進める導線設計としています。

07. 学び

クライアントから与えられた要件やワイヤーフレームをそのまま形にするのではなく「ユーザーはどんな気持ちで情報を受け取るか」 を常に考えながら設計する重要性を学びました。情報整理・分析を通して、デザインは見た目だけでなく、体験や行動を後押しする役割を持つことを改めて実感しました。