ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog

テクノロジー

「安心・安全」という『見えない概念』を可視化するUI設計アプローチ(グッドデザイン賞受賞!)

こんにちは。デザイナーとしてYahoo!メールを担当している大石 薫子です。

Yahoo!メールの「セキュリティ・プライバシーへの取り組み」はこの度、グッドデザイン賞2022(外部サイト)を受賞いたしました!
今回の記事ではグッドデザイン賞受賞のきっかけとなった、「安心・安全」という『見えない概念』を可視化するためのUIへのアプローチ方法をご紹介します。

Yahoo!メールが2,400万人に利用される中、年々増加しているなりすましメール被害

Yahoo!メールは月間2,400万人(日本人の約5人に1人)に利用されています。
そんな中、なりすましメール被害は近年社会問題として多く取り上げられており、フィッシング対策協議会(月次報告書)(外部サイト)によると、2021年中のフィッシング報告件数は52万6,504件で前年から2倍以上増加したそうです。

フィッシング報告件数の推移

多くの方に利用されるYahoo!メールの責任として、メール利用の不安を取り除くため、「メールを送信する企業、メールを受け取る個人の両名に安心安全を提供できる方法はないだろうか?」と考えました。

「安心・安全」という『見えない概念』を可視化するために

課題

なりすましメール被害が増加している原因の1つに「なりすましメールの巧妙化」があります。
メールの送信者名や本文の内容を本物のメールそっくりに偽装し、ユーザーを騙そうとします。

改善前のYahoo!メールは、どれが怪しいメールなのか、逆にどれが開いて良いメールなのか、メール一覧のUI上で全く違いが分かりませんでした。

改善前のメール一覧

もし仮になりすましメールだったとしても、この状態ではユーザーは危険を冒してメール詳細を確認するしかなく、メール詳細を確認しても本物そっくりに偽装されているので被害にあってしまう可能性が高い状態でした。

実施したこと

なりすましではなく、本物の送信者から送信されたことが確認できたメールにその企業のロゴを表示する「ブランドアイコン」と、「ブランドアイコン」にて参画が難しい企業において商標権を侵害しない「色」で安全性を伝える「ブランドカラー」という、メール一覧で安心・安全を届ける取り組みを開始しました。
どちらもメールの認証技術によって本物の送信者であると確認できたメールだけにロゴや色が表示されるので、なりすましかどうかを判断できます。

また、iPhone/iPad版アプリ、パソコン版Yahoo!メール、スマートフォン版Yahoo!メールではなりすましの可能性があるメールにアラートアイコンと注意喚起の表示を行う取り組みも新たに開始し、ひと目で安全なメールを見分けられるようになりました。

改善後のメール一覧

正しく送信されているかどうかの判定にはメール認証技術(SPF・DKIM・DMARC)を利用していますが、そちらについては以下の記事をご確認ください。

工夫したポイント

ユーザーの潜在的な知識を使うことで、学習コストを下げつつ「安心・安全」を提供できた点です。

専門性の高いメール認証技術について、全てのユーザーに認証結果の見方を理解していただくことは非現実的です。しかし、「メール」という幅広い世代が利用するツールにおいて、どのユーザーでも安全性を理解できる状態にする必要がありました。そこで、誰もが理解でき、一番「安心感」を出せるモチーフは何かと考え、結果、その企業やサービスのロゴを表示することになりました。

では、なぜロゴや色を表示するだけで「安心感」が出せるのでしょうか?
それは、ユーザーの頭の中に『この企業(サービス)はこのロゴである』という前提知識があるからだと考えます。

「ユーザーが受け取っているメール」とは、「そのユーザーが利用している(利用したことがある)サービスからのメール」と言い換えられます。つまり、そのメールを受け取っているユーザーはどこかで必ず1度は企業ロゴやサービスロゴを見ているはずなのです。そのため、ロゴだけで「公式のものだ」と感じ、またロゴに使われている色だけでも「安心感」を与えられます。また、「ブランドアイコン」におけるロゴ表示は各企業の協力のもと実現しており、各企業がメールの認証技術を知る機会、取り組み参画をPRするきっかけを創出できたため、当初の目的だった「メールを送信する企業、メールを受け取る個人の両名に安心安全を提供」を達成できました。

また、ボツになったアイディアとして企業ロゴではなく、SNSの公式アカウントマークのようなチェックマークを表示するアイディアもありました。ただ、メールを選択する画面ですでにチェックマークを使っていたため、ユーザーの潜在意識でどんな見せ方であれメールを選択しているように見えてしまうのです。

ボツになった案

このようにユーザーの潜在的な知識を使うことで、ユーザーの学習コストを抑えつつ、目に見えない「安心・安全」を可視化できました。

おわりに

今回の記事では「安心・安全」という『見えない概念』を可視化するための手法をご紹介しました。「安心・安全」だけでなく、まだまだ可視化が難しい『見えない概念』はたくさんあると思います。

今年はメールの他もあわせて4件のグッドデザイン賞を受賞しました。ヤフーのデザイナーは、グッドデザイン賞への応募を以下のような機会として大事にしています。

  • グッドデザイン賞は見た目だけでなく、プロダクト価値と意義を再発見できる取り組みである(発信と、自分たちの再認識)
  • インハウスデザイナーはコンペなど他社と競う機会が無いが、グッドデザイン賞は、ある意味他社との相対的な位置を確認できる育成機会

ご自身が担当しているサービスをお客様により心地よく使っていただくために、この記事が皆様のご参考のひとつになれば幸いです。


ブランドアイコンに興味を持ってくださった企業様へ
下記ページにて、お申し込み方法や導入によるメリット、よくあるご質問についてもご説明させていただいております。Yahoo!メールにブランドアイコンを掲載ご希望の企業様は、ぜひご一読の上お申し込みください。

こちらの記事のご感想を聞かせください。

  • 学びがある
  • わかりやすい
  • 新しい視点

ご感想ありがとうございました


大石 薫子
Yahoo!メールデザイナー
Yahoo!メールiOS領域のデザインと、「ブランドアイコン」や「ブランドカラー」の運用を行うプロジェクトのPMを担当しています。先日、色彩検定UC級に合格しました。

このページの先頭へ