長谷川 裕行 （はせがわ ひろゆき）
有限会社 手國堂 代表取締役
http://www.hirop.com/
テクニカルライターとして活躍。プログラミングに関する著書多数、DB Magazineなどにも多くの記事を提供している。 |
メニュー画面の設計（第18回）、コントロールの配置（第19回）、キーボードによる操作（第20回）など、アプリケーションのユーザーインターフェイスを左右する要素について説明してきました。これらは、経験を重ねたり、あるいはユーザーからの要望を聞き入れることで、ある程度解決できる問題でもあります。
今回取り上げる色の問題は、これまでに取り上げたテーマとははちょっと傾向が異なります。「見た目」という多分に主観的な要素が絡むためです。しかし、主観的な問題だから好きなようにデザインすればよい――というものではありません。見た目という主観的な問題を、いかに一般化して捉えるかが重要です。
見た目の問題とは、即ち「フォームデザイン」の問題です。印刷される帳票にはある程度のパターンがありますが、フォームのデザインには大きな制約がないため、案外適当に処理されることがあります。しかし「見た目」は、ユーザーの操作効率を左右する重要な要素のひとつです。
見た目の良し悪しを決定する要素はいくつかあります。代表的なものは「位置」「色」「大きさ」「数」でしょう。
つまり見た目とは、
１つのフォームのどこに、どのような大きさでどのような色のコントロールをいくつ配置するか？
――という問題です。
第19回では、このうち位置と大きさについて触れました。今回は、色と数について考えてみます。
ユーザーの操作をうまく導くために、メニューの項目を分けることについては既に説明しました。そのとき、特定のグループを目立たせたり、他のグループと違うことを示すために、コマンドボタンの背景にフレームを配し、フレームに色を着けてみました。背景に色があることで、コマンドボタンのグループが際だってきます。
色は重要です。まず、色の問題から考えましょう。
- 色に関係するプロパティ -
色は、各コントロールのForeColorプロパティとBackColorプロパティで設定します。
ForeColor：前景色（キャプションやテキストの色）
BackColor：背景色（キャプションやテキストの地の色）
この２つのプロパティは、ラベル、テキストボックス、チェックボックス、オプションボタン、コンボボックス、リストボックス、フレームなど、外観を持ち文字を表示するコントロールにはすべて備わっています。
プロパティウィンドウから設定する場合は、［▼］ボタンをクリックして表示されるカラーパレットから、任意の色をクリックして選択するだけです。
- カラーパレット -
カラーパレットには、「パレット」と「システム」の２つのパネルがあります。「パレット」では、任意の色を直接指定できます。「システム」では、Windowsの「画面のプロパティ」→「デザイン」で設定したデスクトップ、メニューの文字などの色の設定が反映されます。
カラーパレットから色を選ぶと、プロパティウィンドウの該当欄には"&H00C0C0C0&"といった記号が表示されます。これは色を示す16進数で、コードから色を指定する場合は、表１と表２に示すカラー定数を使って指定できます。
また、RGB関数を使って赤・青・緑の三原色を０～255の256段階で配合し、指定することも可能です。
画面１：カラーパレット
画面２：システムカラーのパレット
画面３：システムカラーは「画面のプロパティ」での設定に基づく
- ２種類のパレット -
カラーパレットの「パレット」と「システム」の大きな違いは、
| パレット： |
指定した色がそのままコントロールに反映される |
| システム： |
実行環境で設定されている色がコントロールに反映される |
という点です。
例えば、アプリケーション開発時に「画面のプロパティ」で「アクティブタイトルバー」を青に設定している状態で、ラベルの背景色（BackColor）をカラーパレットの「システム」パネルから「アクティブタイトルバー」に設定した場合、そのコンピュータではラベルの背景は青くなります。
ところが、そのアプリケーションを実行する別のコンピュータで「アクティブタイトルバー」を赤に設定していれば、ラベルの背景色も赤になります。つまり「システム」パネルで色を設定した場合は、「実行環境によって実際の色が変わる」場合があるということです。
- システムカラーの使用に注意 -
「システム」パネルで色を設定すれば、実行するコンピュータの基本的な色設定と調和の取れた指定ができるというメリットがあります。業務用アプリケーションを実行するコンピュータは、多くの場合標準の配色で使用されているでしょうから、大きな問題はないでしょう。しかし、万一ユーザーが好き勝手な配色を施していた場合、アプリケーションの配色もそれに従ってしまうことになります。
ユーザーの設定した配色にかかわらず、アプリケーションの配色を固定しておきたければ、「パレット」で色を指定します。
- コマンドボタンの色設定 -
コマンドボタンにもForeColorプロパティとBackColorプロパティが備わっていますが、プログラミングレベルで変更できるのはBackColorだけです。コマンドボタンのキャプションは黒に固定され、ForeColorを変更してもキャプションの色は変わりません。
コマンドボタンのBackColorプロパティは、単に色を指定しただけでは反映されません。設定を有効にするには、Styleプロパティを「0-標準」から「1-グラフィックス」に変更する必要があります。
フォームにもForeColorとBackColorプロパティがありますが、アプリケーション実行時に反映されるのはBackColorだけです。ForeColorで設定した色は、デザイン時のグリッドの色に反映されます。
表１：色を指定するvb定数（基本色）
| 記号定数 |
値 |
色 |
| vbBlack |
&H0 |
黒 |
| vbRed |
&HFF |
赤 |
| vbGreen |
&HFF00 |
緑 |
| vbYellow |
&HFFFF |
黄 |
| vbBlue |
&HFF0000 |
青 |
| vbMagenta |
&HFF00FF |
マゼンタ（赤紫） |
| vbCyan |
&HFFFF00 |
シアン（水色） |
| vbWhite |
&HFFFFFF |
白 |
表２：色を指定するvb定数（システムカラー）
| 記号定数 |
値 |
色 |
| vbScrollBars |
&H80000000 |
スクロールバーの色 |
| vbDesktop |
&H80000001 |
デスクトップの色 |
vbActive
TitleBar |
&H80000002 |
アクティブタイトルバーの色 |
vbInactive
TitleBar |
&H80000003 |
非アクティブタイトル バーの色 |
| vbMenuBar |
&H80000004 |
メニューバーの背景色 |
vbWindow
Background |
&H80000005 |
ウィンドウの背景色 |
vbWindow
Frame |
&H80000006 |
ウィンドウの枠の色 |
| vbMenuText |
&H80000007 |
メニューの文字の色 |
vbWindow
Text |
&H80000008 |
ウィンドウ内の文字の色 |
vbTitleBar
Text |
&H80000009 |
キャプション、サイズ ボックス、矢印ボタン内の色 |
vbActive
Border |
&H8000000A |
アクティブウィンドウの境界色 |
vbInactive
Border |
&H8000000B |
非アクティブウィンドウの境界色 |
vbApplication
Workspace |
&H8000000C |
MDIアプリケーションの背景色 |
| vbHighlight |
&H8000000D |
選択された項目の背景色 |
vbHighlight
Text |
&H8000000E |
選択された項目の文字色 |
vbButton
Face |
&H8000000F |
コマンドボタンの表面の色 |
vbButton
Shadow |
&H80000010 |
コマンドボタンの影の色 |
| vbGrayText |
&H80000011 |
淡色表示（使用不可）の文字色 |
vbButton
Text |
&H80000012 |
プッシュボタンの文字の色 |
vbInactive
CaptionText |
&H80000013 |
非アクティブキャプ
ションの文字色 |
vb3D
Highlight |
&H80000014 |
立体表示要素の強調表示の色 |
vb3DDK
Shadow |
&H80000015 |
立体表示要素の濃い影の色 |
| vb3DLight |
&H80000016 |
定数
"vb3Dhighlight"の次に明るい立体表示要素の色 |
| vbInfoText |
&H80000017 |
ツールヒントの文字色 |
vbInfoBack
ground |
&H80000018 |
ツールヒントの背景色 |
以上のことを踏まえて、フォームの配色について考えていきましょう。
- 入力画面に色設定は不要 -
色の問題が影響を及ぼすのは、当然のことながら「色が目立つ状況」です。
テキストボックスやリストボックス、オプションボタンなどは、普通フォームと同じ薄い灰色の背景色に黒い文字を使います。特に業務アプリケーションでは、これらを変更してカラフルにするのは考え物です。
従って、一般的な入力画面や一覧画面では、色の設定はほとんど考える必要がないことになります。せいぜい、ラベルを使ったタイトル文字列の色くらいでしょう。
- メニュー画面のフレームの色 -
面積が広いと、色が目立ちます。第19回で触れたように、メニュー画面でグループ分けしたコマンドボタンをフレームで囲むような場合、フレームに色を着け、色の違いでユーザーを誘導すると効果的です。
ユーザーはフォーム上のボタンや文字を見るのであって、背景（フォームの色）を凝視することはありません。が、面積が広いと無意識のうちに目に入り、そこから受ける印象に影響されてしまうものです。
インクの色が黒から青に変わってもそう気にならないのに、紙の色が白から薄い水色に変わっただけで「おやっ?」と思ってしまう、という経験をお持ちの方もいると思います。面積の広い色は、たとえ地味でも影響力があります。
フォームの背景色をナチュラルな薄い灰色にしておけば、フレームの色をどう組み合わせるかで、画面の印象が大きく変わってきます。
- 業務アプリは控え目に -
カラーパレットを使えば、中間色も含めて様々な色を設定できます。が、フレームにあまり凝った色を指定しても意味はありません。個人が楽しむために使うゲームやマルチメディア関係のアプリケーションなら、作者の好みの配色とするのも自由でしょう。しかし業務用アプリケーションは、「明るく楽しくカラフル」である必要はありません。
むしろ、色数を押さえて地味で控え目な印象を与える方がよいでしょう。画面４のように赤や青をふんだんに使うと、ユーザーは落ち着いて仕事をできなくなってしまいます。色は人間の感情に大きく働きかけるため、特に業務用アプリケーションでは、控え目な色使いでユーザーを落ち着かせることが大切です。
画面４：色数の多い派手な画面は疲れる（サンプル～Form1）
- 事務用品と業務アプリ -
現物の事務用品を思い浮かべれば、そのことがよく分かります。かつては地味な灰色が基調となっていましたが、10年ほど前からは白っぽいベージュ色が中心となってきました。また、限りなく白に近いベージュ、灰色がかった水色、それらとグレーや黒のツートンなどが、ここ数年の主流です。
このように、時代と共にオフィスのデザインも変わって来ていますが、その根底には「落ち着いた色合いで目立ち過ぎない」というコンセプトがあります。ビジネス用のパソコンと、個人向けのパソコンのデザインを見比べても、そのことはよく分かるでしょう。
|
|
個人が家庭で使う道具は、個人の趣味に合わせたカラフルな色合いでも構いませんが、趣味も好みも違うたくさんの人が共同で扱う環境に置かれる用品類は、個性を主張し過ぎてはいけません。
- なじみやすく飽きが来ない色を -
ソフトウェアの場合も、同じことが言えます。
基本的な色は薄い灰色や灰色がかった緑など、地味で落ち着いた飽きのこない配色とします。かといって、地味を狙い過ぎて暗い色ばかりにすると陰気で、これもやる気をなくさせてしまいます。
画面５のように、地味だが適度にメリハリのある配色がよいでしょう。画面6は地味過ぎる例です。但しこの程度の地味さなら、用途によっては使えます。
ビジネスで使う道具のデザインは、「なじみやすく飽きが来ない」ことが第一条件となります。特に色は直接視覚に訴える要素なので、このことを念頭に置いてデザインしましょう。
画面５：適度な色使いで落ち着いた雰囲気にする（サンプル～Form2）
画面６：落ち着き過ぎて地味になってもいけない（サンプル～Form3）
「派手／地味」といった表現を用いました。こういった色の印象の基準について考えてみましょう。
- 色の組み合わせ -
色から受けるこれらの印象は、1色ではなく複数の色の組み合わせに影響されます。無論1色でも派手な色や地味な色は存在します。特に黄、黄緑、ピンク、水色など中間系のの原色はそれだけで十分派手なので御法度です。
しかし、フォーム上のコントロールが、すべて同じ色で統一されることはあり得ません。隣にくる色との組み合わせで、印象は大きく変わります。
- 似た色でまとめる -
「原色がダメなら中間色を使えばいい」のかと言えば、必ずしもそうは言えません。
まず「補色関係」の組み合わせは色相差が強く派手に見えます。逆に色相の似た色、つまり同系色の組み合わせは落ち着いた印象を与えます。画面７と画面８を見比べてください。
画面７：中間色でも色相が異なると印象が強くなる
画面８：傾向の似た色同士なら落ち着いた印象を与える
「色相」は「色の傾向」であって、明るさ（明度）や鮮やかさ（彩度）とは違います。明るい色と暗い色を並べると明暗差（コントラスト）が強調され、派手で目にうるさい印象を与えますが、色相の似た色同士で明暗を与えると適度なコントラストが生まれて画面にメリハリが付きます。
基本的に、同系色または近似色の組み合わせが、落ち着いてなじみやすい印象となります。
- 暖かい色と寒い色 -
色には「暖かく感じる色――暖色」と「寒く感じる色――寒色」とがあります。
暖色：赤、オレンジ、黄色など
寒色：青、紫、黒など
業務用アプリケーションではあまり暖色は使わない方がよいでしょう。
暖／寒という表現から温度のイメージだけを持っているように思われがちですが、暖色と寒色には別のイメージもあります。一般的に暖色は動的なイメージを与え、寒色は静的な落ちついたイメージを与えます。
これに明暗によるイメージを加味すれば、明るい暖色は軽快なイメージ、暗い寒色は重厚なイメージとなります。顕著な例が乗用車の流行色です。女性向けの車は暖色系、男性向けの車は寒色系が中心です。
- 暖かい色と寒い色 -
自動車の色はこれ以外にも参考になることがたくさんあります。若い男性向け、若い女性向け、アダルト向け、家族向けなど、それぞれに色の傾向が異なっています。また、同じ青でも
若い男性向け：原色に近い青
若い女性向け：パステル調の青
アダルト向け：藍色に近い青
家族向け：やや暗めのメタリックの青
…といった具合です。
パソコンの色でも同じです。Apple社のiMacが若い女性を狙ってカラフルなデザインとしたのは周知のとおりです。同社は、続いて男性ユーザーや業務使用を狙い、黒を基調とした渋いデザインを投入しました。
- フォームは標準色が無難 -
業務アプリケーションは一般市場に流通させる商品とは異なるので、そこまで対象ユーザーを意識することはありませんが、性別や年齢（さらには学歴や職業など）によって、好まれる色が違うということを、知っておきましょう。
色によって、ユーザーの気分は変わります。業務アプリケーションは、男女を問わず幅広い年代の人が使うことが多いため、最大公約数的な「無難な傾向の色」を使用するのがよいでしょう。
まずフォームの背景色を寒色系の落ち着いた色に設定します。通常ここには薄い灰色が設定されているので、普通はそのままで構いません。背景はあくまで背景ですから、あまり凝った色を使うことはないでしょう。背景が濃過ぎると、フォーム全体が目立ち過ぎてしまいます。
- 見た目の重さと安定感 -
平面上のアイテムは「見た目の重さ」を持っています。実際には質量など存在しないのですが、色や大きさで見る者に「重さを」感じさせてしまうのです。
同じ面積なら、濃い色の方が重く、また暗い色の方が重く見えます。フレームやフォームの背景など無地の部分は、面積が広いと軽く見えます。
フォームのコマンドボタンの配置で考えてみましょう。画面9のようなボタンの配置だと、どこか不安定で落ち着かない雰囲気を感じます。一番下の［終了］ボタンが小さく、さらにその下に余白があるためです。
大きく文字数の多いボタンが寄せ集っている部分が重く見え、逆に小さくて余白の多い［終了］ボタンは軽く見えます。その下のフォームの余白も、軽さを助長しています。
画面10のように最下部のボタンを大きくし、濃い色のフレームでバランスを取るか、画面11のように軽く見えるコマンドボタンを上部に配置すると、下が重く見えて安定します。
画面９:下のボタンが小さいと不安定に見える
画面10:下を大きくすると安定する
画面11:軽い部分を上に移動させても安定する
コマンドボタンを配置したメニュー画面を例に、フォームの配色と配置を考えてきました。が、色や配置が重要になるのは、メニュー画面だけではありません。
- フォームを区切るだけでも違ってくる -
データベース処理では、フィールド数の多いテーブルを元に大きなフォームを作る必要が生じることもあります。すると、フォームにたくさんのコントロールを配置しなければなりません。
処理の流れやフィールドの意味合いなどを考慮しつつ、限られた範囲内に適切な配置を行なうのは大変なことです。その結果、どうしても機能優先となり、バランスの悪い画面になってしまうことがあります。
そのような場合も、ちょっとした配慮で安定した画面を作ることができます。画面12は、商品の情報を入力するためのフォームです。商品番号や商品名、単価などの基本的な情報を上に、在庫数などの付加的な情報を下に配置し、横線（Lineコントロール）で画面を区切っています。
画面12：複雑な入力画面を横線で分割した例（Form4）
- 付加情報を隠す -
横線があるかないか、横線の下のラベルの色を変更するかしないか…といった違いだけで、フォームの繁雑さは大きく変ります。また、横線で区切らないと、ユーザーは「どこからどこまでが基本的な内容なのか」判別しにくくなり、余計な情報に目を奪われてしまいます。
さらに使いやすくするには、画面13のように必要な情報だけをまず表示しておき、ユーザーがコマンドボタン（この例では［↓在庫情報］）をクリックしたら、付加情報を表示する――というインターフェイスにするとよいでしょう。
コマンドボタンのクリックで、単にフォームのHeightプロパティを変更しているだけです。サンプルにソースコードが入っているので、確かめてください。
画面13：最初に必要な情報だけを表示する（Form5）
画面14：ユーザーの操作によって付加情報を表示する（Form5）
色を設定する際に注意しておきたいことを掲げておきましょう。
- 256色表示が前提 -
色はたくさん使えばいいというものではありません。デザインの経験があれば、これは当り前のことだとすぐに分かるのですが、技術者と名の付く人たちの中には、そのことを理解していない人が意外と多いようです。
特に事務系のアプリケーションでは、色を使い過ぎないように気を付けましょう。色数が多ければカラフルで楽しく見える…というのは、大きな間違いです。
表示色数は256色を前提としておきましょう。デザイン関係のオフィスなどでは1677万色も当たり前ですし、ビデオカードに８MB～32MBのVRAMが搭載された事務用パソコンもあるので、ついフルカラー環境で設計してしまうこともあるでしょう。
しかし、中には256色しか表示されないマシンも存在します。フルカラー環境で微妙な色の違いを表現することも可能ですが、業務用アプリケーションではほとんど意味がありません。文字や背景色の指定は、「灰色系の落ち着いた色を３～４色程度まで」というのが無難なところです。
- 標準の配色を前提にする -
既に述べたように、デスクトップの基本配色は「画面のプロパティ」でユーザーの好きなように変更できます。せっかくあなたが、灰色の背景に灰色のボタンを前提としてデザインしても、タイトルバーが黄緑、ボタンの色がピンクにされたマシンで実行されてはどうしようもありません。
ただ業務用のコンピュータでは、好き勝手な色に変更してしまっているユーザーはそう多くありません。ほとんどは「標準の配色」で使っているはずですから、それを前提としてフォームの配色を決めればよいでしょう。推奨するWindowsの配色を指定し、それを前提にデザインすれば確実です。
一番いけないのは、アプリケーションを作る側がWindowsの画面デザインを変更している場合です。「他人が使う道具」を作っていることを意識し、開発用のマシンを突拍子もない配色に設定しないよう、気を付けましょう。
カラーパレットで「システムカラー」を使う場合も、開発用マシンと実行用マシンが同じ配色を使う前提なら、問題はありません。
- フォームの基本色を統一する -
一般の業務用システムでは、処理に応じて、あるいは１つの処理内でも進み具合に応じて、いくつかのフォームを切り替えて表示することになるはずです。その場合、各フォームの基本の色使いは統一しておきましょう。
商品の登録と注文の受け付けでは処理内容が違うからといって、それぞれまったく違う色合いのフォームを表示したのでは、ユーザーは面食らってしまいます。すべての処理がまったく同じ色合いのフォームでも、見出しで十分に判別できるものです。せいぜい、その見出しの周りの色を変化させる程度にとどめておいた方がよいでしょう。
サンプルプログラムについて
今回のサンプルは、様々なフォームのレイアウト例を表示するだけとなっており、実際のデータベース処理は行ないません。画面15のようなフォームが表示されるので、ボタンをクリックしてフォームのデザインを確認してください。
画面15：サンプルプログラムのメニュー画面
 VBプロジェクトファイルのダウンロード
(LZH形式 15.1KB) |
