人材サービス会社のホームページデザイン事例｜用途別の選び方と制作のポイント

公式案内から比較できる点

人材サービス会社の企業サイトです。企業担当者向けと仕事の紹介を希望する個人向けにサービス・相談窓口を分け、会社情報、社員インタビュー、自社の新卒・中途採用も案内しています。

自社で取り入れる場合：企業の相談、仕事紹介の希望、自社への応募を混同しない入口にします。同じサイトで扱う場合も、フォームの項目や送信先を目的に合わせて分けます。

公式案内から比較できる点

学生向けのBEYOND CAFEに加え、20代社会人向けのBEYOND BAR、会員向けの場などを案内する企業サイトです。サービスは新卒向け・中途向けで分類され、会社・メンバー、資料、採用、問い合わせの案内があります。

自社で取り入れる場合：企業名と個別サービス名を区別し、対象者と支援内容を対応させます。学生向けだけを会社全体の事業として説明しないようにします。

公式案内から比較できる点

転職サファリ内の特設コンテンツです。昔と今の働き方を比較するカルタ形式の企画を紹介し、関連する読み物へ案内しています。人材紹介会社のコーポレートサイトや求人検索画面とは役割が異なります。

自社で取り入れる場合：企画の説明と次に読む情報を用意します。画像中心のコンテンツでも内容が伝わる代替テキストや操作説明を整え、操作結果と文字情報の確認を分けて検証します。

公式案内から比較できる点

ハイクラス・専門職などの転職支援を案内しています。職種・業界・勤務地による求人検索、転職相談、採用企業向けの入口、支援の流れ、資料があり、日本語・英語の切り替えも用意されています。

自社で取り入れる場合：求人の更新元と募集終了時の処理を決めます。求職者への支援範囲と企業向けサービスを分け、掲載数や満足度を用いる場合は対象・時点・集計方法を示します。

公式案内から比較できる点

採用支援、アウトソーシング、コンサルティングの3事業を案内する会社です。採用戦略・制作・運用、業務設計、組織や業務プロセスの改善などを説明し、事例と問い合わせにつなげています。

自社で取り入れる場合：派遣・紹介と同じサービスだと一括りにせず、依頼できる業務、納品物、運用範囲を示します。支援実績の件数だけで成果を保証しないようにします。

公式案内から比較できる点

製造分野の派遣事業を案内する会社です。半導体、航空機、自動車・建機、化学・医薬品などの分野ごとに、製品品目と対応内容を示し、会社情報、社員インタビュー、募集要項へつなげています。

自社で取り入れる場合：対応分野と作業内容を具体化します。公式は技術者を自社の社員として説明しているため、掲載人物を他社の社員だと写真だけから断定しないようにします。

公式案内から比較できる点

就業サポート、ITスクール、企業向け研修、SES、就労移行支援などを案内するグループの企業サイトです。グループ会社、事業、採用情報を分け、学校法人運営・奨学金事業は「予定」の表記もあります。

自社で取り入れる場合：グループ全体と各サービスの対象者を区別します。既卒・第二新卒向けの紹介だけに限定せず、提供中の事業と計画段階の事業を明記します。

公式案内から比較できる点

観光HRと地方創生などの事業を案内する企業サイトです。人材サービス名は「リゾートバイトダイブ」です。観光施設向けの人材支援に加え、宿泊施設の企画・運営、グループ会社、IR、自社採用を紹介しています。

自社で取り入れる場合：求職者向けサービス、観光事業者向け相談、投資家向け情報、自社採用を整理します。企業名と求人サービス名を正確に対応させ、実績の基準時点もそろえます。

公式案内から比較できる点

飲食・製菓・製パン業界で働く人を支援する会社です。人材紹介・転職支援、求人メディア、運営するパティスリーカフェなどを案内し、会社紹介、取引関係者の声、自社採用、問い合わせを掲載しています。

自社で取り入れる場合：業界特化の対象を具体化し、求職者の求人利用と自社への応募を分けます。過去のニュースから現在の募集状況や取引条件は推測しないようにします。

公式案内から比較できる点

東洋経済新報社の『就職四季報』公式メディアです。就活の基礎、業界・企業研究、社会人準備、ランキング、講義アーカイブなどの記事と、書籍の案内を掲載しています。

自社で取り入れる場合：求人紹介・登録サービスと記事メディアを区別します。数値を扱う記事は対象年度や調査条件を示し、読者が出典と発行時点を確認できるようにします。

公式案内から比較できる点

観光産業を軸に人材、デジタル・AI活用、プロモーション、マネジメントを案内する会社です。求人サービス「ワクトリ」、留学支援、宿泊業向けの「ヤドカリ」などを紹介しています。掲載の旧URLはwork-trip.co.jpへ転送されました。

自社で取り入れる場合：企業サイトと個別サービスの役割を分け、サービス名と運営会社を対応させます。ドメイン変更時には旧URLからの案内と、各問い合わせ先の更新も確認します。

公式サイトの画面で確かめられる点

ファーストビュー全面にオレンジ系の背景と横顔の人物写真を置き、白い大きな文字を重ねている。

左上のオレンジ色のロゴ枠と、右側の既卒・二卒・新卒の3つの色分けボタンで、対象者ごとの入口が最初の画面に出ている。

右端にSNSとCONTACTを縦に並べ、メニューは丸い小ボタンにまとめている。

自社で取り入れる場合：求職者の層が分かれるなら、対象ごとに色を変えた入口ボタンを最初の画面に置く。人物写真は1枚に絞り、文字を重ねる前提で撮影を依頼する。

公式サイトの画面で確かめられる点

スーツ姿の4人が笑顔で並ぶ写真をファーストビュー全面に使い、中央に創業35周年のロゴと白い一文を置いている。

メニューは上部の1行にまとめ、白文字で写真の上に重ねている。

何の会社かは、写真の人物と「活躍の場を広げる」の一文から読み取れる。

自社で取り入れる場合：自社の社員や登録者を撮った写真を全面に使い、中央に一文だけ置く。メニューは1行に絞り、白文字が読める明るさに写真を調整しておく。

公式サイトの画面で確かめられる点

青とピンクの大きな円を重ね、後ろに人物写真を薄く透かしている。

英語の大きな見出しが紺色で入り、その下に日本語の一文が1行ある。

ヘッダー右に「お問い合わせ」と「新規登録」の2つのボタンが並び、枠付きと塗りつぶしで区別している。

自社で取り入れる場合：コーポレートカラー2色を円で表し、写真を背景に薄く重ねる。求職者向けと企業向けの入口は、ヘッダーのボタンで形を変えて並べる。

公式サイトの画面で確かめられる点

英語の大きな黒い見出しをファーストビューいっぱいに置き、その上に斜めの赤い線を走らせている。

日本語の一文は明朝体の斜体で、見出しと文字の種類を分けている。

ヘッダー右に赤い「スカウトを受け取る」ボタンがあり、メニューは英語表記で並ぶ。

最初の画面の右下にCookieの案内が出ている。

自社で取り入れる場合：専門領域が絞れている会社なら、英語の大見出しと線だけで構成する案もある。その場合も、登録ボタンは赤など1色に決めて目立たせる。

公式サイトの画面で確かめられる点

社員が打ち合わせをしている写真を全面に使い、中央に白い大きな明朝体の一文とロゴを置いている。

ヘッダーは白文字のメニューで、右に法人のお客さま向けの外部リンクと検索がある。

ボタンは中央下の「私たちの想い」の1つだけで、下線付きの文字リンクにしている。

自社で取り入れる場合：大きな会社でも、最初の画面の文字は一文とロゴだけにする。法人向けサービスは別サイトなら、ヘッダー右に外部リンクとして分けて置く。

公式サイトの画面で確かめられる点

水色・緑・紺の大きな輪を重ね、背景にノイズのある薄い灰色を敷いている。

見出しは黒の太いゴシックで3行に分け、その下に英語の小さな一文がある。

写真は使わず、図形と文字だけでファーストビューを作っている。

ヘッダー右に紺色の「お問い合わせ」ボタンと日英の切り替えがある。

自社で取り入れる場合：医療職など対象が決まっている場合、写真の代わりに色の輪など図形で作る方法がある。採用ブランドの色3色を決め、輪の色に当てる。