ベビー用品事業/リクルートLP制作(PCデザイン・ワイヤーフレーム)
SHElikes MULTI CREATOR COURSEの課題で、ベビー用品事業等を行う企業の採用サイトの制作に取組みました。クライアントからの要件書を元に、PCのワイヤーフレームとデザインカンプを制作しました。(制作日:2022年1月、制作時間:70時間)
目次
1.作成したデザインカンプ
2.要件定義
3.工夫したこと
4.制作を通して学んだこと
1.作成したデザインカンプ
(使用ソフト:Photoshop)
2.要件定義
①クライアント
ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ・家族向けのサービスも展開していく予定をしている。
②要件
*制作背景/目的
LPを通して、カルチャーフィットしている人にエントリーをしてもらうこと。
*ターゲット
転職希望の方。世界観に共感している人、カルチャーフィットしている人。
*トンマナ
明確に定まっていないため、自由に提案してほしい。
3.工夫したこと
①目的やユーザーストーリーを理解した情報設計
クライアントのトンマナは未設定であったため、クライアントから提示された情報を分解・整理し、トンマナへと落とし込む作業を行いました。特に印象的なワードを洗い出し、噛み砕くことでまずはクライアントの世界観を明確にしました。
また、他社との差別化を図るため、クライアントが特に重きを置いていると感じた情報を整理し、テーマとコンセプトを考えました。
*テーマ
・「やさしさでつつむ」という温かみのある企業理念
・「人と人との繋がりを大切にしている」
*コンセプト
・TSUTSUMUの魅力や想いを伝えて、世界観にフィットする方にエントリーしてもらうことを促す
・「家族みんながやさしく幸せに暮らせる世界」を創りあげることが目標
*ペルソナ
情報設計を考えるうえで、情報の優先順位を明確にするため、詳細なペルソナを設定しました。
*ユーザーストーリー
ペルソナを立てる事により、ユーザー視点に立ったユーザーストーリーを考えることができました。
各コンテンツを通して、ターゲットに共感や魅力付けを行うことで、 ターゲットの「働きたい!」という気持ちを高め、事業や募集要項などで企業をより深く理解してもらい、 最終的なゴールであるエントリーへ促すことを意識しました。
②ペルソナに合わせたワイヤーフレームの設計
*ワイヤーフレーム(手書き)
ペルソナに合わせてワイヤーフレームを手書きで作成しました。
*ワイヤーフレーム
手書きで作成したワイヤーフレームを基に、作成しました。
③目的やペルソナを理解した配色、フォントの設定
*配色
上記テーマ、コンセプトを意識した配色に設定しました。
*フォント
・丸みのあるゴシック体をメインに使用することで、視認性を高めて読みやすくすると共に、テーマである「優しさ」を表現。
・ベビー向けサービスなので、可愛らしい文字を使用。また、人と人との繋がりを大切にしているTSUTSUMUらしさをより表現するために、各社員からのメッセージを手書き風にすることで、社員への親近感を感じてもらうと共に、社内の風通しが良い様子を表現。
・強調したい英数字箇所で使用し、視認性を高めることを意識。
④目的やペルソナを理解したデザインの設定
アクセントカラーを使用した「優しさ・透明感」を感じさせるイラストやボタンを各所に配置し、TSUTSUMUの世界観がユーザーに伝わるように工夫しました。
また、クリックを促す箇所はアクセントカラーをベタ塗りで使用し、ボタンであることが一目でわかるようなデザインを意識しました。
⑤ユーザー行動を促す文言
ENTRYボタンの直前に記す文言を「やさしさであふれる世界を~」と表記し背中を押すことで、ユーザー自身が主体性をもってエントリーするためのアクションに繋げました。
4.制作を通して学んだこと
クライアント情報を整理、ペルソナを設定することの重要性
LP制作だけではなく、すべてのデザインに当てはまるとは思いますが、デザインのテーマやコンセプト、ゴールを明確にするためには、提示された要素をしっかりと嚙み砕き、ユーザーのターゲットを深掘りすることが、デザインの矛盾を防ぐために大切なことだと考えます。そのため、まずは情報設計をしっかりと練る事を第一にデザインを行うことが重要であると実感しました。今回、 LPのターゲットについて理解するために、詳しく情報設計を行いました。実際に、具体的なペルソナを考えたことで、納得するユーザーストーリーを作ることができました。