【課題】LPデザイン制作(ワイヤーフレーム、PC &SPデザインカンプ、コーディング)

■制作内容
①情報設計、ワイヤーフレーム作成
②デザインカンプ
③コーディング

┃要件

┃情報設計

カルチャーマッチした人にエントリーいただくことをゴールに、LPの情報設計を考えました。小さいお子さんを育てながら働く女性といった、下記詳細なペルソナを設定した上でユーザーストーリーを設定しました。

■ ペルソナの設定

■ユーザーストーリー

LP上部で企業が目指すビジョンへ共感してもらい、下部につれ働き方を理解いただき、ここで働いてみたい！という気持ちが上がったところで最終的にエントリーいただくことを狙いとしています。

┃LPデザインカンプ

実装したサイトはこちらです。

┃工夫したこと

■コンセプト

カルチャーフィットした人に応募してもらえるよう、企業が目指している「世界をやさしさでつつむ」をテーマに、配色・写真やイラスト、あしらい等からも、赤ちゃんを中心とした家族の温かさを感じてもらい、事業内容に共感してもらえるようブランドトンマナを設定しました。

■配色

赤ちゃんを中心に家族のやさしさと温かさが伝わるよう暖色系でまとめています。暖色系の中でも赤ちゃんが初めに発達すると言われている「明度」が高く、かつ赤ちゃんが安心できる肌馴染みの良い色のベビー用品を想定して、柔らかいピンクと黄色を選択しました。

また、赤ちゃんはモノクロの世界から初めて認識できるようになる色は「赤色」と言われており、各コンテンツのCTAボタンのアクセントカラーとして取り入れました。

■写真・イラストの選択

• 写真は赤ちゃんの写真だけでなく、今後企業が家族向けのサービスを展開することから、コンセプトでは家族写真を配置しました。

• LP全体に温かさを出すため、写真だけでなく赤ちゃんに関連するアイコンや実際に採用までのイメージや働くイメージが持てるようなイラストを選択しました。

■あしらい

• 家族への愛情ややさしさが心にじわっと広がるその温かさを「水彩の広がり(丸)」で表現しました。

またブランドトンマナの統一感を出すために、各コンテンツのタイトルでも使用しました。

• メインビジュアルでは企業のコンセプトを心に入れるイメージをハートで表現しました。また、赤ちゃんの写真枠の形は赤ちゃんのシルエット(曲線)イメージで角の無いハート型にしました。同じ形をエントリー部分でも配置しており、背景色が柔らかいピンクが続く中でエントリー部分が目立つよう、引き締めや緊張感を狙いメインビジュアルと同じ「白」を選択しました。

• クリックできる部分はホバー時に色や大きさを変えることで、直感的に分かるように工夫しました。

• SP版では必ず目にしてもらいたい部分は基本縦積みで配置していますが、LPが長くなりすぎないよう、メンバー紹介ではユーザーの興味によって選択できるようにカルーセルを採用しました。

┃制作を通して学んだこと

• 情報設計、デザインカンプ、コーディング、アップロードまでの一連の流れを学びました。
• 情報設計やトンマナを設定する時は、クライアントの目的やターゲットがブレないように深掘りすることで見た目の綺麗さだけでない、見た人に行動してもらうための意味のあるデザインになると学びました。
• コーディングの基礎を学びました。中でもマークアップする際は、最終的にどの要素とどの要素をセットで見せたいかを考えdivでまとめることでカンプ通りのレイアウトにしやすいことが分かりました。

今後もより良いLPデザインができるよう今後も日頃から世の中にある良いデザインから学びながら、自主制作や実案件で手を動かしてスキルアップを目指したいと思います。