製造業の採用サイト制作｜新卒・中途の両方に届く設計｜関根床用鋼板株式会社様

課題｜採用接点で「入りたい」と思わせる状態になっていなかった

ヒアリングで挙がった中心的な課題は、採用に関わった人が見て「入りたい」と思わせる状態にすることでした。

創業75年という歴史がある一方、社長交代を機に「業界の中で生き残る」ではなく「業界の中心になって引っ張っていきたい」という方針が示されていました。採用サイトには、その姿勢が伝わる訴求力が求められていました。

あわせて「SNS等のメディア発信が弱いので今後強化していきたい」という方針も共有されました。ただしこちらはサイト単体で解決する課題ではなく、同社が今後取り組んでいく方向性として挙がったものです。サイト側では、その取り組みにつながる導線を用意する形で対応しました。

なぜその構成にしたか｜「内容」と「見た目」で別々の参考サイトが示された

構成を決める出発点になったのは、クライアントから示された参考サイトが2つあり、それぞれ役割が違っていたことです。

• 同業他社の採用ページ：業務・採用内容のわかりやすさ
• スポーツクラブのオフィシャルサイト：デザイン性・スタイリッシュさ・色味

「同業のように分かりやすく、スポーツクラブのようにかっこよく」という二軸の要望です。この2つは放っておくと衝突します。情報量を増やせば重くなり、ビジュアルに寄せれば仕事の中身が伝わらなくなります。

そこで役割を分けました。

• トップページ：ビジュアルと世界観でスポーツクラブ側の躍動感を担う
• 下層ページ：仕事紹介・社員インタビュー・FAQ・募集要項を独立ページとして持ち、同業側の「わかりやすさ」を担う

トップで惹きつけ、下層で判断材料を渡す。この分担が、サイト構成の骨格になっています。

デザイン方針｜黒からブルーへ、2案を並行提案して決めた

「スポーティ」「スタイリッシュ」というキーワードを起点に、ダークトーンを基調とした構成を提案しました。

当初はコーポレートのベースカラーが黒であり、クライアントから共有された参考サイトも黒基調であったことから、メインカラーに黒を据えた案を提示。一方で、黒は採用サイトのイメージカラーとしては想起しづらい側面もあるため、より応募者の連想につながりやすいブルーを軸にした案も別パターンとして並行提案し、比較検討のうえブルーの採用が決定しました。

黒の持つ重厚感を残しながら、写真の色調を青みに寄せることで、現場のリアリティを損なわずにクールで前向きな印象へと振り切っています。

書体はシャープな印象に合わせ、欧文にJost、和文にZen Kaku Gothic Newを採用しました。

創業75年を「これから」のサインに再構成

メインビジュアルでは、ロゴのあしらいにちなんだ「75」を、未来やその先へ向かう矢印にも見えるグラフィックとして再構成しました。

創業75年という事実を、過去の実績としてではなく、次に向かうサインとして提示しています。トップのキャッチコピーには「伝統と変革が共存する現場で未来をつくる」を据え、ABOUTセクションでは「この会社の次の75年をつくるのはあなたかもしれない」と読み手に接続。守ってきた価値と変えるべきものを併記することで、安定と挑戦のどちらを求める応募者にも届く語り口を設計しました。

ABOUTセクションの背景にはロゴのシンボルマークを大きく配置し、メインビジュアルからの切り替わりでイメージが競合しないよう余白を広く確保。下部の現場写真は自動でスクロールさせ、静止と動きのリズムを持たせています。

新卒がメインでも、中途を閉じない情報設計

採用ターゲットは新卒がメインで、営業・工場・情報システム・経理総務の4職種を想定。全職種で男女を問わず、工場についても今後の受け入れ体制を整えていく方針が示されていました。

あわせて、中途採用を拒否する印象を与えたくないという要望がありました。常時募集しているわけではないものの、門戸を閉じているようには見せたくない、という状況です。

そこで、社員インタビューに入社年度と「新卒／中途」の区分を併記しました。どちらの経路の応募者も、自分の入り方を重ねながら読める構成です。募集要項のページでも新卒と中途をタブで切り替えられるようにし、片方だけが正面に出ないようにしています。

4職種それぞれの仕事の中身を、独立したページで

トップページでは4職種の要約を見せ、詳細は仕事紹介ページに分けました。営業・工場・情報システム・経理総務それぞれに、部署の役割と仕事の中身を明記しています。

社員インタビューは、トップページに掲載している4名全員をスライダーで並べ、詳細は個別記事に分けました。スライダーにすることで、縦に長く積み上げずに全員を見せられます。気になった人の話は個別記事で詳しく読める構成です。

アニメーションは、ライブラリを使わず自前で実装

参考サイトとして示されたサイトにアニメーションが実装されていたことから、動きのある表現も要件に含まれていました。

実装はアニメーションライブラリを使わず、テーマ独自のJavaScriptで行っています。jQueryも使用していません。

スクロールに連動した要素の出現、現場写真の自動スクロール、スクロール量に応じたヘッダーの切り替えなどを実装。社員インタビューのスライダーは、PC幅のときだけ自動で送り、スマートフォンでは自動再生を止めるようにしています。

表示を軽くするため、画像はすべてWebPで書き出し、PC用とスマートフォン用を別ファイルで用意しました。

スクロール中も、応募への入口を切らさない

ヘッダーにENTRYボタンを常設し、PC・スマートフォンのいずれでもスクロール中に応募への入口が視界から外れない状態を維持しています。

加えて、ページ下部にはFAQと募集要項／選考プロセスへのバナーを配置しました。「応募前に確認したいことがある」という段階で立ち止まった応募者を、離脱ではなく次の情報へ送る導線です。FAQは募集・選考／仕事・働き方／社風・雰囲気／その他の4カテゴリーに整理し、選考プロセスは5ステップで可視化しています。

WordPressで構築し、社員インタビューは管理画面から更新できる形に

WordPressで構築し、社員インタビューなどは管理画面から更新できる形にしました。トップページの固定部分はテーマ側に実装し、更新する箇所と固定の箇所を分けています。運用時に触る範囲が限定されるため、更新のたびにレイアウトが崩れる心配がありません。

あわせて、同社が運用するInstagramへの導線をフッターに設置しました。SNSの運用そのものは同社が担うため、今回の対応範囲はサイトからの導線までです。

採用サイトの制作をご相談ください

ShareDanでは、採用サイトの情報設計からデザイン、WordPressでの実装、公開後の運用までを一貫してご相談いただけます。

本案件のように「歴史ある企業が、これから変わっていく姿勢も同時に伝えたい」というご要望や、「新卒をメインにしながら中途にも門戸を開いていることを示したい」といった採用方針の反映も、ヒアリングから一緒に整理します。デザインと開発の両方に対応しているため、動きのある表現についても実装まで含めてご提案できます。

採用サイトについてご相談がありましたら、お気軽にお問い合わせください。