『注文』『注文する』ボタンにするならどっち？——インターフェースのボタン名を考える上で気をつけるべきこと
これは フェンリル デザインとテクノロジー Advent Calendar 2023 19日目の記事です。
操作に迷わない、使いやすいアプリ・システムをデザインする上で、「インターフェースに添える言葉を「分かりやすく」表現することは重要です。適切な箇所で、適切なラベルを添えることは、ユーザーがアプリ・システムを使いこなすための大きな手助けになります。
特に、スマートフォンのように表示領域が小さなデバイスだと、あまり長い言葉を配置することができない、という制限があります。そのためボタンの名前は、できるだけ短く、そして一瞬で伝わる言葉にすることが求められます。
ボタンの名前は、できるだけ短く。そして分かりやすい言葉になるように。
それを念頭においた上で、考えてみてください。
「注文」「注文する」、ボタンに配置する言葉は、どちらがいいでしょうか？
簡潔な表現にするため、言葉を省略する
レストランの席で使う、モバイルオーダーアプリを想像してください。料理を選択し、最後に内容を確認して、注文を確定する画面です。
注文を確定するためのボタンは、注文する、という意味合いの言葉が適しているでしょう。
改めて、ボタンのラベルは「注文」と「注文する」、どちらがよいでしょうか？
「注文」と「注文する」は、言葉の意味は同じで、単に「する」があるかないかの違いに見えます。どちらの言葉を選んでも、ユーザーが内容を取り違えたり、操作に迷ったりすることはなさそうです。
実際、この場合においてはどちらの言葉を選んでも不都合はありませんが、「言葉はできるだけ短く、冗長にしない」という基準で判断するのであれば、「注文（”する”をつけない）」がより適しているでしょう。
この、「言葉は簡潔に」という方針は、どうやらApple製のアプリや、OSの設定画面にも適用されているらしく、ほとんどの動詞からは「する」が消された状態の言葉が使われています。「作成」「購入」「入手」……全て”する”が語尾についても成り立つ文脈で使われていますが、省略されています。
確かに、スマートフォンは画面が小さく、表示領域が小さいので、長い言葉はできるだけ避けたいところです。省略しても十分通じるなら、思い切って省略し簡潔な表現にする。これは確かに「分かりやすい言葉」の条件の一つと定義できそうです。
省略することで生まれてしまう「ラベルと動作の不一致」
ところが、「する」を省略したことで、実は思わぬ副作用が引き起こされています。
というのも、「する」がなくなったために、このボタンに記された「注文」は、「名詞かもしれないし、動詞かもしれない」という曖昧な言葉になってしまっているのです。
「注文」という単語そのものに着目します。これは、「注文を確認する」という文章の「注文」と一緒で、これ単体では名詞、ということになります。
ですが、ラベルをつけた経緯を思い出してください。これはあくまで「注文する」から「する」を省略してつけたラベルです。つまり実質的には動詞になります。
名詞だろうが動詞だろうが、「注文」という言葉が持つイメージ自体は伝わりそうな気がします。
しかし、ユーザーがアプリやシステムを操作するための接触点となるボタンは、「名詞であるか」「動詞であるか」を明示的に示す必要があります。具体的には、「ユーザーが対象を選択するために押すボタン（名詞のボタン）」なのか、「ユーザーが何かを行わんとするために押すボタン（動詞のボタン）」なのかをはっきりと示した上で、実際に引き起こされる機能と完全に一致させなくてはいけません。
なにやらややこしい話になってきたので、具体例を挙げて説明します。
iPhoneの設定アプリ内「画面表示と明るさ」画面に、「拡大表示」という項目があります。
スマートフォンの文字や要素を、全体的に拡大する機能です。「拡大表示」ボタンをタップすると、「デフォルト」と「拡大」のうちどちらかを選ぶ画面に遷移します。選んだ状態は、元の「拡大表示」ボタンの右側に併記されます。
このボタンを押したら何を設定できるかは「何なんとなく」分かります。しかし、なんだか違和感はありませんか？
それもそのはずです。「〜する」の「する」が省略されたインターフェースを見慣れているユーザーは、この「拡大表示」は「拡大表示する」という動詞が仄めかされた言葉＝動作を表す言葉だと捉えます。
そのためユーザーは、「このボタンを押せば、（ディスプレイを）拡大表示することができる」と考えます。
しかし、ボタンを押してみると、「デフォルト」か「拡大」かを選択する画面へ遷移します。「ディスプレイを拡大する」というユーザーの目的が、「遷移先を選択する」という目的にすり替えられてしまうのです。
「ユーザーが何かを行わんとするために押すボタン（動詞のボタン）」かと思ったら、実は「ユーザーが対象を選択するために押すボタン（名詞のボタン）」だった。動詞なのか名詞なのかが曖昧な言葉のせいで、ボタンを押すことで得られる体験が、期待通りではなくなる。結果的に「分かりづらさ」で生んでしまうのです。
それでは、このボタンはどうあるべきだったのでしょうか。
もし、「拡大表示」というラベルをそのまま使うのであれば、ボタンの表現はこうなるべきです。
「拡大表示する」という動作をするためのボタンなので、結果は「拡大表示される（ON）」あるいは「拡大表示しない（OFF）」であることが期待されます。よって、スイッチ（トグル）UIを採用すれば、ボタンと機能を一致させることができます。
しかし、そもそも元の「拡大表示」の機能とは、画面を遷移した上で「デフォルト」と「拡大」、それぞれのイメージを見比べながら選ぶためのものです。その機能自体を損なう訳にはいかないので、変えるべきはボタンの表現、ということになります。
それではボタンの表現をどう変えるべきでしょうか？ このボタンは、押した瞬間にユーザーが何かしらの動作（拡大表示する、など）を行うためのものではなく、詳細な設定ができる画面へ、遷移するためのボタンです。つまり、遷移先の画面のタイトルが、このボタンには表示されているべきなのです。画面のタイトルということは、明示的に名詞である必要があります。以上を踏まえて、次のような表現はどうでしょうか。
意義に合わせて単語の前後を入れ替えましたが、「の」をつけるだけで、「ディスプレイを表示を設定する画面へ遷移する」ことが暗示されるボタンになりました。これは「の」をつけることで、ボタンの言葉が明確に名詞になったためです（この「表示の拡大」は「する」を省略した動詞ではありません。「表示の拡大する」という文章は成り立たないためです）。名詞になったことで、遷移先の画面名を明示的に表すことができました。
これなら、「『表示する』という動作をするためのボタン」であると、ユーザーが取り違えることはありません。
おそらく、元の「拡大表示」という言葉は、純粋な名詞として採用したのではないでしょうか。しかし「表示」という言葉は「表示する」という動詞の省略形として、インターフェース上で既に頻繁に使われています（App Storeアプリの「すべて表示」など）。そのため、「実質的に動詞」になってしまい、ユーザーの動作と機能の不一致が起こり、違和感の原因になってしまったのです。
以上の例から、ボタン名をラベルするときの気をつけるべきポイントをまとめました。
ボタンやメニューに、「〇〇する」という動詞を省略して、「〇〇」と表現することができる。例：「表示」ボタン
ただし、この「〇〇」を、ユーザーは「動作を表す言葉である」と認識することに留意すべきである。例：「表示（する）」ボタン
「動詞を省略した言葉」をボタンに使う場合は、その動作と、ボタンを押したときに期待される動きを一致させること。例：「表示」→対象物が現れる
名詞で表現すべきボタンに、「動詞を省略した言葉」として使われがちな言葉を使うことは避ける。例：「〇〇の表示」とすべきところを「〇〇表示」としない
そもそも、「注文する」を「注文」と省略するのは分かりやすさにつながるのか？
これは「動詞を省略して名詞のようにできる」日本語特有の問題で、英語では起こり得ない問題（のはず）です。AppleやGoogleのライティングガイドラインに頼らず、日本語を使う者が日本語で考えなくてはいけません。
私は、動作を表す動詞をむやみに省略し、動詞か名詞か曖昧な状態にさせることは、ユーザーの自由なインターフェース操作の妨げになるのではないか、と疑っています。簡潔で、分かりやすいインターフェースのための言葉は、単に短くしたものではなく、曖昧さをなくして、完全な動詞・完全な名詞で表現されたもの、ではないでしょうか？
「注文」というボタンは、「注文する（動詞）」に。
「すべて表示」というボタンは、「すべて見る（動詞）」に。
「アカウント削除」というボタンは、ボタンの役割に応じて「アカウントを削除（動詞）」か「アカウントの削除（名詞）」に。
このように、結果的に少し文字数が増えたとしても、曖昧さが取り除かれている言葉のほうが、「簡潔で分かりやすい」言葉だと考えます。
インターフェースの表示領域の制限があり、長い文字を配置できないのであれば、違う単語に置き換えたり、そもそもボタンの挙動が言葉と一致するのかを再検討し、「とりあえず省略する」という手段はできるだけ回避するべきではないでしょうか？
まだ仮説段階であり、このべき論が真であるかはまだ分かりません。しかし、この検証が明らかになったとき、分かりやすい日本語のインターフェース表現のあるべき姿を、見出すことができるでしょう。
最後に、私が「明瞭で分かりやすい」と思う、ボタンのラベルを紹介します。
それは、「切り取り」と「貼り付け」です。
英語のcut、pasteに、それぞれ「切断（する）」と「接着（する）」ではなく、「切り取る」「貼り付ける」という言葉が当てられています。そして、それを「切り取り」「貼り付け」とすることで、名詞としての明瞭さを保ちつつ、平易な言い回しで、動作の内容が直感的に伝わるようになっています。
インターフェースに使用する言葉は、かくありたいものです。
この記事が気に入ったらサポートをしてみませんか？