さっそくですが、Webサイトに、以下のような問い合わせ項目があったとします。
どちらの方が分かりやすいと感じますか？
左は文章のみのレイアウト、右はアイコンを文章の始めに配置したレイアウトとなっています。直感的には、右の方が「どれをクリックするとその先はどのコンテンツに遷移するのか」が早く分かりやすく利用者に伝わるのではないでしょうか。メールアイコン、つまり「絵」を用いることで、情報を伝達しやすくしていると考えられます。
今回は、写真や文章以外の伝達手段”絵”=イラストに焦点を当てて、事例を交えて紹介していこうと思います！
目次
なぜイラストが必要か
専門的な内容を直感的に伝えられる
先ほど、文章のみレイアウトよりもアイコン有レイアウトの方が直感的に分かりやすいと書きました。写真と同じように、ビジュアル要素が文章と掛け合わされることにより、「この先に何があるのか」「これが何を説明しているのか」がより利用者に伝わり、コンテンツへの理解を高めてくれます。
「それなら、写真だけでもいいのでは？」と思う方もいるかもしれません。
しかし、写真だけでは細かい情報の伝達やピンポイントな表現は難しいように感じます。イラストの良いところは、まず、専門的な内容でも、より分かりやすく表現できること。イラストなら、そのコンテンツを説明するのに不要な要素や細かい部分を省略したり、逆に、必要な部分を強調することが可能です。
また、イラストを添えることにより柔らかい印象になるので、利用者もスムーズに情報を得ることができます。
さらに、写真よりも図版という手段を取ることで、利用者に直感的に理解してもらうことも可能です。製品の取扱説明書やエラー表示などでイラストが使われているのは、このためでしょう。
例１：製品に関する注意事項
(引用元：http://www.britax.jp/safety/function.html)
写真だけでは表現しきれない、衝撃の広がり方やどのように吸収してくれるかを分かりやすく表現しています。
例２：プランの紹介
(引用元：http://emistin.jp/)
どのようなプランが入っているかをイラストで表現。コンテンツ全体の印象の統一や、見やすさだけでなく、優しい印象も与えています。
何をイラストで伝えるか
効果的にコンテンツの良さを伝えられる
次に、”イラストという技法で何を伝えるか”を述べます。
すべてがすべてイラストだと、使い方によっては少し幼稚な印象を与えてしまったり、インパクトが弱くなってしまいます。
そこで、効果的にイラストを使用し、利用者にコンテンツの良さを伝えている事例をいくつかご紹介したいと思います。
例１：数字を伝える
(引用元：http://litalico.co.jp/recruit/data/)
社員数や男女の比率といった”数字”をうまくイラストに反映して、会社の特徴を利用者に伝えている例です。
LITALICOのロゴにも使用されている「人」もうまくイラスト内で使用し、統一感を保ちつつ、楽しみながら会社を知ることができます。さらに、動きもあるので、スクロールしていくごとにそれぞれのコンテンツに注目が行きやすいのもポイントです。
例２：サービスを伝える
(引用元：https://www.step-life.co.jp/service/)
文章だけでは伝えきれないサービス内容を、イラストに反映した例です。写真だとシーンが多すぎ、ごちゃごちゃしてしまうところをアイコン風のイラストにすることで、重くなりすぎずに伝えています。
例３：導入の流れを伝える
(引用元：https://www.hellocycling.jp/)
登録から返却までの流れを、イラストで説明しています。
人物が自転車を利用しているシーンが描かれているので、利用者は返却までの流れを想像しやすくなります。
イラスト表現技法「インフォグラフィック」
統計やデータを見やすく、楽しく理解する
イラストで情報を伝える手段としてよく使われるのが「インフォグラフィック」という表現技法です。
「インフォグラフィック」とは、統計やデータなどといった情報を視覚化した図のこと。
文章やグラフ主体ではなく、イラスト主体で表現する方法なので、硬く思われがちな統計データも、見やすく、そして、何よりも楽しく表現することができます。
例１：統計をイラスト化
(引用元：http://www.cosmowater.com/life/info/tea.html)
緑茶と紅茶、都道府県でどちらが飲まれているのかをインフォグラフィックで表現したもの。
簡略化した日本地図の上に、緑茶と紅茶のイラストを置き、どちらが多く飲まれているのかを分かりやすく説明しています。
例２：歴史をイラスト化
(引用元：http://www.jaccs.co.jp/research/creditcard/)
こちらは統計ではなく、「歴史」をインフォグラフィックにしたもの。
クレジットカードの歴史とその時に起きた世界の歴史を掛け合わせ、どのように移り変わっていったのかを分かりやすく説明しています。
例３：情報をイラスト化
(引用元：https://www.insweb.co.jp/research/report/bicycle-infographic.html)
自転車の規則や利用量などの情報を、イラスト化したもの。
「自転車に関する法律を知っていたか」「CO2の排出はどれぐらいあるのか」などをまとめており、自転車との比較で、ネズミやバッタなど自転車以外のものを対象に入れ、面白く表現しています。