架空LPデザイン制作(会員限定のカフェ&コワーキングスペース)
SHElikesの課題で、会員様限定のカフェ&コワーキングスペースのLP制作に取組みました。架空のクライアントからの要件書とワイヤーフレームを元に、PCのデザインカンプを制作しました。
【使用ツール】Illustrator/Photoshop
目次
① 要件
② 制作したLP
③ 工夫したこと
④ 制作を通して学んだこと
①要件
- クライアント情報
<クライアント名:WORK,inc.>
女性向けのビジネススクールを展開している。 会員は20~30代の女性が多く、 キャリアアップのためにビジネススキルを学び、 さらにそのアウトプットの場として定期的にビジネスコンテストなどのイベントも開催されている。 - 目的
会員様限定のカフェ&コワーキングスペースをオープンすることになったため、WORK rounge Aoyamaについて知ってもらいたい - ターゲット
ビジネススクールWORKの会員様
ビジネススクールWORKの会員ではないがWORKが気になっている方 - ペルソナ
【属性】30代 既婚女性 東京在住
【背景や行動】仕事が大好きで、スキルアップに投資をしてきた。同じような目標を持った同世代の女性と繋がり、お互いに切磋琢磨しあいたい。会社外での人脈を作りたい。
【ニーズやゴール】仕事での成果をもっと出していきたい。経営への理解も含めてゆくゆくは役員になりたいが、起業も考えている。強いチームをつくるため、マネジメントやコーチングのスキルも学びたい。
②制作したLP

③工夫したこと
■ゴールの設定
ペルソナについてユーザーストーリーを考えながらトンマナやデザインを決めていきました。ペルソナは仕事や学ぶことへの意欲が高く向上心がある人物と考えたので、サイト全体の配色はビジネスを連想させる紺色と大人の女性らしさを感じさせるベージュにしました。
また、クライアントの目的「WORK lounge AOYAMAについて知ってもらう」について、ユーザーに取って欲しい行動(ゴール)を設定しました。
・ビジネススクールWORK 会員
:WORK lounge AOYAMAに来てもらうために、アプリのダウンロードを促す

■コンテンツの再検討
- コワーキングスペースを利用する際の思考の流れとして理解しやすいように
①どういうところで、何ができるのか(コンセプト)
②利用可能なものは何があるのか(サービス)
③どうやって利用するのか(システム)を上部にまとめました - 上記を受け、「カフェメニュー」の情報自体は優先度が低いと考え、写真は1枚にまとめて順番を他のセクションよりも位置を下げました
- よくある質問を載せることでユーザーの不安に感じる疑問を払拭させます
1. First View

ユーザーがここで勉強するイメージが持てるような写真を選びました。カフェ&コワーキングスペースのLPなので、ビジネス要素が強い室内ではなく、明るい日差しが入り込んでいるカフェのような空間を想像してほしいと思いこの写真にしました。
2. Concept

コンセプトはユーザーとの認識を揃える場所だと思い、文章だけにして読んでもらえるように行間をゆったり目にしました。
3.Service

どんな設備があるのかが一目でわかるようにアイコンを設置したシンプルな見た目にしました。
4. System

文字情報だけでなく、イラストを入れることでより具体的にイメージができるようにしました。
5. Cafe

カフェ&コワーキングスペースのLPですが、この場所に来る方はビジネススクールの会員様がメインで主に勉強や作業をする目的が多いと思ったのでカフェメニューは詳しく載せずに気になる方だけが見るようなデザインにしました。
6. よくあるご質問
よくある質問を載せることで利用する前のユーザーの疑問や不安を払拭します。
7. Access

ユーザーが訪れる際に参考になるように地図と住所を載せました。
| 制作を通して学んだこと
■目的に沿ったデザインを考えること
いくら見た目が良くても目的に沿ってなければ意味のないものになるので、ユーザーがサイトを見ることで何を知りたいと思うか、作る側は何を伝えたいのか、ということを考えて作る必要さを学びました。
■意味のあるデザインを作ること
なんとなくでデザインしないことを学びました。なぜこのデザインにしたのか、どういう意図で配置したのかを説明できるようにすることが大事だということがわかりました。
