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

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

SlideShare for iOS

Views

Actions

Embeds 2

Report content

Transcript