ファーストビューデザインを業種別に作ってみた｜後編

こんにちは、デザイナーのAbe.Cです。

2回に分けてお送りしている「ファーストビューデザインを業種別に作ってみた」ですが、前編はご覧いただけましたでしょうか？

前編では、「アパレル」「Webサービス・アプリ」で作成した2つを紹介しました。

今回後編では、「学校・教育機関」「旅行・宿泊施設・交通機関」で作成した2つを紹介しますので是非最後までご覧になってください。

制作するうえで決めたこと

採用サイトを制作するうえで重要になるのが「誰に」「何を」伝えるのかという点です。

ターゲットを明確にしないまま制作をスタートしてしまうと、魅力を伝えるべきお客様に、正しく伝わらなくなってしまう為、役割を果たせない採用サイトになってしまいます。

なので今回は「ペルソナの設定」と、サイトを作るうえでポイントとなってくる「配色」の2点を踏まえて制作するようにしました。

詳しい内容は以下の通りです。

ペルソナ

• 年齢
• 性別
• 人物像
• 業界

配色

• ベースカラー
• メインカラー
• アクセントカラー

ではさっそく、私の制作したファーストビューデザインを見ていきましょう。

学校・教育機関

アパレル

• 年齢：20代
• 性別：女性
• 人物像：今現在専門学校・大学に通い、保育園・幼稚園の先生を目指している学生
• 業界：学校・教育機関

配色

• ベースカラー：薄い黄色
• メインカラー：ネイビー
• アクセントカラー：黄色、赤

デザインするうえで意識したこと

• 保育園・幼稚園の先生を目指している学生向けの採用サイトをイメージしたため、幼稚園の雰囲気が伝わるデザインにしました
• 柔らかさや親しみやすさを出す為に、FVではあえて人の写真は使わず、子供たちのイラストとおもちゃっぽい模様を背景に散りばめました
• 園の理念であるキャッチコピー部分はしっかり読ませたい為、文字の周りになるべく模様が来ないようにしました
• 子どものイラストはクリックすると吹き出しが出てしゃべる想定で、遊び心のあるサイトになることを目指しました

旅行・宿泊施設・交通機関

ペルソナ

• 年齢：20代～40代
• 性別：男女（男性8割、女性2割）
• 人物像：交通機関の車掌さん（運転手）を目指している求職者
• 業界：旅行・宿泊施設・交通機関

配色

• ベースカラー：ネイビー
• メインカラー：白
• アクセントカラー：青

デザインするうえで意識したこと

• 旅行・宿泊施設・交通機関の採用サイトをイメージしたため、実際に働く現場（今回で言うと電車の車掌さんイメージ）である駅のホームを歩く姿の写真を使用しました
• お堅い職業な為、崩さずにきっちりと伝えるデザインにしました
• フォントも明朝を使用し、ポップな印象にならないように注意しました
• ただ綺麗に作りすぎてもシンプルな為、写真がデフォルトでぼやけていて、レンズを動かすとぼやけていない状態が見えるという動きを取り入れました（現場を覗いている感じに見せる為）

まとめ

いかがだったでしょうか？

今回はペルソナ設定や配色に加え、動きの部分を意識して印象に残るデザインを目指しました。

ユーザーにとって思いがけない動きをするものや、何かアクションを起こさせるものが取り入れられているだけでも印象は変わってきます。

ターゲットの特徴に合わせて様々な動きを取り入れてみてはいかがでしょうか？

それではまた次の記事でお会いしましょう。