求人サイトのデモ｜100件の求人と、応募フォームまで

<< デモ一覧に戻る

求人のデモ

このページでは、Frames CMS の製品版で実際に作った求人サイトをご紹介します。人材紹介会社を想定した、6ページ構成です。
6つの職種にわたって、100件の求人が登録してあります。営業・事務・販売・ITエンジニア・製造・医療介護。条件でしぼり込んだときに、ちゃんと目当ての求人にたどり着けるか。そこを確かめていただくためのデモです。
使っているフレーム（デザインの枠）1種類とパーツ13種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。

このデモを見る（別ウィンドウ）

実際に動くサイトです。職種やこだわり条件でしぼり込んで、履歴書を添付できる応募フォームまでご覧いただけます。

不動産のデモも同じ仕組みで作っていますが、一覧ページのレイアウトを変えています。後の「一覧の並べ方は選べます」の項で見比べてみてください。

まずは全体像から
このデモの構成

6つのページで構成しています。すべて管理画面から作れるもので、HTMLを書いた箇所はひとつもありません。

ホーム

メイン画像のすぐ下に検索フォーム、その下に新着求人。はじめての方へ、入社された方の声、お知らせと続きます。仕事を探しに来た人が、いちばん短い道で一覧にたどり着ける順番にしています。

求人をさがす

100件を写真リスト（横並び）で。6つの職種をタブで切り替え、給与・勤務地・雇用形態・必要な経験・こだわり条件でしぼり込めます。

はじめての方へ

お問い合わせから入社までを6ステップで。「話だけ聞いてみたい」でも構いませんという姿勢を、よくあるご質問で伝えています。

運営会社

会社概要の表と地図。職業紹介の許可番号を載せる欄も作ってあります。

お知らせ

新着求人のご案内や説明会の告知。記事を追加すると一覧と詳細が自動で作られ、トップにも最新3件が出ます。

お気に入り

訪問者が♡を押した求人が並びます。会員登録は要りません。複数の求人を見比べたい人のためのページです。

このほかに、求人の詳細ページが自動で作られます。100件あれば100ページ。1件ずつページを作る必要はありません。

ここが製品版の見どころです
100件のデータが、こう動きます

求人を1件登録すると、一覧のカード・詳細ページ・検索の選択肢が、すべて自動でできあがります。
やることは「求人を登録する」だけです。

1｜条件でしぼり込む

このデモの検索フォームでは、次のしぼり込みができます。

しぼり込みの種類	このデモでの使い方
キーワード	職種名・会社名・仕事内容から探します
カテゴリ	営業／事務・管理／販売・接客／ITエンジニア／製造・技術／医療・介護（タブでも切り替えられます）
範囲でしぼる	給与を「〇〇万円以上〜〇〇万円以下」で
ひとつ選ぶ	勤務地／雇用形態／必要な経験
いくつでも選ぶ	こだわり条件（未経験OK・土日祝休み・在宅可・駅チカ・残業少なめ・賞与あり・転勤なし・服装自由・週休2日・研修ありの10種）
並び替え	新着順／給与の高い順・低い順

「こだわり条件」は、いくつでも選べます。「未経験OK」と「土日祝休み」の両方にチェックを入れると、その両方にあてはまる求人だけが残ります。求人サイトで、いちばん使われるしぼり込みです。

2｜一覧の並べ方は選べます

同じ「一覧（記事）」パーツですが、並べ方を3つから選べます。このデモでは、ページごとに使い分けています。

並べ方	どう見えるか	このデモでの使い所
カード並び	写真の下に文字。横に3つ並ぶ	トップの「新着の求人」
写真リスト（横並び）	左に写真、右に情報。縦に積む	求人をさがす（一覧ページ）
シンプルリスト	文字だけ。写真なし	（このデモでは未使用）

一覧ページに「写真リスト」を選んだのには理由があります。求人は、給与・勤務地・雇用形態・必要な経験と、比べたい情報が多いからです。横並びにすると1件あたりの情報量を増やせて、上から順に読み比べられます。

いっぽう不動産のデモでは、同じ一覧ページにカード並びを使っています。物件は写真の印象が先なので、写真を大きく見せる形が合います。扱うものによって、向いている見せ方が違います。並べて見比べてみてください。

3｜詳細ページ

一覧の求人をクリックすると、その求人のページに移ります。このページも自動です。

写真を切り替えて見られます

大きな写真の下に小さな写真が並び、クリックで切り替わります。動画も混ぜられます。職場の様子が伝わると、応募のハードルが下がります。

求人情報が表で出ます

給与・勤務地・雇用形態・勤務時間・必要な経験・アクセス・こだわり条件。登録した項目が、そのまま表になります。

その求人専用の応募フォーム

ページの下にフォームが付いています。送信されたメールの件名に、求人名が自動で入ります。「どの求人への応募か」を聞き返す必要がありません。

似ている求人・最近見た求人

同じ職種の求人と、その人がさっきまで見ていた求人が下に並びます。1件見て終わり、になりにくくなります。

4｜応募フォームで、履歴書を受け取れます

このデモの応募フォームは9項目です。名前・メール・電話のほかに、こんな欄を用意しました。

欄	種類	ねらい
ご希望	ひとつ選ぶ	「応募する」「話だけ聞いてみたい」を分ける。応募のハードルを下げます
同じ職種のご経験	プルダウン	面談前に経験年数が分かります
就業できる時期	カレンダー	在職中の方の都合を先に聞けます
履歴書・職務経歴書	ファイル添付	そのまま受け取れます。メールで送り直してもらう手間がありません
ご質問・自己PR	自由記入	―
個人情報の取り扱い	同意チェック	チェックしないと送信できません

フォームの項目は11種類から選べます。1行の文字・長い文章・メール・電話番号・プルダウン・ラジオボタン・チェックボックス・日付・数字・同意チェック・ファイル添付。組み合わせは自由です。

5｜お気に入り（♡）

一覧カードの右上と詳細ページに♡があります。押すと「お気に入り」ページに集まります。会員登録もログインも要りません。

求人サイトでは、「気になるものをいくつか置いておいて、あとで見比べる」という使い方が特に多くなります。応募は勇気が要るので、いったん保存できると動きやすくなります。

♡は、訪問者のブラウザの中にだけ記録されます。サーバーには送られないので、個人情報を預かることになりません。そのかわり、別の端末やブラウザとは共有されません。

Free（無料版）との違い

一覧の機能は、Free版にも入っています。ただし、このデモと同じものは作れません。
Free版でできないことは、次のとおりです。

	Free（無料版）	製品版
一覧の項目数	6つまで	制限なし
CSVの取り込み	書き出しのみ	取り込みもできる
記事の複製	できない	できる
詳細ページのフォーム	置けない	置ける
フォームの項目	お名前・メール・内容の3つ固定	11種類から自由に
フォームの数	1つ	制限なし

このデモは「8項目」使っています。給与・勤務地・雇用形態・勤務時間・必要な経験・アクセス・こだわり条件・写真。Free版の6つでは、2つ削ることになります。

そしてフォームです。この差がいちばん大きいと思います。Free版の3項目固定では、履歴書の添付もカレンダーも作れません。「応募する／話だけ聞いてみたい」の選択肢も出せません。
さらに、Free版のフォームは、求人の詳細ページに置くことができません。このデモにある「この求人について問い合わせる」は、製品版の機能です。求人サイトはフォームが受け口そのものなので、ここは製品版の領域になります。

逆に言えば、機能そのものは Free版でも試せます。絞り込み・詳細ページ・お気に入り・似ている記事は、Free版でも同じように動きます。まず無料版で使い勝手を確かめて、項目が足りなくなったら製品版へという進め方ができます。作ったデータはそのまま引き継がれます。

Free版と製品版の違いをくわしく見る

デザインの土台
使っているフレーム

このデモで使っているフレームは 「seikotsu1（全面1枚ビジュアル・テキスト重ね）」 です。

フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では20種類以上から選べます。

seikotsu1 は、画面いっぱいの写真1枚に、テキストを重ねるフレームです。求人サイトは「働いている人の顔」が見えるかどうかで印象が変わります。写真を大きく出せるこのフレームは、そこに向いています。

メイン画像を選ぶときのコツ。文字を重ねる位置は、管理画面から「左・中央・右」で選べます。このデモは左に寄せているので、人物が右寄りに写っている写真を使っています。写真に合わせて位置を変えることもできます。

このデモでは、色を2つ変えています

メインカラーを赤（#e03131）、アクセントカラーをオレンジ（#f08c00）にしました。変更したのは管理画面の「デザイン → テーマカラー」で、カラーピッカーから色を選んだだけです。

求人サイトで赤が使われることが多いのは、「応募する」ボタンを押してもらう必要があるからだと思います。落ち着いた色より、少し前に出る色のほうが向いています。

同じフレームでも、不動産のデモは濃い青にしています。まったく同じ枠なのに、色を変えるだけで別のサイトに見えます。並べて見比べてみてください。

20種類以上のフレームを見る

使用したパーツ

セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。

ホーム

セクション	使ったパーツ	Free版
求人をさがす（検索）	一覧の検索フォーム
新着の求人	一覧（記事）
職種からさがす（3列）	特徴・サービス（アイコン3列）
はじめての方へ	基本セット（見出し＋本文＋画像）
入社された方の声	お客様の声（星評価）
お知らせ	お知らせ一覧（最新記事）

求人をさがす・お気に入り

セクション	使ったパーツ	Free版
ページ冒頭の説明	基本セット（見出し＋本文＋画像）
求人一覧（100件）	一覧（記事）／写真リスト（横並び）
♡を押した求人	お気に入り一覧

求人の詳細ページ（自動で作られる部分）

セクション	使ったパーツ	Free版
似ている求人	似ている記事（※詳細ページ専用）
最近見た求人	最近見た一覧

詳細ページの下に出す内容は、「〇〇：詳細ページの下に出す内容」というページを作って、そこにパーツを置くだけです。100件すべてに同じものが出ます。1件ずつ設定する必要はありません。

はじめての方へ・運営会社

セクション	使ったパーツ	Free版
応募から入社までの流れ（6ステップ）	沿革・年表（タイムライン）
よくあるご質問	FAQ（クリックで開閉）
会社概要の表	表（項目と内容）
地図	埋め込み（YouTube・地図・iframe）

全13種類のパーツのうち、3種類は製品版でのみ使えるものです。ただし前の項でお伝えしたとおり、一覧まわりのパーツは Free版にもありますが、項目が6つまでという制限があります。表の「○」は「パーツとして入っている」という意味とお考えください。製品版では約50種類のパーツが使えます。

パーツの一覧を見る

ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です

製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、ご購入後にお問い合わせください。

このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。

作るときの参考に
求人サイトで迷いやすいところ

このデモを作るときに考えたことを、いくつか書いておきます。

100件も登録するのは大変では？: 正直なところ、最初の登録には時間がかかります。ただ、大変なのは1件目だけです。
2件目からは複製して書き換えるのがおすすめです。とくに求人は、同じ会社の別職種がよくあります。会社情報・アクセス・福利厚生はそのまま使えるので、職種名と給与を替えるだけで終わります。
また、全部を一度に入れる必要はありません。10件でも一覧は成立します。
募集が終わった求人は、どうすればいいですか: 2つのやり方があります。
ひとつは、非公開にする。一覧からも検索からも消えます。あとで同じ求人を再開するときは、公開に戻すだけです。
もうひとつは、「成約済み（SOLD）」のチェックを入れる。公開したまま「募集終了」のバッジが付きます。「この会社は実際に採用が決まっている」と伝わるので、あえて残す会社もあります。
このデモでは、100件のうち7件を「募集終了」にしてあります。一覧でも詳細ページでも、同じように出ます。
このバッジの言葉は、リストごとに決められます。管理画面の「リスト管理」に「「成約済み」バッジの文言」という欄があり、空欄なら「成約済み」、このデモでは「募集終了」と入れてあります。講座なら「満席」、中古車なら「商談中」というように、扱うものに合わせて変えられます。
こだわり条件は、何を並べればいいですか: 求職者が「これで検索したい」と思う言葉を並べてください。こちらが伝えたいことではなく、探す側の言葉です。
このデモの10種（未経験OK・土日祝休み・在宅可・駅チカ・残業少なめ・賞与あり・転勤なし・服装自由・週休2日・研修あり）は、一般的なものを揃えました。業種によっては「寮あり」「車通勤OK」「Wワーク可」「日払い可」などが効きます。
多すぎると選ばれなくなります。10前後が目安です。
項目は、あとから増やせますか: 増やせます。ただ、先に決めておくほうが断然ラクです。
たとえば50件登録したあとで「試用期間」を足すと、50件ぶん、その欄を埋めていくことになります。
おすすめは、最初に3〜5件だけ登録して、一覧と詳細ページの見え方を確かめること。「この項目、カードに出さなくてよかった」といったことが、そこで分かります。
履歴書をフォームで受け取って大丈夫ですか: 受け取れますが、個人情報を預かることになります。プライバシーポリシーに、取得する情報・利用目的・保管期間を書いておいてください。
また、添付できるファイルの種類とサイズには制限があります。PDFでのご提出をお願いする一文を、フォームの説明に入れておくと親切です。
なお、応募内容は管理画面からも確認できますが、指定のメールアドレスにも届きます。見落としが起きにくい形です。
押していないのに、お気に入りに求人が入っています: 作り替えのときに起こります。先にお伝えしておきます。
♡は訪問者のブラウザに「記事の番号」だけを記録しています。サイトのデータを入れ替えても、ブラウザ側の記録はそのまま残ります。そのため、テスト中に押した♡が、本番のデータに切り替えたあとも残り、まったく別の求人が入っているように見えることがあります。
ご自身の画面で気づいたときは、ブラウザの閲覧データ（サイトデータ）を消せば直ります。
ただ、すでに公開していたサイトを作り替える場合は、訪問者のブラウザにも古い記録が残っています。訪問者にデータを消してもらうことはできません。どうしても残したくないときは、新しいリストの名前を変えてください。たとえば以前が「job」なら「job2」にする。記録はリストの名前ごとに分かれているので、名前が変われば古い♡は読み込まれません。
少し強引な方法ですが、確実です。新しく作る場合は気にしなくて大丈夫です。
スマホでの見え方が心配: すべてのパーツが、画面の幅に合わせて自動的に並び替わります。スマホ用に別のページを作る必要はありません。写真リストは写真が上・情報が下に積み替わり、検索フォームは折りたたまれます。
求人はスマホで探されることがほとんどなので、お手持ちの端末でもこのデモを開いてみてください。

この構成で作れるサイト
人材紹介以外にも

このデモは人材紹介会社を想定していますが、「条件で選んで、フォームで受け付ける」サイトであれば、同じ構成がそのまま使えます。

自社の採用ページ／アルバイト募集／派遣会社の登録案内／スクール・講座の一覧／習い事・教室の紹介／セミナー・イベントの申込／士業や講師の紹介など。

たとえばスクールの講座一覧なら、「給与・勤務地・雇用形態」を「受講料・開催地・受講形式」に、「こだわり条件」を「オンライン可・夜間開講・初心者歓迎」に置き換えるだけです。応募フォームは、そのまま申込フォームになります。

まずは無料で試せます
Free（無料版）のご案内

Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
一覧・しぼり込み・詳細ページ・お気に入りは、無料版でも動きます。項目数の上限（6つ）はありますが、使い勝手はそのまま確かめられます。

求人向けの無料版（siyou-job）は、最初から求人データが入った状態で届きます。設置してすぐ、しぼり込みや詳細ページを触っていただけます。

無料版で作ったページや求人は、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。

製品版は買い切りです。1サイト分で 44,000円（税込）、月額はかかりません。制作会社様向けに、継続して納品できるプランもあります。プラン別の機能比較をみる

一覧・詳細プラグイン入りの Free(無料版) をダウンロード

このデモをもう一度見る

製品版を購入する