ホーム
〇〇県の求人に強い人材紹介会社。Uターン・Iターンの転職もご相談ください。
<< デモ一覧に戻る
人材紹介会社のデモ
- このページでは、Frames CMS の製品版で実際に作った人材紹介会社のサイトをご紹介します。地元の求人に強い、転職エージェント（人材紹介会社）を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ18種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、トップのボタンと、その下の大きな写真のブロックで、「転職をお考えの方」と「企業さま」の2つの入口を分けています。そのあとに、選ばれる理由・実績の数字・面談室の写真・転職された方の声を続けました。
まずは全体像から
このデモの構成
6つのページで構成しています。求職者向けと企業向けを、それぞれ1ページに分けるのが、人材会社のサイトの基本の型です。トップページは、どちらの方が来ても「この会社に相談してみよう」と思える内容にしています。
01
02
転職をお考えの方
転職の流れと、よくあるご質問。
03
企業さまへ
採用のご相談と、料金。
04
会社概要
会社の情報。
05
お知らせ
さんぷるキャリアからのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「biz64-red（斜めカット1枚ビジュアル）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像を斜めにカットし、左にキャッチとボタンを並べるフレームです。トップの背景の左上に、薄い飾り画像が入ります。スマホでは、キャッチとボタンは写真の下に並びます。
2つの入口は「オーバーレイ」で
写真の上に見出し・説明・ボタンを重ねるパーツで、「転職をお考えの方」「企業さまへ」を上下に並べています。2つめは文字を右寄せにして、入口の違いがひと目で分かるようにしました。メイン画像の2つのボタンも、同じ2ページにつながっています。
面談室は「横幅いっぱいレイアウト」、仕事の種類は「写真＋アイコンのカード」
個室の面談室は、文章と大きな写真を左右に並べるパーツで見せています。「どんな場所で話すのか」が分かると、初めての方も相談しやすくなります。取りあつかいの多い仕事は、写真にアイコンを添えたカードを「列の並べ方」で「3列」に並べました。
最後は「大きなアイコン＋ボタン」で無料登録へ
お知らせの手前に、大きなアイコン・文章・ボタンを横に並べるCTAを置き、「まずは、無料登録から」と誘導しています。背景に色を付けているのは、「選ばれる理由」と「転職された方の声」の2つだけです。
フッターは、見出し付きのメニュー
「フッター設定」でフッターのデザインを「フッター4（見出し付き多列メニュー）」にし、「フッターメニュー」で「サービス」「会社情報」の2つのグループを作っています。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ヘッダーが白いので、色つきのロゴを使っています。フッターは見出し付きのメニューが並ぶデザインなので、ロゴは出ません。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「biz64-red」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
企業
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 地元で、長く働ける職場を。 | 基本セット（見出し＋本文＋画像） | |
| 2つの入口 | オーバーレイ（写真＋テキスト＋ボタン） | |
| 選ばれる理由 | 特徴・サービス（アイコン3列） | |
| 数字で見る さんぷるキャリア | 実績カウンター（数字） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 面談室のこと | 横幅いっぱいレイアウト（テキスト＋写真） | |
| 取りあつかいの多い仕事 | 写真＋アイコンのカード | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 転職された方の声 | お客様の声（星評価） | |
| 無料登録への誘導 | CTA（大きなアイコン＋テキスト＋ボタン） | |
| お知らせ | お知らせ一覧（自動） |
転職をお考えの方／企業さまへ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 転職の流れ | ステップ案内（横4列・アイコン） | |
| 画像（1枚） | 画像（1枚） | |
| 入社後のフォロー | コラージュ（写真2枚＋テキスト） | |
| よくあるご質問 | FAQ（Q&Aマーク付き・カード型） | |
| 今週の花 | 横長レイアウト（テキスト＋写真） | |
| 採用までの流れ | 特徴・サービス（アイコン3列） |
会社概要／お知らせ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 会社概要 | 表（項目と内容） | |
| アクセス | 行き方の案内（アイコン付きの枠） | |
| お知らせ | お知らせ一覧（自動） |
全18種類のパーツのうち、15種類は製品版でのみ使えるものです。オーバーレイや写真＋アイコンのカード、実績カウンターは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
人材会社のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 求人の一覧は、サイトに載せたほうがいいですか
- 求人は入れ替わりが早いので、サイトには「どんな仕事が多いか」と実績の数字を載せ、個別の求人は面談でご紹介、という形でも十分です。このデモでは、取りあつかいの多い仕事を3つのカードに、求人数・お取引先などを実績カウンターにしました。
- 企業向けの料金は、載せたほうがいいですか
- 載せたほうが、相談につながりやすくなります。このデモでは「成功報酬型」「入社した方の年収の30%」と、料金の決まり方を書きました。
- 許可番号は、どこに載せればいいですか
- 会社概要の表に入れておくのが一般的です。このデモでは、会社名・所在地と一緒に「有料職業紹介事業」の番号を載せました。
この構成で作れるサイト
人材紹介会社以外にも
このデモは人材紹介会社を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
派遣会社／求人サイトの運営会社／不動産会社（売りたい方・買いたい方）／保険代理店／コンサルティング会社／学校（受験生・企業向け） など、「2つの立場の人に、別々の入口を用意したい」会社であれば、そのまま当てはまります。
背景の飾り画像は、「デザイン → このフレーム専用の素材」で、差し替えも非表示もできます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る