ホームページに、イラストを使うかどうか

1. 「写真が無いので、イラストで何とかなりませんか」

中小企業の経営者の方とお話していて、こんな言葉をよく聞きます。

「うちは見せられる写真がほとんど無いんです。スタッフも顔を出したがらないですし。イラストを入れたら、それなりに見えるようになりますか」

答えは、使い方次第です。イラストは、写真の代わりとして置くと弱く、写真では見せにくいものに使うと強い道具です。

写真が無いから、空いた場所をイラストで埋める。こう考えると、素材集から何となく選んだ絵がサイトのあちこちに並びます。どこかで見たような絵が、ばらばらのタッチで並ぶ。これが、いちばん素人っぽく見える形です。

一方で、申し込みの流れ、駐車場の場所、やってはいけないこと。こうした説明に絵を添えると、文章だけより早く伝わります。同じイラストでも、置く場所で役に立つかどうかが決まります。

この記事で書くこと

• イラストが役に立つ3つの場面
• 素材集のイラストで、起きやすい2つのこと
• 使う場面と、使わない場面
• その絵は、図や表で足りないか
• タッチを1種類にそろえる方法
• 利用条件の確かめ方と、描いてもらうときに伝えること

似た話を扱った記事がいくつかあるので、役割を分けておきます。素材サイトの写真は 素材サイトの写真を、ホームページにどこまで使うか、AIで作った画像は AIで作った画像を、ホームページに使ってよいか に書きました。この記事では、人や物を描いた「絵」に絞って書きます。

2. イラストが役に立つ3つの場面

イラストを使う理由は、だいたい3つに収まります。どれも、写真では見せにくいものを見せる場面です。

① 写真が、まだ無い

開業したばかりで、実績の写真が無い。形のないサービスなので、そもそも写すものが無い。相談、保険、手続きの代行、ソフトの導入の手伝いなどがそうです。

この場合、イラストは「何をしてくれる会社か」を絵で示す役目を持てます。たとえば相談の仕事なら、机を挟んで話している場面の絵を1枚置くと、文章を読む前に場面が浮かびます。

ただし、写真が撮れるものは、撮れるまでのつなぎと考えてください。施工例や商品の写真が撮れたら、そちらに差し替えます。写真が無いときのサイトの組み立て方そのものは 写真が1枚も無い会社の、ホームページの作り方 にまとめてあります。

② 人の顔を、出したくない

スタッフが顔を出したがらない。お客様のプライバシーに関わる仕事で、現場を写せない。介護や医療、相談の仕事では、よくあることです。

人の顔が出ないと、サイトが冷たく見えるのではないかと心配される方がいます。ここでイラストが使えます。顔を写さずに、人が関わる仕事だと伝えられるからです。スタッフ紹介のページで、写真の代わりに似顔絵を置くという選び方もあります。

似顔絵を使う場合は、本人の了解を取ってください。写真でなくても、本人だと分かる絵は、本人に関わるものとして扱うほうが安全です。

③ 仕組みを、説明したい

壁の中の配管、屋根の下の構造、書類が手続きの中で進む順番。実物はあっても、写真では見えないものがあります。

写真に撮っても、何が写っているのか分からない。こういうものは、絵で描いたほうが伝わります。見せたいところだけを描けて、余計なものを省けるからです。

写真の代わりには、ならない

3つに共通しているのは、写真では見せにくいものを見せていることです。逆に、写真で見せられるものを絵で描いても、写真にはかないません。見る人は「実物はどうなのか」を知りたくて来ているからです。

3. 素材集のイラストで、起きやすい2つのこと

イラストを使うとき、多くの会社は素材集から選びます。手軽で、費用もかからないことが多いからです。ただ、素材集の絵には、起きやすいことが2つあります。

① どこかで見た絵になる

よく使われている素材集の絵は、多くの会社や団体が使っています。役所のお知らせ、チラシ、同業のサイト。見る人は、同じ絵をすでにどこかで見ています。

見たことのある絵が出てくると、読む人は「よくある会社のサイト」と受け取ります。悪い印象ではありませんが、貴社らしさは伝わりません。同業が同じ絵を使っていれば、比べられたときに見分けがつかなくなります。

人物の絵は、とくに重なりやすいところです。笑顔で手を挙げる人、パソコンの前で首をかしげる人、握手する2人。こうした絵は便利なぶん、使われている回数も多いのです。

② タッチがばらばらになる

もう1つは、こちらのほうが目立ちます。違う作者の絵が、1つのサイトの中に混ざることです。

トップには線の細い水彩風の絵、サービスのページには太い線のにぎやかな絵、よくある質問には影の付いた立体的な絵。1枚ずつ見れば、どれも悪くありません。ところが並ぶと、別々の会社のチラシを貼り合わせたように見えます。

読む人は、作者が違うことには気づかなくても、何となくまとまりがないことには気づきます。それが「素人っぽい」という印象になります。写真でも同じことは起きますが、絵は写真よりも描いた人の癖が強く出るので、差がはっきり見えてしまいます。

4. 使う場面、使わない場面

では、どこに使えばいいのか。判断の軸は、2章で書いた「写真では見せにくいものか」です。置く場所ごとに分けると、次のようになります。

使う場面：流れの説明

申し込みから完了までの流れ。工事の段取り。初めてのお客様が「このあと何が起きるのか」を知りたい場面です。

各段に小さな絵を1つずつ添えると、文章を飛ばし読みする人にも、段の区切りが伝わります。電話の絵、家の絵、書類の絵。絵は段の目印で、説明は文章が受け持つと考えてください。絵だけで流れを伝えようとすると、何をする段なのかが読み取れなくなります。

使う場面：地図

最寄り駅からの道順、駐車場の入り方、建物の入口。地図のサービスを埋め込むだけでは分かりにくい場所に、略図を描いて添えます。

略図は、目印と曲がる方向だけを描けば足ります。周りの建物を全部描き込むと、かえって目印が埋もれます。歩く順に写真で見せる方法は 「アクセス」のページで、来る人を迷わせない に書きました。写真と略図の両方があると、初めての人も迷いにくくなります。

使う場面：注意書き

来店のときの持ち物、作業の前にしておいてほしいこと、やってはいけないこと。注意書きは、文字だけだと読み飛ばされがちです。

小さな絵を添えると、そこで目が止まります。注意書きの絵は、内容を言い表す1つだけにしてください。にぎやかにすると、肝心の文が埋もれます。

使わない場面：実物を見せたい場所

施工例、商品、料理、店内。ここは、見る人が実物を確かめに来る場所です。

ここに絵を置くと、見る人は「実物は見せられないのか」と感じます。写真がまだ無いなら、無理に絵で埋めず、どんな仕事をしたかを文字で書くほうが誠実です。写真がそろったら、そこへ入れていけば済みます。

トップの最初の画面も、多くの業種では写真のほうが向いています。子ども向けの教室のように、絵の雰囲気そのものがお客様に合う業種は別です。

5. その絵は、図や表で足りないか

イラストを足す前に、もう1つ確かめたいことがあります。それは、絵でなければ伝わらないものかです。

文字で運ぶ情報は、図や表に任せる

料金の比べ方、手順の順番、対応できるものの一覧。こうした情報は、絵より、番号を振った段や表のほうが伝わります。読む人が知りたいのは、絵の雰囲気ではなく、中に書かれた文字だからです。

図や表を文字で組んでおけば、料金や手順が変わった日にすぐ直せます。絵の中に文字を描き込むと、直すたびに描き直しになります。箱と矢印で組む図の作り方は 文章だけでは伝わらないことを、図や表にする にまとめました。

絵が向くのは、形や場面を伝えるとき

逆に、絵が向くのは形や場面を思い浮かべてほしいときです。壁の中の配管がどう通っているか。相談の場がどんな雰囲気か。こうしたものは、文字や表ではうまく運べません。

1枚ずつ、次の順で確かめていくと迷いません。

飾りのためだけの絵は、置かない

見出しの横に、何となく絵を置く。余白が寂しいので、絵で埋める。こうした飾りのためだけの絵は、置かないほうがすっきりします。絵が増えるほど、本当に見てほしい絵が目立たなくなるからです。

余白は、空いていても困りません。読む人にとっては、文字を読みやすくする場所です。

6. タッチを1種類にそろえる

イラストを使うと決めたら、次はタッチです。ここが、素人っぽく見えるかどうかを大きく分けます。

そろえる5つのこと

タッチと言うとあいまいですが、分けると5つになります。

• 線 ― 輪郭の線があるか無いか。あるなら、その太さ
• 色の数 ― 何色まで使うか。サイトの色に合わせて2〜3色に絞ると、まとまって見えます
• 人の描き方 ― 頭と体の大きさの比べ方、顔を描くか描かないか
• 影と立体感 ― 平らに塗るか、影を付けて立体的に見せるか
• 背景 ― 絵の後ろに景色を描くか、人や物だけを置くか

この5つが同じなら、並べても違和感が出にくくなります。逆に、どれか1つでも違うと、並べたときにその絵だけが浮きます。

素材集なら、同じ作者・同じシリーズから選ぶ

素材集を使う場合は、1人の作者、1つのシリーズの中から選ぶのがいちばん簡単です。最初に1枚選んだら、残りもその作者の絵から探します。

欲しい絵が、そのシリーズに無いこともあります。そのときは、別の作者の絵で埋めるより、その場所では絵を使わないほうがまとまります。4章の流れの説明なら、絵の代わりに番号だけを大きく置いても、段の目印になります。

色だけ合わせる、という手もある

素材の絵の色を、サイトの色に塗り替えて使う方法もあります。色がそろうと、作者が違っても近く見えます。

ただし、色を変えてよいかどうかは、素材ごとの利用条件で決まります。次の章に書く確かめ方で、手を加えてよいかを見てから塗り替えてください。

アイコンも、同じ絵の仲間

電話のマーク、メールのマーク、矢印。小さなアイコンも、絵の一種です。線の太さや角の丸みがそろっていないと、ここでもまとまりが崩れます。アイコンも、イラストと同じ5つの基準で選びます。

写真のような絵と、手描きの絵を混ぜない

AIで作った写真のような画像と、手描き風の絵を同じページに並べるのも避けます。どちらも写真ではありませんが、見た目の質が違いすぎて、並ぶと落ち着きません。1つのサイトでは、どちらか1つの系統に決めておくと迷いません。

7. 利用条件の確かめ方と、描いてもらうときに伝えること

最後に、権利と頼み方です。ここを飛ばすと、あとで差し替えに追われることになります。

素材ごとに、条件を確かめる

無料の素材集でも、使い方には条件がついています。確かめておきたいのは、次のような点です。

• 会社のサイトに使えるか ― 商売のための利用が認められているか
• 形や色を変えてよいか ― 塗り替えや切り抜きが認められているか
• 作者名を書く必要があるか ― 書く場合、どこにどう書くか
• 使える点数に上限があるか ― 1つのサイトで使える数に決まりがある素材集もあります
• ロゴや商品に使えるか ― 会社のマークや商品の包装には使えない、という条件はよくあります
• 紙にも使えるか ― チラシや名刺、看板に使うときの条件

条件は素材集ごとに違い、同じ素材集でも途中で変わることがあります。取得した日に、条件のページを保存しておくと、あとで確かめられます。写真と文章を含めた権利の考え方は ホームページの写真と文章、権利はどうなっているか にまとめました。使い方が条件に当てはまるか迷うときは、業種や使い方によって判断が違うので、専門家に確認してください。

検索で出てきた絵は、使わない

画像の検索で出てくる絵は、「使ってよい絵」ではありません。出どころが分からない絵は、条件も確かめられません。気に入った絵があっても、どこの誰が描いたものか分からなければ、使わないでください。

描いてもらうなら、先に伝えること

社員の方や知り合い、外部の方に描いてもらうこともあると思います。そのときは、次のことを先に伝えておくと、描き直しが減ります。

• 置く場所と大きさ ― どのページに、どのくらいの大きさで使うか。スマートフォンでは小さく見えることも伝えます
• 何を何枚描くか ― 流れの各段、略図、注意書きなど、一覧にして渡します
• そろえる5つのこと ― 線、色の数、人の描き方、影、背景。サイトで使う色も伝えます
• 方向を示す見本 ― 「こういう雰囲気」と分かる絵を1〜2枚。似せて描いてもらうためではなく、方向を伝えるためです
• 受け取るファイル ― 背景が透けたファイルと、元のデータ。あとで描き足すときに要ります
• 権利の扱い ― サイトのほか、チラシや看板にも使えるか。描き足しや手直しを別の人がしてよいか

最後の権利の扱いは、口約束にせず、書面に残しておいてください。どう取り決めるかは、頼む相手との関係や契約の形によって考えることが違います。気になる場合は、専門家に確認してください。

先に1枚だけ描いてもらう

全部をいっぺんに頼まず、最初に1枚だけ描いてもらって、サイトに置いてみると失敗が減ります。実際の画面に置くと、線が細すぎる、色が浮く、小さくすると何の絵か分からない、といったことが見えてきます。そこで直してから、残りを描いてもらいます。

8. 雄喜晃の伴走：イラストを置く場所と、そろえ方を一緒に決めます

私たち雄喜晃のホームページ制作では、最初にページごとに、写真・図や表・イラストのどれで見せるかを分けます。絵を置く場所が決まってから、どんな絵が何枚要るかを考えます。

私たちがやること

流れの説明、略図、注意書きのように、イラストが向く場所を一緒に洗い出します。図や表で足りるところは、文字で組んで、あとから直しやすい形にします。

貴社でご用意いただいたイラスト（素材集から選んだもの、描いてもらったもの）は、利用条件を一緒に確かめたうえで、大きさ・余白・並び方を整えて載せます。タッチがそろっているかも、実際の画面で見ながら確かめます。描いてもらう前に、置く場所と大きさを一覧にするお手伝いもします。

公開後に写真が撮れたり、新しい絵が描き上がったりしたら、送っていただければ差し替えます。月5回までの更新代行が月額に含まれているので、そろった順に入れ替えていけます。

料金と条件

料金は制作費0円、月額8,800円（税別）からです。6ページ構成のプランは月額13,800円（税別）です。サーバー、独自ドメイン、SSL、保守はすべて月額に含まれます。

最低契約期間は6ヶ月です。7〜35ヶ月で解約された場合、サイトは非公開になります。36ヶ月以上ご継続いただいた場合は、サイトをお渡しします。

私たちがやらないこと

先に書いておきます。私たちは、イラストを描くことはお受けしていません。撮影もお受けしていません。絵や写真は、貴社でご用意いただいたものを整えて載せるところまでが私たちの仕事です。

また、出どころや利用条件が分からない絵は載せません。施工例や商品のように実物を見せる場所を、イラストで埋めることもしません。絵を入れることで検索の順位が上がる、問い合わせが増えるとお約束することもいたしません。

実際にお作りしたサイトは 制作実績、料金と条件は ホームページ制作のページ に載せてあります。神戸市北区鈴蘭台を拠点に、2025年10月から活動しています。

「写真が少なくてイラストを入れたいけれど、どこにどう入れればいいか分からない」という方は、一度ご相談ください。

9. まとめ：イラストは、写真で見せにくいものにだけ使う

ホームページにイラストを使うときに押さえることは、5つです。

• 役に立つのは3つの場面 ― 写真がまだ無い、人の顔を出したくない、仕組みを説明したい
• 使うのは、流れ・地図・注意書き ― 実物を見せたい施工例・商品・料理・店内には使わない
• 先に、図や表で足りないかを考える ― 文字で運ぶ情報は、絵より段や表のほうが伝わり、直しやすい
• タッチは1種類にそろえる ― 線・色の数・人の描き方・影・背景。素材集なら同じ作者のシリーズから選ぶ
• 条件と権利を確かめる ― 素材は取得した日の条件を残し、描いてもらう絵は使える範囲を書面にする

イラストは、使いどころを決めれば、写真の少ない会社の心強い味方になります。困るのは、写真が無い場所を、とりあえず絵で埋めることです。どこかで見た絵がばらばらに並ぶと、かえって貴社らしさが見えなくなります。

まずは今日、貴社のサイトに入っているイラストを全部書き出してみてください。置いている場所と、どこから持ってきた絵かを並べると、外す絵、そろえる絵、残す絵が見えてきます。