2-1UXデザイン
レジ横のタブレットの前で迷うお客さんは、もういなくなりました。ところが今度は、通販サイトの予約フォームから届く注文がおかしいのです。郵便番号の欄に全角の数字が入っていたり、受け取り日が先週の日付になっていたりする注文が、この1週間で6件ありました。店長がスマートフォンで予約の画面を開くと、商品の表が画面の右へはみ出し、受け取り日の欄は指で押しにくいほど小さく出ます。店のノートに書かれた商品番号も、食パンが「1」、メロンパンが「SP-03」、クロワッサンが「くろわ」とばらばらで、在庫表と照らし合わせることができません。店長は誤った注文票を机に並べて言いました。「お客さんが気持ちよく買えるお店にしたいんだよ。どこから直せばいいのかな」。ミナトが相棒に相談すると、返ってきたのは画面の直し方ではありませんでした。
相棒の問いは「お客さんは、何をしたくてこのサイトに来ているのか」でした。焼き上がりの時間に合わせて受け取りたい人、贈り物のパンを遠くへ送りたい人、毎週同じ食パンを予約する人。入力欄の大きさや色を直す前に、その人たちがサイトを知り、予約し、パンを受け取り、また頼みたくなるまでの流れ全体を考えよう、という提案です。
製品やサービスを使う人が、使う前後を含めて得る体験（User Experience、UX）全体の質を高めるように設計することをUXデザイン（User Experienceデザイン）といいます。対象は画面の見た目や操作のしやすさだけではありません。「迷わずに予約できた」「受け取りのときに待たされなかった」「また頼みたい」と感じるところまでが含まれます。ボタンや入力欄の作りと操作の仕組み（UI）は、その体験を支える一部です。
予約フォームの誤りは、入力欄を直せば減るでしょう。ただ、お客さんが本当に困っているのが「受け取りの時間帯を選べないこと」だったとしたら、入力欄をどれほど整えても体験はよくなりません。どこから手を付けるかを決めるには、体験をいくつかの段階に分けて考える必要があります。
ここから基本情報！体験を5つの層に分ける
UXデザインを、抽象的な目的から具体的な見た目までの5つの層に分け、下の層から順に積み上げて考える枠組みをUXデザインの五段階モデルといいます。Jesse James Garrett が著書『The Elements of User Experience』で示したもので、下から順に次の5つが並びます。
いちばん下の戦略では、サイトで何を達成したいか（店の目的）と、利用者が何を求めているか（ユーザのニーズ）をはっきりさせます。こむぎ堂なら「焼きたてを、待たずに受け取ってもらう」が目的になります。その上の要件では、戦略を実現するために提供する機能と中身を決めます。受け取りの時間帯を30分ごとに選べる機能、焼き上がり時刻の一覧、予約の取り消し、といった具合です。
3段めの構造では、情報をどう組み立て、利用者がどの順に画面をたどるかを設計します。「商品を選ぶ→受け取り日と時間帯を選ぶ→連絡先を入れる→確認する」という流れを決めるのがこの層です。4段めの骨格では、それぞれの画面にどのボタンや入力欄をどこに置くか、メニューの配置を具体的に決めます。いちばん上の表層で、色・文字・写真など、利用者が実際に目にする見た目を仕上げます。
下の層ほど抽象的で、上の層ほど具体的になります。下の層が決まらないうちに上の層を作り込むと、手戻りが起きます。表層で店の色を選び終えたあとに戦略が「贈り物の注文を増やす」に変われば、構造から作り直すことになるからです。反対に、表層の試作を見て気づいた問題から、下の層へ戻って考え直すこともあります。
基本情報の範囲ここまで
ミナトは、予約フォームの誤りを「お客さんの入力ミス」として片づけないことにしました。間違えやすい画面を作ったのは店の側だからです。
2-2情報デザイン
店長が手書きした「本日の焼き上がり」のお知らせを、ミナトはそのまま予約サイトのトップに載せました。翌日、お客さんから「何時に何が焼けるのか分からない」と電話がありました。画面を見直すと、パンの名前と時刻と値段が、同じ大きさの文字で1列に詰め込まれていました。
書いてある中身は正しいのに、伝わらない。こうしたときに見直すのが情報デザインです。情報デザインは、目的や受け手の状況に合わせて、情報を目に見える形にし（可視化）、まとまりと順序を整え（構造化）、要素どうしの関係を分かりやすく示すための考え方と手法をいいます。
文字や図を画面や紙に配置するとき、手がかりになるのがデザインの原則（デザインの4原則）です。近接・整列・反復・対比の4つからなり、どれも「見た人が、説明を読む前に関係をつかめるか」を確かめる観点になっています。お知らせの画面で、一つずつ当てはめてみます。
関係のある要素を近くに置き、関係の薄い要素とは間をあけて、まとまりを示すのが近接です。「7:00」の下にその時刻に焼けるパンを寄せて置き、「11:00」の組とは行をあけます。要素の端や中心を見えない線にそろえて配置するのが整列で、パンの名前の左端と、値段の右端をそろえると、目で縦にたどれるようになります。
同じ役割の要素に、同じ色・形・大きさを繰り返し使って一貫性を持たせるのが反復です。時刻の見出しをどれも同じ茶色の太い文字にすれば、2つめからは説明がなくても「これは時刻だ」と分かります。大きさや色、太さに差をつけ、違うものを違うと示して重要な要素を目立たせるのが対比です。時刻は大きく、値段は小さくすると、目がまず時刻に向かいます。
ここから基本情報！文字・雰囲気・図の作り方
配置の次は文字そのものです。書体・文字の大きさ・行の間隔・字間・配置を調整して、読みやすさと見た目の印象を整える技法をタイポグラフィといいます。同じ「焼きたて」でも、丸みのある書体と角ばった書体とでは受ける印象が変わります。行の間隔が詰まりすぎると、長い説明は読む気をなくさせます。
サイト全体の雰囲気を決めるときは、言葉だけで「温かい感じ」と伝えても、人によって思い浮かべるものが違います。そこで、本格的なデザインに入る前に、色見本・写真・素材・文字の見本などを集めて1枚にまとめ、方向性を共有するための資料を作ります。これをムードボードと呼びます。店長とミナトは、小麦色の写真や木の棚の写真を集めたムードボードを見ながら、サイトの色を決めました。
お知らせに添える地図やアイコンは、図形を点・線・面の座標や数式のデータとして扱う作画ソフト、ドローソフトで描くと扱いやすくなります。図形がベクタ形式で保存されるので、スマートフォンの小さな画面でも店頭の大きな貼り紙でも、拡大・縮小して輪郭が粗くなりません。点（画素）の集まりとして絵を描くペイントソフトでは、拡大すると輪郭のギザギザが目立ちます。
基本情報の範囲ここまで
4つの原則を当てはめ直したお知らせは、文字の量が同じままでした。変わったのは置き方だけです。それでも、翌日の電話の問い合わせはありませんでした。
2-3図とグラフで見せる
商店街の会合で、店長は「通販を始めてから何が売れているか」を話すことになりました。ミナトが売上の表を印刷して渡すと、店長は数字の列を目で追って、しばらくして顔を上げます。「で、結局どれが伸びてるの」。
数字の表は正確ですが、全体の傾向を読み取るには時間がかかります。情報やデータを、図やイラスト、記号を組み合わせて、ひと目で分かるように表現したものをインフォグラフィックといいます。駅の路線図や、天気予報の地図に並ぶ晴れ・雨の絵もインフォグラフィックです。こむぎ堂なら「1日に焼く食パンは何斤で、そのうち何斤が通販で売れるか」を、パンの絵の数で見せることができます。
グラフは、見せたいことに合わせて種類を選びます。全体を100%として、各項目の割合を扇形の大きさで表すのが円グラフです。通販の売上のうち食パンが45%、菓子パンが30%、調理パンが25%なら、食パンが半分近くを占めることがすぐに伝わります。円グラフが得意なのは、ある1時点の構成比を見せることです。
ここから基本情報！構成比を並べて比べる
去年と今年で構成比がどう変わったかを見せたいとき、円グラフを2つ並べると、扇形の角度を見比べることになって違いがつかみにくくなります。そこで、1本の長方形を区切り、区分の長さで構成比を表す帯グラフを使います。同じ長さの帯を年ごとに上下に並べれば、食パンの区分が去年より右へ伸びたことが、区切りの位置のずれで見えます。
基本情報の範囲ここまで
3つの数値を一度に見せたいときもあります。2つの数値を横軸と縦軸の位置で表し、3つめの数値を円の大きさで表す図をバブルチャートといいます。横軸を1か月の販売個数、縦軸を利益率にとり、円の大きさを売上金額にすると、「たくさん売れて利益率も高く、売上も大きい」商品は右上の大きな円として目に入ります。
ここから基本情報！売上の傾向を3本の線で見る
売上が伸びているのか、季節で上下しているだけなのかを見分けるにはZグラフを使います。1年分について、月ごとの売上、年度の初めからの累計、移動合計の3本の折れ線を1つの図に描きます。移動合計は、その月までの直近12か月の売上の合計です。3本の線がアルファベットのZのような形に並ぶことから、この名前があります。
移動合計の動きは、小さな計算で確かめられます。10月の移動合計は、前の年の11月から今年の10月までの12か月の合計です。9月の移動合計と比べると、前の年の10月が抜けて、今年の10月が入っています。今年の10月の売上が前の年の10月より5万円多ければ、移動合計は9月より5万円増えます。つまり移動合計の線が右上がりなら、季節の上下を除いても売上が前の年より伸びている、と読めます。
基本情報の範囲ここまで
会合の前の晩、店長はミナトが作った円グラフを1枚だけ選びました。「みんなに伝えたいのは、食パンが半分近いってことだけだから」。どのグラフを使うかは、図を見た人に何を受け取ってほしいかで決まります。
2-4画面設計と帳票設計
ミナトは、この1週間に届いた誤った注文を1件ずつ並べ直しました。郵便番号が全角の「６３０」で終わっているもの、受け取り日が先週の火曜のもの、個数の欄に「二つ」と書かれたもの、存在しない会員番号が入ったもの。どれも、送信のボタンを押した時点では何も止められずに届いていました。
画面の設計で、まず整えるのは入力の流れです。紙の申込書と同じように、名前・連絡先・受け取りの順で上から下へ自然に進めるようにし、関係のある欄は近くに置きます。色の使い方にも決まりを作ります。こむぎ堂の予約フォームでは、赤は誤りを知らせるときだけに使い、色だけに頼らず「受け取り日は明日以降を選んでください」と文字でも示すことにしました。欄の横には「半角数字7けた」のような操作のガイダンスを出して、入力する前に何を求めているかを伝えます。
ここから基本情報！画面の組み立てと入力チェック
画面に表示する項目を選び、利用者が内容をつかみ、迷わず操作できるように配置とレイアウトを決めることを画面構成といいます。画面構成で手がかりにするのは、項目どうしのつながりです。見出しとその下の本文、「受け取り日」と「受け取り時間帯」のような対になる項目、「お届け先」の中に含まれる郵便番号と住所といった、階層・順序・包含などの結び付きを情報の関係性と呼びます。この関係を、項目の並び順や囲み、見出しの大きさで画面に表すと、利用者は説明を読まなくても構造をつかめます。
画面の形を整えても、誤ったデータはまだ入りえます。そこで、受け付ける前にコンピュータで入力を確かめる入力チェックを組み込みます。代表的なものを、こむぎ堂の予約フォームに当てはめて表にしました。
| チェック | 確かめること | 予約フォームでの例 |
|---|---|---|
| ニューメリックチェック | 数字だけでできているか | 個数の欄に「二つ」と入ったら受け付けない |
| フォーマットチェック | 桁数や文字の種類などの形式に合っているか | 郵便番号が半角数字7けたになっているか |
| リミットチェック | 値が上限と下限の範囲に入っているか | 受け取り日が明日から30日後まで、個数が1から20まで |
| 組合せチェック | 複数の項目の値の組み合わせが許されたものか | 店頭でしか売らないパンに、受け取り方法「配送」を選んでいないか |
| 照合チェック | 台帳やマスタのデータと一致するか | 入力した会員番号が会員の台帳に登録されているか |
| バランスチェック | 関連する数値どうしの関係（合計や差）が成り立つか | 明細の金額を足した値と、合計の欄の金額が一致するか |
先週の誤りに当てはめると、全角の郵便番号はフォーマットチェックで、先週の日付はリミットチェックで、「二つ」はニューメリックチェックで、存在しない会員番号は照合チェックで止まります。チェックは送信の後だけでなく、入力した直後にその欄の横で知らせると、利用者はどこを直せばよいかすぐに分かります。
会員番号の打ち間違いは、台帳と照らす前に見つける方法もあります。元の番号から決まった計算で求めた検査用の文字を、番号の末尾などに付けておくのです。この文字をチェックキャラクター（数字ならチェックディジット）といいます。こむぎ堂の会員番号を3けたの番号＋検査用の1けたとし、3けたに左から3・2・1を掛けて足した値を10で割った余りを検査用の数字にするとします。番号125なら、1×3＋2×2＋5×1＝12で、余りは2なので、会員番号は「1252」です。誰かが2と5を入れ替えて「1522」と打つと、1×3＋5×2＋2×1＝15で余りは5になり、末尾の2と合いません。打ち間違いが、台帳を見るまでもなく分かります。商品のバーコード（JANコード）の最後の1けたも、同じ考え方で付けられた検査用の数字です。
基本情報の範囲ここまで
画面と同じ考え方が、紙の書類にもあてはまります。注文票や受け取り票のように、決まった形式でデータを印刷して使う書類を帳票といい、その項目や配置を決めることを帳票設計といいます。関連する項目（受け取り日と時間帯など）は隣に置き、作業に要らない情報は削って必要最小限にし、店の帳票はどれも同じ位置に同じ項目が来るように決まりをそろえます。こむぎ堂の受け取り票は、いちばん上に大きく受け取り時刻、その下に名前とパンの一覧、という順に統一しました。
ここから基本情報！枠と中身を重ねて印刷する
罫線や見出しをあらかじめ印刷した専用の用紙（印刷済みの帳票）を使うと、様式を変えるたびに用紙を刷り直すことになります。そこで、罫線・枠・見出しなどの決まった部分を様式としてプリンタやソフトウェアに登録しておき、印刷するときに、その様式と注文のデータを重ね合わせて普通の白い紙に出力する方法があります。これをフォームオーバーレイといいます。様式を変えたいときは、登録しておいた様式のデータを差し替えれば済みます。
基本情報の範囲ここまで
2-5コード設計
在庫表と注文の一覧を照らし合わせようとして、ミナトの手が止まりました。注文には「SP-03」、在庫表には「メロンパン」、店長のノートには「3」。同じパンなのに、書いた人ごとに呼び名が違うのです。新しく出した「くるみパン」には、まだ番号すら付いていませんでした。
商品や会員のように、システムで扱う対象を一つずつ見分けるための番号や記号をコードといいます。コンピュータは「メロンパン」と「めろんぱん」を別のものとして扱うので、同じ対象にはいつも同じコードを付けなければなりません。コードを決めるときは、ほかの対象と重ならないこと、桁数をそろえること、将来商品が増えても足りること、を確かめます。そのうえで、コードに意味を持たせるかどうかを、使い道に合わせて決めます。
ここから基本情報！コードの種類
いちばん単純なのは、登録した順に1、2、3…と重ならない番号を振っていく順番コードです。桁数が少なくて済み、新しい対象はいつでも末尾に足せます。その代わり、番号を見ても何の商品かは分からず、「菓子パンだけを取り出す」といった使い方には向きません。
対象を種類やグループに分け、どの区分に入るかを表すのが区分コード（分類コード）です。食パンは1、菓子パンは2、調理パンは3、と決めれば、先頭の数字で種類が分かります。区分コードの考え方を進め、コードの桁ごとに意味を割り当てたものが桁別コードです。たとえば4けたのうち、1けためを種類、2けためを生地（1は小麦、2は米粉）、3〜4けためを区分の中での番号にします。「2105」は「菓子パン・小麦の生地・5番め」と読めます。
桁別コードを作るときは、それぞれの桁に入る数の上限を計算しておきます。1けためは0〜9の10通りなので、種類は10種類まで、3〜4けためは00〜99の100通りなので、一つの種類と生地の組み合わせの中に入れられるのは100品までです。種類が11種類に増えたら、コードの桁数から作り直すことになります。
対象の名前や特徴の一部をそのまま使い、見ただけで中身の見当がつくようにしたのが表意コードです。こむぎ堂の「SP-03」も、店長が「スイートパン」の頭文字をとって付けた表意コードでした。「CRO」でクロワッサン、「SHOKU-1K」で食パン1斤、のように人が覚えやすい半面、名前の似た商品が増えるとコードを考えるのに苦労します。
区分コードと順番コードのように、性質の違う複数のコードを組み合わせて一つにしたものを合成コードといいます。「2-105」のように、前半を区分、後半を区分の中の順番にすれば、種類で絞り込めて、しかも新しい商品を足しやすいコードになります。
基本情報の範囲ここまで
ミナトは店長と相談して、商品の番号をすべて4けたの数字にそろえ、先頭の1けたでパンの種類が分かるようにしました。くるみパンにも番号が付き、在庫表と注文の一覧は、同じ番号で並べて照らせるようになりました。
2-6Webデザイン
予約サイトは、去年パソコンの画面に合わせて作ったものでした。スマートフォンで開くと、商品の表は右に切れて、受け取り日を選ぶ小さな欄は指で押すたびに隣の日付に当たります。店長が言いました。「お客さんの注文、ほとんどスマートフォンから来てるんだよね」。
ここから基本情報！作る前の設計図
作り直す前に、ミナトは紙に四角と線だけで画面を描きました。色や写真、飾りを省き、どこに見出し、商品の一覧、ボタンを置くかという配置だけを示した画面の設計図をワイヤーフレームといいます。色がない分、店長と「ボタンは一覧の上か下か」といった配置の話だけに集中できます。五段階モデルでいえば、骨格の層を形にするための図です。
基本情報の範囲ここまで
Webページの見た目は、HTMLで書いた中身とは別に、CSS（Cascading Style Sheets）というスタイルシートで指定します。色・文字の大きさ・配置を1つのスタイルシートにまとめて全ページから読み込めば、サイト全体の色調やデザインに統一性を持たせられ、変えたいときも1か所を直せば済みます。
スマートフォンで表がはみ出す問題には、画面の幅に応じて、同じページのレイアウトを自動的に切り替える方法で対応します。これをレスポンシブWebデザイン（レスポンシブデザイン）といいます。パソコンでは商品を横に4つ並べ、スマートフォンでは1列に縦に並べる、という切り替えを、1つのページで行います。パソコン用とスマートフォン用の2つのサイトを別々に作って更新し続ける手間がかかりません。
設計の順番を逆にする考え方もあります。パソコン向けの画面を先に作って小さく縮めるのではなく、スマートフォンなど小さい画面向けの設計を先に行い、画面が広い場合に要素を足していく考え方をモバイルファーストといいます。小さな画面に載せられる量は限られるので、先に作ると「本当に要るものは何か」を最初に決めることになります。
ここから基本情報！どの画面・どのブラウザでも使えるように
レスポンシブWebデザインを実現するCSSの仕組みがメディアクエリです。画面の幅や向きなど閲覧環境の条件を書き、その条件に合うときだけ適用するスタイルを指定します。たとえば @media (min-width: 768px) { … } と書けば、幅が768ピクセル以上の画面にだけ、商品を横に並べる指定が適用されます。
お客さんが使うブラウザは一つではありません。種類やバージョンの異なる複数のWebブラウザで、Webページが同じように表示され、同じように動くことをクロスブラウザといい、そのための対応や確認の作業もこう呼びます。ミナトは、店のパソコンのブラウザだけでなく、店長のスマートフォンと、家族の古いタブレットでも予約の画面を開いて確かめました。
古いブラウザへの備え方として、まずすべての利用者に基本の機能（HTMLのフォームで予約できること）を確実に提供し、新しい機能に対応したブラウザには、より便利な表現や機能（カレンダーから受け取り日を選べるなど）を段階的に足していく考え方があります。これをプログレッシブエンハンスメントといいます。高機能な版を先に作り、古い環境では機能を落として動かす考え方（グレースフルデグラデーション）とは、出発点が逆です。
基本情報の範囲ここまで
Webページの組み立て方にも、古い方法と今の方法があります。ブラウザの表示領域をいくつかに区切り、それぞれの区画に別のHTML文書を表示する仕組みをフレームといいます。左の区画に目次、右の区画に本文を出す、という使い方が以前は広く見られました。いまのHTMLでは、画面全体をフレームで区切る書き方は使われなくなり、ページの一部に別の文書を埋め込む iframe が残っています。なお、動画を構成する静止画1枚分（1コマ）も、同じくフレームと呼びます。
ページとページは、文字や画像を選ぶと別のページや同じページの別の場所へ移動できるハイパーリンク（リンク）でつながっています。作り直しでページの住所（URL）が変わると、お客さんが保存していた古いURLやほかのサイトからのリンクが行き止まりになります。そこで、古いURLにアクセスしたブラウザを、新しいURLへ自動的に転送するリダイレクトを設定しておきます。ミナトは、古い予約ページのURLを開くと新しい予約ページが表示されるようにしました。
ここから基本情報！迷わせない工夫と、画面の言葉
サイトのページが増えると、利用者は「いまどこにいるのか」を見失います。トップページから現在のページまでにたどる上位のページを、リンクとして順に並べて表示するのがパンくずリストです。「トップ ＞ 商品一覧 ＞ 食パン ＞ 角食パン」のように出ます。名前は、童話で森の帰り道が分かるようにパンくずを落としていった話に由来します。探しているものが決まっている人のためには、インターネット全体ではなく、そのサイトの中のページだけを対象に探せるサイト内検索機能を置きます。「くるみ」と入れれば、くるみパンのページがすぐに出ます。
トップページで、複数の画像や項目を一定の間隔で自動的に、あるいは利用者の操作で順番に切り替えて見せる表示の仕組みをカルーセルといいます。限られた場所に季節のパンを何種類も紹介できますが、読み終える前に次の画像へ変わってしまうと情報を取り逃がします。自動で切り替える場合は、利用者が止められるようにしておきます。
画面の言葉も体験の一部です。ボタンの文言、入力欄の説明、エラーメッセージなど、画面に出す言葉を、利用者が理解して次の行動に移りやすいように設計することをUXライティングといいます。「入力エラー」とだけ出すより、「受け取り日は明日以降の日付を選んでください」と書くほうが、何をどう直せばよいかが伝わります。送信のボタンも「送信」ではなく「予約を確定する」にすると、押した後に何が起きるかが分かります。
基本情報の範囲ここまで
2-7人間中心設計とユーザビリティ評価
新しい予約フォームができあがりました。ミナトは自分で10回予約してみて、一度も迷いませんでした。もう大丈夫に違いない、と相棒に報告すると、返事は短いものでした。「作った人は、どこに何があるかを最初から知っているよ」。
作り手が自分で試して迷わないのは当然で、それは使う人が迷わないことの証拠にはなりません。そこで、利用者の特性や、どんな場面で使うかという利用状況を理解したうえで、利用者を中心に置き、評価と改善を繰り返しながら設計を進める考え方をとります。これを人間中心設計（HCD：Human Centered Design）といいます。設計して終わりではなく、使ってもらって確かめ、直して、また確かめる、という繰り返しが前提になっています。
利用状況を理解する方法の一つに、利用者の行動を物語（シナリオ）として書き出す方法があります。シナリオを「価値」「行動」「操作」の3つの階層に分けて書き、製品やサービスの設計に生かす手法を構造化シナリオ法といいます。いちばん上のバリューシナリオには、利用者にとっての価値（「焼きたてを、待たずに受け取りたい」）を書きます。次のアクティビティシナリオには、その価値をかなえる行動（「仕事帰りの18時に受け取れるよう、朝のうちに予約する」）を書きます。
いちばん下に来るのがインタラクションシナリオで、利用者と製品・サービスとの具体的な操作のやり取りを書きます。「通勤の電車の中で、片手でスマートフォンを持ち、商品の一覧から角食パンを選び、受け取り時間帯の18:00を押して、確定のボタンを押す」。ここまで書くと、「片手で押せる大きさのボタンが要る」という画面の条件が見えてきます。
ここから基本情報！人間中心設計の規格
人間中心設計の進め方は、規格として定められています。国際規格のISO 9241-210 と、それに対応する日本産業規格（JIS）のJIS Z 8530 で、題名は「人間工学－人とシステムとのインタラクション－インタラクティブシステムの人間中心設計」です。現在の版は JIS Z 8530:2021 で、ISO 9241-210:2019 に対応しています。規格では、利用状況を理解して明示する、利用者の要求事項を明示する、それを満たす設計案を作る、利用者の立場から設計を評価する、という活動を、要求が満たされるまで繰り返す流れが示されています。
ISO 9241-210 の前身にあたるのが、1999年に作られた国際規格のISO 13407 です。利用者を中心に計画・設計・評価を繰り返す開発プロセスを定めたもので、2010年に ISO 9241-210 に置き換えられました。
基本情報の範囲ここまで
ここから基本情報！使いやすさを確かめる2つの方法
使いやすさ（ユーザビリティ）を評価する方法は、大きく2つに分かれます。一つは、ユーザビリティの専門家が、経験から得られた原則（ヒューリスティックス）に照らして画面を一つずつ点検し、問題点を洗い出すヒューリスティック評価です。「いま何が起きているかを利用者に知らせているか」「誤りを防ぐ作りになっているか」といった原則に照らします。利用者を集めなくてよいので、短い時間と少ない費用で行えますが、見つかるのは専門家の目で気づける問題に限られます。
もう一つは、実際の利用者（または想定する利用者に近い人）に製品やシステムを操作してもらい、つまずいた所や迷った所を観察して問題点を見つけるユーザビリティテストです。「明日の18時に角食パンを2斤予約してください」のように課題を出し、操作しながら考えていることを声に出してもらうと、どこで、なぜ迷ったかが分かります。作り手には見えない問題が見つかる代わりに、人を集める手間がかかります。
基本情報の範囲ここまで
ミナトは、常連のお客さんに頼んで、新しいフォームを店のタブレットで試してもらうことにしました。
2-8ユニバーサルデザイン
試してくれたお客さんの一人は、目を画面に近づけて「文字が細くて読みにくいね」と言いました。もう一人は、赤で囲まれた欄を見ても、どこが誤りなのか分からないようでした。その人には、赤と緑の区別がつきにくかったのです。
年齢や文化、障害の有無、能力の違いなどにかかわらず、できるだけ多くの人が快適に使えるように、はじめから設計しておく考え方をユニバーサルデザインといいます。これと比べられるのがバリアフリーデザイン（バリアフリー）です。こちらは、高齢者や障害のある人にとって、すでにある障壁（バリア）を取り除くことに重点を置きます。入口の段差に後からスロープを付けるのがバリアフリーで、最初から段差のない入口にして、車いすの人もベビーカーを押す人も重い荷物を持つ人も同じように通れるようにするのがユニバーサルデザインです。
Webサイトや機器、サービスを、高齢者や障害のある人を含め、どれだけ多くの人が支障なく利用できるかの度合いをアクセシビリティといいます。予約フォームのアクセシビリティを上げるには、文字を十分な大きさにする、文字と背景の明るさの差をはっきりつける、誤りを色だけでなく文字でも知らせる、といった手を打ちます。赤と緑の区別がつきにくいお客さんにも、「受け取り日は明日以降を選んでください」の一文なら伝わります。
文字を読まなくても意味が伝わる記号もあります。情報や案内を、単純化した図形や絵で表した記号をピクトグラムといいます。非常口やトイレの案内が代表例で、使う言語が違う人や、文字を読むのが難しい人にも伝わります。こむぎ堂では、商品の一覧に小麦や卵を使っているかを示す絵の記号を付け、記号の横に「小麦」「卵」と文字も添えることにしました。
ここから基本情報！アクセシビリティの規格と書体
アクセシビリティには、確かめるための規格があります。日本では、高齢者や障害のある人などに配慮した、情報通信の機器・ソフトウェア・サービスの設計指針をまとめた JIS 規格群がJIS X 8341 です。共通の指針を定める第1部のほか、パソコン、Webコンテンツなど対象ごとに部が分かれています。Webコンテンツを対象とするのが第3部の JIS X 8341-3 で、現在の JIS X 8341-3:2016 は、国際規格 ISO/IEC 40500:2012 と内容を一致させています。
その ISO/IEC 40500:2012 のもとになったのが、Webの技術標準を作る団体 W3C が定めたWCAG（Web Content Accessibility Guidelines）の2.0版です。WCAG は、Webコンテンツが満たすべき達成基準を、知覚可能・操作可能・理解可能・堅牢（けんろう）の4つの原則のもとに並べ、それぞれの基準に A・AA・AAA の3段階の適合レベルを付けています。2.0版の後に2.1版、2.2版が出ています。WCAG を作っているのは、W3C の中でWebアクセシビリティの指針作りや普及を進める活動、WAI（Web Accessibility Initiative）です。
書体にも、読みやすさのための工夫があります。高齢者や弱視の人を含め、年齢や視力にかかわらず読みやすく、見間違えにくいように設計された書体をUDフォント（ユニバーサルデザインフォント）といいます。「3」と「8」、濁点と半濁点のように見間違えやすい形を区別しやすくし、文字の中の空間を広くとるなどの工夫がされています。
基本情報の範囲ここまで
2週間後、ミナトは直した予約フォームを、もう一度お客さん3人に試してもらいました。文字は太く大きくなり、誤りのある欄には赤い枠と一緒に直し方の一文が出ます。受け取り日のカレンダーには、明日より前の日付が最初から選べないようになっていました。3人とも、途中で手を止めずに予約を終えました。店長は誤った注文票を入れていた箱をのぞいて言いました。「今週は、一枚も入ってないね」。
注文の誤りを減らしたのは、一つの直し方ではありませんでした。お客さんが何をしたいのかを考え直し、伝わる並べ方に変え、入力をその場で確かめ、商品の番号をそろえ、スマートフォンに合わせて画面を組み直し、実際に使う人に試してもらう。どれも、作る側の都合ではなく、使う人の側から画面を見直す作業です。
ミナトのメモには、3人目のお客さんの一言が残っています。「予約はできたけど、焼き上がりが遅れたときは、どうやって知らせてくれるの」。予約の画面の外にも、お客さんの体験はまだ続いていました。