【自主制作】架空LPコワーキングスペースWebサイト

OVERVIEW

| SHElikes PROデザイナーコース実践課題 【制作範囲】 ・クライアント提供のワイヤーフレーム(PC用)の修正  ・スマホ用のワイヤーフレーム作成  ・デザインカンプ(PC用)

YEAR 2025


【制作時間】約10日間 (WF:10時間、デザインカンプ: 25時間)

【制作年】2025年12月

【使用ツール】Figma


|  制作物


| 課題要件

提供されたヒアリング動画をもとに、クライアントの要件を整理・要約した。

クライアント情報

クラアント名 :  Work inc. 

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

ターゲット

  • 都内で働くキャリア志向強い方
  • 30代 外交的 自己成長に積極的なビジネスパーソン
  • 経済的に余裕 自己投資によって更なるメリットを求める人
  • 家とは違う環境で仕事や勉強ができる場所を求めている 

目的

  • 新規会員様の獲得
  • 広告やSNSから流入した人に施設利用申し込み・見学予約をしてもらう

  ⇒新規会員向けの特化ページ(はじめての人向けのサイト構成を希望)

トンマナ

  • ごりごりの営業ページではなくブランドの世界観や信頼感は保ちたい
  • 明確なこだわりはない ペルソナを意識したものでご提案を希望てもらう


| ペルソナ

提供されたヒアリング動画、ペルソナの基本プロフィール、ライフスタイル・価値観をもとに、背景・課題、届けたい価値を考えた。

| デザインコンセプト

要件定義、ペルソナから以下のムードボードを作成した。

| キーワード

「上質」「余裕」「新しい予感」

洗練された配色とフォント、そして広めの余白を活かすことで、高級感と心穏やかに仕事に向き合える「余裕」を表現しました。落ち着いて集中できるだけでなく、一歩踏み出すための「前向きな刺激」も感じられる世界観を目指しています。

 

| 配色

ビジネスとリラックスの間にある心地よさを表現するため、柔らかなベージュやブルーグリーンを基調に配色した。

リモートから出社へ切り替わるユーザーが、リフレッシュしながらも高い集中力を維持できるよう、落ち着きと前向きな変化を両立させた配色を意識した。 

| フォント

高級感を出しつつ、シンプルながらも洗練された印象の游ゴシック、Noto Sans JP 、Jost、Garamondを採用。

| 情報設計

| 工夫したところ

|FV 

ペルソナの価値観に寄り添い、共感を促すコピーをFVに追加した。

「キャリアを磨く、上質な余白。青山で見つける、私のサードプレイス」


コンセプト

FVに配置するには情報量が多いため別のセクションを立ててしっかりと読んでもらえるようにしました。あしらいも抑えてシンプルにしています。


イベント

付加価値の部分として競合との差別化を図れるサービスの一つとしてしっかりとセクションとして追加しました。


「ご利用者様の声」追加掲載

同じ年代や価値観を持つ方の感想を読むことで、「自分もこのコワーキングスペースで学びたい」「似た考えの人とつながりたい」と感じていただけるよう、ペルソナに近い声を意識して追記した。 


利用開始フローの視覚的補助 


利用開始方法は文字情報のみで構成されており、内容を丁寧に読まなければ理解しづらい点が課題であった。

ステップごとにAdobe Fireflyを活用して線画イラストを作成し、トーンを揃えることでサイト全体の世界観の統一を図った。

これにより、利用開始までの流れを直感的に把握でき、来訪者が本来集中したい作業により多くの時間を割ける設計とした。

 

|まとめ

  • ヒアリングや要件理解をもとに情報設計を行い、参考事例を比較しながら整理することで、デザインに入る前に全体の方向性を明確にできると学んだ。

  • 配色やフォントは、情報設計が固まった後に検討することで、見た目だけでなく意図のあるデザインにつながると実感した。

  • 情報設計を通して、「なぜそうしたのか」を言葉で説明しながらデザインすることの大切さに気づいた。



|講師からのFB