ノーコードで見た目を変える！求人サイトのデザイン編集機能を紹介

求人サイトを運営していると、「見出しの色を変えたい」「新着求人を上に表示したい」などと思う場面が出てきます。

従来だと制作会社に依頼して直してもらいますが、毎回費用も時間もかかって大変です。

できることなら、気になったときにすぐ変更したいですよね。

実は、求人サイト構築パッケージ「JOB-PLACE」には、ノーコードで見た目を変えられる機能が実装されています。

マウス操作だけで直感的に変更できるため、HTMLやCSSといった専門知識は必要ありません。

この記事では、JOB-PLACEのデザイン機能で何ができるのかを、機能ごとに紹介します。

JOB-PLACEのデザイン機能とは

JOB-PLACEのデザイン機能とは、専門知識がなくても求人サイトの見た目を変えられる機能群のことです。

配色やロゴ、トップページの見せ方、ページの構成といった要素を、管理画面の操作だけで調整できます。

コードを書く必要がないため、デザインに不慣れな運営者でも自分のサイトを育てられます。

ここでは、デザイン機能の前提となる3つの特徴を紹介します。

ノーコードでデザインを編集できる

JOB-PLACEのデザインは、ノーコードで編集できます。

HTMLやCSSといったコードを書かなくても、管理画面の項目を操作するだけで見た目が変わる仕組みだからです。

たとえば、求人サイトの色を変える、ロゴを差し替える、トップページの構成を組み替えるといった作業を、専門のスキルなしで行えます。

プログラムコードを触らないため、操作を誤ってサイトを壊す心配もありません。

初心者や非エンジニアにとって、楽にデザイン変更ができる機能になります。

トップページは独立している

JOB-PLACEのトップページは、他のページから独立した構造になっています。

トップページは求人サイトの顔であり、求人一覧や求人詳細とは求められる役割が異なるためです。

トップページだけ独自のレイアウトやファーストビューを設定し、求人一覧などのページとは別の見せ方ができます。

求人サイトの入口としてトップページを作り込みつつ、他のページは情報を探しやすい構成に保てます。

トップページに力を入れたい場合は、独立した設計を活かして自由に作り込んでください。

テーマを切り替えられる設計になっている

JOB-PLACEのデザインは求人サイト向けに洗練されていますが、別のテーマに切り替えられる設計にもなっています。

デフォルトテーマで運用しながら、将来的に別のテーマへ移行できるように設計されているからです。

ただし、これは管理画面から自分でテーマを選べるという意味ではありません。

実際にデザインを刷新したい場合は別途ご依頼いただき、お客様専用のデザインを作成することになります。

デフォルトのまま運用を始めつつ、必要になったらテーマごとデザインを刷新できる余地がある、と捉えてください。

プレビュー画面を見ながらカスタマイズできる

JOB-PLACEには、プレビューを見ながらデザインを編集できる「カスタマイズ」機能があります。

画面の左側に設定メニュー、右側にプレビューが表示され、変更がその場で反映される仕組みです。

仕上がりを確認しながら調整できるので、公開してから「イメージと違った」となることを防げます。

このセクションでは、基本情報・ファーストビュー・配色という主要な設定をご紹介します。

基本情報でロゴやサイトタイトルを設定する

カスタマイズの基本情報では、ロゴやサイトタイトルを設定できます。

サイトの名前やロゴは全ページに関わる要素なので、プレビューを見ながら設定できたほうが仕上がりを把握しやすいです。

たとえば、ロゴ画像をアップロードし、プレビューでヘッダーへの表示を確認しながら、見た目の印象を整えられます。

デザインを変更する際は、まず基本情報からロゴとタイトルを設定してください。

ファーストビューで求人サイトの第一印象を決める

ファーストビューの設定では、サイトを開いた瞬間に目に入る部分を作り込めます。

ファーストビューは求職者がサイトに抱く第一印象を左右し、滞在するかどうかを決める重要な要素だからです。

具体的には、表示タイプをメインビジュアルかスライドショーから選べます。

メインビジュアルを選ぶと、リード文・キャッチコピー・CTAボタン（テキストとリンク先）に加え、サイト実績・クイック検索・オーバーレイの表示まで設定でき、自由度の高い見せ方ができます。

スライドショーを選んだ場合は、別ページで登録した画像を呼び出してスライド表示します。

サイトの印象を強めたいときは、ファーストビューの作り込みをしましょう。

配色設定でジャンルに合った求人サイトにする

配色設定では、サイト全体の色合いを変えられます。

色は求人サイトのジャンルやブランドの印象を大きく左右するため、業種に合った配色にすることで世界観が伝わりやすくなるのです。

たとえば、医療系なら清潔感のある青系、飲食系なら温かみのある暖色系というように、ターゲットや業種に合わせて配色を調整できます。

サイトの世界観を整えたい場合は、配色設定でジャンルに合った色を選んでください。

なお、求人サイトの配色については以下の記事でも詳しく解説しています。

公開画面を組み立てるレイアウト機能

JOB-PLACEのレイアウト機能は、求人サイトの公開画面そのものを組み立てる機能です。

レイアウトという「器」を用意し、その中の決められた場所にパーツを配置していくことで、ページの構成を自由に作れます。

レイアウトにパーツを配置して公開画面を作る

レイアウト機能では、作成したレイアウトにウィジェット（ブログパーツのようなもの）を配置します。

ヘッダー・フッター・サイドバーといった配置場所を持ち、各エリアにウィジェットを置くことで、新しい機能を追加することが可能です。

レイアウトは複数作成することができるため、「トップページは2カラム、求人関係はシングルカラム」といった使い分けが可能になります。

ページごとに見せ方を変えたい場合は、用途に応じたレイアウトを作って割り当ててください。

用意・自作したウィジェットを配置する

ウィジェットは、サイドバーやフッターなどの決まった位置に、求人検索やパンくずなどの「機能パーツ」を配置できる機能です。

管理画面からドラッグ＆ドロップでレイアウト内に配置していくことで、簡単に機能を追加することができます。

たとえば、「求人一覧」というウィジェットを「新着求人」というタイトルに変更し、表示件数を5件、表示順を「掲載開始日（新しい順）」、カルーセル表示（横スクロール）にすることも可能です。

「ログイン時のみ表示」といった表示条件にすることもできるため、デザインの幅が広がります。

新しいウィジェットを追加することもできるため、よりオリジナル性が高い求人サイトにすることができるでしょう。

ナビゲーションを配置して導線を整える

求人サイトのヘッダー・フッターにあるナビゲーションも、管理者が自由に変更できます。

ナビゲーションは求職者がサイト内を移動するためのメニューで、導線の良し悪しが応募のしやすさに直結するため、非常に大事な要素です。

管理画面からメニュー項目を追加・並べ替えしてナビゲーションを作り、レイアウトの所定の位置に配置します。

リンク先も柔軟に変更でき、「ログイン中のみ表示」したり、別サイトに移動させることも可能です。

サイト内を回遊しやすくしたい場合は、ナビゲーションを整えて配置してください。

サイト全体の表示を整える設定機能

JOB-PLACEには、サイト全体の表示を細かく整えるための設定機能もあります。

カスタマイズやレイアウトで大枠を作ったうえで、画像やページ単位の設定を調整する機能です。

ここではデザイン設定・画像設定・システムページ設定の3つを紹介します。

デザイン設定でロゴやファビコン、OGP画像を管理する

デザイン設定は、サイト共通で使う画像やアイコンをまとめて管理する設定ページです。

ロゴだけでなく、ブラウザのタブやSNSシェア時に表示される画像など、サイト全体に関わる画像を一箇所で扱えるようにするためです。

具体的には、ロゴ画像・フッターロゴ・ブラウザアイコン（ファビコン）・Touchアイコン・OGP画像などを設定できます。

適切な画像を設定し、求人サイトのブランディングが行えるようにしてください。

画像設定で画像サイズを統一し、容量を抑える

画像設定は、求人サイトで扱う画像のサイズを指定しておく機能です。

あらかじめサイズを決めておけば、登録した画像が自動でリサイズされ、ファイル容量を抑えられます。

求人アイキャッチ画像・ギャラリー・企業ロゴ画像・会員証明写真など、サイトで使う画像ごとにサイズを指定できます。

登録時に自動でリサイズされるので、容量の大きい画像を入れてもサイトが重くなることはありません。

サイトの表示速度を保ちたい場合は、画像設定でサイズを統一しておいてください。

システムページ設定でページごとに表示を整える

システムページ設定では、フロント画面の各ページの表示を整えられます。

トップページや求人一覧など、ページごとに適切なレイアウトやSEO情報を設定する必要があるためです。

具体的には、トップページ・求人一覧・求人詳細・応募フォームといった各ページについて、ページタイトル・適用するレイアウト・タイトルタグ・メタディスクリプションを設定できます。

そしてトップページは2カラム、求人一覧はシングルカラムというように、ページごとにレイアウトを使い分けることも可能です。

ページごとに見せ方や検索対策を変えたい場合は、システムページ設定から調整してください。

JOB-PLACEのデザイン機能は、こんな運営者に向いている

JOB-PLACEのデザイン機能は、専門知識がなくても自分でサイトのデザインを変えたい運営者に向いています。

配色やロゴ、ファーストビューはプレビューを見ながらカスタマイズでき、レイアウト機能でページの構成を組み立て、設定機能で画像やページ単位の調整まで行えます。

これらをすべてコードなしで操作できるため、デザインの変更を制作会社に依頼する必要がありません。

依頼にかかる費用や待ち時間がなくなり、サイトの改善を思い立ったときにすぐ試せます。

少しずつ手を加えることで、あなたオリジナルの求人サイトに育てていくことができるでしょう。

JOB-PLACEのデザイン機能を体験したい方は、ぜひデモサイトから確認してみてください。