WORK, ink. 様 コワーキングスペースLP

Website
Photoshop Studio

SHElikes MULTI CREATOR CORSEの課題にて、会員専用コワーキングスペースのLPを自主制作いたしました。クライアントからの要件書とワイヤーフレームをもとに、情報を整理・再設計しPC/SPのワイヤーフレームとデザインカンプを制作、STUDIOでサイト構築を行いました。

WORK, ink. 様 コワーキングスペースLP

  

  

目次

  1. 要件
  2. ワイヤーフレームの修正案
  3. 情報設計の工夫
  4. デザインのこだわり

1.要件

  

2.ワイヤーフレームの修正案

提示されたワイヤーフレームに対して、改めてユーザーストーリーと情報設計を考えた上で、6つのセクションを追加しました。

  

3.情報設計の工夫

▼アクションに促すCTA配置

  • 専用アプリをダウンロードしてもらえるよう、FVにアプリダウンロードボタンを入れ、さらにアプリダウンロードを強調するCTAセクションを追加しました。

  

  • CTAでは、アプリを検索した際にすぐに見つけられるようにアプリアイコンを自作。また、サイトをパソコンで見ながらスマホでダウンロードしてもらえうようにQRコードも載せました。

  

会員数を増加させるための工夫

  • 今回はビジネスWORKSの非会員もターゲットとなっているため、ビジネスWORKSの詳細ページへの誘導ボタンをコンセプトセクションに追加。興味を持った人がページに飛び、新規で会員になってもらえるように工夫しました。

  

  • また、遷移先のビスネススクールWORKのLPも実際に制作。トンマナは統一し、会員でない方が無料体験レッスンに興味を持ってもらえるよう、構成やデザインを工夫しました。

ビジネススクールWORKのLPはこちら▷▷▷ https://worklounge-aoyama.studio.site/1

  

ユーザーの興味やコワーキングスペースを利用したいと思わせる工夫

  • WORK lounge AOYAMAにおいて、最大の魅力3点を端的に分かり易くまとめたセクションを追加。このセクションでWORK lounge AOYAMAの魅力や他のコワーキングスペースとの違いを知ってもらうことで、より関心を持った方が以降もスクロールして見てもらえるように考えました。

  

  • また、WORK lounge AOYAMAの雰囲気がより伝わるように施設内の写真や説明を加えました。便利且つおしゃれな雰囲気を見て、閲覧者に「行ってみたい!」と思ってもらえるようなセクションにしました。

  

ユーザーの興味やコワーキングスペースを利用したいと思わせる工夫

  • メインビューのすぐ下に最新情報セクションを配置。忙しいバリキャリ女性でも、サイトを開いてすぐに最新情報が目に入り、イベントへの関心からサイト自体に興味を持ってもらい、サイトに留まってもらうことが狙いです。

  

  • また、WORK lounge AOYAMAの魅力の一つであり、今回のターゲットも関心が高いイベント情報のセクションも追加。社外の人と交流したいターゲットが興味を持つようなイベント情報を随時更新していくセクションにしました。下部にアーカイブ動画も載せる事でイベントへの関心を更に持ってもらい、足を運んでもらうきっかけになるように工夫しました。

 

4.デザインのこだわり

コンセプト

『エネルギッシュ且つしなやかに生きる女性達が出会い繋がる場所』

今回のペルソナ像は、いわゆるバリキャリ女性で更なるキャリアアップを目指し奮闘している方。また、ターゲットも20~30代ということで、大人な落ち着きはあるが仕事のためにプライベートの時間や自己投資も惜しまないような情熱的で努力家な方をイメージして上記のコンセプトを考えました。

 

スタイルガイド

 

  • コンセプトに合わせ、色味は情熱的且つエネルギッシュな深いオレンジ(テラコッタ)と大人っぽさが伝わるグレージュを選択。
  • フォントはメインで明朝体を用い、大人っぽさや洗練された雰囲気を演出。英語表記にはクラシックな雰囲気のあるフォントで落ち着いた女性らしさを表現しました。また、所々に游ゴシック体や筆記体のあしらいを用いる事で、かしこまりすぎず親しみやすさもプラスしました。
  • WORK lounge AOYAMAでは、同年代の仲間や各種イベントでの交流など社外の人との繋がりも持てる場ということで、サイトからも繋がりやしなやかさを感じられるような直線のあしらいをデザインに入れ込みました。