【課題】LP制作(PCワイヤーフレーム・デザインカンプ)

OVERVIEW

SHElikes MULTI CREATOR PROJECTの課題で、LP制作に取組みました。PC版ワイヤーフレームの修正と、PC版デザインカンプを制作しました。またSP版のワイヤーフレームも制作しました。(制作時間:3週間)

YEAR 2021

* 課題の目的 *

・ワイヤーフレームがある状態からデザインカンプを制作することに挑戦する

・Webデザインをする際に気をつけるべき点を学ぶ

・前回の課題でインプットしたPCとスマホのレイアウトの変化を自分で考えられるようになる

----------------------------------------------------------------------------------

1.クライアント情報

クライアント名:WORK ,inc.

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

2.要件

ターゲット:ビジネススクールWORKの会員様/ビジネススクールWORKの会員ではないがWORKが気になっている方

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

トンマナ:下記のペルソナを参考にして制作をしてほしい

3.LP制作におけるデザインの意図に関して

1)コンセプト『なりたい自分へ1歩近づく』

・自分の理想像に近づく場所

・成長 キャリアアップ

・人とのつながり 新たなコミュニティ あたたかみ

・女性らしさ 上品

2)配色

【ベースカラー】グレージュ

 ターゲットは20~30代の働く女性ということで、都会的なスタイリッシュな印象に仕上げたいと 思いました。しかしひとつのコミュニティとしても活用できる場所ということで、"人とのつなが り"をイメージし、スタイリッシュな中にも、あたたかみのある女性らしさを表現できるカラーを 選びました。


【アクセントカラー】赤紫のグラデーション

 ・赤の印象:活気、活動的、積極的、勇気

 ・紫の印象:知的、上品

 ペルソナでは、仕事での成果をもっと出していきたい、経営への理解も含めてゆくゆくは役員になりたいが起業も考えている、強いチームを作るためマネジメントやコーチングのスキルも学びたいなど、しっかりと自分の理想像がある女性でした。

 目標をもって行動する"活動的”、かつ”積極性”をイメージさせる赤と、”知的”かつ”上品”という印象を与える働く女性をイメージさせる紫をグラデーションで表現しまし た。

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


5.工夫した点

1)ワイヤーフレームで工夫した点

 更新頻度の高いカテゴリーをページの上部に配置しました。(最新情報やイベント情報)

 今のご時世気になる営業時間や、定期的に内容の変わりやすいイベント情報を配置することで、目に留まくより伝わりやすいかなと考えました。また上部にあることで、すぐにチェックすることが出来るためアクセスする回数も増えると見込まれます。


2)デザインカンプで工夫した点

 配色に一番こだわりました。高い目標をもつ働く女性がペルソナとなっていたため、スタイリッシュな雰囲気に仕上げたいと考えました。また新たな人脈をつくりたいという記載もあったので、あたたかみも出すため「グレージュ」をメインカラーにしました。グラデーションを使用することで、あたたかさをさらに演出できたと思います。

 また見やすいサイトにするため、余白を十分に取り、セクションの区切りは写真やカラー変更をして工夫をしました。

6.制作を通して学んだこと

情報分析の大切さ

ただただ作り上げていくのではなく、クライアント情報やペルソナをしっかりと理解し、ターゲットにあったサイトにするにはどのような配置にするべきか、どのような配色にするべきかなど、分析をしたうえで制作をする。

実際に見る人の立場になることで、誰もが見やすいサイトを作り上げることが出来る。一から作り上げたことで、今回の気づきに繋がりました。