WEBCAN.
Free Check無料診断URLを入れるだけ・30秒でSEOとAI検索対応をチェックFree Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 採用サイト
  4. ヤマックス株式会社 採用サイト

webcan analyze www.yamacs.co.jp/recruit

RECRUITING · 大阪府 · PICKED 2026.10.23

ヤマックス株式会社 採用サイト採用サイトのホームページデザイン参考 — オレンジ・吹き出し・ポップ

ヤマックス株式会社 採用サイトのトップページ（PC）
PC（1440px）
ヤマックス株式会社 採用サイトのトップページ（スマホ）
スマホ（375px）
出典：www.yamacs.co.jp/recruit ↗確認日 2026.10.22
ヤマックス株式会社 採用サイト採用サイト · 大阪府
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

社員の写真を吹き出しの形で切り抜き、「対話する会社」という考え方をデザインそのもので見せる。

大阪市北区に本社を置くヤマックス株式会社の採用サイト。ファーストビューは、方眼の入ったオレンジやピンクの背景に、吹き出しの形に切り抜いた社員3人の写真と「お客様の想いに応える、その一歩を共に。」「パートナーとのつながりが、未来を動かす。」などのコピーを載せたスライドになっている。続いて「対話する会社は、変わり続けられる会社だ。」という企業理念、仕事を知る・社員クロストーク・働く人を知る・働く環境を知る・採用新着情報と進み、最後に新卒・中途・パート・アルバイトの募集要項へつなげている。

  1. 01社員の写真を、青・黄・ピンクの色をつけた吹き出しの形で切り抜いて並べている
  2. 02背景に方眼の線を引き、オレンジ・青・黄の面でセクションを切り替えている
  3. 03「働く人を知る」で5人の社員を吹き出しの形で横に並べ、入社年・部署・ひとことを添えている

CONVERSION集客の工夫

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

エントリーの入口を右上に置く

ヘッダーの右上、メニューボタンの隣に「募集要項 / エントリー」のボタンを置いている。ファーストビューを見た時点で、応募の入口がどこにあるかがわかる。

「知る」の入口を目的別に分ける

仕事を知る（仕事紹介・部門紹介）、社員クロストーク、働く人を知る、働く環境を知る（数字で見るヤマックス・福利厚生・研修制度）と、知りたいことごとにボタンを分けている。応募者が自分の気になる順に読み進められる。

募集要項を雇用形態で分ける

ページの最後の募集要項は、新卒・中途・パート・アルバイトの3つのボタンに分けている。採用新着情報も「大学・専門学校 新卒対象」などのタブで絞り込める。

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

COLOR配色

#FF9300ファーストビュー背景 · オレンジ
#0071B9クロストーク・タブ · ブルー
#2E8ED5フッター背景 · ライトブルー
#FFDB00差し色 · イエロー
#EB2B64差し色 · ピンク
#FFFBC7セクション背景 · クリーム
#434343本文テキスト・ボタン

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

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
Zen Kaku Gothic New
無料で近いもの
Zen Kaku Gothic New
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h115px / 5001.7314px / 500
h244px / 6001.7524px / 600
本文（p）15px / 5001.7314px / 500
ボタン15px / 5001.7314px / 500

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

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

  1. 01

    ヘッダー

    左にロゴとRecruit、右に「募集要項 / エントリー」とメニューボタン。

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

    ファーストビュー

    方眼の入ったオレンジ・ピンクなどの背景に、吹き出しの形に切り抜いた社員3人の写真とコピーのスライド。

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

    企業理念

    「対話する会社は、変わり続けられる会社だ。」と、テーブルで向き合う社員2人の写真。企業理念へのボタン。

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

    仕事を知る

    吹き出しの形の白い枠に、仕事紹介・部門紹介のボタン。

    メニュー・サービス／アイコン／写真グリッド型
  5. 05

    社員クロストーク

    青い枠の説明と、若手4人の座談会の写真。

    人・代表／代表・院長あいさつ型
  6. 06

    働く様子の写真

    横に流れる写真のスライド。

    事例・実績／大判1件＋サムネ型
  7. 07

    働く人を知る

    5人の社員を吹き出しの形で並べ、入社年・部署・ひとこと。

    人・代表／代表・院長あいさつ型
  8. 08

    働く環境を知る

    写真の下の黄色い帯に、数字で見るヤマックス・福利厚生・研修制度のボタン。

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

    採用新着情報

    すべて・お知らせ・大学・専門学校 新卒対象 のタブ。

    お知らせ／お知らせ一覧型
  10. 10

    募集要項

    新卒・中途・パート・アルバイトのボタン。

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

    フッター

    本社と東京事業本部の住所・電話番号、サイトマップ。

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

PARTSパーツ別に見る

02ファーストビューファーストビュー／全面写真＋コピー型
ヤマックス株式会社 採用サイトのファーストビュー（PC）PC
ヤマックス株式会社 採用サイトのファーストビュー（スマホ）SP
03企業理念コンセプト／写真＋メッセージ型
ヤマックス株式会社 採用サイトの企業理念（PC）PC
ヤマックス株式会社 採用サイトの企業理念（スマホ）SP
04仕事を知るメニュー・サービス／アイコン／写真グリッド型
ヤマックス株式会社 採用サイトの仕事を知る（PC）PC
07働く人を知る人・代表／代表・院長あいさつ型
ヤマックス株式会社 採用サイトの働く人を知る（PC）PC
ヤマックス株式会社 採用サイトの働く人を知る（スマホ）SP
08働く環境を知るイベント・キャンペーン／特集バナー並び型
ヤマックス株式会社 採用サイトの働く環境を知る（PC）PC
ヤマックス株式会社 採用サイトの働く環境を知る（スマホ）SP

番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.22 以降に撮影したもので、現在の表示とは異なる場合があります。

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よくある質問

ヤマックスの採用サイトで使われているフォントは？

見出しも本文も Zen Kaku Gothic New です。Google Fonts で無料で使えます。

写真を吹き出しの形に切り抜くのは、どんな効果がありますか？

社員が話しているように見えるので、「対話を大切にする会社」という採用サイトのテーマが、文章を読む前に伝わります。会社の大事にしている言葉を、写真の形や背景の模様に置きかえると、印象に残りやすくなります。

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

製造・商社・サービス業など、仕事の内容が外から見えにくい会社の採用サイトに応用できます。部門や職種が多い会社ほど、「知る」の入口を分ける作りが役に立ちます。

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

MOREほかの採用サイトの参考サイト

採用サイトのすべてを見る5件
webcan design --sitemap www.yamacs.co.jp/recruit

ヤマックス株式会社 採用サイトのサイトマップ

  • 393ページ
  • トップページ/recruit/
  • 企業理念/recruit/concept/
  • 代表メッセージ/recruit/message/
  • 社員クロストーク/recruit/crosstalk/
  • 仕事を知る/recruit/business/
  • 部門紹介/recruit/department/
  • 働く人を知る/recruit/teammember/
  • 働く環境を知る/recruit/environment/
  • 採用新着情報/recruit/news/
  • 募集要項 / エントリー/recruit/requirements/
  • コーポレートサイト/
  • ヤマックスの取り組み/initiatives/
  • 製品お問い合わせ/contact-customer/
    • ヤマックス株式会社/contact-customer/thanks/
  • 企業情報・会社概要・拠点紹介/companyinfo/
  • ワークフロー/workflow/
  • ヤマックスについて/about/
  • ヤマックスの歴史/history/
  • お知らせ・最新情報/policy-2/
  • お知らせ・最新情報/policy/
  • こんな所にヤマックス/discovery/
  • お問い合わせ/contact/
    • ヤマックス株式会社/contact/thanks/
  • お知らせ・最新情報/sample-page/
  • 記事ページ/recruit/<各ページ>/213件
  • 個別ページ/glossary/<各ページ>/84件
  • 個別ページ/originalproducts/<各ページ>/11件
  • 個別ページ/products/<各ページ>/7件
  • 個別ページ/catalog/<各ページ>/41件
  • 個別ページ/ct-glossary/<各ページ>/10件
  • 個別ページ/ct-catalog/<各ページ>/3件

2026.10.27 に公開中の sitemap.xmlと、トップページのヘッダー・メニュー・フッターのリンクから整理したものです。記事や事例などの個別ページは1件ずつではなく、件数つきの1項目にまとめています。サイトの更新で現在の構成とは異なる場合があります。

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら