Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

KARTEでできるデザインの活用

759 views

Published on

▼読了後アンケートのご協力をお願いいたします。
https://cxclip.karte.io/practice/4230/#kartedesign

Published in: Business
  • Be the first to comment

  • Be the first to like this

KARTEでできるデザインの活用

  1. 1. 1|    © PLAID, Inc    |    Confidential        でできるデザインの活⽤
  2. 2. 2|    © PLAID, Inc    |    Confidential KARTEを使って、⽇々変化する状況に合わせたインフォメーションを配信する機会が増えている かと思います。 正しく適切なタイミングでインフォメーションをお届けするために、デザインの基本原則やおす すめのテンプレート、配信設定のTipsなど、すぐにご活⽤いただける情報を「KARTEでできるデ ザインの活⽤」としてまとめました。 インフォメーションの伝え⽅からも顧客体験を変えていく、その⼀助になれば幸いです。 - PLAID Customer Experience Team はじめに
  3. 3. 3|    © PLAID, Inc    |    Confidential デザインの基本原則 正しく活⽤し、伝わりやすいデザインへ
  4. 4. |    © PLAID, Inc    |    Confidential 4つの基本原則 近接 整列 反復 対⽐ Design Principles
  5. 5. |    © PLAID, Inc    |    Confidential 近接 関連する項⽬を近づけることで、まとまりのあるグループ であることをユーザーに知ってもらうための⽅法。 近づけたり離したりすることでグループ化できる。 Design Principles 4つの基本原則 要素の余⽩が⼀定
  6. 6. |    © PLAID, Inc    |    Confidential • ⼈は⽬に⾒える要素をバラバラではなくグループ化して 理解するから • ⼈は無意識に分類してしまうから • ⼈が⼀度に認識できる数には限りがあるから Design Principles 4つの基本原則 なぜ近接させることが重要なのか? GOOD 関係する要素の余⽩ 関係しない要素の余⽩
  7. 7. |    © PLAID, Inc    |    Confidential 整列 ページ上に配置するものを意識的に揃えること。 要素が離れていても、整列すれば⾒えない線で紐付けるこ とができる。 Design Principles 4つの基本原則
  8. 8. |    © PLAID, Inc    |    Confidential • ⼈の視覚野には、縦線、横線、端、斜め40度のような 特定の図形に反応する細胞がある • 基準となる線が無いと、視線が泳いでしまい読みにくさ の原因となる • 物事のあらましをつかむ際には周辺視野が使われる Design Principles 4つの基本原則 なぜ整列させることが重要なのか? GOOD
  9. 9. |    © PLAID, Inc    |    Confidential 反復 デザイン上の何かの特徴を、全体を通じて繰り返し使う⽅ 法。繰り返すことでリズムになり、同じ機能をもったグ ループだと認識できる。 Design Principles 4つの基本原則
  10. 10. |    © PLAID, Inc    |    Confidential • ⼈が⽬で素早く物を認識できるのは、対象をパターン化 して認識しているから • 複数の情報を1つのパターンとして定義し、繰り返し使 うことで、⼈はそのグループ全体を1つの種類の情報の 集合体として捉えることができます Design Principles 4つの基本原則 GOOD なぜ反復させることが重要なのか?
  11. 11. |    © PLAID, Inc    |    Confidential 対⽐ はっきりした違いを出すことで、情報の区切りを明確にす る⽅法。要素にメリハリが出ることで、読みやすさを上げ ることができる。視線を誘導したい時にも⽤いられる。 Design Principles 4つの基本原則
  12. 12. |    © PLAID, Inc    |    Confidential • タイトル/メインコピー/本⽂という⽂字のレベルを区別 して、⼤きさを使い分ける • ⽂字の⼤きさだけではなく、太さでも対⽐を表現できる • ⾊の濃淡でも表現できる • ⽬⽴たせる要素の数は、増えすぎないよう管理すること が必要 Design Principles 4つの基本原則 GOOD 対⽐させるために必要なことは?
  13. 13. 13|    © PLAID, Inc    |    Confidential インフォメーションの伝え⽅       でできること
  14. 14. 14|    © PLAID, Inc    |    Confidential インフォメーションの伝え⽅ 情報を整理し、読みやすさを意識する
  15. 15. |    © PLAID, Inc    |    Confidential コミュニケーションであることを意識しましょう。 より多くの情報を伝えようとした結果、⽂字数が多くなりすぎて、読 みにくくなったり、読み⾶ばされたりすることで、伝えたいメッセー ジが届かないのは本末転倒です。 ⽂字や⽂章の⾒やすさやはデザインにおいて⾮常に重要です。 読みやすく、ちょうどいい⽂字数にすることを⼼がけましょう。 ☝ POINT 読みやすさを意識し、適切な⻑さで伝えるよう に⼼がけましょう インフォメーションの伝え⽅ • ⽂章を読みやすくするには、⾏間や⽂字間、⽂章の周りの余⽩ に意識するようにしましょう GOOD
  16. 16. |    © PLAID, Inc    |    Confidential GOODBAD ⽂字量が多く、⾏間もつまり気味 で、⽂章周りの余⽩も⼗分にとられ ていないため、読みづらく、読まれ ることなく閉じられる可能性が⾼く なります。 情報を整理し、⽂字量を調整した上 で、確実に届けたい情報を太字で⽬ ⽴たせることで、認知しやすくして います。
  17. 17. |    © PLAID, Inc    |    Confidential ☝ POINT ストア > 接客シナリオ > 「特定ユーザーへ関連特集をスライド形式で複数同時訴求」 スライダーを使ったテンプレート 👉 伝えるべき情報が多い場合、情報を整理し、ス ライダー形式のテンプレートを活⽤してみま しょう Tips • 情報を整理して分割する • それぞれのメッセージの詳細ページへの導線を設ける • 情報の重要度の⾼い順に並べる
  18. 18. 18|    © PLAID, Inc    |    Confidential インフォメーションの伝え⽅ ユーザー視点になって、情報を共有をする
  19. 19. |    © PLAID, Inc    |    Confidential サイト閲覧時に突然全画⾯を覆うようなモーダル表⽰や、⾏動を阻害 するようなサイズの⼤きい通知のメッセージはユーザーの体験を損ね る可能性があります。 確実に届けたい重要なメッセージや⼤規模なセールやイベント以外 は、モーダル表⽰は極⼒控え、「最⼩化」を利⽤し、ユーザーが能動 的に情報を閲覧できるようにしておくのがよいでしょう。 ☝ POINT ユーザーの⾏動を阻害することなく、メッセー ジを届けることを意識しましょう インフォメーションの伝え⽅ • 繰り返し伝えたいメッセージの配信はユーザーがコントロール できように配慮する GOOD
  20. 20. |    © PLAID, Inc    |    Confidential GOODBAD 最⼩化表⽰には開いた時の内容が想 起できるテキストやアイコンを使⽤ することで、ユーザーを正しく導く ことができます。 ⽬⽴たせたいという理由で、サイト で使⽤しているカラー以外を安易に 使⽤するのは控えましょう。
  21. 21. |    © PLAID, Inc    |    Confidential ☝ POINT テンプレート > やりたいことから探す > ユーザーに「⾒せる」 > 「バージョンがv2」もしくは 「タイトルに最⼩化」 最⼩化表⽰を使ったテンプレート 👉 繰り返し表⽰するメッセージの場合、最⼩化を 利⽤し、ユーザーが能動的に情報を閲覧できる ようにしておきましょう Tips • 緊急性かつ重要度の⾼いお知らせかを改めて確認する • ⼀定期間、継続して配信するか否かを判断し、配信の仕⽅を決 定する
  22. 22. 22|    © PLAID, Inc    |    Confidential インフォメーションの伝え⽅ 情報の質を分類し、適切な位置に適切な情報量で伝える
  23. 23. |    © PLAID, Inc    |    Confidential サイト内を回遊する度にポップアップでメッセージが表⽰されるよう な体験は避けなければなりません。 常に表⽰したい・認知してもらうために継続的に表⽰したい、といっ た情報は「埋め込み」テンプレートを利⽤し、特定の箇所にサイトの 要素として埋め込み表⽰させましょう。 どのようにコミュニケーションするかは情報の質や重要度で決めるこ とが、⼀貫した体験を提供する⼀歩になります。 ☝ POINT メッセージの重要度を整理し、どのように伝え るべきかを決めましょう インフォメーションの伝え⽅ • ⼀辺倒なコミュニケーションになっていないか再度確認しま しょう。正しく伝えるために伝え⽅も⼯夫しましょう GOOD 埋め込みで表⽰
  24. 24. |    © PLAID, Inc    |    Confidential GOODBAD サイトロゴやメニューバーなどのサ イトの導線を隠しているので、ユー ザーの⾏動を阻害しています。 明確にボタンを配置することで、詳 細情報の存在を認知させることがで き、ユーザーを迷わせることなく誘 導することが可能です。 下部固定でスクロール率で⾮表⽰に するなどの設定を⾏うと、ユーザー の⾏動を阻害しないいましょう。 埋め込みを利⽤すれば、導線を隠す ことなく⼤事な情報を伝えることが できるようになっています。 詳細情報へのリンクが他のテキスト と同様の扱いなので詳細情報がある ことを認識しづらくなっています。
  25. 25. |    © PLAID, Inc    |    Confidential ☝ POINT サイト内で常に⾒せたいメッセージがある場 合、埋め込みを活⽤し、ポップアップが過多に ならないように注意しましょう Tips • 期間が決まっている施策で、配信ページが明確の場合、サイト の要素であるように訴求することを意識する • サイトの要素のように違和感ないように表⽰する テンプレート > やりたいことから探す > ユーザーに「⾒せる」 >「埋め込み」> 「埋め込み - HTMLを変更・挿⼊する」 埋め込みテンプレート 👉 埋め込みで表⽰ ※埋め込みテンプレートはご利⽤開始にあたり弊社側での設定が必要になります。また、ご契約内容に よっては利⽤できない場合もありますので、カスタマーサクセス担当までお問い合わせください。
  26. 26. 26|    © PLAID, Inc    |    Confidential インフォメーションの伝え⽅ 適切な配信頻度や配信制御の設定を⾒極める
  27. 27. |    © PLAID, Inc    |    Confidential ⼀度確認すれば、来訪のたびに表⽰する必要のないメッセージを配信 し続けるのは良い体験とは⾔えません。 表⽰回数の上限や、クリック回数、閉じられた回数で配信を制御する 配信停⽌条件を必ず設定しておきましょう。 同じページ内に複数のポップアップが出ることはかなりの確率でユー ザー⾏動の阻害=邪魔と認識されます。 ☝ POINT 同じメッセージを⻑期間出し続ける場合、配信 停⽌条件を設定しましょう インフォメーションの伝え⽅ • ⾃分⾃⾝が不快・邪魔と感じる回数はおおよそ間違っていない と思います。ユーザー視点になって決定しましょう
  28. 28. |    © PLAID, Inc    |    Confidential ☝ POINT ストア > 接客シナリオ > 「サポート時間変更のお知らせを適正な⽅法で通知する」 再表⽰しないボタンを使ったテンプレート 👉 繰り返し表⽰するメッセージには再表⽰しない ボタンを設置して、表⽰頻度の制御をユーザー が選択できるよう配慮しましょう インフォメーションの伝え⽅ • 配信停⽌条件で設定した上で、ユーザー側にも配信制御のコン トロールをできようにする GOOD ⼀度確認すれば、来訪のたびに表⽰する必要のないメッセージを配信 し続けるのは良い体験とは⾔えません。 表⽰回数の上限や、クリック回数、閉じられた回数で配信を制御する
  29. 29. |    © PLAID, Inc    |    Confidential GOODBAD 同じメッセージが来訪の度に何度も 表⽰されるのは、有益な情報であっ てもユーザーにとっては邪魔になる 可能性があります。 「今後表⽰しない」のように、ユー ザー側で表⽰の制御ができるように すると、体験を損ねることはありま せん。
  30. 30. 30|    © PLAID, Inc    |    Confidential インフォメーションの伝え⽅ 遷移先にどんな情報があるか明確に表現する
  31. 31. |    © PLAID, Inc    |    Confidential 接客にリンクを設定している場合、遷移先のページにどのような情報 が記載されているか判断できる表現にしましょう。 遷移したものの有益な情報を得られなかった場合、ユーザーにとって は無駄な⾏動になってしまいます。ただし、接客内での情報量が多く なっては意味がありません。適切なテンプレートと⽂章量になるよう に意識しましょう。 ☝ POINT ユーザーにとって有益な情報かどうか判断でき る表現を⼼がけましょう インフォメーションの伝え⽅ • すべて⽂章で伝えるのは難しいですが、リスト型のテンプレー トを利⽤すれば、必要な情報を判断しやすくなります GOOD
  32. 32. |    © PLAID, Inc    |    Confidential GOODBAD ⾒る⼈を不安にさせるような⾊はで きるるだけ避けましょう。サイトに あった落ち着きのある⾊を選択しま しょう。 ユーザーの知りたい情報によって導 線を分けることで、ユーザーを迷わ すことなく、最短で情報にアクセス できるようになります。 詳細情報にどんな情報があるのか想 起できる⽂章とボタンの内容にする 必要があります。
  33. 33. 33|    © PLAID, Inc    |    Confidential インフォメーションの伝え⽅ ユーザーに何かしらの⾏動を促す
  34. 34. |    © PLAID, Inc    |    Confidential ただ単に情報の共有だけでは、ユーザーは思うように⾏動してくれま せん。ユーザーが⾏動しやすくなるように⽂章やボタンの表現を⼯夫 し、迷わせることなく、正しく誘導していきましょう。 ボタンを視覚的に強調するのも⼀つの⼿段ですし、簡易的な説明の後 に、詳細説明が記載されているページへのリンクを設置するのも有効 な⼿段となります。 ☝ POINT CTA(Call to Action)が⾃然に⾏われるよう に構成を意識しましょう インフォメーションの伝え⽅ • CTAを意識しすぎるあまり、煽るような表現をするのは控えま しょう。わかりやすい表現になってることを確認しましょう。 GOOD
  35. 35. |    © PLAID, Inc    |    Confidential GOODBAD 案内通りにそれぞれの遷移先を設け ることで、ユーザーが対象ページを 探すことなくスムーズに誘導できる ようになっています。 案内をしているものの、導線がない ので、ユーザーの⾏動はストップし てしまいます。適切なページへ遷移 できるようにしてあげましょう。
  36. 36. |    © PLAID, Inc    |    Confidential ☝ POINT 解決策は、ユーザーの環境や状況を考慮した選 択肢を複数⽤意し、⾏動を促進できるようにし ましょう Tips • 実現可能な⼿段を、ユーザーの状況や環境(同期/⾮同期性、 対⾯など)に合わせて複数⽤意する ストア > 接客シナリオ > 「電話やメールなどの「お問い合わせ」を常設表⽰」 おすすめのテンプレート 👉
  37. 37. 37 |    © PLAID, Inc    |    Confidential
  38. 38. 38|    © PLAID, Inc    |    Confidential アンケートのご協⼒のお願い アンケート結果は 今後の続編検討などに活⽤させていただきます。 回答時間⽬安:1∼2分(全4問) 📮 https://cxclip.karte.io/practice/4230/#kartedesign アンケートに回答する

×