WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 採用サイト
  4. 株式会社廣野鐵工所 採用サイト

webcan analyze hirono-iwc.co.jp/recruit

RECRUITING · 大阪府 · PICKED 2026.10.17

株式会社廣野鐵工所 採用サイト採用サイトのホームページデザイン参考 — 採用サイト・製造業・大きな英字

株式会社廣野鐵工所 採用サイトのトップページ（PC）
PC（1440px）
株式会社廣野鐵工所 採用サイトのトップページ（スマホ）
スマホ（375px）
出典：hirono-iwc.co.jp/recruit ↗確認日 2026.10.17
株式会社廣野鐵工所 採用サイト採用サイト · 大阪府
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

「ENJOY YOUR GROWTH」などの大きな英字と色の切り替わりで、鉄工所の採用サイトを明るく見せる。

大阪府岸和田市に本社工場を置き、栃木県宇都宮市にも工場を持つ金属部品メーカーの採用サイト。ファーストビューは「ENJOY YOUR WORK」「ENJOY YOUR GROWTH」など5つのコピーを、黄色や緑などに背景色を変えながら切り替え、「楽しむ人にやさしい会社。」の一文を添えている。会社の考え方、職種紹介、次代の経営を担う兄弟のクロストーク、社員インタビュー、教育制度・福利厚生、働く環境、地域貢献と続き、最後に赤い大きな「ENTRY」の帯を置いている。

  1. 01太い英字の「ENJOY YOUR 〜」を5パターン用意し、背景色を変えながらファーストビューで切り替えている
  2. 02本文の途中に手や本などのカラフルなアイコンを差し込み、文章を読みやすくしている
  3. 03緑・黄・オレンジ・赤・青の色面でセクションを塗り分け、鉄工所らしくない明るさを出している

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
－予約・問い合わせ導線—
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内

エントリーボタンを常に右上に出す

PC・スマホとも、右上の「ENTRY」ボタンとメニューを固定している。どのセクションを読んでいても、応募したくなったときにすぐ進める。

社員の言葉を見出しにする

社員インタビューは「私たちがつくった部品が、世界で活躍する農耕機を支えている。」のように、本人の言葉をそのまま見出しにし、部署と入社年を添えている。仕事の中身とやりがいが具体的に伝わる。

最後に大きなエントリーの帯を置く

ページの終わりに赤い大きな「ENTRY」の帯を置き、新卒も中途も歓迎していることを書き添えている。読み終えた人が迷わず応募に進める。

チェック項目は 2026.10.17 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#00A44Dセクション背景（ファーストビュー・インタビュー） · グリーン
#F6B000セクション背景（ファーストビュー・働く環境） · イエロー
#E43936エントリーの帯 · レッド
#F46F2Cセクション背景（教育制度・福利厚生） · オレンジ
#4EAEBFセクション背景（地域貢献） · ブルー
#FFFFF9背景 · オフホワイト
#3B3B3Bフッター · ダークグレー

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途
英字（大きなコピー・ボタン）
使用フォント
Lexend
無料で近いもの
Lexend
用途
和文見出し・本文
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h252px / 9001.3036px / 900
h326.4px / 9001.4028px / 900
本文（p）16px / 5001.8416px / 500
ボタン16px / 5001.8416px / 500

実測値（PC 1440px・SP 375px、2026.10.17 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

  1. 01

    ヘッダー

    左にロゴ、右に「ENTRY」ボタンとメニュー。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  2. 02

    ファーストビュー

    「ENJOY YOUR 〜」の大きな英字を、背景色を変えながら5パターン切り替える。

    ファーストビュー／全面写真＋コピー型
  3. 03

    ENJOY YOUR WORK（会社の考え方）

    中央ぞろえの文章に、カラフルなアイコンを差し込む。強みのページへのボタン。

    コンセプト／写真＋メッセージ型
  4. 04

    FUTURE VISION（クロストーク）

    社員2人の写真に、見出しとクロストークへのボタンを重ねる。

    人・代表／代表・院長あいさつ型
  5. 05

    INTERVIEW（働く人の声を聞く）

    緑の背景に、社員の写真と言葉の見出し、部署と入社年。

    お客様の声／カード型
  6. 06

    教育制度・福利厚生／働く環境／地域貢献

    オレンジ・黄・青の色面のカードで、それぞれのページへ案内する。

    イベント・キャンペーン／特集バナー並び型
  7. 07

    ENTRY

    赤い大きな帯に「ENTRY」と応募を呼びかける文章。

    行動喚起／電話＋Web予約の2ボタン帯型
  8. 08

    フッター

    ロゴ、コーポレートサイトへのリンク、サイト内のリンク。

    フッター／店舗情報＋ナビ型
株式会社廣野鐵工所 採用サイトの構成をWEBCANの部品で組んだワイヤーフレーム（PC）

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ＆ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

  1. 01会社の姿勢をひとことの英字コピーにし、言葉を変えて何パターンか見せる
  2. 02製造業でも、色面とアイコンを使うと若い求職者に向けた明るい印象をつくれる
  3. 03社員インタビューは、本人の言葉を見出しにして部署と入社年を添える
  4. 04応募ボタンは常に画面の右上に置き、ページの最後にも大きく出す

FAQよくある質問

廣野鐵工所の採用サイトで使われているフォントは？

英字の大きなコピーとボタンは Lexend、和文は Noto Sans JP です。どちらも Google Fonts で無料で使えます。

製造業の採用サイトで、明るい色を使っても大丈夫ですか？

問題ありません。このサイトのように、色はセクションの区切りやアイコンに使い、文章は読みやすい太めのゴシックでそろえると、明るさと信頼感を両立できます。

どんな業種の参考になりますか？

金属加工・部品製造などのメーカーのほか、建設・設備工事・運送など、仕事のイメージを明るく変えて若い人を採用したい業種に応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は株式会社廣野鐵工所 採用サイトおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の採用サイトを。

「株式会社廣野鐵工所 採用サイトのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら