イラストがウェブサイトに与える影響についてリサーチしてみた。

イラストがウェブサイトに与える価値とは

Hello there!　A.C.O.編集部です。イラストレーションは雑誌、本、広告といったグラフィックデザインの分野で発展してきましたが、近年はデジタル分野でも活躍の幅を広げています。

多くの人は10秒程でウェブサイトを見続けるか否かを判断しています。また、一般的に人間は10秒間で50ワードの文章しか読めないと言われています。そのため写真やイラストといったビジュアル要素は、ユーザーに情報を伝えるということにおいて大きな役割を果たすのです。*

ビジュアルを用意するためによく用いられるのがストックフォトです。きれいに撮影された写真がたくさん用意されている一方、汎用性を担保するためにリアリティが損なわれたり、既視感をもたれたりすることも少なくありません。

対してイラストは絵のなかの情報量を調整でき、フォーカスすべき要素を明示できます。またイラストのトーンをサイト全体のトーンに合わせることも可能です。ユーザー視点で見たときに、必要な情報だけを短時間で理解できるかたちに編集できるのは、イラストならではのメリットです。

それでは実際にイラストを用いたウェブサイトの事例を見ながら、それぞれのウェブサイトにおいてイラストが果たしている役割とメリットを考えていきましょう。

デザインスダジオ

まず最初に、海外のデザインスタジオの事例をみてみましょう。

wrk

『wrk』というフランスのデザインスダジオです。トップページをworks, studio, visionの3つのエリアに分割しています。それぞれのエリアで用いるテキストは最小限にとどめ、イラストが説明を補足しています。

Worksのエリアでは、「デジタルの海を渡る船にクライアントと共に乗り、目標を目指す姿」と「ウェブ制作会社」をイラストで伝えています。イラストをよく観察すると、船は海にプカプカ浮いていたりとディテールにも凝っています。小さな動きがあることでユーザーがこの画面に滞在する時間が長くなることを狙っていると思われます。

ちなみに、ご飯のイラストは可愛いですが、箸をお茶碗に立てるのはマナー違反ですね。(笑)

Studioのエリアでは各メンバーのイニシャルをイラストにしています。Jがイニシャルの「Jimmy Raheriarisoa」さんはアートディレクターなので、イラストには絵や、絵の具、アートを関わる要素を描いています。Aがイニシャルの「Antoine Wodniack」さんはエンジニアなので、コードなどの要素を描いています。それぞれイニシャルのイラストからどのような役割を果たしているかをあらわしています。

下層ページもイラストを多用しています。例えばVisionページではwrkのデザインプロセスをイラストを用いて説明しています。文字説明が少なくとも、適切なイラストを用いることで直感的に内容を理解できるようにデザインされています。

wrkで用いているイラストは、ポップで配色も印象的ですが、トーンに抑えているため全体的にやわらかい印象を与えています。

one design company

こちらは『one design company』というシカゴにあるデザインスダジオです。イラストはアイコンなどで用いられる事が多い、シンプルなライン構成で作られています。

イラストを用いてストーリーを作り、スダジオの理念とデザインプロセスを説明しています。イラストの使い方はwrkと似ていますが与える印象は異なり、細いラインを用いることでスマートでテックな印象を与えています。

Approachページではスクロールに応じて動くインフォグラフィックでデザインプロセスを説明しており、シンプルな情報と動きにより、記憶に残りやすいよう作られています。

これら2つのデザインスタジオのコンセプトの違いには、その国のデザイン、文化、アートに対する考え方の違いがあると考えられます。wrkはフランス人らしいユーモアがありますね。one design companyはスタートアップ都市としても知られるシカゴらしく、シンプルでテック感のあるデザインに仕立てられています。

キャンペーンサイト

次に、キャンペーンサイトの事例をみてみましょう。

The Grey Tales

『The Grey Tales』は、不当に扱われる動物の保護を目的としたキャンペーンサイトです。ベトナムへ旅行の際、象が不当な扱いを受けている姿を見たことをきっかけに制作されました。イラストには動物を不当に扱わないでくれというメッセージが込められています。

テキストのみで内容を語ってしまうとユーザーの興味を引きづらく、内容を読まれないかもしれないと考えたクリエイターは、イラストを用いることでユーザーの興味を惹くことを考えました。イラストを切り口にテキストへとつなぐことを前提で作られています。テキストを読み飛ばす人でもイラストがあることで内容を理解しやすく、また文章量を減らす役割も果たしています。

World’s Easiest Decision

『World’s Easiest Decision』は、パリで開催された世界会議に参加した世界のリーダーたちへ地球温暖化防止条約にサインしてもらうことを依頼する、署名サイトです。

取り扱うテーマは硬く、興味を示さない人も少なくありません。そこで興味を持ってもらうために、ゲームのようなUIで問題に答えることで、請願書に署名する仕組みとなっています。

クリエイターは面白いストーリーと７つの問題を設計しており、ユーザーが問題にNoと答えても最終的にはポジティブな選択を取るよう誘導しています。

イラストは質問の内容をわかりやすく説明しており、ユーザーが質問の内容を理解できるようデザインされています。議題の真面目さが際立たないよう、イラストは興味を引きやすいユニークなものを用いて、バランスをとっています。

A.C.O. の事例

A.C.O. が過去に制作した、イラストを用いたプロジェクトをご紹介します。

Recruit Holdings

『Meet Recurit』は、リクルートホールディングス グローバルサイトで展開しているオウンドメディアのコンテンツです。海外の方にリクルートを知ってもらうためのコンテンツで、社内外の人へのインタビューや、リクルートの事業紹介などを行っています。

インタビュー中の写真やテキストのみのページでは、読んでいるユーザーに堅くて真面目すぎる印象を与えてしまいます。部分的に柔らかいトーンのイラストを入れることで、ページ全体のバランスを保っています。またこちらのケースではイラストを使うメリットでもある、目を休める役割も与えています。

So-net

『So-net Managed Cloud with AWS』のスペシャルサイトです。

AWSという専門的な内容をユーザーに説明し、AWSを簡単に導入できることを訴求するサイトです。文字だけでは伝わりづらいであろう内容をポップなイラストを用いることで、ユーザーの難しそうといった先入観を下げることを狙っています。また、サイトで利用しているイラストはイベントで配布しているパンフレットなどでも使われています。ちなみに、イラストを描いたのは私です！

このプロジェクトではイラストを使うだけではなく、同じトーンでサービス紹介の動画も作成しました。多くのテキストの代わりにイラストを用いた約3分の動画でテンポ良く内容を紹介しています。

イラストはウェブサイトに多くの価値を与えている。

以上のように、イラストは特徴付けをする、堅い内容をやわらかくする、文字と絵のバランスをとるなど、さまざまなかたちでウェブサイトにポジティブな影響を与えています。

リサーチしてわかったこととして、イラストにはキャンペーンサイトではよく見られますが、コーポレートサイトではあまり利用されていません。コーポレートサイトにおいてもイラストを適切に用いることで、コンシューマーやリクルーター、従業員、投資家などのステークホルダーの興味を引くのに重要な役割を果たすこともできます。

ウェブサイトのさまざまな場面で活躍しているイラスト。どこかのウェブサイトでイラストを見つけたら、何のために置かれているのかちょっとだけ考えてみましょう！

• #デザイン
• #デジタルコミュニケーション
• #ブランディング
• #リサーチ
• #Tips