【課題】LPデザイン制作

|　制作したPCデザインカンプとSPワイヤーフレーム

|　クライアント情報

■クライアント名：WORK ,inc.

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

|　要件

■目的：WORK lounge Aoyamaについて知ってもらうこと

■ターゲット：

・ビジネススクールWORKの会員様

・会員ではないがWORKが気になっている方

■トーン&マナー：ペルソナに合わせて制作してほしい

|　ペルソナ

|　工夫したこと

既存のPCのワイヤーフレームから、ペルソナを熟考してユーザーストーリーを考えながら、コンテンツや画像を追加するなどの見直しを行いました。

■配色について

今回、テーマカラーをくすんだブルーに設定しました。

ペルソナは30代のキャリアウーマンで、向上心の強いビジネスパーソンだったので、清潔感やビジネスを連想させる青をチョイス。

ただし、女性らしい落ち着きや上品さを出したかったので、真っ青ではなく、少しくすんだブルーを選びました。

■ワイヤーフレームを初期のものから変更した箇所とその理由

01.  First View

ニュースタブをファーストビューに追加することで、ラウンジが実際に稼働していることがサイトを訪れてすぐに伝わるようにしました。

02. CONCEPT

ペルソナのイメージに近い、パソコンで作業をする女性の写真を追加し、親近感、臨場感を出す工夫をしました。

03. 特徴（コンテンツを追加）

WORKSの会員ではないユーザーに対して他のコワーキングスペースとの差別化を図るべく、特徴の項目を足しました。

ペルソナはキャリアを向上させる繋がりを求めているので、交流会やビジネスコンテストを通して、ビジネスコンテストや交流会を実施していることを特徴のひとつとして追加しました。

04. SERVICE（コンテンツを追加）

ワーキングスペースを探す上で、必要な設備やサービスがあるか知りたいユーザーは多いと想定し、コンテンツを追加。

アイコン画像を入れて、ぱっと見でわかりやすく。

05. DRINK MENU

最重要項目ではないため、カフェラテの画像の上にメニュー表のような形で配列し、コンパクトにまとめました。

06. SYSTEM

文字情報だけでなく、画像を入れる&ステップを分けることで情報が入りやすいようにしました。

07. CTA（アプリDL促進コンテンツ）

アプリのUIイメージを追加。

さらに、アプリ経由で利用でドリンクがもらえる情報を入れることで、ユーザーへのベネフィットを提供し、アプリDLを促進する工夫をしました。

08. CONTACT（コンテンツを追加）

よくある質問を見て、疑問が解消されないユーザーのために、お問い合わせフォームを設置しました。

09. ACCESS

実際に会員が訪れる際の参考になるよう、建物外観と最寄り駅情報を追加しました。

|　制作を通して学んだこと

1. 　（必要に応じて）余白はちょっと大袈裟くらいにとっても良い。

余白をしっかり持たせることで、見ていて気持ちの良いデザインになる。

また、伝えたいメッセージを強調することができるということを学びました。

逆に、余白が十分にない場合、息苦しい・余裕がない印象を与えることもわかりました。

2.　強弱の重要性。

サイトに訪れるユーザーは、全ての文字情報を隈なく読んでくれるわけではない。

そのため、ここは絶対に読んで欲しい！というポイントがしっかり伝わるよう、しっかりと強弱をつけることが大切であると学びました。