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

PDF資料です、画面右側のダウンロードアイコンよりダウンロードしてご活用ください。
▼読了後アンケートのご協力をお願いいたします。（4問のみ）
https://cxclip.karte.io/practice/4230/#kartedesign

Transcript

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