【事例あり】採用サイトのファーストビューの作り方と6つの型

「採用サイトを作ることになったが、トップの絵が決まらない」

「コーポレートカラーの赤をファーストビューの全面に使うと、重たくならないか」

「体育会系だと思われてしまわないか」

自社の色が赤である企業をはじめ、多くの採用担当者から、採用サイトのファーストビューについて迷う声をお聞きします。

採用サイトのファーストビューは、求職者がサイトを開いて最初に目にする画面です。見られている時間は非常に短く、ここで読み進めるかどうかが決まります。

赤などの強い色を使うと、必ず体育会系に見えるわけではありません。使い方次第で、企業の熱量や勢いを一瞬で伝えられる強力な武器になります。だからこそ「なんとなく」でデザインや色を決めてしまうのはもったいないのです。

弊社デザイナーが厳選した「地方企業×採用サイト」のデザイン事例は、以下の記事で網羅しています。ファーストビュー以外の要素も見比べたい方は、併せて参考にしてみてください。

あわせて読みたい

【保存版】採用サイトのデザイン事例32選｜参考にしたい地方企業を業種別に

「採用サイトのデザインを探しはじめると、たいてい途中で手が止まります。ギャラリーサイトを開けば都心の大企業や有名ブランドの事例ばかりが並び、『うちの規模でこれは無理だ』と閉じてしまう」——地方の中小企業で採用を担当している方から、よくお聞きする状況です。 ここで必要なのは、かっこいい採用サイト

ファーストビューで決めるのは3つだけ

ファーストビューの構成で迷ったとき、決めるべき要素は実は3つしかありません。「写真（または地）」「コピー」「次に押させるボタン」の3点です。これらをどう組み合わせるかで、企業の温度感やメッセージが伝わります。

たとえば、コーポレートカラーの「赤」をファーストビューの「地」に使う場合を考えてみましょう。

赤の採用サイトが伝えるのは、企業の情熱とエネルギーです。赤はもともと、エネルギッシュな印象を与える色です。その力強さを通じて、企業の活気を視覚的に届けられます。求職者は入社前から職場の熱気を感じ取れるため、入社後のイメージギャップが生じにくくなります。

つまり赤は、「うちは勢いのある会社です」というメッセージを、文章より先に届けてくれる色です。求職者が採用サイトを開き、文字を読み始めるまでのわずかな時間に、企業の温度感が伝わります。色が持つ情熱や活力が、企業の魅力を伝える手助けをしてくれます。

色は3つのうち「地」を決める話にすぎない

しかし色は、ファーストビューを構成する3要素のうち、「地」の印象を決める話にすぎません。

実際に事例を並べると、赤が選ばれている業種には偏りが見えてきます。運送・物流、建設、金属加工、鋼材加工、飲食、証券などです。いずれも現場の力強さや、人の熱量が仕事の価値に直結する業種です。

反対に言えば、静けさや繊細さを売りにしたい企業とは、相性を合わせにくい色でもあります。信頼感や清潔感を軸にしたい業種は、青系の色を選ぶ傾向があります。色ごとの向き不向きは、以下の記事と見比べていただくと分かりやすいでしょう。

参考記事：『【事例10選】青・水色の採用サイトデザイン｜信頼感はどう出す？』

自社制作の採用サイトで見る、ファーストビューの6つの型

株式会社日発電工 様｜現場の暗さをそのまま出す

https://leapy.jp/works/recruit/nippatsu/（制作：地方採用ワークス）

岐阜県関市で、高圧・低圧の電気設備工事と制御・計装設備工事を手がける会社です。サイトのトップに置いたのは、暗い天井裏を見上げて配線している1枚の写真です。明るい集合写真でも、きれいに整えた完成写真でもありません。

この業種の採用サイトでいちばん多い迷いは、現場のきつさを見せるかどうかです。しかし、このサイトはあえて見せる側に振り切っています。

そのうえで、「繋げるのは電気じゃない、未来の日常だ。」というコピーを添えました。実際の作業風景と、その作業が何につながっているのかを示す言葉を、1つの画面で組み合わせています。

現場の写真だけだときつさが残り、意義の言葉だけだと実感が湧かないからです。両方を同じ画面に置いたのが、この構成の答えだと考えています。縦組みの明朝体を白抜きで重ねているのも、暗い写真に負けない文字組みを選んだ結果です。

システムメトリックス株式会社 様｜画面の左半分を空ける

https://leapy.jp/works/recruit/systemmetrix-3/（制作：地方採用ワークス）

名古屋市にある、互換CADのパッケージソフトを開発している会社です。トップページの左半分を白のまま空けており、コピーと2つのボタンしか置いていません。写真は右半分に1枚だけ配置し、人物ではなく抽象的なビジュアルを使っています。

要素を減らしたぶん、残ったコピーの一行がそのまま会社の説明になっています。

置いてあるボタンが「新卒採用」と「キャリア採用」の2つだけ、という点も非常に効いています。トップページで求職者に求めているのは、自分がどちらかを選ぶことだけです。1画面1メッセージのお手本のような構成だと言えます。

株式会社岡島ホールディングス 様｜社名の文字を主役にする

https://leapy.jp/works/recruit/recruit_okajima-h/（制作：地方採用ワークス）

岐阜県関ケ原町にある、建築・建設グループです。使っている色は白と水色、それに黄緑のボタンだけです。装飾は一切なく、画面の中心にあるのは社名の英字のみです。

そこへ社員の写真を切り抜きで絡ませることで、文字が単なる背景ではなく、舞台として機能しています。

色数と要素を絞ると、残った1つの造形に会社の印象が集約されます。事務職も現場職も同じ文字の上に立っているため、「建設会社といえば現場だけ」という先入観も同時に外れます。

書体と造形で個性を立てるこの型は、言葉と見せたい人物像がしっかりと固まっていないと成立しません。

株式会社ALTHEA 様｜法人の全体像を文字組みで見せる

https://leapy.jp/works/recruit/althea/（制作：地方採用ワークス）

岐阜市で、介護・福祉・訪問看護・訪問リハビリと小規模保育所を一箇所に集約している法人です。ファーストビューは写真を主役にしていません。社名の英字ロゴタイプを画面いっぱいに組み、その隙間から各事業の現場写真をのぞかせています。

車いすを押す職員、黄色いポロシャツのスタッフ、保育室で子どもを抱く職員などです。1枚の写真では収まらない「幼児から高齢者まで」の幅を、文字組みで一度に見せる構成です。

保育士の募集は、この法人が抱える職種のひとつとして置かれています。トップの明朝コピーは「共に生き、笑顔を咲かせる」です。園の名前より先に法人の理念が来るため、保育だけを見て応募する人には遠回りに見える構成です。

それでも成り立っているのは、「職員の祖父母がデイサービスを利用し、子どもは同じ法人の保育所に通う」という特徴が、法人の広さと結びついているからです。広さを見せるなら、広いことの意味まで書く。ここがセットになっているかどうかが分かれ目になります。

和光会グループ 様｜働く職員一人を主役にする

https://leapy.jp/works/recruit/wakokai-recruit/（制作：地方採用ワークス）

同じ岐阜市で、医療・介護・保育を手がける法人です。こちらは理念でも法人名でもなく、働いている職員を1人ずつ等身大で立たせる構成にしています。

背景は実際のフロアで、本人の言葉と、職種・所属・入職年を添えています。画面の下には別の職員の顔が並び、切り替えると主役が入れ替わります。

保育士・幼稚園教諭の募集へは、職種の絞り込みから入る形です。トップで法人の全体像を語り切らず、「誰と働くか」を先に見せて、職種は求職者に選んでもらいます。

法人が大きいほど、求職者は自分の配属先を想像しにくくなります。顔と所属をセットで出すのは、その不安に先回りする設計です。

2つを並べると、同じ複合法人でも、法人の広さを主役にするか、働く一人を主役にするかで、トップの作りは正反対になります。園単体で採用サイトを作る場合も、判断は同じところに戻ります。

園の理念を先に語るのか、いま働いている先生を先に見せるのか。どちらが自園の魅力に近いかを決めてから、写真とコピーを選ぶ順番になります。

なお、業種を横断して参考サイトを探したい方は、こちらの事例集からご覧ください。

参考記事：『【保存版】採用サイトのデザイン事例32選｜参考にしたい地方企業を業種別に』

日の丸グループ 様｜多職種をグリッドで見せる

https://leapy.jp/works/recruit/taxi-hinomaru-2/（制作：地方採用ワークス）

3社目は、タクシー・バスを中核に運送や小売まで手がけるグループの採用サイトです。荷物ではなく人を運ぶ会社ですが、多職種をまとめて募集するという条件は貨物運送とも重なるため、その見せ方として挙げます。

前の2社と違い、1枚の主役写真を置かず、複数の職種の写真をグリッドで並べる構成です。整備、事務、営業、接客と、写っている仕事がすべて違います。ドライバー以外の職種も採りたい会社に向いた見せ方です。

もう一つの特徴が、白基調に縦組みの明朝で「まちと、人と、日の丸。」と置いたところです。運送業の採用サイトは青やダークトーンに寄りがちですが、白と明朝体で「地域に根ざした落ち着き」を出す道もあるという一例です。

3社を並べると、主役は「車両」「人」「多職種」の3通りに分かれます。自社が採りたいのが誰かで、置くべき写真は変わります。

なお、業種を横断して参考サイトを探したい方に向けては、別の事例集で解説しています。

赤を選ぶなら、どこに置くか

ファーストビューの「地」としてコーポレートカラーの赤を使う場合、「どこにどれだけ使うか」で印象が大きく変わります。赤は主張の強い色だからです。実際の事例を見ると、大きく2つの型に分かれます。

• ベースに使う型：背景全体を赤で埋め、白抜き文字でキャッチコピーを載せます。挑戦的で押し出しの強い印象になります。
• アクセントに使う型：白・黒・グレーを基調にし、ロゴやキャッチコピーの一部だけを赤にします。落ち着きを保ったまま、視線を一点に集められます。

どちらが正解というわけではありません。伝えたいメッセージが「勢い」なのか、「堅実さの中にある熱」なのかで使い分けます。ここでは、実際に赤を効果的に使ったデザイン事例を5件紹介します。

岐阜商工信用組合 様（一般金融業）

https://recruit.shoushin.co.jp/（制作：地方採用ワークス）

岐阜県岐阜市にある一般金融業、岐阜商工信用組合様の採用サイトです。

大きな文字と従業員のポートレートを組み合わせ、文字と人物が一体となった遊び心のある構成を作っています。

社員一人ひとりが異なるポーズをとり、赤い文字と重なり合うことで、生き生きとした職場の雰囲気を表現しています。

社員が持つ観葉植物が自然なアクセントになり、職場環境の快適さも伝わってきます。従来の堅苦しい採用サイトのイメージを変える、親しみやすいデザインに仕上がっています。

大日コンサルタント株式会社 様（建設・建築・コンサルティング業）

https://dainichi-consul.co.jp/recruit/（制作：地方採用ワークス）

岐阜県岐阜市にある建設コンサルタント企業、大日コンサルタント株式会社様の採用サイトです。

赤色の背景に白色の大きな文字でキャッチコピーを強調し、挑戦的なイメージを打ち出しています。力強い英字の上に手書き風の日本語を重ねることで、企業の堅実さと柔軟性を同時に表現しています。

背景のグラデーションは、オレンジから深い赤へと変化し、視覚的な奥行きと温かみを演出しています。画面の端に配置された幾何学的な模様が、モダンな印象を高めています。コンサルティング企業としての専門性と先進性を感じさせるデザインです。

野村證券　キャリア（証券業）

https://www.nomura-recruit.jp/career/retail/

東京都中央区にある証券業の企業、野村證券様の採用サイトです。

ファーストビューでは、画面を赤と白黒の2色に大胆に分割し、コントラストの強い視覚的インパクトを生み出しています。

モノクロのポートレートを配置することで、真摯な表情や柔らかな明暗が強調され、金融のプロフェッショナルとしての信頼性と人間味を表現しています。

シンプルな2分割構成でありながら、「伝統と革新」や「信頼性と先進性」といった相反する要素を、色使いと配置のバランスで融合させています。金融業界の採用サイトとして、非常に洗練されたデザインです。

株式会社王将フードサービス（飲食業）

https://recruit.ohsho.co.jp/

京都府京都市にある飲食業の企業、株式会社王将フードサービス様の採用サイトです。

鮮やかな赤で表現された大きな文字が、動画と重なり合うことで、力強さとダイナミックさを演出しています。背景のグレーのグラデーションは、落ち着きと清潔感を表現しつつ、メインビジュアルを引き立てる効果も果たしています。

画面右下に配置された動画サムネイルは、より詳しい企業情報への自然な導線となり、求職者の興味を引く配置になっています。コーポレートカラーの赤をキャッチコピーに使用し、動画を組み合わせることで、働く姿のイメージを存分に伝えています。

ウメトク株式会社（鋼材加工・販売・工具販売）

https://www.umetoku.co.jp/recruitingsite/

大阪府大阪市にある鋼材加工・販売・工具販売業を中心とした企業、ウメトク株式会社様の採用サイトです。

ファーストビューでは、特殊鋼の加工現場の動画を大胆に切り取り、工業的な印象と親しみやすさを融合させています。

背景には深い赤を基調とし、その上に白文字のテキストを配置して、力強さと読みやすさを両立させています。

特徴的なのは、画面下部に配置された装飾的な文字デザインです。製造業の特徴である「熱」や「技術」を視覚的に表現しながら、アートのような要素も加えています。従来の製造業サイトにはない斬新さを実現しています。

ここまでの事例のように、色を「人」や「言葉」と重ねる設計は、写真の質やコピーがそのままサイトの印象を左右します。どの写真を、どの温度感で撮るか。

そこまで含めて設計したいとお考えでしたら、御社の業種や採用フェーズをうかがったうえで、具体的な構成をご提案します。

ファーストビューでつまずきやすい3つのポイント

うまくいっている採用サイトのファーストビューには共通の設計順序があります。ここでは、採用サイトを作る際に、つまずきやすいポイントを3つ挙げておきます。

01. 「色やテイストから入る」と、たいてい迷子になる

一番多いのが、色やテイストの話から打ち合わせが始まってしまうケースです。「かっこよく、今どきの感じで」と進めると、途中で「結局うちは何を伝えたいのか」と迷子になりがちです。

弊社では、文章が先、デザインが後という順序で制作を進めています。まず「どんな会社で、どんな人に来てほしいか」というメッセージを明確にし、文章に落とし込みます。

そのうえで、その文章を視覚的にどう伝えるのがベストかを逆算して、ファーストビューを設計します。

「デザインが良ければ応募が来る」というのは、正直なところ誤解です。デザインは、伝えたい中身があってはじめて機能します。強いビジュアルを選ぶなら、なおさらこの順序が重要になります。

02. 色の持つイメージを決めつけない

たとえば赤が持つ意味は、情熱だけではありません。事例の中にも、金融業の信頼性を表す赤、菓子メーカーの明るさを表す赤、製造業の「熱」そのものを表す赤がありました。

同じ色でも、隣に置く色と写真によって、伝わる印象は変わります。

「この色だからこう見える」という心配は、どう組み合わせるかで解決できることが多いです。深い色に白を合わせれば重厚な印象になり、明るい色にグレーを合わせれば軽やかな印象に寄せられます。

03. 面積とコントラストで、読みやすさが落ちる

強い色は面積が大きくなるほど、文字の読みやすさが落ちやすい傾向があります。特にスマートフォンで見たときに、濃い背景に細い白文字を乗せると読みづらくなります。

求職者の多くはスマートフォンで採用サイトを見るため、必ず実機でファーストビューを確認してください。

事例の中で背景に強い色を使っているサイトが、いずれも太めの書体や大きめの文字を選んでいるのは偶然ではありません。強い色を使うなら、文字の太さや大きさでバランスを取る必要があります。

この一手間があるかどうかで、サイトの印象は大きく変わります。

よくある質問

Q1: コーポレートカラーは、ファーストビュー全面に使うべきですか

必ずしもそうとは限りません。コーポレートサイトは取引先に向けたものですが、採用サイトは求職者に向けたものです。ターゲットが違うため、ロゴカラーを引き継ぎつつも、面積の配分やトーンを採用向けに調整する考え方がおすすめです。

Q2: 強い色はどんな業種に向いていますか

本文でも触れたとおり、力強さや熱量が価値に直結する業種と相性が良い傾向はあります。ただし業種だけで機械的に決まるものではなく、あくまで伝えたいメッセージ次第です。

Q3: 暖色系を使う場合、赤とオレンジ・黄色は印象がどう違いますか

同じ暖色でも、赤は「熱量・力強さ」、オレンジや黄色は「親しみやすさ・明るさ」の印象に寄ります。堅さを残したまま温度感を上げたいなら赤、求職者との距離を縮めたいなら黄色やオレンジ、という基準で選んでみてください。

Q4: ファーストビューのデザインは、誰が決めるのが良いですか

社内の多数決で決めると、無難な方向に寄りやすくなります。求職者に何を伝えたいかを決める経営層や現場の責任者と、それを形にする制作側が、メッセージの段階からすり合わせるのが確実です。

デザインの好き嫌いを議論するのは、方向性が決まった後で十分間に合います。

Q5: ファーストビューをかっこよく作れば、応募は増えますか

デザインを良くしたからといって、すぐに応募が増えるわけではありません。そもそも求職者に見つけてもらう経路がなければ、サイトは開かれないままです。

求人媒体などで露出を作り、応募者を集める取り組みをしてはじめて、受け皿となる採用サイトの出来が結果に影響してきます。

ファーストビューを決める前に、誰に何を伝えるかを決める

ここまで採用サイトのファーストビューの型や事例を見てきました。どれも「デザインが良かったから成立している」わけではありません。

伝えたいメッセージが先にあって、それを最も強く届ける手段としてファーストビューの構成が選ばれています。決める順番は、常にメッセージが先です。

自社でサイトの構成を検討する際は、まず「どんな人に、どんな会社だと伝えたいか」を文章に書き出してみてください。

その言葉が「情熱」や「力強さ」を持っていれば力強い写真をベースに、「堅実さ」を重視するなら余白や文字組みを活かす構成にと、デザインの方向性が自然と定まってきます。

弊社は全国の地方企業に1,420社以上のウェブサイト制作やマーケティング支援を行ってきました。製造や建設、運送など、地方で人が採りにくいと言われる業種の現場を数多く見てきています。

「採用サイトを作りたいが、どう見せるべきか迷っている」というご相談からでも構いません。現在のロゴや写真を拝見し、どのようなファーストビューが最適かをご提案します。

採用サイト制作のサービス詳細はこちら

※ご紹介しているサイトの中で、「（制作：地方採用ワークス）」と書かれたサイトは弊社の制作実績です。その他のサイトは弊社の制作実績ではございませんが、本記事の切り口に沿う事例としてご紹介させていただきました。

制作をされた制作会社様で、掲載の取り消しをご希望の場合は速やかに対処させていただきますので、弊社までご連絡くださいませ。