【課題】LPデザイン

❑目次❑

1.概要

2.成果物

3.要件

4.ワイヤーフレームの改善提案

5.ムードボードと配色

6.頑張ったポイント／学んだこと

1.概要

制作時間：約30時間

制作範囲：情報設計、ワイヤーフレーム、デザインカンプ

使用ツール：Photoshop

2.成果物

3.要件

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

ターゲット
・ビジネススクールWORKの既存会員
・会員ではないが、ビジネススクールWORKが気になっている方
・20代〜30代のビジネス感度の高い女性

目的
・会員が無料で利用できるコワーキングスペース「WORK lounge AOYAMA」の認知拡大
・ビジネススクールWORKの会員を増やす

ペルソナ像
【属性】
・32歳、東京在住
・仕事で成果を出したい
・某メガベンチャーゲーム事業部部長（8年目）
・既婚で旦那さんと二人暮らし

【背景や行動】
・キャリアアップのために積極的に投資・行動する
・同じような目標を持った同年代の女性とつながりたい

【ニーズやゴール】
・仕事での成果を今以上に出したい
・経営者とのつながりを持って経営への理解を深めたい
・強いチームを作るための、コーチング・マネジメントを学びたい

トンマナ
・ペルソナ像に合わせる

4.ワイヤーフレームの改善提案

PC版のワイヤーフレームは、クライアント側で制作したものを改善提案するという要件定義でした。

5.ムードボードと配色

ムードボード

＃落ち着き
落ち着いて作業に集中できる印象にする狙いと、ペルソナが8年目で部長職についている大人の女性であることから連想。

＃暖かみ
まだ来たことがない人でも安心して来てもらえるように。

＃情熱
ペルソナの「キャリアアップのために積極的に投資・行動する」、「仕事での成果を今以上に出したい」から、仕事に対して情熱的であることを表現。

配色

暖かみがありつつ、落ち着きを表現するために、暖色系でまとめました。
アクセントカラーは、情熱を表現するため彩度の高い赤を用いました。

6.頑張ったポイント／学んだこと

頑張ったポイント

• 伝えたいイメージにあった配色になるように工夫しました。参考サイトを見たり、色の持つイメージを改めて調べて配色を決めました。
• コンセプトなどの背景のあしらいは、落ち着いていてシンプルなページ全体のイメージを崩さないように意識し、細い線を用いました。また、「他の利用者と交流できる・繋がりができる」ことから連想して、線が交差しているようなあしらいにしました。

制作を通して学んだこと

• ペルソナを踏まえて伝えたいイメージを考え、それをデザインに落とし込む過程を学びました。ムードボードを作ることで、イメージをより明確にでき、デザインをする際に伝えたいイメージから離れてしまうことを防げると学びました。
• 直感的にわかるUIになっているか、読みやすい行間になっているかなど、Webデザインをする際に気を付ける点を学びました。