ワークラウンジLP

目次

成果物

WORK lounge AOYAMA_PCデザインカンプ.pdf

WORK lounge AOYAMA_SPデザインカンプ.pdf

WORK lounge AOYAMA_PCワイヤーフレーム_再構築.pdf

WORK lounge AOYAMA_SPワイヤーフレーム.pdf

課題要件・ペルソナ

※ペルソナは課題要件をもとに自身で考えました。

ユーザーストーリー

流入時点の心理（広告・SNS → LP）
まだ本格的な申し込み段階ではなく、「コワーキングスペースを探している」初期フェーズにあり、3〜5件ほどを比較検討している状態だと考えられる。価格や設備といった条件面よりも、「自分に合うか」「その場の空気感が心地よいか」といった感覚的な相性を重視しており、即決するというよりは、実際の雰囲気や体験を通して判断材料を集めたいと考えている段階だと想定される。

修正や追加情報追加の意図
まずは、雰囲気が合うかの確認をしている段階を想定したので、FVとコンセプトをわけ、しっかりと想いが伝わるように設計。他社と比較も考えていると思うので、LPを見ている間に情報が足りないと離脱してしまうと感じた。CTAまでに比較できる情報を増やし、離脱せずに見学までのアクションを起こしてほしいと考え追加と並び替えを行なった。CTAまで見てくれた方は興味を持ってくれていると思うので、 CTAより下は補足情報として必要な方だけが見れるようにした。

デザインコンセプト

「余白が、思考を深める。」
忙しい日常から少し距離を置き、 一歩足を踏み入れた瞬間に背筋が伸びるような、「自分を高める余白」をWeb上で再現することを目指した。情報を過度に詰め込まず、あえて余白を設けることで、利用者が求める「思考の余白」「自分を高める時間」を視覚的に体験できる設計とした。「申し込みを急がせるLP」ではなく、「空間との相性を確かめるLP」として設計した。情報量よりも空気感を感じていただけるデザインにし、体験想起ができるような静かなトーンで構成した。

ムードボード

デザインのコンセプトを、「余白が、思考を深める。」としたので、落ち着いた雰囲気で制作した。また、交流会などのイベントもあるので、シンプルな写真だけではなく、ソファーにカラーが入った写真も加えて作成した。

配色について

落ち着いた雰囲気ベースカラーとメインカラーをネイビーと白を用いることで落ち着いた雰囲気を表現。女性利用者が多い施設であることを踏まえつつも、性別に寄りすぎないニュートラルなカラーを採用した。誰にとっても居心地の良い空間を表現した。アクセントカラーでは「落ち着いた雰囲気の静」「イベントなどの交流もあるという動」を表現したいので、寒色と暖色を使用。

ベースカラー：ホワイト

ホワイト：余白・静寂・洗練
→#ffffffの白ではなく少し黄色味を入れることで洗練された空間を表現するとともに集中しやすさを表現

メインカラー：ネイビー
ネイビー：知性・信頼・落ち着き
→思考を深める場所としての静かな強さを表現

アクセントカラー：寒色 × 暖色
寒色：静かな集中空間（静）
暖色：交流やイベントによる刺激（動）
→寒色は集中や整う感覚を、暖色は交流や温度感を表現し、施設の二面性をバランスよく配色した

デザインのこだわり

①ナビゲーションの追従
横にナビゲーションを配置することでメイン部分の画面を広く見せることができ、今回コンセプトにしていた余白も表現できるようにした。また、CTAボタンも追従させることでどのタイミングでも申し込みが行えるように配慮した。

②ナビゲーションアクセス部分
アクセスの詳細はLP下部まで行かないとわからないため、だいたいの位置がわかるように「表参道駅から徒歩5分」を追加。

③CTAボタン
制作の目的に「施設の利用予約や見学の申し込みのアクションをとってもらうこと」もあるため、アクションを起こしやすいような設計にした。検討段階の方には申し込みボタンを押すのに勇気がいるため、見学予約のボタンと分けて設置。クリック先は「利用申込」「見学予約」同じフォームになる想定。

SP版でもどのタイミングでも申し込みができるようにCTAボタンは追従するように設定を想定している。

④EVENT＆LEARNINGセクション
WORK lounge AOYAMAの特徴として交流会があるので、どんな交流や刺激が得られる場所なのかを伝えるために追加。架空バナーも自分で制作した。空間の思想やコミュニティの温度感を可視化し、他施設との差別化につなげる役割も含んでいる。LPなので離脱を防ぐためにもバナーのみの表示で特に遷移はしない想定。SP版はカルーセルに設定した。

⑤VOICEセクション
お客様の声を載せることでどんなそうの方がきているのかイメージでき、自分と合うかを判断できる。アイコンではなく写真を採用することでリアルにイメージできる。また、年代や働き方も記載することで交流できる人のイメージをつけられると考えた。
SP版はスライドショーのように自動的に流れる設定にする想定。

制作を通じて学んだこと

今回の制作を通して、デザイン作業そのものよりも、要件の解釈やデザインコンセプト、ユーザーストーリーの設計が重要であることを学びました。これらが十分に整理されていない状態で制作を進めると、判断基準が曖昧になり、デザインの方向性がブレたり、説得力に欠けるアウトプットになってしまいます。
一方で、コンセプトやユーザーストーリーを明確に定義しておくことで、制作途中に迷いが生じた場合でも立ち返る軸ができ、意思を持って判断できるようになりました。結果として、統一感のあるデザインにつながったと感じています。
また、クライアントワークにおいては、制作前にコンセプトを共有し認識を揃えることが、スムーズな進行や手戻りの防止につながると考えました。デザインの完成度だけでなく、「なぜこのデザインなのか」を説明できる状態をつくることの重要性を実感しました。