企業のWebサイトにある「サービス紹介ページ」や「プロダクト詳細ページ」。訪問者がサービスを理解し、問い合わせや購読へと進むための重要ページですが、「何をしている会社かよくわからない」「読み進められず離脱されてしまう」課題を抱えるWebマーケご担当者様も多いのではないでしょうか。
この記事では、13年間で900案件、多くの企業のサービス紹介ページでイラストを担当してきたイラストレーターの立場から、サービス紹介ページの離脱率を下げ、読み進めてもらうためのイラストの使い方をまとめました。
サービス紹介ページで「離脱」が起きる3つの原因
原因１：ファーストビューで「何のサービスか」がわからない
訪問者はページを開いたひとつの「ファーストビュー」で、「そう、これが探しているサービスだ」と思えるかを判断します。3秒で「違う」と思われたら、離脱してしまうというデータもあります。
原因２：サービスの仕組み・価値が文字だけで伝わらない
BtoBサービスや複雑なSaaSプロダクトは、「どう動いて、どう価値を生むのか」を文字だけで伝えるのが難しいもの。「導入したら何が変わるのか」「そもそも何と連携するのか」が明確でないと読み進めてもらえません。
原因３：長い文章で「読む処」が見えない
サービス説明が長文と見出しだけで構成されていると、訪問者は「どこから読めばいいか」がわからず、「とりあえずスクロールだけして離脱」を選びます。視覚的な「アクセント」が必要です。
サービス紹介ページの離脱率を下げるイラストの使い方
1．ファーストビューに「サービスの本質」を表すアイソメを置く
ファーストビューに「何と何をつなぐサービスだ」とわかるアイソメトリックイラストを置くと、訪問者は3秒以内に「よし、これだ」と認識します。例えば「企業の人事データと評価システムをつなぐSaaS」なら、その関係を一枚に表現したアイソメ図が効果的です。
2．「しくみ」をイラストフローで見せる
「データ取得 → 分析 → レポート生成 → ダッシュボード表示」のようなサービスフローを、アイソメトリックで表現すると、読み手は「なるほど」と一目で理解します。文字で説明するよりも読んでもらえる確率が上がります。
3．「Before-After」で価値を見せる
「導入前はこうだった」「導入後はこうなる」をイラストで並べると、文字で「効率アップ」と記すよりも胸に届きます。「そう、これを解決したいんだ」と読み手の背中を押します。
4．スクロールの区切りにイラストを置く
長いサービス紹介ページでは、セクションごとにイラストを置くと「読むリズム」が生まれます。イラストが「ここが区切りだよ」と記号の役割を果たし、スクロールの手を止めて読ませることができます。
5．個人・企業のペルソナをイラストで示す
利用シーンをイラストで示すと、訪問者は「これを使う人はこんな人だ」とイメージしやすくなります。「自分も使えそう」と思えれば、問い合わせボタンへのハードルが下がります。
サービス紹介ページ用イラストを依頼する際の3つのコツ
コツ１：「読み手は誰か」をデザイナーと共有する
「中小企業の人事担当者」「大手企業のIT部門」「スタートアップのCEO」でイラストのタッチや表現は全く変わります。誤ったタッチのイラストは「自分向けじゃない」と読み手に離脱させる原因になります。
コツ２：会社の世界観とトンマナを揃える
ロゴ・コーポレートカラー・採用サイト・パンフレットと、サービス紹介ページのイラストがトンマナ揃っていると、「一貫した会社だ」と信頼感を与えられます。ブランドガイドラインを共有するとスムーズです。
コツ３：使われるシーンを事前に詳しく伝える
Webサイト上だけでなく、資料やプレゼン、広告バナーでも使う可能性があるなら事前に伝えましょう。使うサイズや色パターンによって、デザイナーの設計方針が変わります。
まとめ｜離脱を「読み進める」に変える
サービス紹介ページの離脱率を下げるためのイラストは、「装飾」ではなく「伝えるための道具」です。「サービス紹介ページを読み進めてもらえるようにしたい」「問い合わせを増やしたい」Webマーケティングご担当者様は、ぜひお気軽にisomeya.comまでお問い合わせください。
13年・900案件、80社以上の制作実績をもとに、御社のサービスやターゲット読者に合わせたイラスト提案をさせていただきます。お見積もり無料、企画段階でもご相談歓迎です。
