ノウハウ

モバイルに強い求人サイトの作り方

モバイルに強い求人サイトの作り方のイメージ

2015年4月21日にGoogleがモバイフレンドリーとして、モバイル端末(スマートフォンやタブレットなど)でサイト検索した時に、モバイル表示に最適化されたサイトを検索結果に表示すると公表しました。

参考:Google ウェブマスター向け公式ブログ: 検索結果をもっとモバイル フレンドリーに

この発表以降、モバイルフレンドリーモバイルファーストという考え方が浸透し、Web制作にも順次取り入れられるようになりました。Googleもモバイルでの表示をチェックするためのツールを続々と公開しています。

また、スマートフォン(以下、スマホ)で求人サイトを閲覧するユーザーも年々増えています。以下の記事をご覧ください。

参考:ハローワークインターネットサービスの利用による求職活動(pdf)

厚生労働省が発表している資料になりますが、こちらの図6にある「ハローワークインターネットサービスのトップページへのハード別アクセス割合」というページをご覧ください。(7ページにあります)

グラフを見ると、年々スマホユーザーが増えており、近年ではPCのユーザーを逆転している様子が伺えると思います。

このように求人サイトでもモバイル利用を意識したサイトを作るというのは必須事項になりつつあります。そこで今回は「モバイルに強い求人サイトの作り方」をご紹介したいと思います。

目次[非表示]

レスポンシブデザインにする

筆者は運営ブログを書く上で色んな求人サイトを閲覧しているのですが、モバイル対応している求人サイトは多いものの、レスポンシブデザインで作っている求人サイトはかなり少ないです。

※レスポンシブデザインとは、PCでもモバイル端末でも見やすく操作しやすいように最適化して表示する設計(デザイン)のことを指します。Googleも推奨するサイトの作り方になります。

参考:レスポンシブ ウェブ デザイン| Mobile Friendly Websites

Googleが推奨していることで広まるようになり、現在では主流となったサイト制作の方法です。当方でもレスポンシブデザインでサイト構築をするようにしており、JOB-PLACEもレスポンシブデザインです。

しかし、既存の求人サイトを見るとレスポンシブデザインにしているサイトは少ないです。PC用とモバイル用とそれぞれ別のページを作成したり、URLを分けているサイトが目立ちます。

ページやURLが複数に分かれることでユーザーを惑わす作りになりますし、検索エンジンの評価も分散します。なにより、サイト構築をする上で管理しづらくなりますので、ミスやトラブルの原因になります。

ですので、PC・モバイルと分けるのではなく、同一ファイルで表示を最適化する、レスポンシブデザインという作り方にします。モバイルに強い求人サイトの条件として、まず最初に検討する点だと思います。

表示速度を上げる

モバイル端末は外出時に利用することが多く、場所や時間帯によっては表示が遅くなりがちです。そこでページの表示速度(読み込み速度)にも注意を払い、なるべく早くページが表示されるようにしなくてはいけません

ページの表示速度に関してGoogleは以下のようにコメントしています。

参考:モバイル検索の上位表示にページ速度はどのくらい重要なのか | 海外SEO情報ブログ

この記事は2013年8月に公開された記事ですが、Googleは2015年にモバイルフレンドリーを提唱してから、続々と表示速度を計測できるようなツールを公開しています。

・PageSpeed Insights
ページを分析して表示速度を調べ、問題点や修正点を提案してくれる

・モバイルサイトの読み込み速度とパフォーマンスをテストする - Google
モバイルを対象とした表示速度をチェックできる

このようなツールを公開していることから、Googleはモバイルサイトの表示速度についても重視していると読み取ることとができます。

Google対策のみならず、モバイルサイトを閲覧しているユーザーの50%はサイトが2秒以内に読み込まれていることを期待しているので、可能な限り早く表示されるサイトを作る必要があります。

文字を見やすくする

モバイル端末はPCと比べて表示される画面領域は狭いです。PCのモニタは26インチ~32インチが普及していますが、スマホの場合は4~6インチです。およそ5倍以上の差があります。

また、求人サイトは求人情報を中心に情報量が多いです。募集要項や応募・面接について、会社概要などは必ず必要になりますので、必然的に文字数が多くなります。

しかし、狭い画面で多くの文字を閲覧するのは苦痛です。文字が多すぎると情報を誤認してしまう可能性もあり、それが求職者と企業の交渉時にトラブルになるかもしれません。

ですので、出来るだけ文字を大きくして見やすく・分かりやすい表示にしなければいけません。サイト構築以外の部分で運営者が意識できる点を挙げてみます。

  • 適度に改行を入れる
  • 適度に句読点を入れる
  • 強調する部分を太字にしたり色を変える

「適度に」という部分が分かりづらいかもしれませんが、実際に自分で文章を読んだ時に感じる部分で良いです。文章を読みながら息継ぎしやすい箇所で句読点や改行を入れると良いでしょう。

入力項目を少なくする

求職者が求人情報に応募する時は、名前や住所など個人情報を入力しますが、履歴書の代わりでもあるので、入力項目が多くなりがちです。

JOB-PLACEの求人システムは出来るだけ入力項目を省いて、入力しやすい設計にしていますが、それでも14項目(必須項目は8項目)あります。入力・選択する箇所で言うと22箇所あります。

これでも”最低限”ですから、求人サイトのジャンルよってはもっと多くの入力項目が必要になるケースもあるでしょう。

しかし、入力項目が多いとそれだけ離脱率も高まります。PCだとコピーペーストしやすいのでそうでもないでしょうが、スマホだと手間がかかるので入力作業もひと苦労です。

ですので、フォームの入力項目は出来るだけ少ないほうが良いです。求人サイトによって減らすのは難しいかと思いますが、モバイルを意識する場合は、出来るだけ入力箇所を減らす努力をしていただければと思います。

操作を簡単にする

入力項目の説明と重なる部分もありますが、モバイルを意識するならより簡単で操作しやすい画面設計にしなくてはいけません。具体的に例を出すと、

  • ボタンを大きくして押しやすくする
  • リンクだと分かるような配色や大きさにする
  • ワンタップでメニューが開くようにする

などになります。つまり、スマホの画面をタップする(押す)だけで動作するような作り方にしなくてはいけません。

PCの場合だとポップアップメニューや凝ったアクションで見栄えが良い作り方にすることが多いのですが、それだとスマホユーザーには使いづらくなります。(また、ボタンアクションなどはスマホだと実行されません)

画面も小さいため、「ボタンならボタン」「リンクならリンク」とひと目見て分かるような設計が必要になります。

不要なコンテンツを表示しない

求人サイトは情報量が多いメディアだと説明しましたが、情報量が多いとページの表示速度にも影響しますし、情報に対する誤認やフォーム入力の煩わしさが増します。

ですので、モバイル表示の際は必要のないコンテンツ・情報は表示しない(見せない)ようにします。

例えば、求人詳細ページで「関連する求人情報」や「おすすめ求人情報」が表示されるサイトがあります。これらはPCだとより多くの情報を提供できるので良いのですが、スマホの場合は情報過多になるかもしれません。

求人情報を検索するフォームも同じです。PC版だと地域・職種・条件など、多種多様な検索方法がありますが、スマホの場合は操作が大変になるので、キーワード検索だけなど、もっとシンプルにして良いかもしれません。

これらはサイト構築の手法に関係しますので、求人サイトの運営者が今すぐ対応できる点ではないかもしれませんが、モバイルを意識する上で大事な点だと思い、ご紹介しました。

JOB-PLACEで構築された求人サイトはレスポンシブデザインで、基本的にはPCとモバイルと同じ情報コンテンツが表示されるようになっています。

しかし、「スマホでアクセスした時は見せない」ようにもできますので、ご希望の際はご相談ください。

まとめ

いかがでしたでしょうか?どれもWeb制作をする上で考えられている点ではありますが、サイト運営者としては見逃しやすい点であるといえるのではないでしょうか。

繰り返しになりますが、求人サイトは多くの情報を掲載し、クライアント(採用企業)からも多くの情報を掲載するように求められますから、情報過多になりがちです。

PCで見ると情報が少なく、スカスカのように感じられるページでも、スマホで見ると情報量が多く、見るのに疲れるページになっている事はよくあります。

Web制作者としてはPC・モバイルに限らず、出来るだけ見やすく・分かりやすいサイト設計を心がけておりますが、それはサイト運営者の協力無くして実現できません。

ですので、求人サイトを構築する際はどの程度モバイルを意識するか(重視するか)を念頭に置いて、ご相談いただければ幸いです。

なお、JOB-PLACEの求人システムは他社サービスよりもモバイル対応していると自負していますが、それでも「まだ足りない」と感じています。

Googleのチェックツールでは標準以上の良判定ではあるのですが、それでもまだまだ改善できる部分もあると思います。今後も「モバイルに強い求人システム」を目指して改善をしていきたいと思っています。

関連記事

求人サイトで現金プレゼントキャンペーンを行う方法のイメージ

求人サイトで現金プレゼントキャンペーンを行う方法

ZOZOTOWNの前澤友作氏がTwitterで行った「100人に100万円のお年玉をあげる」として実施した現金...

求人文章は長い方が良い?短い方が良い?徹底解説しますのイメージ

求人文章は長い方が良い?短い方が良い?徹底解説します

求人情報にある仕事内容や求職者に対するメッセージ。企業によって内容も書き方もさまざまですが、求人サイトによって...

初心者でもできる!求人サイトの読み込み速度を早くして上位表示させる方法のイメージ

初心者でもできる!求人サイトの読み込み速度を早くして上位表示させる方法

本日、2018年1月18日にGoogleのウェブマスター向け公式ブログで、SEOに関する重要な記事が投稿されて...

配色別・求人サイトを印象づける色の話のイメージ

配色別・求人サイトを印象づける色の話

求人サイトのデザインを作成する時に「どんな配色にするか?」で悩むことがあります。配色によって求人サイトの印象は...

マクドナルドの採用キャンペーンについて求人サイト構築のプロが想うことのイメージ

マクドナルドの採用キャンペーンについて求人サイト構築のプロが想うこと

昨日、日本マクドナルドが9月5日~10月31日に店舗スタッフの採用強化を目的としたキャンペーン「マックなら、大...