第16回　ボタンを押させるテクニック

　対象とするユーザーの“慣れや知識”によって，画面の構成を変えたほうが伝わりやすいとするならば，画面上の「ユーザー・インタフェース（UI）部品」の色や形状も，ユーザーに応じて変えるべきでしょう。今回は，代表的なUI部品でありながら，なかなか作り手の思うように押してくれない「ボタン」について考えます。

わかりやすいボタンの形状はユーザーによって違う

　まず，前回とほぼ同じ絵を用います。Webシステムの操作方法への「熟知度（PCリテラシ）」を縦軸，「提供したいサービスに対する知識」を横軸とします。そして，それぞれの「軸」に対して，受け入れやすいと思われる「ボタン」の形状を例記しました。

　上図の【A】や【B】のタイプに当てはまるPCリテラシの高いユーザーは，ボタンの“ラベル”に「submit」と書かれていようが「GO」と書かれていようが，ボタンを認識することはさほど苦ではありません。

　しかし，PCに不慣れな【C】タイプのユーザーには「submit」では伝わりません。ラベルの文言に適切な配慮が必要です。さらに，ボタンの形状もそっけない形だと認識されません。現実世界でのボタンの形状に近い，ボタンらしいボタンのほうが受け入れやすいでしょう。

　サービスに対する知識のレベルによっても，配慮は必要です。「清算」や「決済」といった工程に入ってもらうときに，「レジ」をイメージさせる表示やアイコンでわかってもらえる人がいれば，もっと丁寧に誘導してあげないと進んでくれない人もいます。実際，ボタンがわかりにくかったために，次のページのアクセス数が伸びなかったという実例は存在します（特に画面設計の自由度が高いRIAシステムに多いようです）。

　ここで，シンプルに話を進めるために上図のような「ボタン形状の分布」を仮定してみましょう。

　Webシステムを設計するにあたって，毎回このようなマトリックスを埋めていく必要はありません。しかし，対象的な位置にあるのが何であるかを考えることは，「的を絞る」という作業を行う際にはかなり有効です。つまり，対象ユーザーだけでなく，対象としないユーザーが受け入れやすいのはどんなものであるのかを考えてみてください。開発末期に方針がぶれたりした際の拠り所や，リリース後の検証時の仮説として役に立ちます。

“色”の設計が使いやすさを左右する

　次に，色選定です。論理的には1ピクセルに対して何万色もの色を置くことができます。それを，すべて検証することは事実上不可能です。そこで，デザイナーの腕が必要になります。システムのコンセプトや対象ユーザーという情報から，適切な色の候補を抽出します。そこが「ドンピシャ」なものを出してくれるかが，開発上の信頼関係につながります。

　余談になりますが，こうしたコンセプト的な積み上げをしていかない限り，ユーザーにわかりやすい「画面」は作りえないと私は思っています。ですので，一時期流行した，部品だけを低価なグラフィックデザイナーに発注して「お化粧直し」をするような画面設計は，恒常的な利用を想定するシステムには明らかに不向きです。

　予算はかなりセンシティブな問題でもあるので，一概に答えを出すことはできません。しかし，予算を削る選択は，システムを使ってもらった「効果」を狙うのか，それとも開発予算のみを下げる「効果」を狙うのか，といったシステム開発ポリシーに依存します。そして，RIAシステムの場合，人に触れる部分の効果を高めることが中心テーマであることが多いので，そこで予算をかけないと，やはり本末転倒な結果につながることが多いようです。

　使ってもらうユーザーが見えていると，色の選択時でも，渋めが良いのか，明るめが良いのかなど，デザイナーの専門分野での調整が可能となります。そして，開発に深くかかわるデザイナーであれば，もっと多くの情報をその「仕上がり」に盛り込めます。料理人が，素材への知識と，お客様への知識を持つほどに，喜んでもらえる料理をお出しすることができるのと同じ原理です。

　そして，（RIA）システムのデザイナーは，下記のことも考えます。カラーリング・ガイドラインとユーザビリティとデザイン・ガイドラインの融合です。

　ほとんどの会社は，コーポレート・カラーという概念を持っています。ロゴなどをどういった色で用いるかという定義です。視覚的要素が「ブランド」というものに大きく影響するため，マーケティング活動に用いる場合はかなり厳しくチェックされます。

　コンシューマ向けのB2C型システムになると，そうした「企業基本色」とのせめぎ合いが発生します。目立たせたいという思いと，「我が社らしい」という規定との衝突です。特に赤や黒といった自己主張の強い色が基調色である場合，デザインの幅が限定されます。つまりそれだけ高度なデザイン力が必要になるのです。

　さらに，使いやすさも考慮しなければなりません。色に関して言えば，コーポレート・カラーと同じように，一般社会にも“ルール化された”色があります。一番有名なのは，「信号」です。「赤」が警告色であることは，日々交差点で触れているからこそ，浸透し一般常識化しています。目立てば良いということで，「赤の点滅ボタン」などを作ろうものなら，「あれ？，何か間違えたかな」と思われかねません。そうした一般常識も考慮した，さらなる使いやすさの追及が必要です。

　サイト全体の統一感も大切です。次に進ませる「色」を統一し，警告を出す「色」を統一し，使えないことを察してもらうための「色」を統一する――そうした積み重ねの上に，ヘルプを見ないでも進んでいける「サイト」や「アプリケーション」が構築されていくのです。

　エンジニア向けの設計書の中では，「ボタン」は「ボタン」でしかないかもしれません。しかし，エンジニアがボタンを押された後の機能を開発するのと同じように，“ボタンを押させること”にも知恵があります。両者が融合してこそ，本当に使いやすいシステムができあがっていくのです。

　さぁ，あなたにとってどんなボタンが押してみようと思うボタンですか？

参考） RIAシステム 構築ガイド 2005年版 ( RIAコンソーシアム )

三井 英樹（みつい ひでき） 1963年大阪生まれ。日本DEC，日本総合研究所，野村総合研究所，などを経て，現在ビジネス・アーキテクツ所属。Webサイト構築の現場に必要な技術的人的問題点の解決と，エンジニアとデザイナの共存補完関係がテーマ。開発者の品格がサイトに現れると信じ精進中。 WebサイトをXMLで視覚化する「Ridual」や，RIAコンソーシアム，日刊デジタルクリエイターズ等で活動中。Webサイトとして，深く大きくかかわったのは，Visaモール（Phase1）とJAL（Flash版：簡単窓口モード/クイックモード）など。