時間を有効に使える集中環境
仕事や学びに使える時間が限られている方に向けて、家でもオフィスでもない「第3の場所」を提案。移動や雑音に妨げられず、気持ちを切り替えて集中できる環境を、設備やサービスの紹介を通じて伝えます。
コワーキングスペースのLP制作
オンラインスクール「SHElikes」PROデザイナーコースの課題として、コワーキング施設「WORK lounge AOYAMA」の新規会員獲得を目的としたLPを制作しました。
- 制作時期
- 2026年6月
- 制作期間
- デザイン（10日間）／コーディング（1週間）
- 使用ツール
- Figma／Photoshop／Illustrator
- 使用言語・ライブラリ
- HTML／CSS／jQuery
- 担当範囲
- ムードボード／ワイヤーフレーム改善／デザインカンプ／コーディング
制作物
SP版は制作中です
課題要件
要件書
| 目的 |
|
|---|---|
| クライアント情報 |
クライアント名：Work inc. ※架空の企業 働く人に新しい可能性を提供する事業を複数展開。都内で働くビジネスパーソン向けに、コワーキング施設「WORK lounge AOYAMA」を運営しています。会員には30代の女性が多く、キャリアアップに向けて仕事や勉強に励む人々が集まるコミュニティとしても機能しています。 |
| ターゲット |
|
| トンマナ | 洗練・モダン・上質・落ち着き・集中。カジュアルになりすぎず、高級感がありながらも、働く女性がリラックスして集中できる印象。 |
| 掲載コンテンツ |
|
| 課題の納品物 | PC版デザインカンプ／スマートフォン版ワイヤーフレーム（課題の制作スケジュール：2週間） |
情報設計
ワイヤーフレーム
ペルソナ
| 基本プロフィール |
|
|---|---|
| ライフスタイル・価値観 |
|
| 背景・課題 |
|
届けたい価値
自己投資にふさわしい、感性を刺激する上質な空間
インテリアやデザインに関心があり、上質な環境を大切にする方に向けて、洗練された内装や天然素材の質感を写真で紹介。自分を高める時間を心地よく過ごせる空間としての魅力を伝えます。
心地よい距離感で、緩やかにつながるコミュニティ
仕事や勉強に意欲的な人々との交流を通じて、学びや刺激を得られる場所であることを伝えます。イベント情報を掲載し、集中する時間と人とつながる機会の両方を持てる施設として訴求します。
セクションとユーザーストーリー
「気になる」から「利用してみたい」へ
-
01
メインビジュアル
空間の雰囲気や施設の世界観を感じ、興味を持つ
ユーザーの気持ち 素敵な空間だな
-
02
施設のコンセプト
家でもオフィスでもない、自分らしく過ごせる場所としての価値を知る
ユーザーの気持ち もう一つの拠点として、自分らしく過ごせそう
-
03
ご利用方法
施設の使い方を知り、自分が利用する場面をイメージする
ユーザーの気持ち こんなふうに利用できるんだ
-
04
料金プラン・施設・設備
料金や利用条件、設備を確認し、自分の使い方や予算に合うか判断する
ユーザーの気持ち 自分に合うプランはあるかな？必要なものがそろっていて快適そう
-
05
イベント
学びや交流の機会を知り、興味のあるイベントを見つける
ユーザーの気持ち 気になるイベントに参加してみたい
-
06
よくある質問
利用方法や申し込みに関する疑問を解消する
ユーザーの気持ち 気になっていたことが解決し、安心して利用できそう
-
07
アクセス
所在地や交通手段を確認し、無理なく通えるか判断する
ユーザーの気持ち ここなら通えそう
-
08
利用申し込み
希望するプランを選び、利用を申し込む
ユーザーの気持ち ここを利用してみよう！
デザインコンセプト
デザインディレクション
ペルソナである「上品で知的な女性」をイメージし、落ち着きのあるネイビーをメインカラーに選びました。
重くなりすぎない、やわらかさを感じるトーンを採用することで、知性と親しみやすさを両立しています。ベージュやアイボリーを組み合わせ、温かみと洗練された印象を加えました。
写真には、天然素材や上質な質感のインテリア・小物が映るものを選び、高級感と落ち着きのある世界観を表現しています。
デザインの工夫
1．情報の整理
- 情報の整理：料金プランでは、各プランに共通する内容と異なる内容を整理し、利用者が比較しやすいように分類しました。
- 設備・サービスの伝え方：クレジットカード決済への対応、禁煙、セキュリティなどの情報を追加し、アイコンで表示しました。設備やサービスの面からも、安心して快適に利用できる環境であることを伝えています。
2．イベントセクションの追加
- 追加した背景：クライアントとの打ち合わせ動画でイベント開催について言及があったため、元のワイヤーフレームにはなかったイベントセクションを追加しました。施設の魅力やコミュニティの活発さを伝えることを意図しています。
- 情報の分類：イベントを「学ぶ・つながる・つづける」の3つに分類し、利用者が自分の興味や目的に合った情報を見つけやすい構成にしました。
- 伝えたい魅力：作業のための施設利用に加え、新たな学びや交流の機会が得られる場所であることを訴求しています。
コーディングの工夫
1．ヘッダーのすりガラス表現
CSSの backdrop-filter を使用してヘッダーの背景にぼかしをかけ、すりガラスのような質感を表現しました。サイト全体の洗練されたトンマナに合わせています。
2．カードのホバーアニメーション
カードにマウスを乗せると、ふわっと浮き上がるアニメーションをCSSの transform と transition で実装しました。
本課題で学んだこと
ヒアリングから、伝えるべき価値を見つける
- ヒアリング動画を視聴し、クライアントからいただいたワイヤーフレームを見直しました。施設で開催されるイベントについての話から、学びや交流の機会も施設の魅力として伝えられると考え、イベントセクションを新たに追加しました。ヒアリングを通してクライアントの意図を汲み取り、伝えるべき価値を構成に反映することの大切さを学びました。
比較・選択しやすい構成を考える
- 料金プランやイベントの情報を整理する中で、利用者が比較・選択しやすい構成を考えることが、利用予約につながる情報設計の土台になると感じました。