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

📝制作情報

使用ツール：Photoshop（ワイヤーフレーム・デザインカンプ）、figma（ムードボード）

作成時期：2025年11月

作成時間：13日間　約26時間

（ワイヤーフレーム再考6日＋デザインカンプ作成7日）

🗂️目次

・制作物

　デザインカンプ

　要件

　ワイヤーフレーム（PC版／SP版）

　ムードボード

・制作を通して

　工夫したポイント

　課題を通して学んだこと

　講師からのFB

🎨制作物

📌デザインカンプ

📌要件

ヒアリング動画を参考に要件をまとめました。

サイトの目的

WORK lounge AOYAMAの新規会員の獲得。広告やSNSから流入してきた方に施設の
利用申し込みや見学予約のアクションに繋げたい。 

ターゲット

都内で働くキャリア志向が強い方。外交的で自己成長に積極的なタイプのビジネスパーソン。
30代ぐらいで経済的にも余裕があり、自己投資によってさらにメリットを得ようとする方。
「出先の偶然の出会い／ひらめきを得たい」「同じ志向性を持った社外のプロフェッショナル
な方とつながりたい」「家と全く違ったおしゃれな空間で心地よく仕事や勉強をしたい」
「出社した後に通勤ラッシュが落ち着くまで過ごせる空間が欲しい」
「忙しい日々の中でも自分を高める余白が欲しい」等の意見を持った方々。

トンマナ

ペルソナを意識して作成。
ゴリゴリの営業感は出さず、WORK lounge AOYAMA
（落ち着いたデザインと程よい刺激を受けれるスペース）の世界観は守る。 

掲載コンテンツ

クライアントからのワイヤーフレームを参照し、3つのプランの説明などを行う。
セミナーやコーチングなどのイベント（組織を強くするビジネスパーソンのコミュニティ
づくり）も開催していることのアピールも行う。 

納品物

PCデザインカンプ：1440pxの幅。
SPワイヤーフレーム：375pxの幅
納品形式：デザインカンプとワイヤーフレームはPNG形式とphotoshopやFigmaの
デザインデータ。 

ペルソナ

基本プロフィール

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

ライフスタイル・価値観

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

背景・課題

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

ペルソナに届けたい価値

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

📌ワイヤーフレーム

PC版

SP版

📌ムードボード

ペルソナのある程度お金に余裕があってインテリアやデザインが好き、また上質な環境を大切にしている等の情報から、どこにでもあるコワーキングスペースではなく、グレードの高いインテリアに囲まれ、その場にいるだけでワクワクするような非日常な空間を求めると思い、「高級感のある」、「洗練された」、「モダン」、「落ち着いた」空間をテーマに制作しました。

💡制作を通して

💭工夫したポイント

洗練された世界観を感じてもらえるようなフォントや写真選びを行い、また上品でかつ無駄がないような丁度良い余白を意識して制作しました。コワーキングスペースのサイトだけでなく、高級感のある日用品やインテリアのサイトを沢山見ながら、構成方法を学び、実際にWORK lounge AOYAMAの空間を感じてもらえるように沢山の写真を配置しました。

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

クライアントのヒアリングから、ワイヤーフレームの修正とムードボードを提案し、実際にデザインカンプを制作する1連の流れを体験できました。その中で、クライアントの希望を取りこぼさないようにデザインにどのように落とし込むか、今までインプットした技法をどんな場面でアウトプットをすべきかに非常に時間を費やしました。またFB会で他の方の制作したサイトの雰囲気が自分とは全く違うもので、クライアントの制作してほしいイメージと自分の思い描いたイメージも全く違うものになる可能性が十分にあることに気づかされました。なるべく早い段階でムードボードのようなイメージが伝わるものを提案していくことは大事な作業であることを学びました。

🌟講師からのFB

● 重厚な色調が印象的なサイトです。戦略通り、上質な環境を好む方々に支持されそうなスペースであることが伝わります。

● ワイヤーフレームブラッシュアップでは、各セクションの役割を検討して、それぞれ最適な見せ方を考えていただきました。