管理画面の基本となる文字色です。管理画面ではカラフルな文字を使うと、目がチカチカして疲れるので、私はよほどのことがない限り、カラフルな文字を使用することはありません。「管理」しやすいものにするためベーシックな色を使用するのをお勧めします。カラフルな管理画面というのは本当に見難くなります。
例えば、入力フォームでエラー表示をする場合、基本色がカラフルであるとどの表記がエラー表記なのか、始めてみる人には識別しにくい・・・など。目立つ色というものは他のテキストを隠してしまいます。目立つ文字の内容だけが頭に残っていてその他は何が書いてあったか思い出せないなんてないですか？重要なテキストが他の色に埋もれてしまうのです。
また、太文字が多すぎたり、文字の大きさが小さい・大きいなども使いにくい管理画面となります。
カラフルな文字を混在させるくらいなら、いっそのこと全部同じ文字色で書くほうがよほどいいです。その場合は「※」「■」「●」などを使用して、文章にメリハリをつける必要があります。
色やスタイルの使用方法を誤ると、プロが作成する管理画面とは思えないクオリティの低い管理画面となります。⇒実例
| 適用箇所 |
ガイド |
カラー例 |
| 通常テキスト |
基本的な文字・文章は統一するのが良いかと思われます。 |
#333333
#000000 |
| 重要テキスト |
通常テキストの中で特に注意を促す必要がある文章は重要テキストとして色を変えるのはOKラインです。 |
#ff3300
#cc0000
#990000 |
| コメント |
入力フォームなどに入力形式の例を書く場合、若干色合いを薄めに使うと入力フォームと溶け合うことなく、表示することができます。各フォームのパーツは基本は黒や濃いグレーなので、通常テキストの色そのままで「※半角英数字」と書いてもごちゃごちゃ見難くなります。
こちらのサイトで用意している、「ベーステーブル」の<th>で使ったグレー色を使用するのも良いかと思います。 |
#666666
|
| タイトル |
これは比較的自由に使うが、テーブルで使った色と同系統の色や、濃い色のものを使うと、綺麗になります。目立つ色を使う場合、重要テキストやエラーで使用した色と区別のつく色にします。 |
|
| エラー |
「エラーがあります」の部分を強調しエラー内容は通常色、「エラーがあります」の部分を通常色しエラー内容を赤系統の色にする2パターンがあります。どちらも赤系統の色にしてしまうのはやめましょう。どこがエラー内容なのか不明確になります。 |
#cc0000
#990000 |
| リンク |
ブラウザのデフォルトカラーか、近似色にしましょう。また、<th>にやヘッダデザイン、テキストに似た色は避けます。管理画面内にあるリンク先は管理する上で重要な内容が多いです。リンク用色として用意し、他の部部では同じ色を使わないようにし、別格扱いしましょう。下線はとらないようにします。もしどうしても装飾したい場合は、フォーカスしたときに下線がなくなる・色が変るくらいにしておきましょう。 |
#0065ff |
| その他 |
その他、上記以外で他のものと区別したいものは、自己判断で・・・。他に色を追加場合、1〜2色までに押さえておかないと、結果的にカラフルな管理画面になってしまいます。青系・赤系・緑系の中で上記で使っていない色を使うと、他との区別がしやすいです。紫は、管理画面として印象がよくありません。アダルトサイトやPOPなサイトの場合は良いかと思います。 |
#009900
|
| 強調文字 |
<th>にあたる部分（項目）は、太文字・細文字は好みだと思います。個人的には太文字はあまり好きではないので、使いたくないのですが、見易さの点で基本的に太文字使います。しかし、<th>のセルに色がキッチリついている場合は、細文字でも十分項目としての見出しの役目を果たします。
ここらは好みでしょうね。細文字を<th>で使っている例は「お問合せ」にありますので、ご参考にしてください。
若干スマートかと思います。 |
|
文字色・スタイル
