【自主制作】コワーキングスペースを運営する会社のLPデザイン

【使用ツール】photoshop、figma、Visual Studio Code 

【制作期間】約１ヶ月

（ワイヤーフレーム制作：１週間、デザインカンプ：２週間、実装：１週間）

【作成範囲】ワイヤーフレーム作成～実装まで

📍目次

・制作物

・課題要件、ペルソナ

・情報設計

・デザインコンセプト

・デザインの工夫

・本学習で学んだこと

📝制作物

📝課題要件

◆お題

・【クライアント名】Worklounge AOYAMA

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

◆目的

・新規会員の獲得。広告やSNSからの流入客から、施設問合せや見学の申込の獲得。

→獲得を目的としつつもブランドの信頼感を守りたいので、ゴリゴリの営業感はNO、会社の世界観を保つ。

◆ターゲット

・都内で働くキャリア志向が高い方

・外交的、自己成長に積極的なビジネスパーソン

・年齢は30代（経済的に余裕）

・自己投資によってさらなる高みへ成長しようとしている方

◆トンマナ要望

・明確なこだわりはなく、ペルソナを意識して作成してほしい。

・ムードボードでビジュアルイメージのすりあわせからはじめる。

◆入れたい要素

・提示されたワイヤーフレームを参照

・自己成長の機会となるコミュニティとしての価値も訴求

◆ペルソナ

📝情報設計

以下、課題要件を基に設定・考察しました。

〈ユーザーストーリー〉

メインビジュアルでは実際のコワーキングスペースの写真を使い世界観を伝え、コンセプトの記載に続けることで実際に利用した時のイメージを具体化させていく。その後は施設紹介、イベントの様子を見せるフローによって、「こんな空間で作業したい」「成長の機会がありそう！」というユーザーの熱量を高めていく。重要セクション下に都度「見学予約」「利用申込」のCTAを配置することで、予約への熱量が高まったユーザーのコンバージョン率を増加させるよう組み立てた。

〈構成〉

１ ファーストビュー

２ コンセプト

３ 施設紹介、スペシャルイベント

４ 見学予約・利用申込（CTA）

５ 利用方法

６ 利用プラン

７ 見学予約・利用申込（CTA）

８ よくある質問

９ 見学予約・利用申込（CTA）

10 アクセス

📝ビジュアル設計

〈デザインコンセプト〉

・「洗練された」「新たな出会い」「自己成長」

・意識の高いビジネスパーソンがユーザー像としてあるため、「アーバン（都会的）」「モダン」「スタイリッシュ」を想起させるデザインに落とし込んだ。

・都会的で洗練された「ブラック」「ネイビー」といったカラーが他社でもよく使用されており、業界において共通する部分だと分析。

・アクセントとして「少しくすんだオレンジ」を用い、らしさを表現した。

・フォントは一般的によく用いられる｢NotoSandsJP｣を主に使用。

〈デザインの工夫〉

◆FV

・ナビゲーションは洗練された、都会的なサイトの雰囲気を統一したかったため、アルファベットで表記しました。

・CTAボタンではアクセントカラーであるオレンジを用い、こなれ感や”らしさ”を出しました。

◆「コンセプト」

FVに続くコンセプトは、メインビジュアルで使用している写真にグラデーションをかけ、つながり感を出しました。

◆「スペース」

・カルーセル方式を用いて、実施されたイベントが流れて表示されるよう想定した。

◆「PLAN」

・直観的に理解できるようテキストで羅列するだけではなく、利用可能な設備は視認性の高いオレンジアイコンを、利用不可の設備はあえて視認性を下げたグレーアイコンを用いた。

◆各セクション

・全体的にスタイリッシュな印象を与えられるよう、使用する図形の角はあまり丸くしすぎないよう工夫しました。

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

・今回はクライアントからワイヤーフレームをもらっていたので、求めるサイトのイメージがつかみやすかったが、ゼロからつくると考えるとより難しいのだろうなと思いました。デザインカンプもコーディングやレスポンシブすることを考えながらつくらねばならず、試行を重ねました。クライアントが求めること、ユーザーの誘導意識など考えることが山ほどあり大変難しかったですが、とても勉強になる課題でした！