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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

あわせて読みたい

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

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

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

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

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

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

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

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

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

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

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

ここからは、他社が制作した淡いトーンの採用サイトを8つ紹介します。病院、IT、海洋土木、会計事務所、こども園と業種はばらばらですが、どれも淡い色を画面全体には塗っていません。イラストで使う、画面の端からにじませる、写真の外側にだけ置く、写真の色調そのものを寄せるなど、置き方の違いに注目して見てください。

社会医療法人寿楽会 大野記念病院｜明るさをそろえたイラストで街を描く

https://recruit.ohno.or.jp/

弊社の制作実績ではありません。掲載内容は2026年10月時点のものです。

このファーストビューには写真が1枚もありません。大阪市西区の250床の病院で、画面は淡いミント・クリーム・ピンク・グレーで描いた街並みのイラストだけでできています。病院の採用サイトは白衣と病棟の写真で始まりがちですが、それだと緊張感のほうが先に届きます。建物も木もすべて彩度を落とした同じ明るさの色で塗り、ロゴの濃紺だけを中央に1点置いています。

淡い色を4つ使っても散らからないのは、明るさをそろえて濃い色を1つに絞っているからでしょう。木の葉には細かな粒状のテクスチャをかけ、ベタ塗りの平板さを避けています。

株式会社HBA｜淡い色を四隅からにじませる

https://www.hba.co.jp/recruit/

弊社の制作実績ではありません。掲載内容は2026年10月時点のものです。

札幌市のシステム開発会社で、社員800名を超える規模の採用サイトです。背景は白地ですが、四隅だけに桃色と淡い黄色がにじむようなグラデーションをかけています。パステルを面で塗らず、画面の端から染み出す光として使っているため、中央の黒い文字「挑む。」と巨大な「IT×Humanity」が少しも埋もれません。

人物写真は矢印形に切り抜かれ、右へ進む動きをつくっています。IT企業の採用サイトは紺や黒で固めたくなるところですが、淡い暖色をにじませることで、人を扱う仕事だという社名の言い分を色でも補っていると思われます。ENTRYの赤いボタンが、この画面の締め色です。

株式会社東組｜現場を線画に描き直して淡く塗る

https://www.azumagumi.co.jp/recruit/

弊社の制作実績ではありません。掲載内容は2026年10月時点のものです。

港湾や護岸の工事は、写真に撮るとどうしても灰色の海と重機の絵になります。和歌山市で海洋土木を手がけるこの会社は、現場を線画のイラストに描き直し、海は水色、山はミント、地面はベージュと、淡い色だけで塗り分けています。さらにそれぞれの場面をパズルのピースの形に切り抜き、「この仕事で 自分をつくる 地域をつくる」の3行と組み合わせています。

一人ひとりの仕事がはまって地域ができる、というコピーの中身を、ピースの形で図にした判断でしょう。淡い色の中で、緑のピースとENTRYボタンだけは濃くしてあり、目がそこへ集まります。

税理士法人北陸合同会計事務所｜ぼかした図形を重ねて奥行きを出す

https://recruit.hcao-tkc.com/

弊社の制作実績ではありません。掲載内容は2026年10月時点のものです。

会計事務所の仕事は、写真にしても机とパソコンしか写りません。小松市のこの税理士法人は、画面の左半分をミント・淡い黄色・黄緑の図形で埋め、わざとぼかしたり影を落としたりして奥行きをつくっています。何を描いているかではなく、色の重なりで「確かな一歩」の手前のふわっとした期待感を見せる作りです。

右側には縦組みで「確かな一歩が、あなたの未来を描きだす」を細い明朝で置き、図形の賑やかさと文字の静けさを左右で分けています。淡い色の中に黄緑だけ彩度の高い色を混ぜ、右上のEntryボタンはオレンジにして、押す場所を色で区別しています。

社会福祉法人敬愛会 もろぐちこども園｜色を写真の外側にだけ置く

https://www.moroguchihoikuen.jp/recruit-lp/

弊社の制作実績ではありません。掲載内容は2026年10月時点のものです。

大阪市鶴見区で認定こども園を4園運営する法人の保育士採用サイトです。写真の背後に、水彩でにじませたような桃色と黄緑の大きな丸が重ねてあります。色は写真の外側にだけ置き、写真そのものには一切かぶせていないので、園児の帽子の赤や青がそのまま見えます。縦組みのコピー「子どもにも、保育士にも、最善の利益を。」は、「子ども」「保育士」をオレンジ、「最善の利益」を緑と、背景の丸と同じ系統の色で言葉を塗り分けています。

右下の「採用エントリー」は濃い朱色の丸で、淡い色の中でここだけが押せる場所だと分かります。その上に重ねた黄色の小さな丸「園見学＆インターンもこちら！」は、応募の手前の入口です。

山﨑建設工業株式会社｜実績写真の色調をミントにそろえる

https://www.yamazaki-kk.jp/recruit/

弊社の制作実績ではありません。掲載内容は2026年10月時点のものです。

校舎、動物園、水族館。スライドで切り替わる写真は、どれもこの会社が建てた建物です。札幌市の土木建築会社で、写真をすべてミントがかった淡い色調に寄せ、ひし形に傾けて白地に浮かべています。建物の写真は普通、施工実績として正面から撮るものですが、ここでは「はじめて恋をしたあの場所」のような手書きの一言を添え、利用者の思い出として見せています。

右下の「造ったのは実は、山﨑。」で初めて社名が出てくる順番です。色を淡くそろえることで、別々の建物の写真が一つの記憶の連なりに見えるよう処理していると思われます。ENTRYだけは濃い青の四角で、迷わせません。

アスザック株式会社｜事業の説明を景色に任せる

https://recruit.asuzacgroup.jp/

弊社の制作実績ではありません。掲載内容は2026年10月時点のものです。

長野県高山村で、ファインセラミックスからアルミ建材、コンクリート製品までを手がけるメーカーです。事業が3つにまたがると、写真で全部を説明するのは難しくなります。そこで背景を淡い水色の空と白い大きな円にして、雪山や鳥や気球をイラストで描き込み、事業の説明を景色に任せています。

左には実在の社員の写真、右には同じポーズのイラストの社員を置き、写真と絵を同じ画面に並べているのが面白いところです。見出しの「あなたの挑戦が豊かな生活を創造する」は濃い青の丸ゴシックで組まれ、淡い背景の中で文字の色だけをしっかり濃くしています。

倉敷医療生活協同組合｜写真の影を淡い色で落とす

https://kura-hcu.jp/recruit/

弊社の制作実績ではありません。掲載内容は2026年10月時点のものです。

白地に近い背景に、桃色の大きな面がうっすら重なっています。倉敷市で病院や介護事業所を運営する医療生協の総合採用サイトです。角を丸めた写真に、それぞれ同じ桃色のぼかした影を落とし、写真が淡い色の上に浮いているように見せています。医療・介護の採用サイトは清潔さを出そうと白と青だけでまとめることが多いのですが、ここでは青を「Join us!」の手書き文字と右上のボタンだけに絞り、面の色は桃色に任せています。

見出しの「地域の医療・介護福祉の未来をともに。」は細い明朝で、あしらいの細さで全体の品を保つ作りです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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