コワーキングスペース|Webサイト|課題

OVERVIEW

SHElikes PROデザイナーの課題にて、会員専用コワーキングスペースのLPを制作。 ヒアリング動画をもとに要件定義を行い、クライアント提供のPCワイヤーフレームをもとに情報整理・再設計を実施。PC / SPのデザインカンプをFigmaで制作。 制作時間:30時間

YEAR 2025

❖ 目次

  • 制作物
  • 概要(クライアント情報 / 要件 / ペルソナ)
  • 制作範囲
  • 情報設計|WFの改善提案
  • デザインコンセプト
  • デザインの工夫
  • 本課題で学んだこと

❖制作物

❖ 概要

❖ クライアント情報

クライアント名:Work inc.

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

❖ 要件

❖ ペルソナ

❖ 制作範囲

  • ワイヤーフレーム(PC:改善提案、SP:作成)
  • デザイン(PC・SP)
  • 画像選定・加工

❖ 情報設計|WFの改善提案

❖ デザインコンセプト

❖ サイトコンセプト
キャリア志向の強い30代ビジネスパーソンに向け、単なる施設紹介にとどまらず、「居心地の良さ」「交流の場」「自己成長の機会」の価値を伝え、求めている人の共感を促し、新規会員獲得につなげる。


❖ サイトテーマ
利用者がここで過ごすイメージを持てるよう、写真やデザイン、余白などでサイト全体に落ち着きと安心感・信頼感を伝えつつ、活気やコミュニティ性も感じられるような情報設計にする。


❖ ムードボード

❖ 配色

  • ペルソナの価値観と「落ち着く・居心地の良い空間」というテーマから設計。
  • 木の色味など柔らかなトーンで統一し、ベージュと白を基調に上品さと洗練された印象を演出。
  • アクセントに緑を加え、出会いや自己成長、リラックス感を表現。
  • 文字色はダークブラウンで上質感と可読性を両立。

❖ デザインの工夫

「洗練された空間」と「心地よい静けさ」を意識し、装飾を控えめに、余白や行間・文字間を広めに調整しました。

  • コンセプトは色や装飾で差別化 → 重要なメッセージとして印象づける


  • アイコンを追加 → 視覚的に分かりやすくする
  • アイコンはペンツールで作成 → 統一感を出すため


  • +クリックで開く仕様に変更 → 縦の長さを縮小


  • SPでは表を横スクロールで閲覧する仕様に切り替え
  • SPではセクション内CTAは設置せず画面下部に追従 

     → 画面幅が狭くなるため 

❖ 本課題で学んだこと

[ ① 提供されたWFをもとに改善提案を行う大切さ  ]

  • 提供されたWFでも、デザイナー視点で良い解決策があれば提案することで、より質の高い成果物を作れると実感


[ ② クライアントの目的達成を軸にデザインすること ]

  • 要件やペルソナから目的達成に沿った構成やデザインを考えることで、ブレずに制作できると感じた


[ ③ ムードボード作成の効果 ]

  •  ムードボードを作成することで、デザインカンプをスムーズに制作できることを学んだ