長谷川 裕行 （はせがわ ひろゆき）
有限会社 手國堂 代表取締役
http://www.hirop.com/
テクニカルライターとして活躍。プログラミングに関する著書多数、DB Magazineなどにも多くの記事を提供している。 |
ユーザー・インターフェイスにとってコントロールのサイズ、配置、色など視覚的要素の設定は、非常に重要です。
しかし、もっと大切な事柄があります。それは「文字による伝達」です。文字の色、メッセージの表示方法などについて考えてみましょう。
今回紹介する画面は、サンプル・アプリケーションから確認できるようになっています。画面のキャプション（説明文）の後ろの(Form1)などが、対応するアプリケーションのフォーム名です。
普通、人間は「そこに文字があると読んで」しまいます。意識していないようでも「禁」とか「押」などという文字は自然と目に入り、その意味を認識してしまうものです。
これは、我々の使う文字体系が“漢字”という表意文字であるがゆえのことでもあります。欧米言語圏では、アルファベットという「それ自体が意味を持たない記号の組み合わせ」※によって言葉（語）を表すので、文字を1文字ずつ読み進まなければ意味を把握できませんが、漢字は「1文字で意味を表現できる」という機能を持っています。つまり、漢字はそれ自体がアイコンなのです。
そのため漢字文化圏の国のソフトウェアは、欧米言語圏のソフトウェア以上に、文字による意志伝達が容易で、なおかつ重要な意味を持つことになります。
※アルファベットにも「Ａ→α→１」「Ｂ→β→２」「Ｘ→１０、謎・不明」などのように記号性を持つものがあります。が、漢字のような表意文字ではないため、すべてが意味を持っている訳ではありません。日本語の場合、ひらがなやカタカナにも単独で意味を持つものがあります
前回、コントロールの配色について考えました。色と言えばフォームやテキストボックスの背景色が思い浮かびますが、その他に「文字の色」も存在します。コントロール上に表示される文字の色は前景色（ForeColor）で設定でき、通常は黒とするのが普通です。が、場合によっては異なる色を着け、その部分を強調する必要もあります。
- フォームのタイトル -
アプリケーション中に登場する文字と言えば、真っ先に思い浮かぶのが「タイトル」です。業務用アプリケーションでは、例えば
顧客管理システム
在庫管理処理
などといった感じで、そのアプリケーションが対象としている業務を端的に示すのが普通です。会社名などを表示する場合もありますが、多くの場合社名のロゴマークをビットマップ化し、イメージコントロールに埋め込みます。
その他、「顧客データの追加」「在庫数の確認」など個々の処理を行うフォームにも、そこで行う処理を示すタイトル文字列を表示します。
これらは通常、ラベルを使って表示します。
- タイトル文字列の色 -
ラベルで表示するタイトル文字列は、コマンドボタンのキャプションやテキストボックスの前に表示する項目名などに比べて、大きくするのが普通です。そのため、フォーム上で最も目立つ部分となります。
あまり派手過ぎない方がよいのですが、黒一色では印象が薄くなり過ぎてしまいます。タイトル文字は「それが何をするための画面か」をユーザーに示すという意味で、適度に目立たなければなりません。黒一色だと、入力項目を示すラベルやコマンドボタンのキャプションに紛れてしまいます。
フォームの背景色が薄い灰色でタイトル文字が明朝体（ＭＳ明朝）なら、青、緑、赤紫など原色またはそれに近い印象の強そうな色でも、意外と落ち着いて見えます。但し、ゴシック体で太字にすると色の強さが目立ってきます。
画面１：タイトル文字は濃い原色でも案外おとなしく見える(Form1)
- 影を付けて目立たせる -
明るい色に灰色の影を重ねるなど、アクセントを付けると画面が引き締まります。タイトル文字に影を付けるには、以下のようにします。
| 1. |
ラベルのCaptionに文字列を設定し、フォントサイズを決めて全体の大きさを調整する |
| 2. |
色（ForeColor）を「濃い灰色」に設定する |
| 3. |
「編集(E)」→「コピー(C)」、「編集(E)」→「貼り付け(P)」でラベルをコピーして貼り付ける
このとき「コントロール配列にするか」尋ねてきます。イベントを処理する必要はないので配列とする必要はありませんが、コントロール配列とすると同じオブジェクト名となるため、後の管理がやりやすくなります |
| 4. |
後から貼り付けた方のラベルの色（ForeColor）を変更する |
| 5. |
後から貼り付けた方のラベルのBackStyleプロパティを「0-透明」に設定する |
| 6. |
2つのラベルを少しずらせて重ねる |
後から貼り付けた方が上になるため、こちらの方を左上にして任意の色に設定します。「ツール(T)」→「オプション(O)」で「オプション」ダイアログボックスを開き「全般」パネルの「グリッドに合わせる(O)」のチェックを外しておくと、ラベルの位置を微調整できます。
画面２：「グリッドに合わせる(O)」のチェックを外して位置を微調整する
画面３：タイトル文字に影を付ける(Form2)
- 背景に色を着ける -
特に、テキストボックスやコンボボックスなど白っぽいコントロールが多いフォームでは、タイトル文字も多少は目立たせた方が画面が引き締まります。原色では印象が強過ぎる場合は、濃い背景色を設定したフレームに黄色などの明るい色の文字列を重ねます。
ラベルはフレームの前面に表示できないので、この場合はタイトル文字をラベルではなくテキストボックスに設定します。テキストボックスは本来文字列を入力するためのコントロールですが、LockedプロパティをFalseに設定すれば入力できなくなります。
但しクリックするとカーソルが表示されてしまうため、あまりスマートではありません。
画面４：文字の背景にフレームを配置して、タイトルを浮き出させる(Form3)
- 「赤い文字」は要注意 -
コントラストからすれば、薄い灰色の背景に赤い文字はあまり目立たないように思えますが、「赤」は色自体に「禁止」「拒否」「警告」などの意味があるため、タイトル文字にはふさわしくありません。
赤い大きな文字を見ると、ユーザーは無意識の内に抵抗を感じ「操作しない方がよいのではないか」などと思ってしまいます。レコードの削除、重要なマスターデータの更新など、「間違えてはいけない重要な処理」にだけ使う方がよいでしょう。
画面５：赤いタイトル文字はユーザーを警戒させてしまう(Form4)
ラベルに設定する文字列には、色の他にサイズとフォントの種類が設定できます。
- 標準フォントを使う -
フォントは、必ずWindowsに標準搭載されているものを使うようにしましょう。日本語フォントなら、基本的に「ＭＳ明朝」か「ＭＳゴシック」または「ＭＳＰ明朝」「ＭＳＰゴシック」「FixedSys｣｢Terminal｣のいずれかを使います。
業務アプリケーションは開発マシンと実行マシンが異なるのが普通なので、実行マシンにインストールされていないフォントを使ってはいけません。標準以外のフォントは、それがインストールされていないマシンでは「最も近いフォント」に置き換えられてしまいます。
特殊な書体（ＰＯＰ体や教科書体、勘亭流などなど…）を使いたい場合は、グラフィックツールでビットマップ画像を作成し、それをイメージコントロールに設定します※。
※フォントデータには著作権・版権があるため、有料で配布されているフォントのデザインを有料のアプリケーションに組み込む際には、使用許諾が必要になることもあります。注意してください
- 太字と斜体で変化を付ける -
Fontプロパティでは、書体とサイズの他に「太字」「斜体」「太字斜体」の指定ができます。これらをうまく設定すれば、標準フォントでも変化を付けられます。
明朝体は細身なので、タイトル文字とする場合は「太字」を指定した方が見やすいでしょう。
「斜体」を指定するとその部分が際だち、ユーザーの注意を引くことができます。但しあまり長い文字列を斜体にすると、目にうるさく感じてしまいます。「斜体」の指定は、簡潔なタイトル文字だけに限るのがよいでしょう。
- タイトル文字以外のフォント設定 -
フォントが問題になるコントロールには、タイトルの他に項目名を示すラベルやテキストボックス、コマンドボタンのキャプションなどがあります。
これらはあまり凝る必要はないので
フォント：ＭＳＰゴシック（またはＭＳゴシック）
サイズ：９～１０ポイント
太字・斜体：なし（標準）
色：黒
という標準の設定にしておきましょう。コマンドボタンのキャプションの色は、変更できません。
項目名やテキストボックスのフォントを変更すると、ユーザーはそのコントロールに何か特別な意味があると感じます。重要な項目、入力が必須の項目を示すために、そのラベルの色を変えるのは効果がありますが、赤や黄色など暖色系の原色は、フォームから浮いてしまいます。項目名を目立たせる場合は、青や茶色がよいでしょう。
画面６：赤い文字は目立ち過ぎて浮いてしまう(Form5)
画面７：目立たせたい場合でも青や茶色程度が無難(Form6)
汎用機やオフコンの伝達手段は文字だけでした。しかしWindowsでは、アイコンやビットマップ画像を使って視覚的な画面を構成できます。が、だからといって「文字による意志伝達が不要」という訳ではありません。
- フォームにはたくさんのメッセージがある -
「売上データの入力」「商品の追加や削除」など非常に単純な処理でさえ、その処理過程全般を見渡せば、実にたくさんのメッセージが使われています。
メッセージというと、「レコードを削除します。よろしいですか？」「印刷します。プリンタの準備を…」などといった確認や、「該当するデータが見つかりません」といった処理結果の報告・警告などに使われるメッセージを思い浮かべます。しかし、それだけではありません。
「日付」「氏名」「商品ID」などフォーム上に表示される項目名、コマンドボタンやチェックボックスのキャプションなど、ユーザーに「何か」を伝える言葉は、すべてメッセージです。 |
|
- ユーザーに意志を伝える -
広い意味で言えば、フォーム全体のデザイン、コントロールの配置や色など文字以外の要素でも、ユーザーに何らかの意志を伝えるものはすべてメッセージです。が、ここでは主に言葉による表現に絞っておきます。
ユーザー・インターフェイスは「ユーザーにスムースな操作をさせる」ために存在します。「スムースな操作」のためには、
次に何をすればよいのか
こう操作すればどのような結果を招くか
が、ユーザーに自然に伝わらなければなりません。
そのためには、項目名を自然な順序に並べ、間違えてはいけない重要な項目を色やフォントサイズで示すことも重要です。が、その示すところの具体性において、文字による表現に勝るものはありません。
- デザインは基礎設計から始まっている -
データベース・アプリケーションでは、項目名は元になったテーブルまたはクエリーのフィールド名が使われます。もちろん、フォーム上のラベルを書き換えても構わないのですが、後々の保守での利便性を考えれば、元のデータベースの設定と可能な限り同じにしておく方がよいでしょう。
ということは、この問題はフォームのデザインというより、テーブルやクエリーの設計にさかのぼって考るべきこと、と言えます。特に業務アプリケーションでは、データベース設計がいかに大切か、お分かりいただけるでしょう。
- 普通の日本語を使うこと -
さて、このフィールド名（＝項目名）ですが、普通に考えれば
電話番号を記録するフィールドなら「電話番号」
住んでいるところなら「住所」
商品の名前なら「商品名」
…と、ごく当たり前に設定できるはずです。しかし、中には遊び心で
おでんわ、おすまい
などとひらがな表記したり、
Enter your address...
などと海外製ソフトの真似をしてみたりする人もいます。業務アプリケーションでは、ユーザーが普通のビジネスマン、事務員、あるいはパートの主婦だったりするのが普通なので、ウケを狙ったり、わざわざ英語を使ったりする必要はありません。
- 専門用語はそのまま使う -
対象となる業務で使われる用語は、そのまま使うのが原則です。
ビジネスの現場では、専門用語を略して使っていたり、独特の符丁を使っていたりします。その場合、素直にそれに従うのが一番です。変に「法律上の正しい名称」を使っても、普段そのアプリケーションを使うユーザーにはなじみのないことがあります。用語の問題は重要なので、アプリケーションの仕様を詰める段階でしっかり調べておきましょう。正規の表現や自分の馴染んだ表現と違うものに出くわしたら、必ず依頼主（ユーザー）に確認を取るようにします。
- コンピュータ用語に注意 -
専門用語以外の一般的・日常的な用語は、素直にそのまま使うようにしましょう。普段コンピュータの世界にどっぷりつかっていると、この「普通のビジネスマンが普通に使う言葉」を忘れてしまうことがあります。
極端な例では、
印刷開始の確認→プリントルーチンに制御を移行します
出力用一時テーブルの作成→テンポラリにマスタをマージします
というのを見たことがあります。何のことやらさっぱり…ですね。
その他、「プリンタ」か「プリンター」か、「クリックする」か「（ボタンを）押す」か…など、ユーザーの職種や習熟度によって考慮すべき点はたくさんあります。
メッセージの中でも、エラーメッセージの表現は特に重要です。エラーメッセージの出し方、表現の仕方を考えてみましょう。
- 冷たいメッセージは逆効果 -
エラーが発生する状況は、ユーザーの望む処理結果が得られない状況――つまり「期待が裏切られた」状況です。当然ユーザーは焦っています。
そんなときに
そんなデータはありません！！
などと冷たい言葉を目にしたら、パニックに陥ってしまうかもしれません（怒る人もいると思います）。
エラーメッセージの目的は、
エラーの原因を取り除き、処理を元の状態に回復させることです。まず、ユーザーを落ち着かせなければなりません。
重要な内容であることを強調するために、「！」（エクスクラメーション・マーク）を使う人は多いようですが、これは特に慣れないユーザーにとっては、誤操作に追い打ちをかけるようなものです。
普段の流れとは異なるメッセージが表示された――というだけで、十分異常を知らせる効果があるので、むやみに「！」を使うのは避けましょう。
- 明確かつ簡潔に -
例えば印刷処理を実行したとき、
印刷できません！
というメッセージを目にしても、ユーザーにはどうすればよいか分かりません。
プリンタに電源が入っているか確認してください。
用紙切れです。
といったように、
どうすれば正常な状態に回復できるかを示す必要があります。かといって
ただいまXXXX社のプリンタLP-7300にて2000年2月末日現在の在庫一覧表を印刷しようとしましたが、残念ながらXXXX社のプリンタLP-7300にはA4判の用紙がセットされていないようです。
恐れ入りますが用紙トレーをご確認の上、
もう一度印刷処理の実行を試みてください。
などと長々と説明していては、状況を把握するのに時間がかかってしまいます。エラーメッセージはエラーの状況とその対処を明確かつ短く簡潔に示す必要があります。
- 既定のエラー処理に頼らない -
社内開発のアプリケーションでは、ユーザーも同じ会社の仲間…という意識も手伝って、とにかく処理を簡潔にするあまり、エラーメッセージで手を抜くことがよくあります。この点は十分注意しておきましょう。
VBでADOやDAOなどのデータオブジェクトを使う場合、データベース周りのエラーはデータオブジェクトが発生します。そのエラーメッセージをそのまま使うと、ユーザーには意味不明であることがほとんどです。
必ずエラー処理ルーチン（エラートラップ）を作成し、その中で適切なメッセージを表示するようにしましょう。
- 重要度に応じて表示方法を変える -
エラーメッセージは、MsgBox関数を使って単純なメッセージボックスを表示するのが一般的。エラーメッセージ専用のフォームを作り、それを表示することも考えられます。Beep音だけでメッセージを表示しない――という仕様もありますが、あまりに不親切です。
2バイトのカタカナで入力すべきフィールドに、数値など「期待していない値」が入力されたような場合は、フォーム上のラベルに赤や青の文字でメッセージを表示するだけでも構わないでしょう。
しかし、「該当するレコードが存在せず、それ以上処理を続けられない」ような場合には、原因と対処をしっかり示さなければなりません。
以下に、ラベルを使ったエラーメッセージ表示の例を掲げておきます。
普段はラベルのVisibleプロパティをFalseにして非表示としておき、エラーが発生したときだけVisibleプロパティをTrueにします。表示するメッセージはラベルのCaptionプロパティに設定すればよいので、１つのラベルで状況に応じて表示内容を変更できます。
サンプルのForm7では、リスト1とリスト2のようなコードによって、「処理日付」が空白なら赤、日付データでなければ青の文字で、それぞれ適切なエラーメッセージを表示するようになっています。
画面８：ユーザーの単純なミスはラベルで知らせる(Form7)
画面９：エラーの内容によってメッセージを変更できる(Form7)
リスト１：初期化処理――ラベルを非表示にする
リスト２：テキストボックスの値によって、ラベルのメッセージと文字の色（前景色）を切り替える
- 派手過ぎる画面は逆効果 -
重要なエラーは、メッセージボックスや専用のフォームを使って、状況と対処方法を示さなければなりません。このとき、とにかく目立たせたいという意識から、やたらと派手なウィンドウをオープンさせる人もいます。が、これも先述した「！！」付きのメッセージと同じで、ユーザーをパニックに陥らせる可能性があります。
画面10のように、黒字に黄色や赤の文字で強い調子のメッセージを表示すると、ユーザーはそのアプリケーションを使うことに抵抗を感じてしまい、逆効果となるでしょう。
画面10：重要だからといって、あまりどぎつい画面にすると逆効果(Form8)
ソフトウェア設計の基準は、作者ではなくユーザーの側にあります。繰り返しますが、メッセージは「次に何をすればよいかをユーザーに知らせる」ためにあります。「何をすべきか教える」のではありません。
教えるのではなく、知らせるのです。
確かにエンドユーザーは、コンピュータの扱いに関して、開発者であるあなたより劣っているかもしれません。が、相手も立派な大人なのですから、無理に「あれをせよ」と指示するのではなく、自然と「次はここだな」とユーザーが理解できるように持っていくことが大切です。
項目名も、メッセージの言葉遣いも、フォームのデザインもコントロールの配置も、すべて「次にすべきことをそれとなく示す」ために機能するべきです。
アプリケーションはユーザーに正しく使ってもらってこそ、存在意義があります。あなたの作ったアプリケーションを日々使い続けるユーザーの利便を考え、分かりやすく親切なメッセージを表示するよう、心がけたいものです。
サンプルプログラムについて
今回のサンプルは、本文中で紹介した各画面を表示するフォームの集合です。[Form1]などのコマンドボタンをクリックすると、該当するフォームが表示されます。
[閉じる]以外のコマンドボタンとコンボボックスはダミーなので、機能しません。Form7ではテキストボックスに入力された日付データを判断し、エラーメッセージを表示します。
 VBプロジェクトファイルのダウンロード
(LZH形式 17.2KB) |
