カフェ&コワーキングスペースのLPデザイン

目次

1. 作成したデザインカンプ

2. クライアント情報の整理 

3. 要件書の分析・LPのゴール設定

4. デザインガイドの作成

5. 制作で工夫した点

1. 作成したデザインカンプ

PC版がこちら↓

スマートフォン版がこちら↓

2. クライアント情報の整理

下記のように整理しました。

■クライアント情報
＜クライアント名：ビジネスWORK,inc.＞
女性向けのビジネススクール「WORK」を展開している。 会員は20~30代の女性が多く、 キャリアアップのためにビジネススキルを学び、 さらにそのアウトプットの場として定期的にビジネスコンテストなどのイベントも開催されている。

■LP制作目的
会員様限定のカフェ＆コワーキングスペースをオープンすることになったため、WORK rounge Aoyamaについて知ってもらい、利用につなげたい

■ターゲット
ビジネススクールWORKの会員様
ビジネススクールWORKの会員ではないがWORKが気になっている方

■ペルソナ
【属性】30代 既婚女性 東京在住 入社8年目のベンチャー企業で部長を務めている。
【背景や行動】仕事が大好きで、スキルアップに投資をしてきた。同じような目標を持った同世代の女性と繋がり、お互いに切磋琢磨しあいたい。会社外での人脈を作りたい。
【ニーズやゴール】仕事での成果をもっと出していきたい。経営への理解も含めてゆくゆくは役員になりたいが、起業も考えている。強いチームをつくるため、マネジメントやコーチングのスキルも学びたい。

※上記に情報はSHElikes MULTI CREATOR PROJECTの課題書に記載の情報を引用しています。

3. 要件書の分析・LPのゴール設定

クライアントからの要件書とペルソナシートを読み込み、以下の点を考えました。

※クライアント様との打ち合わせ用に「まとめシート」を作成しました↓

-まとめシートの内容-

①ペルソナの仕事の価値観を分析し、コワーキングスペースの利用目的を定める

・ペルソナとなる女性は、上昇思考が強く、仕事で成果を出して社内で出世、または自身の市場価値を高めたいと思っている。

・そのため、ビジネススクールの会員制コワーキングスペースには「会員同士での切磋琢磨を通じてビジネススキルを上げる環境」「自分と同じ属性の女性と情報交換をして、人脈を作れる環境」を求めていると推量した。

②コワーキングスペースの利用に繋げるための、LPのゴールを設定

・会員様に向けては「コワーキングスペースを気に入ってもらい、予約専用アプリをダウンロードしてもらうこと」をゴールとして設定。

・非会員様に向けては「まずはビジネスWORKのLPに飛んでもらい、スクールに入会後してもらうこと」をゴールとして設定。

③設定したゴールにたどり着くために必要なコンテンツを用意

・会員様向けには「コワーキングスペースの設備の便利さ・充実度」「会員同士でのコミュニケーションの活発さ」を知ってもらいたい。

・非会員向けにはコワーキングスペースの「イベント情報や利用者の声」を通じて、会員同士で切磋琢磨できるビジネススクールであることを知ってもらいたい。

3. デザインガイドの作成

LPを作る際のトンマナを整理し、上記のまとめに記載の方針でLPを作ることにしました。※クライアント様との打ち合わせ用に「まとめシート」を作成しました↓

5. 情報設計・デザインで工夫したポイント

クライアント様との打ち合わせ用に「まとめシート」を作成しました↓

-まとめシートの内容-

①メインビジュアル

・アプリダウンロードボタンを真ん中に配置して、ダウンロードを促す。

・グローバルメニューをひと目見てコンテンツがわかるようにした。また非会員様向けに「ビジネスWORK」という運営元のLPに飛ぶボタンを配置。

・NEWSの更新状況が反映され、2回目以降にサイトに訪れた人も、新しい情報があるかどうかがわかる。

②コンセプト

・チェックボックスを目印に、特徴を箇条書きにしてわかりやすく表現。

・ファーストビュー とコンセプトを気に入ってもらったら、すぐに利用方法を確認して

アプリダウンロードのCTAに飛べるようにボタンを設置。

③ファシリティ

・Wifiなどの設備や、フロアマップはひと目で確認できるようにアイコンと図で表現。

・写真と文章の配置にあたり、余白の規則を決めて一つの情報が一まとまりに見えるように、ガイドを引いて丁寧に配置した。

④システム

・利用方法のステップは見やすく3つに整理して配置。すぐ下にアプリダウンロードのCTAを配置して、ユーザーが利用方法を迷わないように設計。

・LPのゴールの一つである予約アプリのダウンロードを促すために、背景をグラデーションにしてCTAセクションを目立たせている。

⑤イベント情報

・LPのトンマナに合うように、画像のフチにグラデーションで装飾。

⑥利用者の声

・利用者の年齢や職業を明記した利用者の声を載せることで、会員様でも非会員様でも、このコミュニティに興味を持ち、共感をしてもらえるようにしている。

⑦アクセス

・アイコンを配置することで直感的に情報がわかるようにしている。

・建物の外観がわかる写真とGoogle Mapを配置し、ユーザーが迷わずたどり着けるようにしている。

⑧運営元の「ビジネスWORK」のLPに誘導するCTAセクション

・非会員様も見るLPなので、このLPを見て運営元のコミュニティである「ビジネスWORK」の入会に興味を持った場合に、すぐに詳細LPに飛べるようにCTAセクションを設けた。

以上です。

制作の過程はこちらのブログ記事にも書いております。