手書き風・イラストの採用サイトデザイン事例10選｜温かみを「手法」でつくる

「手書き風のあしらいを入れて、もう少し温かみのあるサイトにしたい」——採用サイトの打ち合わせで、こうしたご要望はよく挙がります。しかし参考事例を探すと、フォントを変えただけのページから全編イラストまで幅が広く、自社はどこまでやればいいのか判断に迷うところです。

ここで先にお伝えすると、手書き風やイラストは、単にかわいくするための飾りではありません。写真や文章だけでは伝わらないものを補うための表現手法です。「どこに、何のために使うか」を決めるのが先で、取り入れるかどうかはその後に判断します。

手書き風・イラストが採用サイトで効く理由

手書き風の要素が効くのは、画面に「人の手が入った気配」が生まれるからです。整いすぎたデザインは信頼感を出せる一方で、どこか会社の公式文書のような距離を感じさせます。手書きの線やイラストはその距離を縮め、閲覧する求職者の緊張を少しほどいてくれます。まずはこの印象と心理効果の仕組みから見ていきます。

写真だけでは出ない「人の気配」を補える

求職者が採用サイトで確かめたいのは、条件の一覧だけではありません。「自分がそこで働く姿」を想像できるかどうかも重要です。ところが中小企業では、社員数が少ない、撮影に協力してもらいにくいといった事情があります。そのため、写真だけでは柔らかさを出しきれない場面が多くあります。

そこに手書き風の見出しや小さなイラストを差し込むと、同じ写真構成でもページ全体の表情が和らぎます。手描きの線が持つ少しの不揃いさは、「作り込まれた広告」ではなく「人からのメッセージ」として受け取られやすい。これが手書き風の心理効果の核だと考えています。

「アットホーム」を狙うなら、印象別の記事もあわせて読む

「温かみのある会社に見せたい」「アットホームさを伝えたい」という目的が先にあるなら、参考にすべきはまず印象（テイスト）側の整理です。アットホームな採用サイトの考え方と事例は、別の記事で解説しています。

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

本記事が扱うのは、その印象をどういう手法で画面に落とすかという側です。アットホームに限らず、「親しみ」や「素朴さ」を演出する手段として読んでいただければと思います。

手書き風デザインを構成する4つの要素

手書き風と呼ばれるデザインは、分解すると「フォント」「イラスト」「あしらい」「配色」の4要素の組み合わせでできています。すべてを手書きにする必要はありません。むしろ1〜2要素に絞って使うほうが、狙った温かみが出ます。

01. フォント｜手書き風文字は「感じさせる」箇所に

本文まで手書き風フォントにすると、読みにくさが先に立ちます。使いどころは、キャッチコピー、セクション見出しの一部、写真に添えるひとことなど、面積の小さい箇所に限定するのが基本です。本文は読みやすい書体を保ち、その対比によって手書きの柔らかさを際立たせます。

02. イラスト｜写真で見せられないものを「翻訳」する

イラストの本領は、写真にできない説明を担えることです。仕事の流れや1日のスケジュール、社内の関係図、数字だけでは硬くなるデータの図解などに使えます。また、撮影が難しい現場や、顔出しに抵抗のある社員が多い職場では、タッチをそろえた似顔絵イラストが写真の代役になります。

03. あしらい｜線・囲み・吹き出しで余白に表情をつける

あしらいとは、手描きの下線や囲み、矢印、吹き出し、テープ風の飾りといった細部の装飾のことです。面積は小さいわりに、ページの印象を決める効果は大きいです。ポイントは、線の太さやかすれ具合といったタッチをサイト全体で統一することです。ページごとに調子がバラつくと、途端に安っぽく見えてしまいます。

04. 配色｜彩度を抑えて「紙もの」の色に寄せる

手書き風と相性がいいのは、クリーム色や生成りなど紙を思わせる背景に、彩度を抑えた色を少数だけ載せたカラーパレットです。原色を多用すると、手書きの柔らかさよりチラシ感が勝ってしまいます。なかでもベージュやブラウン系の落ち着いた配色は、手書き要素との組み合わせの定番です。温かみの演出を配色側から支えてくれます。

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

手書き風・イラストと業種との相性

手書き風は、どの業種にも合う万能の手法ではありません。向いているのは、人柄や親しみやすさが応募の決め手になる業種です。逆に、堅実さや技術力を前面に出したい業種では、使う範囲を絞るか、別のテイストを選ぶほうが確実です。

相性がいい業種は、保育園や幼稚園、介護・福祉、クリニック、飲食・食品、美容室、地域密着のサービス業など、「人と接する仕事」の現場です。未経験者や若手に「自分にもなじめそう」と感じてもらう入口としても機能します。

一方、金融や士業、製造技術系など、正確さや信頼で選ばれる業種で全面的に使うと、軽く見えてしまう恐れがあります。社員紹介ページだけに絞って部分的に使うか、情報整理を軸にしたテイストも検討してみてください。

参考記事：『ミニマル・シンプルな採用サイトデザイン事例10選｜情報の絞り方』

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

手書き風・イラストの採用サイトデザイン事例

ここからは、手書き風・イラストを取り入れた採用サイトを10件紹介します。前半の4件は弊社の制作実績、後半の6件は他社のサイトです。コピーだけを手書きにする、余白に小さく描き込む、画面全体をイラストにするなど、使っている範囲は1件ずつ違います。共通するのは、どこに手書きを使い、どこを写真や整ったレイアウトのまま残すかの線引きが明確なことです。

株式会社パールイデア 様｜コピーだけを手書きにする

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

紙のような質感のベージュを地に敷き、社員の写真を大小のカードにして散らしています。店舗やオフィスの空間デザインから、什器の企画製造までを手がける会社の採用サイトです。手書きにしたのは、右側の余白に置いた「一緒につくるから、一緒に強くなる。」の2行だけです。ナビゲーションや本文は整った書体のまま残し、手書きはコピー1か所に絞っています。

手書きを増やすと、ものづくりの会社としての精度が伝わりにくくなるためです。紙の質感の地と、写真をカードとして貼る構成があるので、手書きの文字が画面から浮きません。コピーを読む前に、手で何かをつくる会社だという空気が先に伝わるように設計しています。

株式会社夢ふぉと 様｜学校行事の小物を線画で囲む

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

学校の卒業アルバムや行事写真を手がける会社のサイトです。左に先生と制服の子どもたち、右に開いたアルバムの写真を置き、中央の白い四角に「思い出づくりの世界ブランドに」を赤で組んでいます。その四角のまわりを、赤い線画で描いたアルバム、ランドセル、カメラ、名札、スモック、リコーダー、グローブ、飛行機が囲みます。描き込んだのは、すべて子どもの学校生活に出てくる小物です。

写真だけでは「写真の会社」としか伝わらないため、線画の小物で「行事と思い出をつくる仕事」へと意味を広げています。イラストを細い線と1色に抑えているので、写真の子どもたちの表情を邪魔しません。右下のENTRYボタンも、同じ赤で縁取っています。

瑞鳳会グループ 様｜筆記体の英字を写真に流す

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

岐阜市で医療・介護・福祉のサービスを展開するグループの採用サイトです。ピンクの制服の職員2人が、風船や数字のカードを手に笑う写真を画面いっぱいに置いています。その上に、筆記体の英字「Leaning In Through Connection」を青と金の細い線で大きく流しました。手書きの英字を写真の上に重ねることで、リハビリや活動の場面に人の手の温度を足しています。

日本語のコピー「つながりを力に、地域に寄り添う。」と、その下の3行の説明はゴシックで組み、読む情報は整った書体に任せています。英字は読ませるためではなく、写真と文字をひとつながりに見せる線として使っています。職種や施設をまたいだ連携を、線のつながりで表した構成です。

東栄株式会社 様｜商談の写真に筆記体を1本通す

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

1947年創業の、札幌市の卸売会社の採用サイトです。打ち合わせの席でノートパソコンを前に笑う男性社員を、手前の人の肩越しに撮った写真を全面に敷いています。その上に、緑から赤みへ色が移る筆記体の英字「Creating Enriched Lives」を重ねました。卸売の仕事は、写真にすると会議や商談の場面が中心になり、硬い印象になりがちです。

そこに手書きの線を1本通すことで、オフィスの写真に暮らしの柔らかさを加えています。日本語のコピー「温もりある豊かな暮らしを、まちを、ともに創る。」は白のゴシックで、英字と同じ位置に重ねています。商社の仕事が、最終的には人の暮らしにつながっていることを伝えるための組み合わせです。

Matsue Group（株式会社松栄寿司）｜手書きのコピーを余白に書き込む

https://matsue-group.co.jp/recruit/

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

長野市で寿司店と仕出しを営む会社の採用サイトです。着物風の制服を着た女性スタッフが、手前の客に向かって笑いかける写真が画面の上半分を占めます。写真は右下で斜めに断ち切られ、その白い余白に「私達と一緒に未来を描こう！」が手書きの文字で書かれています。活字ではなく手書きにしたことで、求人の決まり文句が、スタッフ本人の言葉のように読めます。

写真の角からは細い線が2本ずつ交差してはみ出し、ペンで描き足したような跡になっています。コピーの上には筆記体で「Matsue Group Recruitment」と小さく添え、手書きの調子を2段でそろえています。ナビは明朝の細い文字で並べ、手書きの部分だけが目立つように控えています。

株式会社日東物流｜配送の仕事を水彩で描く

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

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

ファーストビューには写真が1枚もありません。四街道市でスーパーや飲食店への食品配送を手がける会社で、画面はすべて水彩で描いた絵の格子でできています。大きな絵には、トラックが走り、人が買い物をする街が描かれています。その横の小さな枠には、冷蔵トラックと2人のドライバー、荷物を手渡す場面、自転車の人が並びます。配送の仕事を「荷台」ではなく「届いた先の街」まで含めて描くことで、運ぶ仕事が街の暮らしにつながっていることを見せています。

コピーの「プライドを胸に、運ぶ。」は青い面に白で置き、絵の柔らかさの中で文字を際立たせています。右下には男性の似顔絵と「ご質問、お問い合わせはこちらから！」があり、問い合わせの入口まで手描きでそろえています。

株式会社伊藤農園｜手描きの下線とみかんを散らす

https://recruit.ito-noen.co.jp/

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

1897年創業の、有田市でみかんの栽培からジュースの製造までを手がける会社の採用サイトです。和紙のような質感の生成りの地に、衛生服の社員、ジュースと柑橘、瓶を持つ女性社員の写真を大きさを変えて配置しています。明朝のコピー「ぴゅあに、まっすぐ。」「「おいしい」ものづくりを。」には、それぞれの下に手で引いたような線を添えました。

さらに余白に、小さなみかんの絵と黄色い丸をいくつも散らしています。散らした粒の色をみかんの色に限っているので、どれだけ置いても画面が散らかりません。写真は工場や瓶詰めの場面が多く、硬くなりがちな食品製造の印象を、手描きの小さな要素がやわらげています。

丸千・千代田水産株式会社｜市場と街を1枚のイラストにする

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

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

豊洲市場で水産物の仲卸を営む会社の採用サイトです。ファーストビューは、斜め上から見下ろしたアイソメトリック（立体図）のイラスト1枚でできています。緑の屋根の市場の建物、車が渡る吊り橋、タコが顔を出す海を進む船、家や木の並ぶ街、遠くに東京タワーまで描かれています。市場の中だけでなく、魚が運ばれていく先の街までを1枚に収めて、仲卸の仕事の広がりを示しています。

仲卸の現場は早朝で、写真にすると発泡スチロールの箱と人の背中ばかりになりがちです。イラストにしたことで、市場と食卓のつながりを説明なしに見せられます。コピーの「豊洲市場から日本の「食文化」を支える」は、絵の下の水色の面に濃い青で置いています。

越前信用金庫｜切り抜き写真をシールのように貼る

https://www.shinkin.co.jp/echishin/recruit/

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

珊瑚色の地に、太い白い縁取りで切り抜いた写真がシールのように散らばっています。大野市に本店を置き、福井県内に11店舗を持つ信用金庫の採用サイトです。中央には腕を組む男性職員と、ファイルを抱えた女性職員の2人がいます。周りには制服の職員、跳び上がる職員に加え、恐竜の模型、城、そばの皿が貼られています。金融機関の採用サイトに、福井の恐竜や地元の城を同じ大きさで並べ、職員と地元の名物を同じ地図の上に置いています。

手で切って貼ったような縁取りが、堅い業種の印象を和らげています。ヘッダーは白い帯にまとめ、ナビとENTRYボタンだけは整った書体で読みやすく残しています。

株式会社廣野鐵工所｜版ずれのある看板の絵で道を示す

https://hirono-iwc.co.jp/recruit/

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

赤い地に細かな粒子が散り、古い印刷物のような手触りがあります。1945年創業の、岸和田市で農業機械や産業機械の部品を加工する会社の採用サイトです。中央には白い道しるべの看板が3枚描かれ、どれも緑と桃色の影が少しずれて重なっています。版がずれた印刷のような描き方にしたことで、デジタルの画面に手作業の跡を残しています。

その上に黒の太い英字「ENJOY YOUR TRIAL」を大きく置き、横に小さく「挑戦を楽しむ」と下線付きで添えています。道しるべの看板は、進む方向を自分で選ぶというコピーの意味を絵にしたものでしょう。下の「楽しむ人にやさしい会社。」は黒地に白で、絵の中でも読める強さを確保しています。

10件を自社に当てはめるときは、次の3点に注目すると取り入れ方が見えてきます。

1. 全面か、部分か：サイト全体を手書きの世界観にしているのか、要所のあしらいだけか
2. タッチと業種の釣り合い：イラストのタッチ（ゆるさ・緻密さ）が、その業種に求められる信頼感と釣り合っているか
3. 本文の可読性：装飾に目が行っても、仕事内容や条件の文章はまっすぐ読めるか

手書き風デザインで失敗しないための注意点

取り入れ方を誤ると、手書き風は「温かい」ではなく「素人っぽい」に転びます。制作の現場でよく見るつまずきは、次の3つです。

• 装飾が情報を邪魔している：仕事内容や募集要項など「読ませる情報」は装飾を外し、読みやすさを最優先にします。
• 素材の寄せ集めでタッチが揃っていない：無料素材を継ぎ足すと、線の太さも世界観もバラバラになりがちです。使う素材のタッチを最初に決め、後から足すバナーもそのルールに従います。
• スマホ表示で潰れる：細い手書き文字や描き込みの多いイラストは、スマートフォンの画面幅では読めないことがあります。閲覧の主流であるスマートフォンで、縮小時の見え方まで確認してください。

手書き風・イラストのデザインについてよくある質問

Q1. 手書き風のデザインは自社でも作れますか

部分的には可能です。手書き風フォントやあしらい素材は、市販のものや配布されているものでも入手できます。ただ、タッチの統一と読みやすさの両立は難所で、崩れると逆効果になりやすいのが正直なところです。全体の設計は制作会社に任せ、運用で足す部分のルールを共有してもらう形をおすすめします。

Q2. 手書き風にすると応募は増えますか

手法だけで応募が増えると断言はできません。応募を決めるのは、仕事内容や条件といった情報の中身と、見せ方の総合点です。手書き風やイラストは、その中の「第一印象の入口」を整える手段だと考えてください。

Q3. イラストと写真はどちらを優先すべきですか

基本は写真が主役で、イラストは補完です。実在の職場と人が見えることが、求職者の安心材料になるからです。撮影が難しい箇所や、写真では硬くなる説明をイラストで翻訳する、という役割分担で考えてみてください。

「手書き風にしたい」の一歩先は、社風からの逆算

ここまで手書き風デザインの手法を解説してきました。実際の制作で結果を分けるのは、手法選びの手前にある「この会社の何を伝えるためにこの表現なのか」という逆算です。テイストを先に決めて素材を当てはめるのではなく、伝えたいものから表現を選ぶ。この順番だけは外さないでください。

判断に迷ったら、手元の求人票を1枚出してみてください。そこに書いてある仕事内容を読んで、写真だけでは伝わらないと感じた部分を探してみてください。工程の流れや人の関わり方、1日の組み立てなどが、手書きやイラストで補う候補になります。全面に敷くかどうかは、その候補を数えてから決めれば十分です。

弊社は、地方の中小企業の採用サイトを作っています。

「手書き風が自社に合うのか判断がつかない」という段階でもご相談いただけます。御社の業種と採りたい人物像を伺ったうえで、テイストの方向性からご一緒に整理します。

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