ホームページを作る上での配色とフォント

質問

ホームページで重視するのは見やすさです。そうなると注意点が増える訳ですが、

・配色(主に明るさや組み合わせ等)
・フォント(大きさや種類等)

　のみに言える注意点は何がありますか？お願いします。

回答No.4

noname#96725 · ベストアンサー

>ホームページで重視するのは見やすさです
仰るとおりですね。

私が気をつけているのは
■色
１）背景と文字との明度比
これは付きすぎると＃１さんの仰るように読みづらいです。差をなくしてゆくとデザイン的には
面白味が加わりますが、やっぱり読みづらくて困ります。

２）H１～H3あたりの大きな文字であるほど明度の差を少なく出来ます。H1は思いっきり大きくする
と面白いものになります。そんなときには明度差を少なくするほうが面白いですね。

３）色相としては同系色が無難とは思いますが、反対色を使うと視認性は良くなります。
然しどちらかの色調はしっかり落とさなければわずらわしくなると思います。私が反対色を使う時は
反対色ということがすぐには判らない程度に一方を暗くするか彩度を落とします。

４）背景色・文字色ともに彩度を抑えると読みやすいと思います。彩度を上げるとすれば
ごく小さい部品だけにしないと目がチカチカします。

５）主文章に使うフォント色は出来たらホームページ内は統一した方が良いと思います。
もし変えるとしてもひとつのファイル内は一定が良いでしょう。

■文字の体裁
１）主文の文字は0.9emか1.0emが適当ではないかと思います。小さいほうがデザイン的に良いものですが、
視認性からは1.0emが良いと思います。重要でない文章だけは0.9emにする、などは面白いと思います。

２）行間の空きはしっかり取りましょう。HTMLでは限度があります。これもCSSで行間隔を設定しましょう。

３）一行の長さは出来るだけ短いと読みやすくなります。しかし画面の中で一行の長さを短くすると全体の
体裁が悪くなります。そこをデザイン処理で救わなければなりません。

４）フォントは明朝体かゴシックが一般的ですね。どちらでもお好みで良いと思いますが、どちらかにして
サイト内で統一感を持たせたほうが見やすいと思います。
もし違うフォントを使うなら見出しなどに限ると良いでしょう。

■その他
１）文章の意味に従って段落を使いましょう。５～６行あたりを越える文章はどこかで一行あけると良いと
思います。強調したい文章は一行だけで改行すると印象的になります。

２）文章は簡潔に、を目指しましょう。アップロードする前には何日も暖めておいて推敲しましょう。
これも見やすさのひとつです。　

３）くやしい事に閲覧側の見え方は本当にさまざまです。苦労して作ってもその通りに見てはくれません。
そこでI.Eとネスケ二つのブラウザソフトをインストールしておいて両方でチェックするのは良いことだと思います。解像度はまだ1024*768が主流ですが、1280*1024も最近増えてきました。フォントサイズが同じでもこの二つでは見え方が随分違います。

済みません、ご質問を拡大解釈して回答の制約をはみ出てしまいました。

お礼

多数の回答をありがとうございます。
最近は、文字の設定が小さいサイトが大変多く困りますね。
その様な点に気を付けて、流行人がされないサイトを目指します。

　ありがとうございました。

回答No.3

shiro-joe

・各ブラウザによって見え方やデザインが変わってくることがあるので、最低４大ブラウザを試してみる。
・機種依存文字や文字化けはどうか。
・視覚障害者用ブラウザに対応しているか。
・初心者が使いやすい（操作しやすい）作りか。
・メンテナンスがしやすいように後から読みやすくきれいにソースを記入すること。
・Ｗ３Ｃの推奨に添うこと。
などに気をつけて作るように習いました。最後の２項目は直接サイトの見易さとは無関係ですが、ある程度重要視しておいたほうがよいと思います。プロとしてやっていくなら当然の事項です。
スクロールバーだらけとか点滅文字、流れ文字だらけとかも見難くて使いにくい典型だと思います。
文法チェックをしてくれるサイトのＵＲＬを挙げておきます。

参考URL：

http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

回答No.2

noname#19206

配色は、例えば黒系統の背景にグレーの文字を書くと環境によってはものすごく見づらくなります。
対象者を特定年齢に絞らないのであればフォントの大きさは変更可能にするべきですね。
フォントの大きさは多少小さく設定しても構わないと思いますが、
変更できるようにしておいたほうがいい…というのは#1 sr-agentさんの仰るとおり。
あと種類についてですが、インターネットユーザーにはWin,Macいろいろいますので、
特定環境に対してだけやたらと装飾効果のあるフォントは使わない、
またはフォントの複数指定でなるべく多くの環境に同等の視覚効果が与えられるようにするべきではないでしょうか？

色覚異常に関しては、Webアクセシビリティツールバーというものに、
表示中のWebページを色覚異常者が見ている状態を再現するような機能が付いていました。
http://www.infoaxia.com/tools/wat/index.html

はっきり言って、テキストブラウザ環境でまともに利用できるようなのがベストです。

回答No.1

sr-agent

まずは、モニターによって見え方が変わる可能性のない色
（Web　Safe　Color）を使用する
ということが1点、
フォントは、ptなどの絶対値ではなく相対値（％など）で指定する
あとは、色盲の人にも見やすい色かどうかをチェックして
見えにくい組み合わせは避けるなどでしょうか？

それと、背景色は真っ白、文字色は真っ黒だと
コントラストの関係で、ちらついたり見えにくかったりするそうなので、
背景色は多少色を入れる、文字色も真っ黒より多少薄くする
などの点に気をつけるとよいかもしれません。

コントラストチェックは
http://www.i-create.jp/accessibility/color-checker.shtml
でできます。

ご参考まで。