【課題】LPデザイン
SHElikes MULTI CREATOR COURSE でLPデザインの課題制作に取り組みました。架空のクライアントからの要件書とPC版ワイヤーフレームを元に、PCデザインカンプとスマホのワイヤーフレームの作成をしました。
制作時間:約20時間
制作期間:約2週間
制作範囲:情報設計・ワイヤーフレーム・デザインカンプ
1.制作要件
〇クライアント情報
・クライアント名:WORK,inc.
・事業内容:女性向けのビジネススクールを展開。会員は20~30代女性が中心。
・要望:会員限定のカフェ&コワーキングスペースをオープンすることになり、利用方法やアクセス情報を載せたWebサイトを制作したい。
〇ターゲット
・ビジネススクールワークの既存会員
・まだ会員ではないが気になっている人
➡20~30代のビジネス感度の高い女性(ある程度社会人歴があり、自身のキャリアを更にアップデートしていきたいと考えている人)
〇目的
・「WORK lounge AOYAMA」の認知拡大
・「WORK lounge AOYAMA」をきっかけにビジネススクールワークの会員を増やす
〇ペルソナ
・都内在住の30代既婚女性。某メガベンチャーの事業部部長。(8年目)
・仕事に注力していて、キャリアアップのために積極的に交流するような外交的な性格。
・仕事での成果を今以上に出していきたいと考えている。
〇提供素材
・ロゴ
・PC版ワイヤーフレーム
2.成果物(左:PC版デザインカンプ/右:スマホのWF)
3.制作ポイント
❶メインビジュアル
サイトを訪れた人にまず初めに、「WORK lounge Aoyama」の雰囲気を知ってもらい、パッと見で好きになってもらえるように写真を複数使用し、自動でスライドされるように配置しています。ここでの写真はカフェの写真だけでなく、友人と楽しく談話している写真やPCで作業している写真を入れることで、実際に自分がカフェを利用した際のイメージが湧きやすくなるような写真にしています。
❷UIを意識した情報設計
ユーザーがどんな場面でもアクションを起こしやすいようにサイト内3箇所にCTAボタンを設置しています。その内ヘッダー内のCTAボタンは、ヘッダーを固定させることで、常にアクションできるように配置しています。
❸配色
ベースカラーをベージュ、メインカラーを深緑、アクセントカラーを黄色にしています。ターゲットが20~30代のビジネス感度の高い女性とのことで、女性らしさを表すために全体的に淡いカラーに統一。
また、女性らしさの中にもしっかりとキャリアを積んでいるビジネス感も感じてほしかったので、メインカラーに深めの緑を使用してフォーマルなイメージにしています。
全体的に落ち着いた雰囲気の中でも、強いチームを作りたいという願望だったり、自身のキャリアアップに向けての前向きな気持ちを表すために、アクセントカラーの黄色を使用してエネルギッシュさも表現しています。
4.課題を通して学んだこと
今回は全体のイメージを損なうことなく、ユーザー視点を意識したデザイン制作に取り組むました。大人っぽくフォーマルな雰囲気の中にも内なる情熱を感じられるような配色やフォント選びを意識しました。
その中で、初めにペルソナの深堀や情報設計をいかにしっかりしておくかで、後々原点に立ち返ることができるので改めて大切さに気付きました。
また併せて、デザイン性だけでなく、サイトを訪れたユーザーにストレスなく使用してもらうことを考え、どのようなデザインにしたら目的が達成できるのかUIデザインの重要性を学びました。