UIデザインにおけるイラストの活用法とは

Nick Babich

Babich氏はロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。

この記事はUX Planetからの翻訳転載です。配信元または著者の許可を得て配信しています。

3 Common Ways To Use Illustrations in UI Design

絵には言葉1000個分の価値があります。大昔から、人々は複雑なアイデアをたった1つの絵を使って伝えることができると知っていました。

フランスのラスコー。世界的に有名な17,000年前に描かれた洞窟壁画です。画像: subarcticmike

私たちの脳の大部分は視覚処理に使われています。人間が処理する情報の90%は視覚から来ていると述べる研究者もいます。

この記事では、視覚情報の1つであるイラストについて述べたいと思います。UIの他要素と同様、イラストも特定の目的のために使われます。イラストをUIで使おうと考えた場合、いつなんのために使う必要があるのかを明確に理解しておく必要があります。

以下ではイラストがユーザー体験にどう役立つのか、3つの典型的な例を紹介します。

1. UIをより具体的にする

コンセプトの説明

言葉だけでは、コンセプトを伝えるのが難しいときがあります。特に、コンセプトが抽象的である場合がそうです。イラストはものごとを明確化する力を持ち、デザイナーはこの特性を使うことができます。たとえば、Basecampは現代ビジネスで起こる日々の問題を明示するためにイラストを使用しています。言葉だけのメッセージより抵抗なく理解できます。

話のすべてをたった1つの絵で表現することも可能です。画像: Basecamp

文章の背景を伝える

デザイナーがなにかをユーザーに広めたい場合、文字を使うことができます。しかしテキストだけでビジュアルがないと退屈です。またデジタルプロダクトを扱う場合、ユーザーはスクリーン内の文字を読まず、流し見ていることを理解しておきましょう。

イラストを使うデザイナーは、コンテクストを魅力的に伝えることができます。たとえばEvernoteは、彼らのアプリを使うコンテクストにおいて、「すべてを覚えておく」とはなにかをイラストを使って明確に伝えています。

イラストは関連する文脈をユーザーが理解する手助けをします。画像:Evernote

イラストはオンボーディングで最大の力を発揮します。イラストはプロダクトについて素早く説明するだけではなく、UIに活気をもたらします。

第一印象は見た目でほとんど決まります。そのためイラストはオンボーディングで役立つのです。画像:Slack

ユーザーを行動に導く

イラストはとても強力なため、ユーザーを行動に導くこともできます。

多くのユーザーがボタンに好奇心をそそられます。画像:Webflow

2. ユーザーを楽しませる

「楽しい」という言葉は、ユーザーにとって満足な効果が得られた場合に使われます。ユーザーは1日にいくつものプロダクトに触れますが、良いと感じたもののみを覚えています。良い印象のプロダクトを見つけた場合、ユーザーはそれらにロイヤリティを持ち続ける可能性が高くなります。

イラストを使ってユーザーを喜ばせることができます。

ユーザーが目的を達成したとき

目標を達成したときに、動きのついたイラストがスクリーンに現れると、ユーザーは大きなことを成し遂げたという達成感を得ることができます。

ユーザーをinbox zeroで楽しませる。画像:Google

ユーザーがなにかに困り、イライラしているとき

「不安」という言葉は、ユーザーが困ったりイライラしたときに使用されます。イラストを使いUXを通してユーザーの不安を緩和することができるでしょう。不安を喜びに変えることは可能です。たとえば、ユーザーが初めて商品を使用し、まだなにも入っていない空の状態を目にしたとき、その状態をどう表現するかで印象は大きく変わってきます。

イラストは不安を取り除くために使用されています。このアプリではイラストを使い、ユーザーがアプリを始めやすくしています。

もしくは、ユーザーがエラーなどのイライラするような場面に直面してしまった場合も、イラストを使用し印象を変えることができます。

OfferUpで表示されるエラーメッセージです。

3. 人間性を伝える

ユニークな独自のイラストを使えば、数ある商品の中から自分たちのものを目立たせることができます。

ブランドの個性を出すためのイラスト

イラストはブランドアイデンティティを印象づけることができます。ブランドのビジュアルランゲージ(視覚言語)で作られたイラストは、ブランドを強く思い起こします。ユーザーはそのようなイラストを見ると、すぐにブランドと結びつけるのです。

Googleは斬新なビジュアルランゲージを使用しています。画像:GoogleのMaya Stepien

マスコット

マスコットはプロダクトやブランドとともに認識される、特定のイラストを指します。良くデザインされたマスコットは、ユーザーとプロダクトの間に感情的な繋がりをつくります。

マスコットは商品に生命と個性を与えます。ユーザーを商品と結びつけ、心からの記憶に残る経験をつくります。画像:Github

例えば下記はテクノロジー産業では知らない者のほうが少ない、MailChimpの人懐っこいチンパンジーFreddieです。

画像: Mailchimp

雰囲気作り

イラストを使うことで、Webサイトやアプリの雰囲気作りが可能になります。視覚にはユーザーが初めてプロダクトに接したときの最初の数秒間の感情を構築する力があります。

インターフェイス全体のコンセプトに合わせたイラストを作成するのが効果的です。イラストはアプリやWebサイト全体のスタイルを考慮して作る必要があります。

Shopifyはイラストを使い雰囲気を出しています。画像:Meg Robichaud

結論

イラストはデザイナーが持つ強力なツールです。UIに美しさや感情を加えたり、ストーリーを伝えることを望んでいますか? イラストを使ってその望みを叶えることができます。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集