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

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

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

この記事では、効く理由(印象・心理効果)、構成する4要素、業種との相性、制作時の注意点までを、制作現場の目線で順に整理していきます。

この記事でわかること

  • 手書き風・イラストが採用サイトで効く理由と心理効果
  • 手書き風デザインを構成する4要素(フォント・イラスト・あしらい・配色)
  • 手書き風が向く業種・注意したい業種(業種との相性)
  • 事例を見るときの観点と、作るときの注意点

目次

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

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

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

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

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

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

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

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

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

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

01. フォント|手書き風文字は「読ませる」より「感じさせる」箇所に

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

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

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

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

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

04. 配色・カラーパレット|彩度を抑えて「紙もの」の色に寄せる

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

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

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

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

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

手書き風・イラスト活用のパターン|どこに使い、どこを残すか

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

パターン1|見出しとあしらいだけ手書き、本文と写真は整ったまま

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

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

顔出しに抵抗のある社員が多い職場で、タッチをそろえた似顔絵を写真の代役にする使い方です。狙いは「人の気配」の確保。実在感が薄れないよう、名前・経歴・本人の言葉は具体的に添えるのが条件になります。

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

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

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

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

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

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

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

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

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

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

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

よくある質問

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

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

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

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

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

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

「手書き風にしたい」の一歩先——伝えたい社風から逆算する

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

あわせて、どれだけ表情のあるサイトを作っても、そもそも求職者に見つけてもらえなければ届きません。採用サイトという受け皿と、露出を増やす活動(母集団形成)は両輪です。

弊社では、採用サイト制作と採用活動の代行の両輪で、地方の中小企業の採用を支援しています。「手書き風が自社に合うのか判断がつかない」という段階でも大丈夫です。業種と採りたい人物像をうかがったうえで、テイストの方向性からご一緒に整理します。

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

この記事を書いた人
手書き風・イラストの採用サイトデザイン|温かみを「手法」でつくる | テイストから選ぶ
たまちゃん

マーケティングデザイン部 マネージャー/Webマーケター 大学在学中に、複数Webメディアを立ち上げ、アフィリエイターとして法人化。設立から2年後、社会貢献などの「働きがい」を求め、リーピーにジョイン。 現在は、現場で培ったWebサイトの運用経験を元に、お客様サイトの運用代行や自社コーポレートサイトの運用など、幅広いマーケティング領域を担当。

この記事をシェアする

関連記事