1-1情報アーキテクチャ
火曜の朝、こむぎ堂のレジ横に、注文用のタブレットが1台置かれました。混む時間にレジの列を短くしようと、店長が通販の業者に頼んで用意したものです。開店して10分、最初に画面の前に立ったのは、毎朝食パンを買いに来る年配の常連さんでした。指を画面の上に浮かせたまま、なかなか動きません。「どこを押せばいいの。食パンがどこにあるのかも分からない」。ミナトは隣に立って一つずつ指を差し、結局その日は午前中ずっと、タブレットの横から離れられませんでした。閉店後、ミナトは相棒に打ち込みます。「パンは全部画面に載ってるのに、どうして見つからないんだろう」
ミナトは、タブレットに出ている商品の一覧を紙に書き出してみました。並び順は、業者が商品を登録した順のままです。食パンは28品目のうち19番目にあり、しかも「角食」という名前で載っていました。
相棒の返事は、パンの数ではなく並べ方を問うものでした。「同じ28品目でも、何を手がかりに並べるかで、見つけやすさは変わるよ」。情報を並べるときの手がかりは、実はそれほど多くありません。場所、文字の順、時間、種類、序列の5つです。この5つの切り口をまとめたものをLATCHの法則といい、それぞれの英語の頭文字をとって名前が付いています。ITパスポートのシラバスでは、情報を分かりやすく整理して伝える情報デザインの手法の一つとして挙げられています。
こむぎ堂の28品目に当てはめると、5つの並べ方は次のようになります。
| 切り口 | 何を基準に並べるか | こむぎ堂の一覧なら |
|---|---|---|
| Location（場所） | 地理的な位置や、物が置かれている場所 | 店内の棚の順（入口側の棚から奥の棚へ） |
| Alphabet（文字の順） | アルファベット順や五十音順 | あんパン、カレーパン、クロワッサン…の五十音順 |
| Time（時間） | 起きた順、時刻、時系列 | 焼き上がりの時刻順（7時の食パンから順に） |
| Category（種類） | 分野や種類ごとのまとまり | 食パン・菓子パン・総菜パン・焼き菓子に分ける |
| Hierarchy（序列） | 大小、重要度、量などの順位 | 売れている順、値段の安い順 |
どれが正しい並べ方か、という問いには答えがありません。決めるのは、探す人が何を手がかりにしているかです。毎朝食パンを買う常連さんは、パンの正式な名前を知らなくても「食パン」という種類は知っています。登録順の一覧は5つのどれにも当てはまらず、手がかりを一つも与えていませんでした。
ここから基本情報！情報の並べ方を設計する
利用者が目的の情報にたどり着きやすく、内容を理解しやすいように、情報の分け方・並べ方・案内の仕方を設計する考え方を情報アーキテクチャ（インフォメーションアーキテクチャ）といいます。Webサイトやアプリの画面を作るときに、ページや項目の配置を決める前に考える部分です。
情報アーキテクチャでは、情報を整理する作業を2段階で考えます。一つめは、五十音順や種類別のように、どの切り口で分けるかを決める組織化です。LATCHの5つは、組織化の切り口の代表です。二つめは、分けたものをどうつなぐかを決める構造化です。「食パン」の下に「角食」「山食」を置く階層型の構造にするか、1つの商品に「朝食向き」「卵不使用」のような目印を複数付けるタグ付けにするかを選びます。階層型では1つの商品は1か所にしか入りませんが、タグ付けなら同じクロワッサンを「朝食向き」と「おやつ」の両方から探せます。
基本情報の範囲ここまで
ここから基本情報！まとまり・名前・案内
種類で分けると、28品目は4つのまとまりになります。人が一度に覚えておける量には限りがあり、28個の名前をばらばらに見せられるより、4つのまとまりを先に見せられるほうが頭に入ります。このように、扱いやすいように情報を意味のあるまとまりに分けたもの（またはそのまとまり1つ）をチャンクといいます。電話番号を「090-1234-5678」と3つに区切って書くのも、チャンクに分ける工夫です。
まとまりには名前が要ります。画面の入力欄やボタン、分類の見出しが何を表しているかを示す短い文字列をラベルといいます。「角食」というラベルは、店の中では通じても、お客さんには通じませんでした。ラベルは、作る側の言葉ではなく使う側の言葉で付けます。
最後に、まとまりの間を行き来する道案内です。画面の上に「食パン」「菓子パン」「総菜パン」「焼き菓子」の切り替えを並べ、いまどこを見ているかを色と文字で示すような、利用者が目的のページや機能に迷わずたどり着くための仕組みをナビゲーションといいます。メニューやリンク、「トップ ＞ 食パン」のような現在地の表示も、ナビゲーションに含まれます。
基本情報の範囲ここまで
その夜、ミナトは一覧を種類別に組み直し、「角食」を「食パン（角型）」に書き換えました。並べ方は決まりました。ただ、タブレットの前で迷った理由は、並べ方だけではなさそうです。
1-2使いやすさを決める要件
水曜の朝、並べ方を直したタブレットで、常連さんは食パンを見つけました。ところが今度は、画面の下の「次へ」の文字を指でなぞったまま止まっています。文字はただの灰色の字で、枠も影もありません。やっと進んだ次の画面では、カレーパンの数を間違えて10にしてしまい、戻る方法が見つかりませんでした。
人とコンピュータのような機械のあいだで、情報をやり取りする接点をヒューマンインタフェースといいます。キーボードや画面、タッチパネル、スピーカから流れる音声案内も、すべて接点です。注文用のタブレットは、こむぎ堂とお客さんのあいだに新しく置かれたヒューマンインタフェースでした。
接点の出来のよしあしは、使いやすさとして表れます。決まった人が、決まった状況で、決まった目的を果たすときに、どれだけ確実に（効果）、むだな手間なく（効率）、満足して使えるかの度合いをユーザビリティといいます。常連さんにとっての目的は「食パンを1斤注文すること」でした。それを一人で果たせなかった時点で、効果の面からまず足りていません。
ここから基本情報！使いやすさの規格と原則
ユーザビリティの定義と考え方は、日本産業規格のJIS Z 8521に定められています。いまの版は JIS Z 8521:2020「人間工学－人とシステムとのインタラクション－ユーザビリティの定義及び概念」で、国際規格の ISO 9241-11:2018 を基にしています。効果・効率・満足の3つで使いやすさをとらえる見方は、この規格のものです。
注文用のタブレットは、お客さんが押すたびに画面が変わり、次の入力を待ちます。このように、利用者の操作にそのつど応答を返し、やり取りを重ねながら目的を果たしていくシステムをインタラクティブシステムといいます。券売機も、Webの予約画面も、インタラクティブシステムです。
インタラクティブシステムを使いやすくするための設計の指針を、インタラクションの原則といいます。JIS Z 8520:2022（国際規格 ISO 9241-110:2020 が基）は、次の7つを挙げています。ユーザが行うタスクへの適合性、インタラクティブシステムの自己記述性、ユーザが抱く期待への一致、ユーザによる学習性、ユーザによる制御可能性、ユースエラーへの耐性、ユーザエンゲージメントです。灰色の「次へ」は、押せることを画面自身が伝えていないので、自己記述性が足りません。
カレーパンの10個は、ユースエラーへの耐性の問題です。人は操作を間違えるものとして設計し、間違えても戻れるようにしておきます。その代表が、直前の操作を取り消して元の状態に戻すUndo機能です。文書作成ソフトの「元に戻す」がこれにあたります。戻せると分かっていれば、利用者は安心して試しに押せるので、制御可能性も上がります。
基本情報の範囲ここまで
では、灰色の「次へ」を押せそうに見せるには、何を変えればよいでしょうか。ドアを思い浮かべると分かりやすくなります。縦長の取っ手が付いたドアは引きたくなり、平らな金属の板が付いたドアは押したくなります。このように、そこで何ができるか、どう操作すればよいかを、見た目で利用者に伝える手がかりをシグニファイアといいます。画面の上なら、ボタンの枠や影、下線の付いたリンク、入力欄の白い四角がシグニファイアです。ミナトは「次へ」を、色の付いた大きな四角いボタンに変えることにしました。
ここから基本情報！人の側の性質を調べる
画面の上部には「本日のおすすめ クリームパン」という帯も出していましたが、その朝、帯に気づいたお客さんはほとんどいませんでした。人は目に入るものをすべて受け取っているわけではなく、自分の関心や期待に合うものだけを選んで認識します。この傾向を選択的知覚といいます。食パンを探している人の目には、クリームパンの帯は入りにくいわけです。伝えたい情報は、利用者がそのとき探しているものの近くに置きます。
タブレットは、レジ台の上の高い位置に置かれていました。背の低い子どもや車いすのお客さんには、上の段のボタンに指が届きにくい高さです。操作が利用者の体格や筋力、手の届く範囲などの体の特徴に合っているかという観点を身体的適合性といいます。画面の中のボタンの大きさや間隔も、指の太さに合っているかという身体的適合性の問題です。
どこで迷っているのかを推測で決めずに確かめるには、実際の操作を記録して調べます。どの画面で手が止まったか、どのボタンを押し間違えたか、どこで注文をやめたかを集めて、問題のある所や傾向をつかむことをユーザー操作の分析といいます。ミナトがタブレットの記録を1週間分調べると、注文をやめた人の7割が数を選ぶ画面で止まっていた、ということが分かるかもしれません。分析の結果は、次にどこを直すかを決める材料になります。
基本情報の範囲ここまで
1-3認識の技術
木曜の閉店後、店長がぽつりと言いました。「画面を押すのが苦手なら、声で『食パン1斤』って言えば済むようにできないのかな」。ミナトは、駅前のパン屋で見たレジを思い出します。トレーに載せたパンをカメラで写すだけで、レジが品名と値段を出していました。
声で注文を受けたり、写したパンの名前を当てたりするには、機械が人の声や目の前の物を受け取り、それが何かを判断する必要があります。マイクが拾うのは空気の振動を数値の並びにしたもので、カメラが写すのは色の点の並びです。どちらも、そのままでは「食パン」という意味を持っていません。数値の並びから意味を取り出す処理を、まとめて認識の技術と呼びます。
ここから基本情報！声・画像・動画を認識する
人が話した声をコンピュータが解析し、文字列や命令として受け取る技術を音声認識といいます。スマートスピーカやスマートフォンの音声入力が身近な例です。「食パン1斤」という声を「食パン」「1」「斤」という文字に直せれば、注文のデータとして扱えます。
カメラなどで取り込んだ画像に写っている物や文字、人物などを、コンピュータが自動で見分ける技術を画像認識といいます。駅前のパン屋のレジは、トレーの画像からパンの種類を見分けていました。郵便番号の手書き文字を読み取る機械や、スマートフォンの顔によるロック解除も画像認識の応用です。
1枚の画像ではなく、時間とともに変わる映像から、物の動きや状況の変化を見分ける技術を動画認識といいます。棚を写したカメラの映像から「クロワッサンの棚が空になった」「お客さんがレジに並び始めた」を見分けられれば、焼き足す時刻やレジを開ける判断に使えます。
どの認識でも、最初の手順は同じです。画像や音声の生のデータから、見分けるのに役立つ情報だけを取り出します。これを特徴抽出といい、取り出した値を特徴量と呼びます。メロンパンとクロワッサンを見分けるなら、表面の格子模様があるか、形が丸いか細長いか、焼き色の濃さはどうか、といった値です。画像の色の点を一つずつ比べるより、こうした少数の値を比べるほうが、置き方や光の当たり方が変わっても見分けやすくなります。
基本情報の範囲ここまで
店長の「声で注文」は、技術としては実現できます。ただし、声で操作する仕組みにも、画面で操作する仕組みにも、それぞれ向いている場面と向いていない場面があります。
1-4いろいろなインタフェース
金曜の夕方、ミナトは店の事務用パソコンで、通販の注文データを取り出していました。黒い画面に文字で命令を打ち込むと、文字で結果が返ってきます。後ろからのぞき込んだ店長が言いました。「これをお客さんにやってもらうのは、さすがに無理だね」
ミナトが使っていたのは、文字を打ち込んで命令し、結果も文字で受け取る操作の方式で、CUI（Character User Interface）といいます。命令の名前と書き方を覚えている人には速く正確に操作できますが、覚えていない人には、画面を見ても次に何を打てばよいか分かりません。
これに対し、アイコンやボタンなどの絵を画面に表示し、マウスや指で指して操作する方式をGUI（Graphical User Interface）といいます。できることが画面に並んで見えているので、命令を覚えていなくても、見て選べば操作できます。注文用のタブレットはGUIです。CUIは「覚えている人には速い」、GUIは「初めての人にも分かる」。どちらが優れているかではなく、使う人と場面で選びます。
画面を見ず、手も使わずに操作する方式もあります。声で話しかけて機器を操作するインタフェースをVUI（Voice User Interface）といいます。粉だらけの手で厨房に立つ店長が「タイマー15分」と話しかけてオーブンのタイマーをかけられたら、VUIの出番です。手や指の動きをカメラやセンサで読み取って操作する方式はジェスチャーインタフェースといいます。手を左右に振って画面のページを送る、手のひらをかざして音楽を止める、といった操作です。
ここから基本情報！自然な動作で操作するインタフェース
声や身振り、タッチのように、人がふだんの生活でしている動作のままコンピュータを操作できるインタフェースを、まとめてNUI（Natural User Interface）といいます。VUIやジェスチャーインタフェースは、NUIの代表です。操作のための約束ごとを新しく覚えなくて済むのが、NUIの目指すところです。
日本語や英語のように、人がふだん使う言葉で指示したり問い合わせたりできるインタフェースを自然言語インタフェースといいます。「明日の朝、食パンを2斤取り置きして」と話しかけても、チャットの欄に打ち込んでも、言葉そのものを受け付けるなら自然言語インタフェースです。
言葉を使わず、身振りや表情、視線などでやり取りするインタフェースはノンバーバルインタフェース（非言語インタフェース）といいます。視線を向けた商品の説明を画面に出す、といった使い方が考えられます。
声だけ、指だけと手段を1つに絞らず、音声・視線・ジェスチャー・タッチなど複数の手段を組み合わせてやり取りするインタフェースをマルチモーダルインタフェースといいます。画面のパンを指差しながら「これを2つ」と言えば伝わる、という組み合わせ方です。声だけでは「これ」が分からず、指差しだけでは数が分かりません。
声の調子や表情など、人の感覚や感情に近い情報を手がかりにやり取りするインタフェースを、感性インタフェースと呼ぶことがあります。ただし、規格などで定義が定まった語ではなく、使う人によって指す範囲に幅がある呼び名です。
基本情報の範囲ここまで
1-5マルチタッチの操作
土曜の朝、タブレットの前で小学生くらいの子どもが、親指と人差し指でメロンパンの写真をつまむように広げていました。写真が大きくなると、うれしそうに親を呼びます。その少しあと、手袋をしたまま画面を押したお客さんは、画面が反応しないと首をかしげていました。
注文用のタブレットの画面は、指が触れた位置を読み取るだけでなく、何本の指がどう動いたかも見分けています。このように、複数の指によるタッチやその動きを認識して操作を受け付けるインタフェースをマルチタッチインタフェースといいます。スマートフォンやタブレットの画面は、ほとんどがマルチタッチインタフェースです。指の動かし方ごとに、名前が付いています。
| 操作 | 指の動き | よく使われる場面 |
|---|---|---|
| タップ | 画面を指で軽く1回触れて離す | ボタンを押す、項目を選ぶ（マウスのクリックにあたる） |
| スワイプ | 画面に触れたまま、指を一定の方向に滑らせる | 画面を切り替える、一覧を動かす、ロックを解除する |
| フリック | 画面を指ではじくように素早く払う | ページを勢いよく送る、スマートフォンのフリック入力 |
| ピンチ | 2本の指の間隔を広げる（ピンチアウト）、狭める（ピンチイン） | 写真や地図を拡大・縮小する |
| ロングプレス | 画面に指を触れたまま、動かさずにしばらく押し続ける | 補助のメニューを出す（マウスの右クリックにあたる） |
子どもがメロンパンの写真を広げたのはピンチアウトです。教わらなくてもできたのは、ふだんスマートフォンで同じ操作をしているからでしょう。反対に、ロングプレスで出るメニューは、そこにあると知らなければ見つかりません。こむぎ堂のタブレットでは、注文に要る操作をタップとスワイプだけで済むようにしました。
ここから基本情報！タッチを読み取るしくみ
手袋の指に画面が反応しなかったのは、タッチパネルの方式のためです。スマートフォンやタブレットの多くは、指先が画面に近づいたときの電気（静電容量）の変化をとらえて、触れた位置を割り出します。これを静電容量方式タッチパネルといいます。軽く触れるだけで反応し、複数の指の位置を同時に読み取れるので、マルチタッチに向いています。一方で、電気を通しにくい手袋や、ふつうのペン先では反応しません。
もう一つの代表的な方式が抵抗膜方式タッチパネルです。電気を通す透明な膜を2枚、すき間をあけて重ねておき、押されて2枚が接した所の電気抵抗の変化から位置を割り出します。押す力で反応するので、手袋やペンでも操作できます。そのかわり、しっかり押し込む必要があり、複数の指を同時に読み取るのは苦手です。手袋のまま使う工場の機械や、ペンで書き込む端末に使われてきました。
基本情報の範囲ここまで
1-6ウィンドウとメニュー
日曜の閉店後、店長とミナトは事務用パソコンで、タブレットの商品を登録する管理画面を開きました。注文の一覧、商品の写真、売上の表がそれぞれ別の枠で開き、画面は枠だらけです。「どれがどれだか分からなくなってきた」と店長が言います。
GUIの画面は、いくつかの決まった部品の組み合わせでできています。部品の名前を知っていると、業者に「ここをこう直してほしい」と伝えるときに話が早くなります。
画面の中で、1つのアプリケーションや文書を表示するために開かれる、枠に囲まれた四角い領域をウィンドウといいます。注文の一覧、商品の写真、売上の表は、それぞれ別のウィンドウでした。ウィンドウは重ねたり、大きさを変えたり、並べたりできます。ウィンドウに収まりきらない長い一覧は、画面の端に付いたスクロールバーのつまみを動かして、見える範囲を上下や左右にずらします。
機能やファイル、アプリケーションなどを小さな絵や記号で表したものをアイコンといいます。ごみ箱の絵は削除、虫めがねの絵は検索、というように、文字を読まなくても何ができるかが分かるようにしたものです。Webサイトでよく見る、オレンジ色の四角に電波のような弧が描かれた印はフィードアイコンで、そのサイトが更新情報をフィード（RSS など）の形で配信していることを示します。
写真のように一つずつ開いて確かめるのが手間な情報は、縮めて並べます。画像や文書の中身がひと目で分かるように、小さく縮めて表示した画像をサムネイルといいます。管理画面の商品写真をサムネイルで一覧にすれば、写真の付け間違いがすぐに見つかります。注文用のタブレットでも、パンの名前の横にサムネイルを付けることにしました。名前を読まなくても、形と焼き色で食パンが分かります。
操作のための命令は、メニューにまとめられています。画面やウィンドウの上の端に横一列に並び、「ファイル」「編集」「表示」のような項目からそれぞれの命令の一覧を呼び出す帯をメニューバーといいます。メニューバーの項目やボタンをクリックすると、その下に選択肢の一覧が垂れ下がるように開くのがプルダウンメニューで、ドロップダウンメニューとも呼ばれます。これに対し、右クリックやロングプレスをした場所に、その対象に使える命令の一覧が浮かび上がるように出るのがポップアップメニューです。注文の1行を右クリックして「取り消す」「印刷する」を選ぶ、という使い方をします。
操作中の画面の上に、別の小さなウィンドウが新しく開くこともあります。これをポップアップウィンドウといい、「保存しますか」の確認や、Webページの広告・お知らせの表示に使われます。
1-7入力と選択の部品
月曜の朝、ミナトはタブレットの注文画面を作り直すことにしました。受け取りの時間、袋が要るかどうか、パンを切るかどうか、名前。お客さんに選んだり入れたりしてもらう項目は、思ったより多くあります。項目ごとに、どの形で選んでもらうかを決めていきます。
受け取りの時間は「すぐ」「30分後」「1時間後」のどれか1つです。いくつかの選択肢から1つだけを選ばせる、丸い印の並んだものをラジオボタン（ラジオボックス）といいます。1つを選ぶと、それまで選んでいたものの印は自動で外れます。昔のカーラジオの、1つを押し込むとほかのボタンが戻る選局ボタンから付いた名前です。
「スライスする」「袋に入れる」「保冷剤を付ける」は、当てはまるものをいくつでも選べます。このように、複数の選択肢から当てはまるものをいくつでも選べる、四角い印の並んだものをチェックボックスといいます。1つ1つの四角に、チェックの印が入っているか（オン）、いないか（オフ）で状態を示します。
ここから基本情報！2つの状態を切り替えるボタン
管理画面には、商品ごとに「販売中／売り切れ」を切り替える所があります。押すたびにオンとオフなど2つの状態が入れ替わる、押しボタンの形をしたものをトグルボタンといいます。スマートフォンの設定画面にある、つまみを左右に動かすスイッチの形も、この仲間です。チェックボックスが「この項目を選ぶかどうか」に答える欄なのに対し、トグルボタンは「機能や状態をいま切り替える」ために使われることが多くあります。
基本情報の範囲ここまで
パンの種類は28品目あり、ラジオボタンで全部を並べると画面に収まりません。複数の項目を枠の中に一覧で表示し、その中から選ばせるものをリストボックスといいます。項目が多いときは、枠の中をスクロールして選びます。
ここから基本情報！自由に入力する欄と、折りたたむ見出し
名前は、選択肢を用意しておくことができません。利用者がキーボードや画面のキーで文字や数字を自由に入力できる、四角い入力欄をテキストボックスといいます。自由に入れられる分、決まった形で入れてほしい項目（電話番号など）では、入力の誤りが起きやすい欄でもあります。
画面の下には「よくある質問」を置きました。質問の見出しだけを並べておき、見出しを押すとその下の答えが開き、もう一度押すと閉じる折りたたみ式の仕組みをアコーディオンといいます。楽器のアコーディオンの蛇腹のように伸び縮みすることから付いた名前です。全部を開いておくより、探している質問を見つけやすくなります。
基本情報の範囲ここまで
パソコンで見る管理画面には、もう一つ、マウスならではの仕組みがあります。マウスポインタをボタンやリンクの上に重ねるだけで、クリックしなくても色が変わるなどの反応が起きる操作をホバー（ロールオーバー）といいます。ポインタを重ねたまま少し待つと、その項目の説明が小さな枠で浮かび上がるものをツールチップといいます。虫めがねのアイコンに重ねると「検索」と出る、あの小さな枠です。
ただし、指で操作するタブレットには、ふつうホバーがありません。指は画面に触れるか離れるかのどちらかで、ポインタのように「触れずに上に重ねる」ことができないからです。ツールチップに頼った説明は、指で使うタブレットでは表示されません。ミナトは、アイコンの下に必ず文字を添えることにしました。
1-8操作を助ける機能
火曜の朝、作り直した注文画面で最初の注文が入りました。「注文する」を押したあと、画面が2秒ほど止まったように見え、お客さんがもう一度押そうと指を伸ばします。ミナトは慌てて「いま送っているところです」と声をかけました。
使い方が分からなくなったときに、操作の手順や用語の説明を表示して利用者を助ける機能をヘルプ機能といいます。こむぎ堂のタブレットでは、どの画面にも右上に「使い方」のボタンを置き、いま開いている画面の操作だけを短く出すようにしました。説明書の全部を見せるより、その場で要る1つを見せるほうが助けになります。
名前の欄に「こむ」と打つと、過去に入力した「こむぎ堂」が候補に出ることがあります。このように、入力の履歴などから続きを予想して候補を示し、入力中の文字列を補う機能をオートコンプリートといいます。パンの名前を探す欄で「メロ」と打てば「メロンパン」が出るようにすれば、打つ文字数も打ち間違いも減ります。
ここから基本情報！待ち時間を見せる帯
「注文する」のあとで画面が止まって見えたのは、注文を送っている2秒のあいだ、画面に何の変化もなかったからです。処理がどこまで進んだかを、帯や棒の伸び具合で示す表示をプログレスバーといいます。ファイルのダウンロードやソフトウェアの更新で、左から右へ伸びていく帯がそれです。待たされていることが目に見えれば、お客さんは同じボタンを二度押さずに待てます。ミナトは、送信中は「注文を送っています」の文字とプログレスバーを出し、ボタンを押せない状態にしました。
基本情報の範囲ここまで
助ける機能は、お客さんの側だけのものではありません。閉店後、店長は表計算ソフトで1週間分の注文の表を開きます。表の見出しに付いた小さな三角を押して条件を選ぶと、条件に合う行だけが表示される機能をオートフィルタといいます。「受け取り日が土曜」の行だけ、「食パン」の行だけを、ほかの行を消さずに絞り込めます。
店長は毎晩、同じ操作を繰り返していました。注文の表を開き、日付で並べ替え、パンごとの数を合計し、翌朝の仕込みの表に書き写す。こうした一連の操作をひとまとめに登録しておき、呼び出すだけで自動で実行させる機能をマクロ機能といいます。毎晩15分かかっていた集計が、ボタン1つで終わるようになります。
その翌週の火曜の朝、あの常連さんがタブレットの前に立ちました。画面の上の「食パン」を押し、サムネイルの並んだ一覧から食パンを選び、色の付いた「次へ」のボタンを押します。数を間違えて2にしてしまいましたが、「1つ戻る」で直しました。注文が終わると、常連さんはレジのミナトに笑って言います。「今日は迷わなかったよ」
この1週間で、こむぎ堂のタブレットに新しい機能は1つも足していません。変えたのは、商品の並べ方（Category）と、まとまりに付けたラベル、押せることが分かるボタン、間違えても戻れる仕組み、そして指で使うことを前提にした部品の選び方です。最初の朝、パンは全部画面に載っていました。見つからなかったのは、画面が使う人の手がかりに合わせて作られていなかったからです。
その日の夕方、店長が通販サイトの注文を印刷して持ってきました。「こっちの予約フォームからも、郵便番号が全角だったり、受け取り日が昨日になっていたりする注文が届くんだよ」。タブレットで見つけたことは、通販の画面にもそのまま使えそうです。ただ、入力の誤りそのものを画面の側で防ぐ方法を、ミナトはまだ知りませんでした。