顧客体験を向上させるビジュアルコンテンツ戦略

愛される魅力的なデジタル・プロダクトを目指して

メッセージを送る、ホテルを予約する、お金を送金する、私達は生活の多くの行動をアプリケーションで処理しています。それは時に冷たく無機質な道具との関わり方をしているように私は感じます。
誰かを思いメッセージを送り、旅先に想いを馳せながら予約をとり、感謝の気持ちを持ってお金を送る、暖く血の通った道具との関わり方にこそ、ヒトは愛着や魅力を感じるのではないでしょうか？

IBMでは、デジタル・プロダクトをデザインする際に、クライアントの要件だけをベースにデザインするのではなく、ユーザーに受け入れられ愛される魅力的なサービスを提供するためにビジュアル・デザインにも気を遣っています。今回はモバイル・アプリにおける事例をもとにUI/UXデザインを専門領域とされている方やUI/UXデザインに興味を持っている方に向けて、考え方や制作プロセスを紐解いていこうと思います。

デジタル・プロダクトにおけるイラストレーションの重要性

モバイル・アプリを使っている時に、イラストが使われた画面を目にしたことはないでしょうか？優れたUXは、ビジュアル・デザインだけでは成立せず、戦略や情報構造などが考え抜かれていないといけません。しかし、ビジュアル・デザインが魅力的でないとユーザーの支持は得られません。なぜなら、人は外見が魅力的だと感じるモノをより信用する傾向があり、アプリやサイトにおいても同じで、見た目が良いサービスを好意的に受け止める傾向があるからです。ユーザーに信頼され長く愛されるデジタル・サービスに成長していくには、イラストなどのビジュアル・デザインを蔑ろにはできません。

「ギャレットの5段階｜5階層モデル」　三井住友カードVpassアプリ検討資料一部抜粋1

デジタル・プロダクトにおけるイラストの役割

イラストの役割は大きく2つあります。
1つ目は「メッセージを分かりやすく魅力的に伝える役割」
アプリの使い方を伝えるオンボーディング画面を例にとってみましょう。イラストは情報を分かりやすく、親しみやすさを演出する手助けとなるような役割を持っているのです。

2つ目は「アプリに血を通わせる役割」
アプリは単に目的を達成するための道具ではなく、ユーザーは楽しみながら目的を達成したり、目的を達成するまでのモチベーションを高めてくれることを潜在的に求めています。イラストは用いることでユーザーをワクワクさせる役割を持っているのです。エラーが発生した場合のエラー画面にイラストを用いることでより柔らかく、ユーザーに寄り添った優しい伝え方に配慮したり、表示できるコンテンツがない場合に、本来はどのような情報が表示されるかユーザーに伝えるエンプティステート画面でもイラストなどがよく使われます。

このようにイラストは、ユーザーが陥る可能性のあるケースを想定してデザインすることで、ユーザーに分かりやすく語りかけ、エラー時であってもなんだかクスッとさせてくれたり、感情持って接する対象となれるような道具へ昇華させる役割を担っています。

例えば、三井住友カードアプリでは、アプリ内の機能を一方的にユーザーに押し付けるのではなく、利用してもらうためにイラストを用いた提供価値の訴求を行い、アプリ利用のエンゲージメントを高める表現をしています。
AirbnbやUserEatsなどのモバイル・サービスもデザイナーとして注目しています。興味のある方はぜひ確認してみてください。

三井住友カードVpassアプリ検討資料一部抜粋2 出典:三井住友カードVpassアプリ

制作から納品まで

イラストの重要性を理解していただいたところで、イラストの制作プロセスについて説明していきます。
実は、UIデザイナーに求められるイラストとイラストレーターの描くイラストは全く異なります。なぜならプロダクト開発のために理解しておかなければならない観点が沢山あるからです。
デジタル・プロダクトの開発プロジェクトにおける、UIデザイナーが理解しておきたい、要件をもとにイラストを制作して開発チームに納品するまでの一連のプロセスをフェーズごとに紹介していきます。

「連携フロー図」 三井住友カードVpassアプリ検討資料一部抜粋3

1.order
画面デザインのための要件が決まります。この段階でイラストを描くこと自体が要件にない場合も多いです。

2.layout
クライアントがこのサービスを通じて提供したい価値を体験としてUIに落とし込んでいくフェーズです。この段階では、情報設計や構造を練るため、どんなイラストを創るかなどは二の次の話です。

画面イラスト1

3.client review
検討した画面をクライアントとデザイン・ディスカッションするフェーズです。この段階では、イラストに関しては、領域を指定する程度になります。

画面イラスト2

4.drawing
クライアントからのフィードバック反映を行い、イラストの制作に着手するフェーズです。最初は手描きレベルでイメージを描き起こしていきます。
コツとして、表現のスケール感を意識することで分かりやすいイメージを描くことができるようになります。ユーザー体験を表現したい場合はユーザー自身を対象にしたスケールの方が伝えやすく、機能を表現したい場合は画面にフォーカスしたスケールで伝えます。

三井住友カードVpassアプリ検討資料一部抜粋4

次にイラストの方向性が決まったら、徐々にシンプルにしていきます。モバイル・アプリで用いられるイラストをユーザーは数秒も見ることはありません。一瞬でユーザーに理解してもらうには、イラストをシンプルに洗練していく工程がとても重要になります。

三井住友カードVpassアプリ検討資料一部抜粋5

5.sketching
イメージが固まったら、最終的にエンド・ユーザーが目にするモノを創り込んでいくフェーズです。プロダクトに合ったテイストやデティールを詰めていきます。感情を揺さぶることができるモノになっているか、デザイナーの腕が試される、一番楽しい所でもあります。

三井住友カードVpassアプリ検討資料一部抜粋6

６.client review
検討したイラストを画面に盛り込んだ成果物をクライアントとデザイン・ディスカッションするフェーズです。

7.tidy
クライアントからのフィードバック反映を行い、イラストの最終調整フェーズです。制作過程で発生した無駄なパーツなどを除去していきます。不必要なパーツを含んだままだと、イメージ・ファイルが大きくなってしまい、アプリ全体のサイズにも影響があるので、クリーニング作業も忘れずに行います。
また、錯視のことを考慮し、componentとresource（イラスト）のpaddingの調整、他componentとのmarginもバランスを見ながら固めます。

三井住友カードVpassアプリ検討資料一部抜粋7

8.pass
制作したイラストを開発チームに連携するフェーズです。モバイル・アプリの場合、iOSとAndroidの各OSに対応したファイル形式での連携が必要になります。また、端末サイズによって、レスポンシブに対応するための指定も開発チームに説明します。

三井住友カードVpassアプリ検討資料一部抜粋8

開発チームへの納品が終わったらすぐに、めでたしめでたしという訳ではありません。デジタル・プロダクトを手掛ける際には、イラストにもデザイン・ガイドラインの制作が必要になります。イラストのcolor paletteやモチーフをパーツ化して管理することは、デザイン・スキルの属人化を防ぎ、第三者がアプリの枠を超えてLPやstoreなどでデザインしてもデジタル・プロダクトの世界観が壊れないようにスケールアウトして行かなくてはなりません。

三井住友カードVpassアプリ検討資料一部抜粋9

UIデザイナーとして筆を執る

ここまでIBMのUIデザイナーが、クライアントやプロジェクト・チームと共に、どのようにデジタル・プロダクトの価値を最大化するデザインを制作するのか、その制作プロセスをみてきましたが、いかがでしたでしょうか。UIデザイナーは、イラストレーターやグラフィック・デザイナーの表現方法とは違った視点ビジュアル・デザインに向き合う必要があり、単にビジュアルを描き起こすだけではなく、ユーザーに対してクライアントの提供したい価値をデジタル・プロダクトの一部として他のcomponentと同様の考え方で制作・管理することが求められるのです。