alt属性をよくわかっていなかった私が代替テキストを書けるようになった話

<!-- 改善前の代替テキスト -->
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_05.jpg" 
alt="タスクベースとオブジェクトベース"></p>

<!-- 改善後の代替テキスト -->
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_05.jpg" 
alt="ユーザーがタスクを選んでからオブジェクトを選択するタスクベースのUIは動詞→名詞の構文になっており、
ユーザーがオブジェクトを選んでからそれに対するアクションを自由に選ぶオブジェクトベースのUIは名詞→動詞の構文になっていて
ユーザーがオブジェクトを直接操作できます。"></p>

<!-- Before: 改善前の代替テキスト -->
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_01.jpg" alt="UXのハニカム構造・UXの4つのレベル"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_02.jpg" alt="ペパボデザインスキームから見るUIの役割"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_03.jpg" alt="Designer's ModelとUser's Model"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_04.jpg" alt="UIデザイン+α"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_05.jpg" alt="タスクベースとオブジェクトベース"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_06.jpg" alt="見極めをミスっている例"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_07.jpg" alt="最初の概念清書図とアップデートした関係"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_08.jpg" alt="UIのワイヤーフレームのBefore/After"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_09.jpg" alt="minneの検索結果の2列表示と3列表示"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_10.jpg" alt="ベリーピッキングモデル"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_11.jpg" alt="試験内容（シチュエーション）と被験者の操作モチベーション"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_12.jpg" alt="実際のユーザビリティテストの様子"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_13.jpg" alt="新卒デザイナーの自己紹介一部"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_14.jpg" alt="Webアクセシビリティ・ガイドラインの位置づけ"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_15.jpg" alt="Webアクセシビリティ・ガイドラインの内容 - インタラクションラベル"></p>

<!-- After: 改善後の代替テキスト -->
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_01.jpg" alt="UXのハニカム構造では図の中心にvaluable（価値がある）が配置され、その周囲に残りの6つの要素であるaccessible（アクセスできる）、usable（使える）、useful（役に立つ）、findable（見つけられる）、credible（信頼できる）、desirable（望ましい）が等しく配置されています。この周囲に配置された6つの要素によって体験が構成され、これらの組み合わせによって中心のvaluable（価値がある）な体験が生まれます。逆に、これらの6つの要素のうちどれかが欠ければ価値を損なう体験となってしまいます。ここではvaluable（価値がある）を中心に残り6つの要素を均等に配置していますが、7つの要素をピラミッド状に配置した図がUXの4つのレベルです。下から順に、アクセスしやすい、利用しやすい、安心しやすい、満足しやすいの4つのレベルに分けて、アクセスしやすいのレベルにaccessible（アクセスできる）、利用しやすいのレベルにusable（使える）とfindable（見つけられる）、安心しやすいのレベルにuseful（役に立つ）とcredible（信頼できる）、満足しやすいのレベルにvaluable（価値がある）とdesirable（望ましい）がそれぞれ配置されています。このピラミッド構造を見ると下部のレベルに配置された要素が上部のレベルの要素の前提となっており、そのすべての前提としてアクセスできることが体験の土台にあることがわかります。"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_02.jpg" alt="ペパボデザインスキームはペパボにおけるデザインという仕事の構造図ですが、その中でもプロダクトの部分を拡大して注目します。サービスとして私たちペパボが提供するツールと、そのツールをユーザーが使うという行動によってプロダクトが成り立ち、ツールを使って起きたことをユーザーが知覚・認識し、意識・行動が変化する一連の流れを体験としてこのプロダクト部分の図では表しています。"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_03.jpg" alt="システムがどのように動作しているようにみえるか」というメンタルモデルは、「こう思わせたい」というデザイナーの意図（デザイナーズモデル）と、「こう思った」という実際にツールを使ったユーザーの認知（ユーザーズモデル）によって構成されています。この両者のモデルの間にUIが境界面として存在しています。"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_04.jpg" alt="他のエキスパートスキルから多角的にUIデザインにアプローチする例としては次のようなことが考えられます。たとえば、IAの観点ではユーザーがシステムを理解して使えるためのオブジェクト設計、コミュニケーションデザインの観点ではコンテキストに沿ってユーザーを理解に導くマイクロコピー、エンジニアリングの観点ではシステムモデルを理解したオブジェクト設計と実現可能なUI設計、リサーチの観点では検証に基づく優れたユーザビリティのUI、最後にビジュアルデザインの観点ではユーザーが思わず使ってみたくなる外観のデザインにアプローチすることができます。このようなUIデザイン+αでより良い体験につなげられます。"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_05.jpg" alt="ユーザーがタスクを選んでからオブジェクトを選択するタスクベースのUIは動詞→名詞の構文になっており、ユーザーがオブジェクトを選んでからそれに対するアクションを自由に選ぶオブジェクトベースのUIは名詞→動詞の構文になっていてユーザーがオブジェクトを直接操作できます。"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_06.jpg" alt="見極めをミスっている例として、「タスクベースのほうが道順もあるし説明的だから、多くのユーザーにとってわかりやすそう！」「オブジェクトベースだと自由度が高すぎて使いこなすまで時間がかかるし、ユーザーは不安になるだろう」といった理由から「とっつきやすさだけをとってタスクベースを採用してしまう」ことが挙げられます。しかしユーザーは時間軸によって変化するものです。最初はタスクベースのほうがわかりやすいかもしれませんが、長期的に使われたり接触頻度の高いプロダクトの場合は自由度が高いOOUIのほうが結果的に生産性を高められます。なのでユーザーの状態を見定めるのが大事です。"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_07.jpg" alt="最初の概念清書図では、最初に切り分けた概念だけを並べてオブジェクトの関係性を示そうとしており、ユーザーの操作やその操作を束ねるオブジェクトが抜けています。アップデートした関係図では、用語集をレベル1（概念）とレベル2（UIとユーザ行動）に分割し、関係図もレベル1（概念）にかぶせる形でレベル2（UIとユーザ行動）を追加しています。"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_08.jpg" alt="UIのワイヤーフレームのBefore/Afterを比較します。Beforeでは左側に検証する文章があり、右側にトーンの名称と校正の提案内容が表示されています。しかし外観では左側はエディターになっているわけではなく、トーンも名称が表示されているだけなので入力できることや選択できることなど、ユーザーの操作が明示されていません。AfterではRaw Text EditorやTone Selectorなど新しく追加されたインタラクションレベルのオブジェクトが反映され、ユーザーの操作とオブジェクトの関係性が明確になり、わかりやすいUIになりました。"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_09.jpg" alt="minneの検索結果の2列表示と3列表示を並べて比較してみます。たしかに2列表示では一画面で4点の作品が見えるのに対して、3列表示では一画面で9点の作品が一覧できており、その差は2倍以上です。一方で、3列表示では作品の写真もかなり小さくなり、作品の詳細が2列表示よりも見づらかったり、なかにはお気に入りボタンが作品に被ってしまっているものも見受けられます。"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_10.jpg" alt="人は情報を知ろうとする時、そもそも何を知ろうとしているかわかっていません。答えは自明ではありませんし、そもそも問いも自明ではありません。探索する中でインタラクティブに問いを確立していき、そしてそのインタラクションを通して物事を理解していく探索行動のプロセスをベリーピッキングモデルと言います。"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_11.jpg" alt="今回のムームードメインのカレンダー連携機能を実装した事例でのユーザービリティテストでは、試験内容（シチュエーション）と被験者の操作モチベーションを次のように設定します。試験内容：「カレンダー連携機能がリリースされたと知ったユーザーは、ログイン後、要素の多いトップページの中でその機能を試すことができるか？」というシチュエーション設定で、存在を認知できるのかを検証。被験者の操作モチベーション：被験者は全員ムームードメインでドメインを取得・所持しているユーザーで、「あなたはexample.comというドメインを所持しており、自動更新は設定しないタイプである。そんな中、ドメインの有効期限をカレンダーに登録できる機能がリリースされた、という情報を得たユーザーは、自動更新設定はしないけど継続する・しないの検討はしたいので、検討し忘れを防ぐためにカレンダー機能を試してみようと思った」という設定で操作をしてもらう。"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_12.jpg" alt="実際のユーザビリティテストの様子。ターゲットユーザーと同じ条件で、かつ今回の設計の背景・詳細を一切知らない人物であるkotarokさんを被験者に、実装する前にプロトタイピングツール「Prott」でプロトタイプしたUIを実際に操作してもらっています。"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_13.jpg" alt="新卒デザイナーの自己紹介スライドから一部抜粋。まりりんは大学院で「公園に旗をさすことで居心地の良い空間と新しいコミュニティを作る提案」をしたことがあり、その提案に使用されているイラストからは提案のメッセージやストーリーが伝わってきます。ぐーちーは「特文」というペンネームで漫画家・イラストレーターをしていて、Webサイト「electromonkey」（https://electromonkey.net/）にその活動内容が掲載されています。"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_14.jpg" alt="ペパボのWebアクセシビリティ・ガイドラインの位置づけを示すと、WCAGを参照しているAmeba Accessibility Guidelinesやfreeeアクセシビリティー・ガイドラインをさらに参照する形でペパボのWebアクセシビリティ・ガイドラインが成り立っており、ペパボのデザインプリンシプルで規定されている「アクセシブルであること」はこのペパボのWebアクセシビリティ・ガイドラインを参照しています。ペパボデザインプリンシプル→ペパボのWebアクセシビリティ・ガイドライン→Ameba Accessibility Guidelinesやfreeeアクセシビリティー・ガイドライン→WCAGの順に、その内容はシンプルものから複雑なものになっています。"></p>
<p><img src="/blog/2020/07/07/designers-meeting-issue10/img_15.jpg" alt="ペパボのWebアクセシビリティ・ガイドラインの内容を一部抜粋した、インタラクションラベルについての記述部分のスクリーンショットです。内容は次のとおりです。見出し：「インタラクションラベル」本文：「インタラクションラベルとは、リンクテキストや、UIの操作を導くボタンのラベルなど、そのラベルを契機にアクションを誘発するような要素、およびそのラベルのことを指します。・インタラクションラベルの予測と期待を合わせる。リンクテキストは、リンク先のページタイトルを使用する。コンテキストによっては、リンク先のタイトルがユーザーの予測に必ずしもマッチしないことがある。その場合はユーザーにとって正しい予測を導くラベルを設定する。・「スクロール」「〜をクリック」「〜ボタンを押してください」のような自己言及的なラベルは避ける。「〜について」「〜はこちら」は書いても情報が増えないので、原則使用しない。・ボタンなどのUIラベルやマイクロコピーについての詳細は、ガイドラインを参照すること。」詳しく学べる資料（それぞれ参照先にリンク）：「エー イレブン ワイ［WebA11y.jp］: リンクテキスト［テキストリンク］、Ameba Accessibility Guidelines: 2.4.4 リンクの目的を理解できるようにする、freeeアクセシビリティー・ガイドライン: リンク・テキストの文言、freeeアクセシビリティー・ガイドライン: テキスト情報の文言とアクセシビリティー"></p>