課題 LP制作(会員限定のカフェ・コワーキングスペース)
SHElikes MULTI CREATOR PROJECTNO課題にて、LP制作課題に取り組みました。PC版ワイヤーフレーム修正と、PC版・SP版のデザインカンプを制作しました。(所要時間:100時間)
1. クライアント情報
クライアント名:WORK ,inc.
女性向けのビジネススクールを展開している。会員は20~30代の女性が多く、キャリアアップのためにビジネススキルを学び、さらにそのアウトプットの場として定期的にビジネスコンテストなどのイベントも開催されている。
2. 要件
ターゲット: ビジネススクールWORKの会員様/ビジネススクールWORKの会員ではないが、WORKが気になっている方。
目的: WORK会員:WORK lounge Aoyamaに来てもらうためのアプリをダウンロードしていただく。
非WORK会員: WORK lounge Aoyamaについて知ってもらうこと。
ペルソナ:
3. 配色
20代・30代の働く女性がターゲットなことから、女性らしさとスマートをイメージさせる配色にしたいと考え「ピンクブラウン」をベースカラーに選びました。しかしピンクブラウンがボヤッとなりすぎないよう背景はホワイトを選び、クリーンな印象を表現しました。
ピンクブラウン:ナチュラル、上品、愛らしさ
ホワイト:清潔感、信頼
ペルソナは「仕事が大好き」「同じ目標を持った同世代の女性と繋がりたい」「お互い切磋琢磨したい」「仕事への成果をもっと出しつつ経営の理解を深めゆくゆくは役員になりたい」といった背景や理想像がしっかりしています。そのためペルソナに沿った配色を選びました。
●スマートで仕事への知性を表すカラー
ネイビー:知性・上品・信頼・協力
●人との交流を深めたいと考えるペルソナの温かい思い
ブラウン:堅実、信頼、温もり
カレンダーの部分は、イベントや席の空き情報などの予定が記されています。ユーザーにとってワクワクしながら予定を確認してらえるよう、ポップかつ落ち着きもあるパステルオレンジとパステルブルーを取り入れました。
パステルオレンジ:明るい、おおらか、柔らかい
パステルブルー:爽やか、穏やか
1. ワイヤーフレームの修正
課題内では、あらかじめ用意されていた仮のWFがありました。しかし課題に記載されているペルソナをさらに自分なりに深掘りし、情報設計を練り直しそれに沿ったWFのデザインを行いました。
左から、課題内の元のWF→自分で修正と追加したWF
4. 制作したPC、SPデザインカンプ
5. 工夫した点
「20代・30代の働く女性」のペルソナを明確化、サイトのゴールを考え足りない部分は自分でブランディングを行い制作しました。
●設定されているペルソナの明確化
初めに20代、30代の働く女性といっても幅が広いと感じぶれないためにもペルソナ設定の明確化を行いました。
日本の大手、海外部門で働いている。
新卒から入った会社で仕事が慣れてきてこれからよりキャリアを高めるためにコワーキングスペースで人脈を増やしてキャリアチェンジをしたいと考えている。
グローバルを視点に考えている女性で海外交流も積極的にしていきたいと考えている。
●ゴールの明確化
目的であるWORK LOUNGE AOYAMAを知って頂くため「アプリの取得」をゴールに設定しました。アプリ取得によりユーザーに施設やサービス内容を知って頂きます。その後、予約に繋げられるようデザインをこだわりました。
アプリ取得でこだわった点
メインビジュアルでは一眼で店内のイメージを伝えたいと考え、店内の雰囲気が伝わる画像を持ってきました。そこで興味を持って頂いたお客様がすぐに次のステップ(もっと詳しい情報を知ること)ができるようメインビジュアルの真ん中にアプリのボタンを設置しました。
コンセプト・イベント・システム通してある程度閲覧者様に施設内容を知って頂いた後、全閲覧者様がサービスをすぐ利用できるようアプリのセクションを追加で設置しました。
●ワークラウンジ青山のブランディング
コンセプト 「グローバル視点でキャリアアップを考えるキャリアウーマン」
初めにワークラウンジ青山が「海外との交流を大切にしている思い」を閲覧者様に知って頂きたいと考えました。そこでコンセプトのセクションでは、ペルソナと外国人が楽しそうにコミュニケーションをとっているイメージ画像を選びました。
さらにその下、イベントのセクションを増やし定期的に変わる海外交流のイベント情報を設置することで、ワークラウンジ青山のブランド「らしさ」を引き立たせました。さらにイベントの設置により、イベントの内容が定期的に変動しやすいためアクセスする回数も増えると見込みました。
6. 制作を通じて学んだこと
「セクションの配置」「カラー・フォント・画像選び」などデザインや設計するもの全てに意味を持たせることの重要性を学びました。デザインを行う前に「ゴール設定」「目的」「ペルソナ」の情報を集め深掘りすることでそれに沿うデザインができ、一つ一つのフォントや配色に意味を持たせることができました。ユーザーやクライアントに響くWEBサイトを作るのに必要なことは、デザイン知識以前に情報設計がとても重要であることがわかりました。