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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

手書き風・イラストをどこに使い、何を残すか

手書き要素の使い方を制作サイドの視点で分解すると、おおむね次の5パターンに分かれます。共通するのは、どこに手書きを使い、どこを写真や整ったレイアウトのまま残すかの線引きが明確なことです。

パターン1｜見出しとあしらいだけ手書きにする

いちばん汎用性の高い使い方です。キャッチコピーと見出しまわりにだけ手書きの線を入れ、本文や募集要項、写真は端正に保ちます。狙いは第一印象づくりで、信頼感を落とさずに温かみだけを足せます。迷ったらここから始めるのがおすすめです。

パターン2｜似顔絵イラストでスタッフを紹介する

狙いは「人の気配」を確保することです。実在感が薄れないよう、名前や経歴、本人の言葉は具体的に添えるのが条件になります。

パターン3｜仕事の流れ・1日をイラストで図解する

入社後の成長ステップなど、文章では硬くなる情報をイラストに翻訳する使い方です。装飾ではなく説明の道具としてイラストを使うため、堅めの業種でも取り入れやすいパターンです。

パターン4｜全編イラストで世界観を作り込む

サイト全体を統一されたイラストの世界観でまとめる使い方です。開園前の保育園や新規事業のように、見せられる写真がまだ無い段階で特に力を発揮します。ただし実在感は写真に劣るため、運用が始まったら実際の職場写真を足していく前提で設計してください。

パターン5｜余白に小さな描き込みを散らす

読み物ページの余白に、小さな矢印や吹き出しをところどころ置く使い方です。狙いは長いページの息継ぎで、読み手の緊張をほどきながら最後まで読ませます。面積は最小で、効果はタッチの統一次第という職人的なパターンです。

実在のサイトを見るときは、次の3点に注目すると自社への取り入れ方が見えてきます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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