UIデザインでのイラスト活用の３ポイントを解説！サイトの魅力と利便性アップで目標達成に近づける

UX Planet

UX Planet is a one-stop resource for everything related to user experience.

本記事は、3 Common Ways To Use Illustrations in UI Designを
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

2,498 views

読了時間 : 約3分38秒

百聞は一見にしかず。昔から、複雑なアイデアはただ1つの静止画で伝えることができるということを私たちは知っています。

人間の脳の大部分は視覚的な処理に専念しています。一部の研究者は、人の情報処理の90％以上が視覚的であると主張しています。

この記事では、イラストの活用方法についてご紹介したいと思います。イラストは、UIの他の要素と同様に、ユーザーインターフェイスの機能的要素でなければなりません。具体的な目的が果たされるはずです。そのため、あなたのUIでイラストを使用する予定がある場合は、いつ、なぜそれを使うべきかを明確に理解する必要があります。

以下は、イラストがユーザーエクスペリエンスに利益をもたらすことができる3つの典型的な例です。

1.UIにより多くの情報を伝える

○コンセプトをより明確に説明する

時には、単語だけを使用してコンセプトを記述することは難しい場合があります（特に抽象的なコンセプトの場合）。イラストには物事を明確にする自然な力があり、デザイナーはこの資産を利用することができます。たとえば、Basecampはイラストを使って現代のビジネスの日常的な問題を実証しています。言葉だけのメッセージは魅力的ではありません。

○より魅力的にテキストの文脈を伝える

デザイナーがユーザーに何かを習得させたい場合、テキストを使用できます。しかし、ビジュアルのないテキストはつまらないかもしれません。また、デジタル製品を使用する場合、ユーザーは画面上でじっくりとテキストを読まず、ざっとスキャンすることを覚えておく必要があります。長くて退屈なテキストの部分で画面がいっぱいだと、ユーザーはすぐに圧倒されることになります。

イラストを使用すると、より魅力的にテキストの文脈を伝えることができます。たとえば、Evernoteでは、「Remember Everything」ということが、実際にアプリケーションを使用する上でどういった意味を持つのかを明確にしています。

イラストは、オンボーディングで操作などを明確にするためにも大いに活用することができます。意味のあるアートワークは、製品についてより速い説明を可能にするだけでなく、ユーザーインターフェースを生き生きとさせるでしょう。

○ユーザーに行動を促す

イラストは非常に強力で、ユーザーに行動を起こさせることさえ可能です。

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

「快適な」とは、ユーザーに肯定的な効果をもたらすインタラクションを説明するために使用する言葉です。ユーザーは毎日何十種類もの製品やサービスと関わっていますが、そのなかでも常に気分を良くしてくれる製品やサービスがあれば印象に残ります。ユーザーはそういった製品やサービスに対してはロイヤリティを感じるようになるでしょう。

そして、デザイナーは、イラストを使ってユーザーを楽しませることができるのです。

○目標に達したユーザーに実感を与える

ユーザーが何か目標を達成した時点で画面に表示されるアニメーションイラストは、ユーザーが何か重要なことを達成したという実感を与えます。

○ユーザーの不安や緊張を緩和する

ユーザーが不安や緊張を感じた時、イラストを使うことでUXを通して不安や緊張を緩和することが可能です。不安を喜びや快適さに変換することさえ可能です。たとえば、製品の初回使用時にユーザーのステータスが何も記入されていないempty stateであることを示す場合、その状態をデザインする方法によって大きな違いが生じます。