サービスにおけるビジュアルデザインの役割

サービスにおけるビジュアルデザインの役割ROLE OF VISUAL DESIGN IN SERVICE

鈴木健一

鈴木健一イマジカデジタルスケープ、IADI、FICC inc.にてデザイン／ディレクション業務に従事した後、2014年にアプリや

サービスのUIデザインを専門に行うSTANDARD inc.を設立。マーケティングエージェンシーで培ったノウハウを基に、

ユーザーの課題解決とビジネスゴール達成を両立するUIデザインを提供する。元ケーキ職人。

APP&SERVICE DESIGN

CEO,DESIGNER

The elements of user experience by J.J.Garrett

話すこと

The elements of user experience by J.J.Garrett

←この部分

話すこと

話すこと

• 利用しやすいUI設計であることは大前提、

その上でビジュアルが担う部分とは何か？

• Webサイトのデザインに求められる事との違い

ここで質問

何を作っていますか？

何を作っていますか？

• 企業、商品などのWebサイト

• スマホアプリ

• Webサービス

自分の場合

Webサイト Webサービス／アプリ

何のために作っている？

Webサイトの場合

キャンペーンの応募

商品の購買

店舗への来店促進

SNSへの拡散


企業や商品の認知向上や購買促進

サービス／アプリの場合

楽しめる

時間が短縮できる

金銭を節約できる

魅力的になれる

自分に自信が持てる

新しいことが出来るようになる


時間を短縮できる


自信が持てる


ユーザーの困っていることを解決する

ビジュアルデザインに出来ることは？




自信が持てる


企業や商品の特徴が理解でき、購買などの行動に繋がるようビジュアル面でサポートする



自信が持てる



ユーザーの課題解決を

サポートできるビジュアルである事



自信が持てる


「課題が解決」できたとは？

困っている、不便だと（潜在的に）感じている

状態に対して、サービスの機能を利用し始め、

利用し続けることで上記の状態が解消された状態



自信が持てる


利用開始、継続利用してもらうことが重要







自信が持てる



利用前




利用中継続利用時



自信が持てる


初見のユーザーに対して、サービスの利用によって得られる結果を想起させ、

利用開始を促すこと

アプリやサービスのランディングページ / AppStoreの画像アセット

og:image / ディスプレイ広告 / アプリのウォークスルー

のビジュアルデザインの役割

例えば

利用前サービス



自信が持てる


サービス・アプリのLP

これなら続けられそう！



自信が持てる


Appストアに並んでいるアイコンや紹介画像

私でも

簡単に使えそう！



自信が持てる


og:image

試してみたい！



自信が持てる


ディスプレイ広告

無料なら試してみようかな



自信が持てる


ウォークスルー

家族に喜んでもらえそう



自信が持てる


どうやって実現する？

特定のメッセージや文脈を効果的に伝えるために使われるグラフィカルな要素である

レイアウト（フォーマット、構成、グリッド）、タイポグラフィ（書体の選定、文字の扱い）、

色とテクスチャ、アニメーション等を指す。

「使ってみたい」と感じさせるためにグラフィカルな要素を効果的に使ってビジュアルデザインを作る

Visible language



自信が持てる


こうじゃなくて



自信が持てる


こう



自信が持てる


ユーザーの機能的なゴールと事業者側のビジネスゴールに貢献する行動を生む全ての要素をビジュアル面でサポートする

押して欲しいボタン / 入力を求める要素

理解して欲しい箇所 / 注意して欲しい箇所

例えば

のビジュアルデザインの役割利用中サービス



自信が持てる


押して欲しいボタン

色やレイアウト、アイコンやエフェクトで目立たせる

入力を求める要素

何を入力すればいいのかを、プレースホルダーや

補足テキストのレイアウト、色味で伝わりやすく



自信が持てる


理解して欲しい事

理解を助けるイラストとかインフォグラフィック、グラフなどで伝える

注意・関心を払って欲しいこと

色味やアイコン、アニメーションで気づきやすく



自信が持てる


サービスを継続的に使い続けてもらいユーザーが潜在的に抱いている情緒的なゴールへ到達するのをビジュアル面でサポートすること

におけるビジュアルデザインの役割継続利用サービスの

趣味嗜好に合うトーン＆マナー / アニメーションによる差別化

モチベーションに働きかけるフィードバック

例えば



自信が持てる


サービスを使い続ける理由は？

• 痩せたいから

• 節約したいから

• 料理のネタがないから

• 暇つぶししたいから

機能的なゴール

• 健康的な生活を送りたい

• 大人らしく堅実な生活がしたい

• 家族に喜んでほしい

• 少しの時間でも楽しみたい

情緒的なゴール



自信が持てる


サービスを使い続ける理由は？

行動機能的なゴールの達成

習慣人格情緒的なゴールの達成

途中で飽きさせず、諦めさせないことで

情緒的な満足感を得られるところまでサービスは貢献できる

コアターゲットの趣味嗜好にあうトーン＆マナー

何が響くのかはオンラインサーベイ等で実施可能https://creativesurvey.com/

https://creativesurvey.com/

アニメーションによる差別化

Marketzine

fladdictさんが考える「手触りのあるアプリ」（前編）iOS 7のフラットデザインと、

これからのUIデザイン： http://markezine.jp/article/detail/18196

http://markezine.jp/article/detail/18196

モチベーションに働きかけるフィードバック



自信が持てる


おさらい

利用前

利用中

継続利用時

サービスを使うことでどんないいことがあるか想像させて、利用を促す

ユーザーがなりたい姿に届くまで続けられるようビジュアルで支える

ユーザーがやりたいこと、事業者がしてもらいたいことに貢献できる要素をビジュアルで支える



自信が持てる


Webサイトとの比較

ユーザーに購入や共有などの

行動を促すサポート

Webサイト

ユーザーにサービスの初回利用と

継続的な利用を促すサポート

サービス／アプリ

役割は同じ？

ボジョレーヌーボーで例えてみる



自信が持てる


商品の広告を作っている

Webサイト

ここ数年で一番出来が良い出来は上々で

申し分の無い仕上がり50年に1度の出来10年に1度の当たり年です



自信が持てる


商品そのものを作っている


美味しいワインを作って

たくさんの人に届けたいッ！



自信が持てる


求められる役割は近いが、関与する対象が違う

商品の広告を作っている

Webサイト

商品そのものを作っている


自分がどう関わりたいか？

相手の痛みに訴えて

「刺さる」表現ではなく、

使う人の生活に寄り添いながら

「支え続ける」表現であること

サービスのビジュアルデザインは、

サービスにおけるビジュアルデザインの役割

Design