【採用サイト制作】依頼する前に知っておきたい!金額相場と押さえておきたいポイント

【採用サイト制作】たくさんの人の目に留まるホームページの作り方とは

採用サイトの制作を検討されている方は「どんな点に気を付けるべき?載せるべき情報や制作を依頼するときのコツを知りたい。」と悩むことがあるのではないでしょうか。今回は採用サイトの制作にあたり欠かせないポイントや、デザインのトレンドをプロの目線で解説します!                

採用サイトの重要性・役割

採用サイトの重要性・役割

まずは採用サイトの重要性や役割を理解したうえで、記載情報や相場、手順などを見ていきましょう。
今回はWeb制作に詳しいfria先生にお話しを伺い、採用サイトの制作のポイントをまとめました。

教えてくれる人Webディレクター

低コストで高クオリティなHPの制作を心がけ「ココナラ」ではプラチナランクを獲得。得意分野はコーポレートサイト制作、Wordpressブログサイト制作、Welcartを使ったECサイト制作など。
 
Yuri
よろしくお願いします!
早速ですが、採用サイトはどのような役割を持っているのでしょうか?
fria先生
3つのポイントがあります。
・採用のミスマッチを減らす
・競合他社との差別化
・「Googleしごと検索」への対応
それぞれの内容を詳しく見ていきましょう。

採用のミスマッチを減らす

1つ目の役割は、採用においてミスマッチを減らすことです。

fria先生
採用サイトは文字だけでなく画像や動画などを使い、社風や仕事環境など、募集要項だけでは把握しにくい部分を補完できます。
Yuri
実際に見てみないとわからないこともありますよね。
社風などは特に気になるところだと思います。
fria先生
入社前後のギャップを減らして、採用する側と入社する側の双方が満足するために採用サイトは役立ちます。

競合他社との差別化

Yuri
採用サイトは競合との差別化にもなるんですね!
fria先生
はい。
たとえば業界内で僅差のA社とB社があったとします。
業績・待遇面では甲乙つけがたいときに、A社には採用サイトがあり、B社には無い、もしくは募集要項だけしか載ってなければ、多くの就活生がA社を第一希望にしますよね。
Yuri
そうですね。
採用サイトがある方がきちんとしたイメージを持てます。
fria先生
また、どちらも採用サイトがあり、クオリティに差がある場合も同様です。
採用サイトを作る場合は、自社の競合に当たる企業の採用サイトを参考にして、差別化できるポイントを探してみましょう。

「Googleしごと検索」への対応

Yuri
「Googleしごと検索」とは何でしょうか?
fria先生
Googleの検索結果上位に求人中の情報として、自社の採用情報を掲載できるサービスです。
Google for Jobsとも言われます。
Yuri
そんなサービスがあるんですね!
fria先生
SEOの面でも有利になり、よりたくさんの人に自社の採用サイトを見てもらえます。

「Googleしごと検索」に対応するためには、自社の採用サイトに「構造化データ」を組み込みなど、専門的な知識が必要です。
これらに対応できるフリーランスもいますので、依頼する際は採用サイトの制作と合わせて「Googleしごと検索」への対応も要件に入れておくとよいでしょう。

採用サイトに載せるべき情報

採用サイトに載せるべき情報
Yuri
採用サイトにはどのような情報を載せるのでしょうか?
ポイントなどあれば教えてください!
fria先生
記載するべき情報をいくつかピックアップしました。

企業情報

いわゆるコーポレートサイトに載っている情報です。
社名や拠点、資本金や社員規模などを記載します。

就活生への代表挨拶

採用サイト用の就活生に向けたメッセージを掲載します。

補足
代表者の写真も一緒に掲載するケースが多いです。
企業としての安心感や信頼につながりやすくなります。

企業理念やバリューの説明

一番重要な箇所といっても過言ではありません。
企業が何のために活動しているのか、どんな価値を生んでいるのかを就活生に伝える大切な部分です。
理解しづらかったり、誤解されたりするとミスマッチの原因になりますので入念に準備しましょう。

これまでの歩み

企業の歴史を記載したぺージです。
年表のように表現できると、これまで歩んできた軌跡がわかりやすく伝わります。

組織体制の説明

自社の部門をイラストや図で表します。

fria先生
外部の人が見てもわかるよう、どのような部署があり、それぞれが何をしているのかを図解できることが理想です。

社員インタビュー

現在働いている社員のインタビューを載せます。
若手・中堅・部長以上のレイヤーが、それぞれ写真付きで登場することが理想です。

働くオフィスの様子

画像などでオフィス内の雰囲気を伝えて、どんな場所で仕事をしているのかわかるようにします。

補足

雰囲気を伝えることが大切なので、説明文はなくても問題ありません。

数字で見る〇〇(会社名)

男女比や出身地など様々なものを数字で表現すると、ユニークさを演出できます。
数字はグラフやアイコンにすると、見てもらいやすくなります。

Yuri
「社員のメガネ率」など、おもしろい項目があると親しみを感じてもらえるかもしれません!

福利厚生についての説明

福利厚生は意外と注目される部分です。
若い年齢層の就活生は特に気にする箇所なので、なるべく詳しく記載しましょう。

募集要項

どのような人材に応募してもらいたいか、条件があれば記載します。
選考にあたって、就活生が必要な設備環境(パソコン、マイク、Zoomのインストールなど)があれば記載しましょう。

fria先生
主な記載要項は上記の通りです!
Yuri
詳しく教えてくださりありがとうございます。
他にポイントなどあれば教えていただきたいのですが……。
fria先生
他には、採用向けの動画をYouTubeに掲載したり、採用専用のSNSアカウントを開設したりする企業もあります。
採用サイトの中だけでなく、他の媒体も取り入れた活動を行っている企業が増えていますね。
Yuri
今はSNSで情報収集をする就活生が多いでしょうから、他の媒体を使って採用活動をするのも効果がありそうですね!

採用サイト制作の相場

採用サイト制作の相場
Yuri
採用サイトの制作相場はいくらくらいでしょうか?
fria先生
制作費はページ数やライティング費などを含んだ場合で大きく異なります。

一つの目安として、例えば「TOPページ含め6ページの採用サイトでライティング無し」とすると、フリーランス相場で「平均15万円前後」といったイメージでしょうか。

Yuri
条件によって価格は大きく変わるのですね。
fria先生
値段が上がる主な要因はページ数、ライティング費、画像費の3つです。

特にライティング費用は注意しましょう。
ライティング込で対応してもらえるのか、原稿はすべてクライアント側で用意する必要があるのか、あらかじめ確認することをおすすめします。

採用サイト制作の手順と注意点

採用サイト制作の手順と注意点
Yuri
これから採用サイトを制作する方のために、大まかな流れを教えていただけますか?
fria先生
基本的には、通常のコーポレートサイトなどを作る手順と同じです。
流れは以下の通りです。
それぞれの段階で注意したいこともあわせて解説しますね。

①ヒアリング

・どんな採用サイトを作りたいか?
・いいと思っている他社の採用サイトはないか?

上記のような、お客様が持っている「採用サイトの完成イメージ」を共有していただきます。
合わせて公開スケジュールや、素材の提供のタイミング、公開サーバーの情報などについてヒアリングします。

②サイトマップ作成

階層を持ったサイト型の採用サイトを作る場合は、トップから下層ページまでの導線を表すサイトマップを作成します。

補足
1ページ(LP型)の採用サイト制作ならサイトマップは作らず、そのまま次のワイヤーフレームの段階に進みます。

③ワイヤーフレーム作成

デザイン前に大まかなレイアウトを決めるため、色を付けずに線画を中心にまとめたワイヤーフレームを作成します。
多くの場合はトップページと下層ページを1つずつ作り、これらをテンプレートとして次の段階に移ります。

④デザイン作業

ワイヤーフレームをもとに写真の挿入や、色を付け、出来上がりイメージにほぼ近い状態のデータを作成します。

fria先生
この段階で原稿や実際に掲載したい画像などがあれば、ご用意いただけるとスムーズかと思います。

⑤コーディング作業

デザインに問題なければ、HTML・CSS・JSなどを使ったコーディング作業に移ります。
この段階では、デザインでお見せしたものをそのまま再現するのが一般的です。

注意
ただし画像スライダーや背景動画、アニメーションなどの実装を予定している場合は、ここで初めて確認できます。
「主に動的な部分を確認するフェーズ」と考えていただければと思います。

⑥テストアップ確認

この段階まで来たら、あとはサーバーにアップするだけです。
テキストに誤字脱字がないか、リンク切れが起きていないか?などをご確認いただきます。

⑦本番公開

テストアップに問題がなければ、公開に移ります。
Googleアナリティクスなどアクセス解析ツールを使用している場合は、公開後にきちんと計測できているか確認しましょう。

採用サイト制作の注意点

Yuri
採用サイト制作において気を付けたほうがいいことがあれば教えてください!
fria先生
大切なのは、文字だけでなく図や表で説明することを意識することです。
例えば企業理念やバリューなどを語るページは、文字をつらつらと書きがちです。

しかし図解やアイコンなど挿絵的なものを挟んだり、文字にを装飾付けたりするだけでも読みやすくなります。
1日に何件も面接に行く忙しい就活生にとっても、重要なポイントを理解しやすくなるでしょう。

Yuri
なるほど。
たしかに見やすさは重要ですよね。
その他に何かポイントはありますか?
fria先生
最近ではスタンダードになりつつありますが、スマホ対応は必須です。

ごく稀に、費用削減のためにPCサイトだけの制作を打診される方もいらっしゃいます。
基本は両方作るほうがいいのですが、もし予算の関係で難しければPCサイトよりもスマホサイトを作ることをおすすめします。

就活中は外出していることも多く、出先で採用サイトを見直すなど、スマホで閲覧することが圧倒的に多いからです。
おそらく、どの採用サイトでも6~7割程度がスマホからのアクセスかと思います。
そのくらい採用サイトをスマホ対応にすることは重要です。

Yuri
就活生は忙しいですからね。
見る人の立場に立ってデザインや使いやすさも考えないといけませんね。

採用サイト制作におけるデザインのトレンド

Yuri
最近の採用サイトのトレンドがあれば教えていただけますか?
fria先生
TOPページのインパクトを重視したデザインがトレンドです。


・動画を背景にしてキャッチコピーを上に重ねる
・幾何学的なアニメーションを取り入れる
・スクロールすると背景が変化する

このように、一気に引き込まれるようなビジュアルの採用サイトが増えています。
ただし高度な動きを付ける採用サイトの場合、追加工数がかかる可能性があるので、事前に確認しておきましょう。

Yuri
たしかに視覚的に動きがあると、もっと見たくなってしまいますよね!
限られた予算の中でどの程度のものが作れるか、事前に確認することが大切ですね。

採用サイト制作はココナラで!

採用サイト制作はココナラで!
悩んでいる人
採用サイトの制作をWeb制作業者に相談したら、予想以上に見積額が高額に…。

こんなときは、フリーランスで活躍しているWebデザイナーがいるココナラがおすすめです。
fria先生をはじめとした優秀なWeb制作のプロが多数いますので、きっとイメージ通りの採用サイトを制作できますよ。
編集部イチオシのWeb制作サービスを厳選してご紹介します!

fria先生に採用サイト制作を依頼!

実務8年のプロが高品質なサイトを制作致します 一般的な制作会社の作ったHPと同等以上のクォリティーをご提供

評価5を継続中!実績100件語超えのプロに依頼!

SEO重視のホームページ制作+安心サポート致します 150種類以上のWordpressテンプレートから選べます

初めてサイトを制作される方にも丁寧に説明します!

新規企業ホームページ(HP/LP)制作します あたらしいホームぺージが手に入ります!

美しいWebサイトを制作します!

美スッキリ! 更新簡単Wixホームページ作ります 実績200件超 SEO重視の美しくクールなWix集客サイト

納品後のサポートも実施!SEOに強いサイト制作

SEO歴15年のプロが監修!集客用HPを制作します ※完全放置でお客さんが集まるホームページが欲しいですか?

わかりやすい・見やすいHPを作ります

コミコミ価格で一からホームページ作成いたします パソコン操作が苦手な方でも維持管理ができるような動画解説付き

マーケターの視点でHP制作を支援します

トップセールス&マーケターが戦略的HPを制作します 独自の戦略マップを進呈!激動の時代に勝ち残る為のサービス

Web制作に関わることなら何でもご相談ください!

JimdoサイトをプロのWebデザイナーが作ります 見栄え良く作れない人、作るのが面倒な人へ

丁寧かつ迅速な対応を心がけています

スマホ対応・更新らくらくなWixサイト作成します SEO対策!アフターフォローもばっちり!サイト運営をサポート

格安でWordPressサイト制作!

格安!WordPressでブログやHP作成します 「顧客の評価が全て」0から始めるならコレ!

採用サイトを制作して優秀な人材を呼び込もう!

採用サイトを制作して優秀な人材を呼び込もう!

今回は採用サイト制作の重要性や依頼の流れ、成功させるコツをお伝えしました。
採用サイトは、自社が求める人材を呼び込むために欠かせないツールです。
イメージ通りのものを作るために、実績が豊富なWeb制作のプロに依頼しましょう。
魅力的な採用サイトを作っていただき、優秀な人材を起用するきっかけにしてくださいね。

ココナラを詳しく見る