パステルカラーの採用サイトデザイン事例｜配色設計の考え方

「採用サイトをやわらかい雰囲気にしたい。でも、パステルカラーでまとめると軽く見えないか、ぼやけて見えないか」——デザインの打ち合わせで、このような声を聞くことは多いです。

パステルカラーの採用サイトがうまくいくかどうかは、雰囲気を作るセンスで決まるという誤解がありますが、そうではありません。うまくいくかどうかは、配色設計の技術で決まります。

色数をどのように絞るか。コントラストをどのように確保するか。画面を引き締める色をどこに置くか。この設計がきちんとできていれば、パステルカラーは「やさしいのに、ちゃんとして見える」という両立が狙える色調です。

パステルカラーとは、ポップ・かわいいとの違い

パステルカラーとは、明度（明るさ）が高く、彩度（鮮やかさ）を抑えた色調の総称です。具体的には、淡いピンク、水色、ミントグリーン、クリームイエローなどが該当します。ここで押さえておきたいポイントは、これが「かわいい」という印象のカテゴリではなく、あくまで色の作り方の話だということです。

「ポップ・かわいい」というのは、目指す印象の方向性です。その印象を作るための手段は、イラストを使う、丸みのある書体を選ぶ、写真のトーンを明るくするなど、いくつもあります。パステルカラーは、数ある手段のうちの1つにすぎません。もし、印象の方向性から考えたい場合は、以下の記事が入口になります。

参考記事：『【事例13選】ポップな採用サイトのデザイン｜イラストで親しみをどう出す？』

この記事では、印象論ではなく「パステルという色調をどう設計するか」という点に絞って進めます。

パステルをぼやけさせない配色設計の4原則

パステルカラーを使った際の失敗は、ほぼ「全体が薄くて、どこを見ればいいか分からない」という一点に集約されます。この失敗を避けるための原則は、以下の4つです。

01. 原則1｜パステルは「面」で使いすぎない

カラーパレットを考えるときの基本は、ベースカラー（背景）、メインカラー、アクセントカラーの3層で構成することです。パステルカラーを背景の全面に敷き詰めてしまうと、画面の全体が霞んで見えてしまいます。

そのため、ベースは白や生成りに近い明るい色でとります。そのうえで、パステルカラーはセクションの区切りや見出しのまわりなど、「面積を絞った使い方」をするほうが、かえって色が生きます。

02. 原則2｜彩度を揃えて、明度差で階層を作る

複数のパステルカラーを使う場合は、まず彩度（鮮やかさ）を揃えることが先決です。そのうえで、情報の優先順位は明度（明るさ）の差とサイズで表現します。

色相（色味）をあれこれと増やすよりも、同じトーンの2〜3色に絞るほうが、画面全体に統一感が出ます。

03. 原則3｜締め色を1色だけ入れる

パステルカラーだけで画面を構成してしまうと、文字が読みにくくなり、応募ボタンも目立ちません。

そこで、濃紺、チャコールグレー、深いブラウンなど、締め色を1色だけ決めて、本文のテキストと応募ボタンに使います。淡い色の中に濃い1色があるからこそ、やわらかさが引き立つというわけです。

04. 原則4｜フォントとあしらいは「細さ」で品を保つ

パステルカラーと太い丸ゴシック体の組み合わせは、どうしても幼い印象に寄りやすいです。大人向けのやわらかさを狙うのであれば、細めのゴシック体を選んでください。あしらい（罫線、アイコン、装飾）についても線の細いものを選ぶと、品が保てます。

あしらいを盛れば盛るほど、対象年齢が下がって見えます。そのため、どこまで盛るかはターゲット次第です。

なお、色ごとの心理効果も選定の手がかりになります。パステルピンクは親しみと安心感、パステルブルーは清潔感と誠実さ、ミントグリーンは穏やかさ、クリームイエローは明るさと気軽さをもたらします。どの印象を最初に届けたいかで、主役の色相を決めていきます。

パステルカラーの採用サイトデザイン事例2選

ここからは、弊社が制作した採用サイトのうち、淡いトーンで組んだ2つの事例を紹介します。先にお断りしておきますが、画面をパステル一色で塗ったサイトはありません。

2社とも背景の地は白です。そのうえで、淡い色は光として置くか、線と面に薄く置くかのどちらかを採用しています。前の章でお伝えした「パステルは面で使いすぎない」という原則を、実際にどう守っているかという視点で見てください。

なお、色やテイストを横断してさまざまな事例を眺めたい方は、業種別のデザイン事例集が参考になります。

あわせて読みたい

【保存版】採用サイトのデザイン事例32選｜参考にしたい地方企業を業種別に

「採用サイトのデザインを探しはじめると、たいてい途中で手が止まります。ギャラリーサイトを開けば都心の大企業や有名ブランドの事例ばかりが並び、『うちの規模でこれは無理だ』と閉じてしまう」——地方の中小企業で採用を担当している方から、よくお聞きする状況です。 ここで必要なのは、かっこいい採用サイト

サン・ワード株式会社 様｜淡い色を光として置く

https://leapy.jp/works/recruit/recruit-s-word/（制作：地方採用ワークス）

岐阜市で結婚式場を運営する会社の採用サイトです。淡いピンクと水色を使っていますが、塗りとしてではなく、画面を斜めに横切る光として置いているのが特徴です。色の境目がぼかしてあるので、面としては認識されません。背景の地はあくまで白のままです。

締め色は黒の明朝体です。「毎日が、誰かの、一生に一度。」というコピーと、ロゴの金だけが強い色として残ります。淡い色を光にすると、面積を取っても画面が薄くならないという利点があります。ブライダルのように華やかさが必要な業種において、かわいさに寄せずに柔らかさだけを足す手段として使えます。

社会福祉法人岐阜県福祉事業団 様｜線と面に薄く置く

https://leapy.jp/works/recruit/recruit-gifu-fukushi/（制作：地方採用ワークス）

岐阜県内の14施設2機関で、児童、障がい者、高齢者の福祉サービスを提供する法人です。こちらは光としてではなく、ミントグリーンを筆記体の線とタグの小さな面に置き、コーラルピンクをボタンだけに置いています。淡い色が乗っているのは画面のごく一部であり、残りは白と写真です。

福祉は「きつそう」という先入観を持たれやすい一方、軽く見られても困る業種です。そこで色数を絞って面積を小さくすると、やわらかさは残しつつ、法人としての落ち着きが崩れません。淡い色は、置く場所を決めるほうが、色相を選ぶよりも効きます。職種、所属、入職年をタグにしてミントグリーンで囲んでいるのも、情報とデザインが同じ部品になっている例です。

2社を並べてみると、淡さの作り方は光として重ねるか、線と面に薄く置くかの2通りに分かれます。共通しているのは、地を白のままにしていることと、締め色を黒か写真の暗部で確保していることです。前の章で解説した4原則は、この2社でそのまま確認できます。

業種との相性と、失敗しやすいポイント

パステルカラーと業種との相性は、「業種イメージとの距離」で考えると判断しやすくなります。医療、福祉、保育、食品のように、やさしさや清潔感がそのまま仕事の価値につながる業種は、素直に合います。

一方で、製造、建設、金融のような硬い業種であっても、先入観をリセットする狙いで選ばれることがあります。つまり、相性の良し悪しよりも「何のために淡くするのか」が言えるかどうかが重要です。

そのうえで、失敗パターンは以下の3つに絞られます。

• コントラスト不足……淡い背景に淡い文字を置いてしまい、読みにくいサイトになるパターンです。採用サイトは求職者が意思決定のために読み込む媒体なので、可読性は見た目よりも優先されます。
• 幼く見える……色、書体、あしらいをすべて「かわいい」方向に振ってしまうと、対象年齢が実際のターゲットよりも下がって見えます。色、書体、あしらいのどれか1つは大人側に残すことをおすすめします。
• 写真とトーンが合わない……パステルカラーの画面に、暗い蛍光灯の下で撮った写真が入ると、不一致だけが目立ちます。淡い画面に載せる以上、写真も明るく浅い階調で揃えてください。撮影だけはプロに依頼するようコストを配分するのが確実です。

なお、やわらかさは欲しいけれど甘さは要らない、という場合は、ベージュやブラウン系の落ち着いた低彩度配色も選択肢になります。

参考記事：『ベージュ・ブラウンの採用サイトデザイン事例10選｜配色の考え方』

パステルカラーの採用サイトに関するよくある質問

Q1. コーポレートカラーが原色でも、パステルの採用サイトにできますか

できます。ロゴの色をそのまま使うのではなく、同じ色相のままトーンを淡く翻訳する方法が定石です。

むしろ注意したいのは、ロゴの色を無条件でサイトの主役にすることです。ロゴは会社の顔として設計された色であり、採用ターゲットの感性に合うとは限らないからです。

Q2. パステルカラーにすると、男性の応募者に敬遠されませんか

色相とトーンの選び方次第です。ブルーやグリーン系のパステルは性別を問わず受け入れられやすく、締め色を濃紺などに置けば誠実な印象に寄ります。

迷ったときは「誰に来てほしいか」に立ち返ってください。全員に好かれる配色は、誰にも刺さらない配色になりがちです。

Q3. 何色まで使っていいですか

ベースの白系を除いて、パステル2〜3色と締め色1色が目安です。それ以上増やしてしまうと、トーンを揃えていても画面が散らかって見えます。

色から決めると、色で迷い続ける

パステルカラーの採用サイトは、配色設計の技術で成立します。ベースを明るく保ち、トーンを揃え、締め色を1色置き、フォントとあしらいの細さで品を調整する。この原則を押さえれば、「やさしいのに、ちゃんとして見える」サイトは作れます。

ただ、順番として色が最初ではありません。どんな人に来てほしいか、その人に最初に何を感じてほしいかが決まって、はじめて色が決まります。ここが曖昧なまま色見本を眺めてしまうと、社内の好みの多数決になってしまい、決まらなくなります。

今日できるのは、色見本を閉じて、来てほしい人がいま働いている職場を思い浮かべることです。そこより明るくしたいのか、落ち着かせたいのか。淡さの度合いは好みで決めると社内で意見が割れるので、この差の分だけ淡くすると考えると基準ができます。弊社が配色を決めるときも、色見本より先にこの一点を聞いています。

配色の相談だけでも構いません。まずは御社の採用ターゲットと、いまのサイトの見え方をうかがったうえで、最適な方向性をご提案します。

採用サイト制作のサービス詳細はこちら