 |
 |
ホームページは難しくない 読んでもらえる文章の書き方
| 文字色と背景色 |
| 横に長い文章は書かない |
| 中央揃えの落とし穴 |
| 文字を小さくしすぎない |
| フォントの種類は指定しない |
| 機種依存文字は使わない |
| テキストの色は統一しよう |
| ターゲットをイメージしよう |
| 漢字・カタカナ・ひらがな |
| 箇条書きを上手に使おう |
| 適切な例を挙げる |
| 図形や表を取り入れてみよう |
| 文章を最後まで読ませる面白い方法 |
ホームページには 綺麗な画像を載せたり、アニメーションを
入れたりすることも重要ですが、本来はなんと言っても文章を
読んで貰う事が大切です。つまり どんなに良い文章を書いて
いても 読んで貰えないと意味がありません。
まず 読んで貰うためのポイントとして ぱっと見て解りやす
く 長く見ていても読み疲れない雰囲気を心がけましょう。
● 見やすい文字色と背景色を考える
薄い背景色に薄い文字色は読みづらいですね。
逆に濃い背景色に濃い文字色というのも同じです。
背景色との相性も考えて ほどよいコントラストを
考えてみましょう
● 文字色・背景色サンプル
見えづらい文字色と背景色の例です。
文字色と背景色を似たような色にすると 見えづらい配色に
なってしまいます。
| 背景色は#ffffff 文字色は#cccccc |
背景色は#ffffcc 文字色は#ffcccc |
背景色は#ffccff 文字色は#ff99cc |
| 背景色は#ccffcc 文字色は#ccff66 |
背景色は#99ff33 文字色は#99cccc |
背景色は#339966 文字色は#9966cc |
| 背景色は#99ffff 文字色は#ffccff |
背景色は#9999ff 文字色は#cc66ff |
背景色は#663300 文字色は#003333 |
今度は 見やすい文字色と背景色の例です。
背景色とのメリハリがあって くっきり文字が見えますね。
| 背景色は#ffffff 文字色は#333333 |
背景色は#ffffcc 文字色は#993300 |
背景色は#ffccff 文字色は#003333 |
| 背景色は#ccffcc 文字色は#333366 |
背景色は#99ff33 文字色は#660099 |
背景色は#339966 文字色は#ffffccc |
| 背景色は#99ffff 文字色は#000066 |
背景色は#9999ff 文字色は#003300 |
背景色は#663300 文字色は#ccffff |
これは好き好きがあると思いますが 基本的には 濃い背景色
に薄い文字色よりも 薄い背景色に濃い文字色のほうがいいと
思います。
あと テーブルやメニューなどを入れた時は 本来の背景色と
は別に 背景色を付けるケースもでてくると思いますが これ
も同じように 文字色と背景色を考えて色つけしましょう。