インタラクションパターン

ねらい

世界中どの国の車でも、ハンドルは「丸くて、右に回せば右に曲がる」。誰も説明書を読まない。乗った瞬間、もう運転できる。これは「型」がみんなで共有されているからだ。

UI（ユーアイ＝画面のうち、人が触って操作する部分）にも、これとまったく同じ「みんなが知っている型」がある。これをインタラクションパターンと呼ぶ。三本線のボタン（ハンバーガーメニュー）、画面に重なって出る小窓（モーダル）、切り替えの見出し（タブ）――どれも、初めて見ても「あ、これは押すとメニューが出るやつだ」と分かる。

このクエストのねらいは一つ。「自分で新しい操作方法を発明したくなる気持ちを、ぐっとこらえる」理由を、理屈ごと身につけること。なぜ発明より真似（踏襲）が正しいのか。なぜ「思い出させる」より「見せて選ばせる」のか。そして、型を知ったうえで「いつ破っていいか」を、自分で判断できるようになることだ。

ちなみに、使いやすさそのものの土台（押せそうに見えるボタン・手応え・取り消しなど、ノーマンとニールセンの原則）は、すでに前のクエスト「ユーザビリティの原則」で扱った。ここではその先――「みんなが知っている型」をどう使い、いつ破るか――に絞る。

そもそも「繰り返し出てくる問題には、決まった良い解がある。それをパターンと呼ぼう」と最初に言ったのは、建築家のクリストファー・アレグザンダー（1977年）だ。彼は街や建物の作り方を観察し、「いい部屋には共通の作り方がある」と気づいた。その考えが、のちにソフトウェアやUIの世界へ受け継がれ、いま私たちが言う「インタラクションパターン」になった。型は誰かの思いつきではなく、受け継がれてきた知恵なのだ。

型とは何か ―― 言葉が通じるのと同じこと

そもそも「型」とは何だろう。一言でいうと、「この見た目なら、こう動く」という、みんなの間でできあがった約束のことだ。

たとえば日本語。「みかん」と言えば、相手の頭にあのオレンジ色の果物が浮かぶ。これは「み・か・ん」という音と、あの果物が、社会の中で結びついているからだ。もし君が今日から、みかんを「ぽぽん」と呼び始めたらどうなる？　誰にも通じない。毎回「ぽぽんっていうのはみかんのことで…」と説明しなければならない。

UIもまったく同じだ。「三本線のボタン＝メニューが開く」は、もう世界中で通じる約束になっている。これを君が勝手に「メニューは四角を5個並べたボタンで開く」と決めたら、それは「みかんをぽぽんと呼ぶ」のと同じこと。誰にも通じず、毎回説明がいる。

なぜ「発明」より「踏襲」なのか ―― コストを誰が払うか

ここがこのクエストの核心だ。デザインを始めたばかりの人は、よく「人と違うオリジナルな操作」を作りたがる。だが、これはたいてい失敗する。理由をはっきりさせよう。

新しい操作方法を作るということは、「使う人に、新しく覚え直してもらう」ということだ。この「覚える手間」を、専門的には学習コストと呼ぶ。問題は、そのコストを払うのが、作った君ではなく、何万人もの使う人たちだということ。君が1つ発明するたび、使う人全員が、1つずつ余計に覚えさせられる。

これを正面から言葉にしたのが、ヤコブ・ニールセンの**「ヤコブの法則」（2000年）だ。中身はこうだ。「使う人は、君のサイト以外で、ほとんどの時間を過ごしている。だから、すでに知っている他のサイトと同じ動き方を期待する」。** 言いかえれば、人は他の何千ものサイトで「三本線＝メニュー」をもう覚えてきた。なら、君のサイトもそれに合わせるのが一番やさしい。これは「合わせろ」という押しつけではなく、使う人がすでに持っている知識を、ただで借りるという話だ。

ここで楽典（このデザイン理論全体）の背骨を思い出そう。「デザインは発明ではなく継承」――先人が積み上げた型をそのまま引き継ぎ、その上に乗る。インタラクションパターンは、この考え方が一番はっきり出る場所だ。すでに世界が「三本線＝メニュー」を覚えてくれている。なら、それにただ乗りすればいい。タダで使える便利な約束を、わざわざ捨てて自作する理由はない。

記憶より認識 ―― 思い出させず、見せて選ばせる

型がなぜ効くのか、その裏には人の頭のしくみがある。キーワードは**「記憶より認識」**だ（英語では recognition over recall。recognition＝見て気づく が、recall＝思い出す に勝る、という意味）。これはニールセンの「使いやすさ10原則」の6番目にも入っている、確かな原則だ。

人の頭には、二つのモードがある。

• 記憶（リコール）…何も手がかりがない所から、思い出すこと。「ええと、メニューを出すコマンドは何だったかな…」と頭の中を探す。これはしんどい。
• 認識（レコグニション）…目の前に選択肢があって、「あ、これだ」と気づくこと。メニューの一覧を見て選ぶ。これは楽だ。

英単語のテストで言えば、記憶は「日本語だけ見て英語を書く」、認識は「4択から選ぶ」。後者がずっと簡単なのは、君も知っているはずだ。良いUIは、人に思い出させない。代わりに、選べるように見せる。 だから三本線を押すと、機能の名前を打ち込ませるのではなく、メニューを一覧で「見せて、選ばせる」。型（パターン）は、この「認識」を助ける道具でもある。見慣れた形だから、考えずに「あ、これだ」と気づける。

主なパターンの一覧 ―― よく使う型たち

具体的な型をいくつか見ておこう。これらは「覚える」というより「もう知っている」はずだ。それこそが、型が型である証拠だ。

• ハンバーガーメニュー…三本線のボタン。押すとメニューが出る。三本線がハンバーガーのパンと具に見えるから、この名がついた。
• モーダル…今の画面の上に重なって出る小窓。閉じるまで後ろは操作できない。「これに答えてから次へ」と、注意を一点に集める型。
• タブ…見出しを横に並べ、押すと中身が切り替わる。ノートの仕切り（インデックス）と同じ発想。
• プルダウン（ドロップダウン）…押すと下に選択肢がベロンと開くメニュー。たくさんの選択肢を、ふだんは畳んでおける。
• 無限スクロール…下へスクロールし続けると、次々と中身が自動で読み込まれる。SNSのタイムラインでおなじみ。
• トースト…画面の隅に少しだけ出て、すぐ消える小さな通知。「保存しました」など、邪魔せず知らせる型。

大事なのは、これらが**「誰かの思いつき」ではなく、長年使われて生き残った定番**だということ。生き残ったのには理由がある。だから、まずはこの定番を引く。これらをカタログ（型録）としてまとめて見せたのが、ジェニファー・ティドウェルの『Designing Interfaces』だ。料理人がレシピ集を持つように、デザイナーは型のカタログを持つ。

フィッツの法則 ―― 的は大きく、近くに

型を選ぶときも、型を置くときも、土台になる人の体のしくみが二つある。一つ目がフィッツの法則だ。

中身はとても素直で、こうだ。「押したい的（ボタンなど）は、大きいほど・近いほど、速く正確に押せる」。 小さくて遠い的は、狙うのに時間がかかり、押し間違える。当たり前に聞こえるが、これは1954年に心理学者ポール・フィッツが実験で数式にまで落とした、れっきとした法則だ。

これが効く場面は山ほどある。スマホの大事なボタンは大きく、親指の届く下のほうに置く。逆に「削除」のような押してほしくないボタンは、わざと小さく・遠くに置く。パソコン画面の四隅も、じつは超押しやすい。なぜか。画面の端は、マウスがそれ以上外へ出られない“壁”になっている。 だから多少勢いよくカーソルを飛ばしても、必ず端で止まって当たる。つまり、見た目は小さくても「外さない的」＝実質、的がうんと大きいのと同じになる。だからメニューバーは画面のてっぺん（＝端）にある。型を画面のどこに、どんな大きさで置くか。その答えの多くは、この法則が握っている。

ヒックの法則 ―― 選択肢が多いほど迷う

二つ目がヒックの法則だ。こちらも素直で、「選択肢が多いほど、人は選ぶのに時間がかかる（迷う）」。 1952年に心理学者ウィリアム・ヒックが示し、翌1953年にレイ・ハイマンが「効いているのは“数”ではなく“情報の多さ”だ」と一般化した。だから2人の名をとって**「ヒック＝ハイマンの法則」**とも呼ぶ。用語集や典拠に「ハイマン」が出てくるのは、このためだ。

レストランのメニューを思い出せばいい。料理が5品なら、すぐ決まる。50品あると、にらめっこして決められなくなる。UIも同じで、ボタンや項目を画面にズラッと並べるほど、使う人は固まる。

ここで面白いのが、さっき出た型たちは、実はこのヒックの法則と戦うための道具でもある、ということ。プルダウンは、ふだん選択肢を畳んで隠し、必要なときだけ開く――だから画面はいつもスッキリしている。タブは、たくさんの中身を仕切って、一度に見せる量を減らす。ハンバーガーメニューも、メニュー全部をしまっておく型だ。型は「見た目の約束」であると同時に、選択肢を減らして迷いを消す工夫でもある。

いつ型を破るか ―― 知ったうえで、理由をもって外す

ここまで「型を守れ、発明するな」と言ってきた。では型は絶対か。違う。型は知ったうえで、理由があれば破っていい。 ただし順番が大事だ。ジャズの名手が、基本のコードを完璧に覚えてから、わざと外して崩すのと同じ。何を外しているか分かっているから、崩しが効く。知らずに外したものは、ただの間違いにしか見えない。

では、目の前の「型を破りたい気持ち」が、効く崩しなのか、ただの未熟なのか。見分ける問いはたった一つだ。

その型で“困る具体的な理由”を、一言で言えるか？

言えるなら――それは理由のある崩しだ。たとえば無限スクロールは便利だが、「最後まで読んだ感」が出ない。だから検索結果のように“ゴール”が要る画面では、ページ送り（1・2・3…）のほうがいいことがある。これは「無限スクロールだと終わりが分からなくて困る」と理由を一言で言えている。だから外していい。

言えないなら――つまり理由が「なんか人と違うのを作りたいから」しか出てこないなら、それは図3で見た「使う人全員に学習コストを押し付ける」をやっているだけだ。個性ではなく、ただの未熟になる。

判断の順番はいつもこうだ。①まず定番の型を引く → ②その型で困る具体的な理由が出たときだけ、理由をもって外す。 順番が逆――いきなり破る――だと、それは個性ではなく、ただの未熟になる。

見分け方

最後に、君が触っているアプリやサイトが「型をちゃんと使えているか」を見抜く目を持とう。次を確かめるといい。

• メニューや操作が、世界共通の型（三本線・タブ・モーダルなど）で作られているか。自作の謎記号になっていないか。
• 大事なボタンが大きく・押しやすい場所にあるか（フィッツの法則）。
• 一度に見せる選択肢を絞っているか。ズラッと並べて迷わせていないか（ヒックの法則）。
• 機能を思い出させていないか。ちゃんと見せて選ばせているか（記憶より認識）。
• もし型を破っている所があれば、それは理由のある破り方か。それとも、ただ目立ちたいだけか。

これらは別々のルールではなく、すべて**「使う人の頭と体に、余計な負担をかけない」という一つの思想**から出ている。この「使う人に考えさせるな」を合言葉に一冊を書いたのが、スティーブ・クルーグの『Don’t Make Me Think』（直訳すると「私に考えさせるな」）だ。ルールを丸暗記するのではなく、この思想を覚えれば、ルールは自然に思い出せる。

譜例

棚（design-gallery）で、実際のサイトがどんなインタラクションパターンを使っているか確かめよう。三本線・タブ・モーダル・プルダウンが、どこにどう置かれているかを数えてみるとよい。

• 棚：インタラクションパターンの実例を見る

練習・チェック

1. 自分がよく使うアプリを1つ開き、「主なパターンの一覧」で挙げた6つの型（ハンバーガー・モーダル・タブ・プルダウン・無限スクロール・トースト）のうち、いくつ使われているか数えてみよう。
2. そのアプリの一番大事なボタン（送信・購入など）は、大きく・押しやすい場所にあるか。フィッツの法則の目で見てみよう。
3. もし「これは独自の操作だな」という所を見つけたら、それは理由のある破り方だろうか。図8の問い――「この型で困る理由を一言で言えるか」――を当ててみよう。「人と違うから」しか出てこなければ、それは使う人に学習コストを押し付けているだけかもしれない。