【課題】Webサイト制作（コワーキングスペース　LP）

【概要】

制作時期：2026年3月

制作範囲：Webサイト制作

制作ツール：Photoshop

目的：

• ワイヤーフレームがある状態からデザインカンプを制作することに挑戦する
• イメージを固めるためのムードボード作成に挑戦する
• Webデザインを制作する際に気をつけるべき点を学ぶ
• PCとSPのレイアウトの変化を自分で考えられるようになる

【制作目的】

会員制カフェ＆コワーキングスペースの新規会員獲得を目的として制作しました。 近年、リモートワークやフリーランスの増加により働く場所の選択肢が広がる一方で、「集中できる環境が欲しい」「仕事とプライベートを切り替えたい」といったニーズも高まっています。 そこで本LPでは、単なる作業スペースではなく、「目標に向かって頑張る人を支える場所」という価値を伝え、会員登録や見学予約へつなげることを目的としました。

【要件定義】

【ペルソナ】

【ムードボード】

【デザインコンセプト】

「理想の自分に近づくための、心地よいサードプレイス」自宅でもオフィスでもない第三の居場所として、集中できる環境・落ち着いた空間・前向きな気持ちになれる場所を表現することをコンセプトに設計しました。 コワーキングスペース特有の機能性だけでなく、カフェとしての居心地の良さも感じられるデザインを意識しています。

【制作物】

【制作時の工夫】

ファーストビューで施設の魅力を直感的に伝える

メインビジュアルには開放感のあるラウンジ空間を大きく配置しました。 訪問した瞬間に落ち着いた雰囲気・清潔感・快適な作業環境が伝わるようにしています。 また、「WORK lounge Aoyama」というブランド名と営業時間・利用実績を視認しやすく配置し、施設の信頼感を高めました。

共感を生むコンセプト設計

CONCEPTセクションでは、「理想の姿に向かって頑張るあなたへ」というメッセージを軸に構成しました。 単に設備を紹介するのではなく、資格取得・キャリアアップ・副業・独立など目標を持つユーザーの心理に寄り添うことで、感情的な共感を生み出すことを意識しています。

サービス内容をアイコンで視覚化

サービス紹介では、Wi-Fi・電源・参考書籍・プリンター・レンタルPCなどをアイコン化しました。 文字だけでは理解しづらい設備情報を視覚的に伝えることで、ユーザーが短時間で施設の利便性を把握できるよう工夫しています。

利用シーンを具体的にイメージできる構成

作業スペース、ミーティングスペース、カフェラウンジなどの写真を掲載することで、利用後の姿をイメージしやすくしました。 ユーザーが「ここで仕事をしている自分」を想像できることを意識しています。

カフェ機能を差別化要素として訴求

一般的なコワーキングスペースとの差別化として、カフェメニューを掲載しました。 仕事だけの無機質な空間ではなく、リラックスできる・長時間利用しやすい・居心地が良いという価値を伝えることを目的としています。

料金プランを比較しやすく整理

プランはシンプルに3種類に分類しました。 料金や利用可能時間を統一フォーマットで整理することで、比較しやすいデザインにしています。 利用目的に応じて最適なプランを選びやすくすることを意識しました。

利用開始までの流れを可視化

SYSTEMセクションでは、会員登録→利用予約→利用開始の流れをステップ形式で表現しました。 初回利用時の不安を解消し、会員登録へのハードルを下げる工夫を行っています。

FAQによる不安解消

利用前によくある質問を掲載することで、疑問を事前に解消できる構成にしました。 問い合わせの負担軽減とコンバージョン率向上を意識しています。

CTAを複数配置

LP内に新規会員登録・ログイン・お問い合わせのボタンを複数設置しました。 ユーザーの検討段階に応じて適切な行動を選択できるよう設計しています

【デザイン面での工夫】

ナチュラルで上質なカラー設計

全体を柔らかいカラーで統一しました。 コワーキングスペース特有の無機質な印象ではなく、温かみ・落ち着き・上質感を感じられるデザインにしています。

写真を活かしたブランディング

空間写真を大きく使用することで、施設の雰囲気や快適さを直感的に伝えています。 特に作業環境は言葉だけで説明するよりも、写真による訴求が効果的であると考えました。

余白を活かした読みやすい設計

情報量が多いLPでも読み疲れしないよう、セクションごとに十分な余白を確保しています。 また、見出し・本文・ボタンのメリハリをつけることで視認性を向上させています。

このLPでは、単に「作業できる場所」を紹介するのではなく、「夢や目標に向かって努力する人を支える場所」としての価値を伝えることを大切にしました。 コワーキングスペースを利用する人の多くは、何らかの目標や挑戦を抱えています。 だからこそ設備や料金だけでなく、「ここなら頑張れそう」「ここで理想の自分に近づきたい」と感じてもらえるようなデザインとストーリー設計を意識して制作しました。

【制作を通して学んだこと】

ヒアリングの内容やペルソナ像に基づいて、クライアントが求めていることを考え、それに近づけるための配色・画像選びをすることの難しさ、大切さを学びました。最初に設定したペルソナ像を意識して制作を進めていくことで世界観がブレずに制作できることに気づき、改めてペルソナ設定の重要性を感じました。

常に視線誘導を考え、クライアントから提出されたWFをブラッシュアップして、一から制作することで”なぜこの配色にしたのか”等、自分の制作意図を言語化する必要性を学びました。