採用サイトのデザインはどう決める？成果を出すための考え方と実践ルール

こんにちは、デザイナーの田沢です。

採用サイトのリニューアルを考えたとき、他社の採用サイトと見比べて、自社のサイトが古く見えたり、これで会社の魅力が伝わっているのだろうかと感じたことはないでしょうか。

とはいえ、いざリニューアルを考えても、どんなデザインにすればいいのか、なかなか方向性が定まらないものです。他社の採用サイトを見て「こんな感じにしたい」というイメージはあっても、それが自社に合っているのかまではわからない、というご相談もよくいただきます。

実は、採用サイトのデザインは好みでは決まりません。採用したい人物像から逆算すると、配色もフォントも写真のトーンも、自然と方向性が定まっていきます。

この記事では、次の4点をデザイナーの視点で具体的に解説します。

• 採用サイトでデザインが成果に影響する理由
• 新卒・中途など、採用したい人物像に合わせたデザインの決め方
• 応募につながるUI/UXと導線の工夫
• 採用サイトを任せる制作会社の見極め方

応募数と質を左右する！採用サイトに「デザイン」が重要な理由

求人媒体に並ぶ条件が似ていれば、求職者は実際にどんな会社なのかを採用サイトで確かめに来ます。そのときのデザインは、応募の数だけでなく、応募者の質や内定後の決断にも影響する重要な要素です。ここでは3つの観点から見ていきます。

企業への信頼感向上（エントリー数増加）

求職者が採用サイトを開いて最初に受け取るのは、文章の内容より先に、見た目の印象です。デザインが古いままだったり、スマートフォンで文字が小さく読みづらかったりすると、「情報発信に力を入れていない会社で社内の環境も古そう」と、会社そのものへの不安につながりかねません。

今の求職者は、スマートフォンで情報を集めることに慣れています。見づらいウェブサイトはすぐに離脱され、比較検討の候補から静かに外れてしまうでしょう。

整ったレイアウトと今の閲覧環境に合ったデザインは、「この会社はきちんとしている」という安心感の土台になります。また、デザインを整えることは、気づかないうちに失っていた求職者からの応募を取り戻すことにもつながります。

カルチャーフィットの促進（応募の質の向上）

配色、フォント、写真のトーンといったデザインの要素は、言葉で説明するよりも早く、会社の雰囲気を視覚的に伝えます。

たとえば、濃紺を基調に余白を広くとり、見出しに明朝体を使えば、誠実で落ち着いた印象になります。一方、明るい色を大胆に使い、社員が自然体で働く写真を大きく配置すれば、フラットで活気のある社風が伝わるでしょう。

同じ「社員を大切にする会社です」という一文でも、デザインによって受け取られ方は変わります。

会社の雰囲気が見た目で伝わると、その雰囲気に共感する人が応募しやすくなり、合わないと感じた人は応募前に自分で気づけます。結果として、入社後のミスマッチが減り、面接の時間も有効に使えるようになります。

ここで大切なのは、デザインの良し悪しを見た目が良いかではなく、自社に合っているかで判断することです。おしゃれなデザインも、社内の好みに合わせたデザインも、来てほしい人に届かなければ成果にはつながりません。流行を取り入れても、実際の職場とかけ離れていれば、入社後のギャップにつながってしまいます。

内定辞退の防止（歩留まり改善）

採用サイトの役割は、応募を集めたところで終わりではありません。

求職者は、会社選びをする際に何度も採用サイトを訪れ、面接の前に社員インタビューを読み返したり、内定をもらってから本当にこの会社でいいのかと確かめ直したりします。

このとき、社員の声やキャリアの道筋、働く環境といった情報が、探しやすく整理されているかどうかが重要です。知りたい情報にすぐたどり着ければ、入社後のイメージが具体的になり、不安が期待に変わっていくでしょう。

反対に、情報が見つからなかったり古いままだったりすると、その迷いが他社へ気持ちが傾くきっかけになりかねません。

採用サイトは、応募を集めるツールであると同時に、内定承諾の最後のひと押しをする「クロージングツール」でもあります。応募前に見られても、内定後に見られても役立つ情報設計にしておくことが、内定辞退の防止につながります。

参考になる採用サイトのデザイン事例

ここからは、ノベルティが手がけた採用サイトの中から、採用の課題をデザインでどう解決したかがわかる事例を3つご紹介します。

事例1：社会福祉法人千葉県福祉援護会様｜情報を届け切るための独立した採用サイト

船橋市を中心に福祉施設を運営する千葉県福祉援護会様では、採用情報がコーポレートサイトの中に置かれていたため、全施設・全職種の情報が求職者に届き切っていないことが課題でした。

そこで、採用サイトを独立させ、職種・施設・雇用形態で求人を絞り込める仕組みを用意しました。

デザインは、人手不足が続く福祉業界で少しでも興味を持ってもらえるよう、やわらかさと親しみやすさを軸にしています。背景のグラデーションやイラストのタッチまで調整し、職場の温かい空気感が伝わるようにしています。

詳しいプロジェクト実績は、以下のリンクからからご覧になれます。

株式会社ノベルティ プロジェクト実績│社会福祉法人千葉県福祉援護会

事例2：株式会社建築サポート様｜「人」を軸に社風を伝える採用サイト

建築設計事務所の建築サポート様は、これまで求人媒体を中心に採用を行っていましたが、会社や社員の雰囲気を伝えられる場が限られていました。

そこで、社員一人ひとりのインタビューを中心にした構成とし、「仕事を知る」「人を知る」「環境を知る」の3つの導線で情報を整理しました。

デザインでは、誠実さと活気のバランスを意識し、若い世代に向けて前向きな印象のカラーやモチーフを選んでいます。スナップ写真を多く使い、このメンバーと働きたいと感じてもらえる見せ方にしました。

詳しいプロジェクト実績は、以下のリンクからからご覧になれます。

株式会社ノベルティ プロジェクト実績│株式会社建築サポート

事例3：株式会社千葉薬品様｜求める人物像から設計した採用サイト

ドラッグストア「ヤックス」を展開する千葉薬品様では、既存の採用サイトの更新が滞り、最新情報の不足や企業イメージとのずれが課題になっていました。

リニューアルでは、社員アンケートで「なぜヤックスを選んだのか」という声を集め、人事担当者の方から職種ごとの求める人物像を伺ったうえで、職種別のペルソナを作成しました。デザインは、企業が大切にする「喜びとつながり」を軸に、角丸でやわらかさを出し、エントリーボタンへ続くラインアニメーションでつながりを表現しています。

詳しいプロジェクト実績は、以下のリンクからからご覧になれます。

株式会社ノベルティ プロジェクト実績│株式会社千葉薬品

成果を出す採用サイトのデザイン実践ルール

ここからは、採用サイトのデザインを実際に決めていくときのルールをお伝えします。
デザインは、いきなり見た目から作り始めるものではありません。誰に向けたウェブサイトかを決め、世界観をつくり、読みやすさを考え、応募までの導線を設計する、という順番で進めていきます。

「誰を採用したいか」でデザインの方向性は変わる

採用サイトのデザインを考えるとき、デザイナーの私がまず確認するのは、採用したいのは新卒なのか中途なのか、そしてどんな人に来てほしいのか、という点です。同じ会社の採用サイトでも、ここが変わればデザインはまったく別物になります。

新卒採用と中途採用では、求めるデザインが違う

新卒の求職者は、社会に出た経験がまだありません。そのため、この会社で働く自分を想像できるかどうかを重視します。

したがって、社員の表情が伝わる写真や明るい配色、動きのある演出などで、親しみやすさと将来への期待感を伝えるデザインが向いています。

一方、中途の求職者は、いくつかの会社を比べながら、仕事内容や待遇、キャリアの具体的な情報を探していることが多いです。仕事の合間など限られた時間で必要な情報を見つけたいので、情報が整理された落ち着いたデザインで、信頼感と読みやすさを優先します。

【表】新卒採用と中途採用のデザインの違い

新卒も中途も採りたいときは、共通の土台をつくって出し分ける

実際のご相談で多いのが、「新卒も中途も、どちらも採用したい」というご要望です。

この場合、まず採用人数や重要度から、どちらをメインにするかを決めておくのが基本になります。そのうえで私が意識しているのは、見た目のトーンは共通にして、届ける情報で出し分けることです。

【表】共通土台の具体例

「これから来てほしい人」に合わせてトーンを決める

もうひとつ、デザインのトーンを大きく左右するのが、どんな人に来てほしいかです。

たとえば、「これまでは男性社員が中心だったが、これからは女性社員も積極的に採用したい。もちろん男性の採用も続けたい」というご相談をいただくことがあります。

このとき、今の社員構成に合わせて力強い印象のデザインにすると、女性の求職者には自分が働くイメージがわかないと映ってしまうかもしれません。かといって、女性向けに振り切ったデザインにすると、今度は男性の求職者が距離を感じてしまいます。

そこで目指すのが、男性的になりすぎず、女性にも自然になじむ、清潔感のあるきれいめなデザインです。具体的には、次のような調整を重ねます。

• 黒や原色を使った強いコントラストを避け、明るさを少し抑えた落ち着いた色を中心にする
• 太く角ばった書体より、すっきりとした線の書体を選ぶ
• 余白を広めにとり、整った印象をつくる
• 写真には、男女問わずさまざまな社員が働く姿を選ぶ

デザインのトーンは、これから来てほしい人を基準に決めていきます。ここが、コーポレートサイトとは違う、採用サイトならではのポイントです。

ターゲットに響く「コンセプトと世界観」の設計

ターゲットが決まったら、デザインを作り始める前に、自社の強みやどんな人と働きたいかという採用メッセージを言葉にしておきましょう。ここが曖昧なままだと、デザインの判断基準がなくなり、きれいに整ってはいても、どこの会社にも当てはまるようなウェブサイトになってしまいます。

言葉にするときのヒントとして、次のような問いがあります。

• 今いる社員は、なぜこの会社に入社を決めたのか
• 同業他社と比べて、自信を持って伝えられることは何か
• 入社後にギャップを感じやすいのはどんな点か

配色は、コーポレートカラーを基調にするのが基本です。コーポレートカラーとまったく違う色を使うと、同じ会社に見えなくなってしまいます。そのうえで、コーポレートカラーの明るさを少し上げた色や、相性のよい差し色を加えると、会社らしさを保ったまま採用向けの親しみやすさを出せます。

もうひとつ大切なのが、求職者との接点すべてで、見た目のルールを揃えることです。求職者は、求人媒体やバナー広告、SNSの投稿など、さまざまな入口から採用サイトにたどり着きます。

「広告ではポップな印象だったのに、ウェブサイトを開いたら硬い印象だった」と、入口とウェブサイトで印象がずれていると、それだけで不信感につながってしまうでしょう。

色、フォント、写真のトーン、ロゴの扱いといったデザインのルール（トーン＆マナー）を揃えておけば、どこから入っても同じ会社に見えます。採用サイトを単体で考えるのではなく、会社のブランディングの一部として捉えることが大切です。

離脱を防ぎ、読みやすさを高めるUI/UXの工夫

UI（画面の見た目や操作性）とUX（ウェブサイトを通じて得られる体験）は、求職者が情報をストレスなく受け取れるかを左右します。ここでは、とくに意識したい5つのポイントをお伝えします。

①ファーストビューで「誰に・何を」伝えるか

ファーストビュー（FV）とは、ページを開いたときに最初に表示される範囲のことです。求職者は、ページを開いて数秒のうちに、読み進めるかどうかを判断します。FVでは、キャッチコピーとメインビジュアルで、「誰に向けた、どんな会社か」を一目で伝えます。

②視線の動きに沿って情報を置く

人の視線は、ページの種類によっておおよそ決まった動き方をします。文章が多いページでは、左上から右へ、そして下へとアルファベットのFを描くように読み進めるのが特徴です（F型）。写真や図が中心のページでは、左上から右上、左下、右下とZを描くように動きます（Z型）。この流れに沿って、伝えたい情報を配置します。

③余白で情報を整理する

情報を詰め込みすぎると、どこを読めばいいのかわからず、窮屈な印象になります。余白は単なる空きスペースではなく、情報のまとまりを区切り、大事な部分に目を向けてもらうためのものです。

④スマートフォンで読まれることを前提にする

今の求職者の多くは、採用サイトをスマートフォンで見ています。通勤電車の中で、片手でスマートフォンを持ちながら気になった会社の採用サイトを開く、というのは中途の求職者にはよくある場面です。新卒の学生も、授業の合間や移動中にスマートフォンで情報を集めています。

こうした場面を想定して、片手でも押しやすいボタンの大きさ、スクロールだけで読み進められる構成、読みやすい本文の文字サイズなど、スマートフォンでの見やすさを前提にデザインします。

関連記事

【プロが解説】Webサイトのおすすめフォントと最適サイズ・調べ方

⑤表示速度に配慮する

採用サイトは写真を多く使うため、ページが重くなりがちです。通信が不安定な場所では、表示を待つ間に閉じられてしまいます。そのため、画像を圧縮したり、読み込み方を工夫したりして、見た目の魅力と表示の軽さを両立させることが重要です。

あわせて、文字と背景の色の差（コントラスト）を十分にとる、文字を小さくしすぎないといったウェブアクセシビリティ（誰もが利用しやすい状態）への配慮も、すべての求職者にとって読みやすいウェブサイトにつながります。

応募を最大化する「導線・フォーム」の最適化

採用サイトの成果（コンバージョン）は、エントリーや説明会の予約といった応募に関する行動です。デザインを整えても、応募までの道のりでつまずけば、せっかくの関心が応募につながりません。

ここからは、求職者を応募までスムーズに導くための工夫を4つご説明します。

①新卒と中途の入口を分ける

新卒の求職者は会社説明会やインターンシップの情報を、中途の求職者は募集職種や待遇を探しています。同じ入口から入ると、それぞれが自分に関係のない情報をかき分けて進むことになります。トップページの早い段階で新卒採用か中途採用の入口をはっきり分けて示しましょう。

さらに、新卒と中途で求める人物像や伝えたい内容が大きく異なる場合は、ページそのものを分けるパターンもあります。

共通のトップページから、それぞれ専用のページへ進む構成にすれば、会社としての世界観は保ちながら、新卒向けは親しみやすく、中途向けは落ち着いた印象にするなど、デザインのトーンまで出し分けられます。

②エントリーボタンを常に押せる位置に置く

行動をうながすボタン（CTA）は、スクロールしても画面に表示され続けるように配置すると、読み終えて応募しようと思った瞬間に、すぐ行動に移せます。

③広告と職種別のページをつなげる

広告を出す場合は、職種ごとにランディングページ（広告をクリックした人が最初に見るページ）を用意し、広告の内容とページの内容を揃えると、応募につながりやすくなります。

④応募フォームの入力項目を絞る

応募フォームは、応募までの最後の関門です。入力項目が多いほど、途中で手が止まりやすくなります。最初の応募で本当に必要な項目だけに絞り、詳しい情報は選考の中で伺う、という設計も選択肢のひとつです。入力例を表示する、入力ミスをその場で知らせるといった工夫も、応募の取りこぼしを防いでくれます。

採用サイトのデザインに強い制作会社の選び方

ここまでお読みいただくと、採用サイトのデザインは見た目だけで決まるものではない、ということが伝わったかと思います。だからこそ制作会社を選ぶときは、制作実績の見た目のよさだけでなく、どう考えてデザインを決めているかを確かめることが大切です。ここでは、見極めのポイントを3つお伝えします。

①「採用マーケティング」への理解があるか

採用サイトは、作ること自体が目的ではありません。目的は、自社に合った人材を採用することです。

そのため、デザインが美しいかどうかだけでなく、採用市場の動きや求職者の心理、応募数や選考の各段階で次に進む人の割合（歩留まり率）といった採用の指標まで理解している制作会社を選びましょう。

デザインに入る前に、採用したい人物像（ペルソナ）や採用の進め方から一緒に考えてくれるかどうかが、ひとつの判断材料になります。

探すべきは、単なるデザイン会社ではなく、採用の課題を一緒に解決してくれるパートナーです。

ノベルティでは、デザインだけでなくウェブマーケティングの視点からも採用サイトづくりに取り組んでいます。「応募が集まらない」「求める人材からの応募が少ない」「内定辞退が多い」といった課題のどこに原因があるのかを見つけ、その解決につながるデザインと導線をご提案します。

②自社の魅力と課題を引き出す「ヒアリング力」があるか

良い採用サイトのデザインは、会社のリアルな文化や現場の声から生まれます。

打ち合わせの段階で、自社の強みだけでなく、「過去の採用でうまくいかなかったこと」「社員が辞めてしまう主な理由」「現場の社員が感じている不満」といった、話しにくい課題まで聞いてくれる会社かどうかを見てみてください。

たとえば、先ほどご紹介した「男性社員が中心だけれど、これからは女性社員も採用したい」というご相談は、採用の背景まで伺わなければデザインに反映できません。表面的なヒアリングしかしない会社では、どの会社にも当てはまるような、ありきたりなデザインになりがちです。

③提案されるデザインに「課題解決の根拠」があるか

制作会社から提案書を受け取ったら、「なぜこの方向性なのか」「なぜこの構成にしているのか」を聞いてみてください。

「かっこいいから」「今のトレンドだから」という感覚的な答えではなく、「新卒と中途の両方に届けたいので、コーポレートカラーを軸に、差し色で親しみやすさを加えています」のように、採用の課題と結びついた説明ができるかどうかが、成果を出せる制作会社を見抜く最大のポイントです。

私自身も、デザインをご提案するときは、見た目の印象だけでなく、なぜこのデザインなのかという理由も、採用したい人物像と結びつけてお伝えするようにしています。採用サイトのデザインは、好みではなく目的で決める。この考え方を共有できる制作会社なら、安心して任せられるはずです。

まとめ｜採用サイトのデザインは「伝える順番」と「体験」の設計

採用サイトのデザインは、見た目を飾るためのものではありません。会社の魅力を、届けたい人に、適切な順番で伝え、迷わず応募まで進んでもらうための設計そのものです。最後に、この記事のポイントを振り返ります。

• デザインは応募数・応募の質・内定承諾まで関わる。信頼感を伝え、社風を見せ、迷ったときに背中を押す役割がある
• まず「誰を採用したいか」を決める。新卒か中途か、これから来てほしいのはどんな人かで、配色も写真もトーンも変わる
• 新卒も中途も採りたいなら、トーンは共通に、情報で出し分ける。必要に応じてページを分ける方法もある
• スマートフォンでの読みやすさと応募までの導線を整え、取りこぼしを防ぐ
• 制作会社は「なぜこのデザインなのか」を説明できるかで選ぶ

まずは、自社の採用サイトが「誰に向けたウェブサイトになっているか」を改めて見直してみるところから始めてみてはいかがでしょうか。

もし、採用サイトの新規制作やリニューアルをお考えなら、ぜひ一度ノベルティにご相談ください。千葉県船橋市を拠点に、ウェブサイト制作からアプリケーション開発、ウェブアクセシビリティへの配慮まで一貫して対応しています。採用の課題からデザインを考え、求める人材に届く採用サイトをご提案します。