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

2. 鈴木 健一
APP&SERVICE DESIGN
CEO,DESIGNER
イマジカデジタルスケープ、IADI、FICC inc.にてデザイン／ディレクション業務に従事した後、2014年にアプリや
サービスのUIデザインを専門に行うSTANDARD inc.を設立。マーケティングエージェンシーで培ったノウハウを基に、
ユーザーの課題解決とビジネスゴール達成を両立するUIデザインを提供する。元ケーキ職人。

3. 話すこと
The elements of user experience by J.J.Garrett

4. The elements of user experience by J.J.Garrett
←この部分
話すこと

5. 話すこと
• 利用しやすいUI設計であることは大前提、
その上でビジュアルが担う部分とは何か？
• Webサイトのデザインに求められる事との違い

6. ここで質問
何を作っていますか？

7. 何を作っていますか？
• 企業、商品などのWebサイト
• スマホアプリ
• Webサービス

8. 自分の場合
WebサイトWebサービス／アプリ

9. 何のために作っている？

10. Webサイトの場合
キャンペーンの応募
商品の購買
店舗への来店促進
SNSへの拡散

11. Webサイトの場合
企業や商品の認知向上や購買促進

12. サービス／アプリの場合
楽しめる
時間が短縮できる
金銭を節約できる
魅力的になれる
自分に自信が持てる
新しいことが出来るようになる

13. サービス／アプリの場合
ユーザーの困っていることを解決する

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

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

16. サービス／アプリの場合
ユーザーの課題解決を
サポートできるビジュアルである事

17. 「課題が解決」できたとは？
困っている、不便だと（潜在的に）感じている
状態に対して、サービスの機能を利用し始め、
利用し続けることで上記の状態が解消された状態

18. 「課題が解決」できたとは？
困っている、不便だと（潜在的に）感じている
状態に対して、サービスの機能を利用し始め、
利用し続けることで上記の状態が解消された状態
利用開始、継続利用してもらうことが重要

19. 「課題が解決」できたとは？
困っている、不便だと（潜在的に）感じている
状態に対して、サービスの機能を利用し始め、
利用し続けることで上記の状態が解消された状態
利用前
利用中継続利用時

20. のビジュアルデザインの役割
サービス利用前
初見のユーザーに対して、
サービスの利用によって得られる結果を想起させ、
利用開始を促すこと
例えば
アプリやサービスのランディングページ / AppStoreの画像アセット
og:image / ディスプレイ広告 / アプリのウォークスルー

21. サービス・アプリのLP
これなら続けられそう！

22. Appストアに並んでいるアイコンや紹介画像
私でも
簡単に使えそう！

23. og:image
試してみたい！

24. ディスプレイ広告
無料なら試してみようかな

25. ウォークスルー
家族に喜んでもらえそう

26. どうやって実現する？
「使ってみたい」と感じさせるためにグラフィカルな要素を
効果的に使ってビジュアルデザインを作る
Visible language
特定のメッセージや文脈を効果的に伝えるために使われるグラフィカルな要素である
レイアウト（フォーマット、構成、グリッド）、タイポグラフィ（書体の選定、文字の扱い）、
色とテクスチャ、アニメーション等を指す。

27. こうじゃなくて

28. こう

29. サービス利用中のビジュアルデザインの役割
ユーザーの機能的なゴールと
事業者側のビジネスゴールに貢献する行動を生む
全ての要素をビジュアル面でサポートする
例えば
押して欲しいボタン / 入力を求める要素
理解して欲しい箇所 / 注意して欲しい箇所

30. 押して欲しいボタン
色やレイアウト、アイコンやエフェクトで目立たせる

31. 入力を求める要素
何を入力すればいいのかを、プレースホルダーや
補足テキストのレイアウト、色味で伝わりやすく

32. 理解して欲しい事
理解を助けるイラストとかインフォグラフィック、グラフなどで伝える

33. 注意・関心を払って欲しいこと
色味やアイコン、アニメーションで気づきやすく

34. サービスの継続利用におけるビジュアルデザインの役割
サービスを継続的に使い続けてもらい
ユーザーが潜在的に抱いている情緒的なゴールへ
到達するのをビジュアル面でサポートすること
例えば
趣味嗜好に合うトーン＆マナー / アニメーションによる差別化
モチベーションに働きかけるフィードバック

35. サービスを使い続ける理由は？
機能的なゴール
• 痩せたいから
• 節約したいから
• 料理のネタがないから
• 暇つぶししたいから
情緒的なゴール
• 健康的な生活を送りたい
• 大人らしく堅実な生活がしたい
• 家族に喜んでほしい
• 少しの時間でも楽しみたい

36. サービスを使い続ける理由は？
行動
機能的なゴールの達成
情緒的なゴールの達成
習慣人格
途中で飽きさせず、諦めさせないことで
情緒的な満足感を得られるところまでサービスは貢献できる

37. コアターゲットの趣味嗜好にあうトーン＆マナー
何が響くのかはオンラインサーベイ等で実施可能
https://creativesurvey.com/

38. アニメーションによる差別化
Marketzine
fladdictさんが考える「手触りのあるアプリ」（前編）iOS 7のフラットデザインと、
これからのUIデザイン ： http://markezine.jp/article/detail/18196

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

40. おさらい
利用前
利用中
継続利用時
サービスを使うことでどんないいことがあるか想像させて、利用を促す
ユーザーがやりたいこと、事業者がしてもらいたいことに
貢献できる要素をビジュアルで支える
ユーザーがなりたい姿に届くまで続けられるようビジュアルで支える

41. Webサイトとの比較
Webサイト
ユーザーに購入や共有などの
行動を促すサポート
サービス／アプリ
ユーザーにサービスの初回利用と
継続的な利用を促すサポート

42. 役割は同じ？

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

44. ここ数年で一番出来が良い出来は上々で
50年に1度の出来申し分の無い仕上がり
Webサイト
商品の広告を作っている
10年に1度の当たり年です

45. 美味しいワインを作って
たくさんの人に届けたいッ！
サービス／アプリ
商品そのものを作っている

46. 求められる役割は近いが、関与する対象が違う
Webサイト
商品の広告を作っている
サービス／アプリ
商品そのものを作っている

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

48. サービスのビジュアルデザインは、
相手の痛みに訴えて
「刺さる」表現ではなく、
使う人の生活に寄り添いながら
「支え続ける」表現であること