【事例11選】アットホームな採用サイトのデザイン｜「らしさ」はどう伝える？

「うちの強みはアットホームな職場なんです」。地方の企業さまとお話ししていると、ほぼ必ず出てくる言葉です。

ただ、その言葉をそのまま採用サイトに載せても、ほとんど伝わりません。どの会社も言っている言葉で、しかも中身が書かれていない。「休みが取りづらいのを言い換えているのでは」と身構える材料にすらなってしまいます。

つまりアットホームさは、言葉で宣言するものではなく、画面から勝手に伝わってしまうものというわけです。手段は文章ではなく、写真・配色・コンテンツの設計のほうにあります。

「アットホーム」は、そのままでは求職者に届かない

アットホームという言葉が空回りするのは、その会社にしか書けない具体が一つも含まれていないからです。同じ文字列を100社が使っている以上、求職者は言葉ではなく、写真に写っている表情や、社員紹介の中身のほうを見て判断します。逆にいえば、具体さえ画面に置ければ、「アットホーム」と一度も書かずに伝わります。

言葉ではなく「場面」で見せる

事例で印象に残るサイトは、例外なく「場面」が写っています。利用者と談笑しているところ、現場で相談し合っているところ、休憩中の何気ない表情。職場の空気は、決めポーズの集合写真より、日常の1カットのほうが伝わります。撮影の段取りを組むときは、かしこまったカットと日常のカットを両方押さえておくのがおすすめです。

「誰と働くか」まで書く

アットホームさは人で決まるので、社員紹介の粒度が、そのまま説得力になります。名前と部署だけの一覧では何も伝わりませんが、その人が入社した理由や、失敗したときに誰が助けてくれたかまで書かれていれば、読み手は自分がそこにいる姿を想像できます。求職者が最終的に知りたいのは、自分がそこで働く姿が想像できるかどうかです。

和やか・親しみやすいデザインを作る3つの要素

テイストは感覚に見えて、効いている要素は3つに絞り込めます。事例を見比べる前に、この3つを頭に入れておくと、自社に持ち帰れるものが増えます。

1. 配色｜彩度を落とした暖色と、柔らかいグリーン

事例に多いのは、ベージュ・オレンジといった暖色と、ミントグリーンのような柔らかい緑です。彩度を上げすぎない暖色と柔らかい緑を、白の余白と組み合わせているのが共通点です。原色に近い色を広く使うと、和やかさより「にぎやかさ」が前に出てしまいます。

2. フォントと角丸｜輪郭の硬さをゆるめる

同じ写真・同じ配色でも、細く直線的な書体を使うと途端に硬くなります。丸みのある書体、角丸のボタンやカード、手書き風のあしらい。輪郭の硬さをゆるめるだけで、受け取る温度は大きく変わります。

3. イラストの使いどころ

写真が揃わない業種では、イラストが有効な選択肢になります。事例のマルキョウ様のように、サイト全体をイラストベースで設計する方法もあります。ただしイラストだけで組むと、実在感が薄れて「きれいだけれど中身が見えないサイト」になりがちです。イラストは雰囲気づくり、写真は実在の証明、と役割を分けて考えてください。

和やか・アットホームな採用サイトデザイン事例11選

ここからは、和やかで親しみやすいテイストの採用サイトを紹介していきます。医療・福祉・介護の事例が多くなっていますが、これは求職者が「どんな人たちと働くか」を最重視する業種だからです。「（制作：地方採用ワークス）」と書かれたサイトは弊社の制作実績です。

東栄株式会社 様（生活用品・住宅設備機器の卸売）

https://recruit.h-toei.com/（制作：地方採用ワークス）

札幌市で生活用品と住宅設備機器を扱う卸商社の採用サイトです。ファーストビューを縦に2分割して、左に商談中の若手、右に段ボールを抱えたベテランを並べました。1枚の主役写真を置かず、事務所の仕事と倉庫の仕事を同じ幅で見せています。卸売は「何をしている会社か」が求職者に伝わりにくいので、机に向かう時間と体を動かす時間の両方があることを、先に画面で示しました。「温もりある豊かな暮らしを、まちを、ともに創る。」の背面には筆記体の欧文を淡いミントで薄く敷いています。文字を飾らず、背面の色数だけで柔らかさを足しました。

シティ・タワー診療所 様（内科・小児科・在宅医療）

https://www.citytower-cl.com/（制作：地方採用ワークス）

聴診器を当てている看護師が、膝をついて子どもの目線まで下りています。保護者もその横に座り、3人の頭の高さがほぼそろっています。大人が立ったまま診る構図を避け、全員の目線を同じ高さにそろえて撮りました。医療の画面で親しみを出そうとすると、笑顔の枚数を増やす方向に行きがちですが、ここでは姿勢のほうを変えています。写真の色は白と淡い橙にほぼ限られ、制服の紺だけが濃く残ります。中央上の縦組み「自分らしく生きる、おせっかい」は黒の細い書体で、その下に「おせっかい」を4回繰り返す説明文を小さく敷きました。1語を4回言い直すことで、抽象的なコピーの意味が同じ画面の中で確定します。

揖斐川町地域医療振興協会 様（医療・介護・地域包括ケア）

https://ibigawa-jadecom.jp/（制作：地方採用ワークス）

往診カバンを提げた2人が、坂道を並んで歩いている場面を後ろから撮っています。診察室でも施設の玄関でもなく、移動している途中です。働いている場所ではなく、そこへ向かう道のほうを写しました。背景には民家の塀と山が入り、通う範囲の広さが分かります。写真は角を大きく丸めた不定形に切り抜き、四角い枠の硬さを外しました。左半分には町の地図を黄緑のイラストで置き、5つの施設を家のアイコンで落としています。地図の平面的な絵と、写真の奥行きが対になる配置です。右上の「採用情報」だけを橙のボタンにして、患者向けの問い合わせと並べながら色で分けました。上部には葉のイラストを散らし、白い地に季節の要素を持ち込んでいます。

和光会グループ 様（医療・福祉サービス・地域包括ケアシステム構築）

https://recruit.wakokai.or.jp/（制作：地方採用ワークス）

医療法人が親しみを出そうとすると、たいてい写真の枚数か笑顔の数を増やすことになります。この画面は写真を1枚に絞り、代わりに文章の主語を変えました。法人からの説明ではなく、「ここで働きたい！」と思った職員本人の言葉として3行の吹き出しを組んでいます。立っている場所も居室ではなく、鉢植えの並ぶウッドデッキです。画面の下端には職員5人の顔を丸く切り抜いて並べ、押すと別のインタビューへ切り替わります。職種の広い法人なので、1画面目から人を選んで入れる形にしました。右端には新卒採用とイベント情報の入口を縦の帯で常時出し、読み進めても応募先を見失わないようにしています。

社会福祉法人岐阜県福祉事業団 様（福祉・介護・採用）

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

画面の中央を、手書きの「Challenge!」が斜めに横切っています。線は緑一色で、太さのむらを直さないまま置きました。印刷された書体だけで組んだ画面に、手の動きを1箇所だけ入れています。職員2人は左右に分けて配置し、その間に空いた余白へこの文字を通す組み方です。右側の職員には「スキルアップできる環境が魅力。」という本人の言葉と、職種・所属・入職年を添えました。画面下の新着情報は薄い緑の帯で、採用試験の日程がファーストビューのすぐ下で読めます。線1本で画面の温度は変えられます。2人を1枚に収めず別々のカットで並べているのも、職種の違いを構図のほうで示すためです。

社会福祉法人慈楽福祉会（介護・福祉・採用）

https://jiraku.or.jp/

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

草の生い茂る土手で車いすを押す職員と利用者を、緑に埋もれるくらいの距離から撮っています。顔の表情が読み取れないほど引いた構図です。近づいて笑顔を撮るのではなく、離れて季節の分かる風景ごと収めたのだと思われます。縦組みのコピー「心が通じ合い、人と人とが手を取り合う未来へ。」は右側に細く組まれ、写真の緑に沈まない位置に来ています。右半分は白地にして、居宅・施設・相談・採用の4つの入口をアイコン付きで並べました。写真と情報の面を左右できっぱり分ける作りなので、風景に寄せても用件が読み取れます。上部のナビゲーションは白い帯で固定し、写真の緑が濃くても項目が読めます。

社会福祉法人愛和会（高齢者・障がい者・児童サービス）

https://swc-aiwakai.jp/

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

縦長の写真を4枚横に並べ、それぞれに「高齢サービス」「障がい者サービス」「児童サービス」と縦組みのラベルを入れています。人物はどれも横顔か手元で、正面から撮ったカットがありません。代表写真を1枚に決めず、事業の数だけ写真を立てる構成を取ったのでしょう。左から2番目の余白には「地域とわたしたちを世界と未来につなぐ」を縦組みで置き、背後に日本地図をオレンジの薄い面で敷いています。対象の異なる3事業を持つ法人で、求職者が最初に自分の行き先を選べるようにした並びだと読めます。写真の縦横比をそろえたうえで高さだけ少しずらし、4枚が単調に並ばないようにしています。

リニエ（介護・福祉・訪問看護）

https://recruitment.linie-group.jp/

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

施設も、車も、居宅も写っていません。あるのは「Be Professional」の白い大文字と、その前後に切り抜きで置かれた職員と利用者だけです。背景を全部落として、動いている人の姿だけを文字に絡めたのでしょう。車いすを押す人、走る子ども、腕を大きく伸ばす看護師と、6人全員が動作の途中で止まっています。地は明度を下げた深緑一色で、黄色の帯が1本だけ横切ります。色数を絞ったまま動きを足しているので、明るくしても軽くは見えません。右下の就職説明会の告知は白いカードに収め、募集の情報を装飾から切り離しています。

株式会社マルキョウ（食品スーパーマーケット）

https://www.marukyo-web.co.jp/newgraduates2024/

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

写真を1枚も使わず、オレンジの線画イラストだけで画面を作っています。丸い丘の上に店舗が建ち、そこへ続く階段を人が上っていく絵です。売場の写真を出す代わりに、入社してからの道のりを1枚の地形に描き換えたのだと思われます。丘の周囲には雲が浮かび、その上でレジを打つ人、品出しをする人、子どもと話す人が小さく描かれています。左側の「マルキョウで働くとは？」は、社名だけをオレンジ、残りを黒にした2行です。左下の「エントリーする」だけがオレンジの塗りで、線画ばかりの画面で唯一の面になっています。下部の点の並びがスライドの枚数を示しており、同じ調子の絵が続く前提で組まれています。

any株式会社（ITサービス・事業開発）

https://anyinc.jp/recruit

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

ノートパソコンを覗き込む2人を、机の向かい側から撮っています。1人は立って身を乗り出し、もう1人は座ったまま画面を指しています。打ち合わせ用の会議室ではなく、席で起きている会話をそのまま撮ったのだと思われます。写真は角を不定形に丸めて切り抜き、背景の生成りの地に馴染ませています。左下には「さあ、ここから」から始まる手書きの一文をオレンジで置き、印刷された書体の中で1箇所だけ線の質を変えました。文字が写真の下端に半分かかる位置にあり、画面を切らずに続きがあると分かります。左端の大きなオレンジの円は、写真の外にある唯一の色面として画面を留めています。右上のEntryも同じオレンジで、色の役割を2箇所に絞っています。

医療法人社団洸緑会（歯科医院）

https://mint-clinic-saiyo.com/

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

富山県滑川市の歯科法人の採用サイトです。ファーストビューの3枚がすべて屋外で、診療室の中が1枚も出てきません。医院の前で8人が手を振るカット、建物の外観、家族連れも混じった集合写真の順に切り替わります。設備でも技術でもなく、まず誰といる場所なのかを先に見せる並びです。スクロールした先のスタッフ紹介も顔写真ではなく似顔絵で、「プライバシー保護の観点により」と理由まで書いてある。顔を出せないなら人を載せない、という道もあるなかで、絵に置き換えてでも1人ずつ出すほうを取っています。

※ご紹介しているサイトの中で、「（制作：地方採用ワークス）」と書かれたサイトは弊社の制作実績です。その他のサイトは弊社の制作実績ではございませんが、本記事の切り口に沿う事例としてご紹介させていただきました。制作をされた制作会社様で、掲載の取り消しをご希望の場合は速やかに対処させていただきますので、弊社までご連絡くださいませ。

テイストを絞らず、業種ごとに幅広く採用サイトのデザインを見比べたい場合は、こちらの記事もあわせてご覧ください。

あわせて読みたい

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

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

アットホームな採用サイトについて、よくある質問

Q1. 「アットホームな職場」と書くのは避けるべきですか？

書いてはいけないわけではありませんが、その言葉だけで終わらせないでください。「アットホーム」の後ろに、そう言える理由（誰が、どんな場面で、どう支え合っているか）が具体的に書かれていれば、警戒されることはありません。問題なのは言葉そのものではなく、中身がないことです。

Q2. 社員数が少なくてもアットホームさは伝わりますか？

むしろ伝わりやすいと思います。人数が少ないほど一人ひとりを深く紹介でき、「誰と働くか」が具体的に見えるからです。全員分の紹介を載せられるのは、小規模の会社にしかできない見せ方です。

Q3. 医療・福祉以外の業種でも使えますか？

使えます。事例のマルキョウ様（スーパーマーケット）や戸田建設様（建設業）のように、業種を問わず成立します。ポイントは業種ではなく、求職者が「人」を判断材料にしているかどうかです。

Q4. 写真を撮り直す予算がない場合はどうしますか？

イラストや配色で雰囲気を作る方法はありますが、実在感は写真でしか出せません。全ページ分をそろえるのが難しければ、トップの1枚と社員紹介だけでもプロに撮影を依頼するコスト配分を検討してください。優先順位をつければ、限られた予算でも印象は変えられます。

「アットホーム」の中身を、誰が言語化するか

ここまでデザインの話をしてきましたが、和やかなテイストのサイトを作れば伝わる、という単純な話ではありません。アットホームさは、自社の中では当たり前すぎて言語化されていないことがほとんどです。写真も社員紹介も、言語化ができて初めて素材の撮り方が決まります。

弊社は全国の地方企業に1,420社以上のウェブサイト制作・マーケティング支援を行ってきました。採用については、サイトを作って終わりではなく、求人媒体への露出から選考までを地方企業向けに一貫してご支援しています。製造・建設・運送・医療・飲食など、地方で人が採りにくいと言われる業種の現場を見てきました。

「自社の良さをどう言葉にすればいいか分からない」という段階でも大丈夫です。社員の方に話を聞くところから始めて、社風を言葉と写真に起こす流れをご提案します。

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