【課題】LP制作（PCデザイン・SPワイヤーフレーム）

【制作依頼内容】

新しくオープンする会員様限定カフェ＆コワーキングスペース「WORK lounge Aoyama」の利用方法やアクセス情報を載せたWEBサイト制作（PCデザイン・SPワイヤーフレーム）

・クライアント情報

クライアント名：WORK  ,inc  　

キャリアアップのためにビジネススキルを学び、さらにそのアウトプットの場として定期的にビジネスコンテストを開催している女性向けビジネススクールWORKを展開。メイン顧客は20〜30代女性。

・目的　

会員様限定カフェ＆コワーキングスペース「WORK lounge Aoyama」について知ってもらうこと。

・ターゲット

ビジネススクールWORKの会員様、ビジネススクールWORKの会員ではないがWORKが気になっている方。

・ペルソナ

30代女性、東京在住。某メガベンチャーゲーム事業部　部長。仕事が大好きでスキルアップに多く投資。

・ペルソナのニーズ、ゴール

同じような目標を持った同年代女性と繋がり、切磋琢磨すること。会社外での人脈を作ること。仕事で成果を出すこと。スキルを増やすことetc。

・提供素材

ロゴ、PC版ワイヤーフレーム

【成果物】

PCデザインカンプ・SPワイヤーフレーム

【工夫したところ】

1. ペルソナと目的に寄り添った情報設計

・ペルソナのニーズやゴールが”同世代女性との繋がり、切磋琢磨すること、仕事で成果を出すこと”といったことだったので、そこから「エネルギーが湧いてどんどん成長できる場」、「繋がりが生まれる場」であることを第一に伝えたい印象であると決定。また、WORK lounge Aoyamaがカフェでもあるということだったので、勉強し成長できる場所でありながも「リラックスできる場」ということを伝えることを決めました。以上のことを伝えるために、提供されたPC版ワイヤーフレームにはなかった”SPACE”という項目を配置。

・写真を配置し上記の3つの場を詳しく説明する文章を入れることで、利用者が利用している姿をよりイメージしやすく、臨場感を持てるように工夫しました。

2. 1より決まった印象を伝えるための配色と写真のレタッチ

・成長していくエネルギーを表すビビットオレンジをアクセントカラー、明るさと女性ならではの柔らかさを感じられるミルキーピンクをベースカラー、リラックスした雰囲気を出すための深緑をメインカラーに使用しました。

・写真でも統一した印象を与えたかったので全てオレンジのフォトフィルターをかけてレタッチを施しました。

3. 目的達成のための視覚化されてわかりやすいデザイン

目的＝WORK lounge AoyamaをWORKの会員、潜在顧客に知ってもらうこと。WORKに興味を持ってもらい利用してもらうこと。

・会員専用カフェ＆コワーキングスペースWORK lounge Aoyamaを潜在顧客にも知ってもらい使ってもらうために、アクセントカラーのビビットオレンジを使用し、ビジネススクールワークについて紹介するボタン、イベント情報を伝えるボタンを設置。

・気軽にLINEで問い合わせができるボタン

電話をするよりもLINEで質問、問い合わせをすることが多い現代。より気軽に問い合わせ、不安を解消し快適に利用してもらうためにLINEで問い合わせボタンを設置。

4. 情報の優先順位付け

提供されたワイヤーフレームでは、CONCEPTの次に配置せれていたDrink Menu。優先順位が低いと考え後方に配置。

5. トンマナ設定

目的やペルソナのニーズやゴールを明確化することで、配色、写真のレタッチ、雰囲気に一貫性をもたせました。

【制作を通して学んだこと】

1. デザインをする前に制作依頼内容をじっくり理解・分析することでデザインに一貫性が持て、根拠のあるデザインができること。

デザインを始める前に、デザインで達成したい目的はなんなのか、ペルソナのニーズやゴールを理解し、このペルソナだったらどんなコワーキングスペースに通いたいのか、どんな情報が欲しいのかを自分なりに分析し、ペルソナの分析と依頼者の目的をすり合わせることでデザインの軸を定めることができました。また、デザインの軸ができることでそれをもとに画像の配置、配色などを決めたので根拠のあるデザインができました。

2. コーディングを意識し、余白やフォントのサイズに規則を作ること。