大きな区切り、小さな区切り - 罫線の上手な使い方
ホームページをデザインするときに、罫線（けいせん）がよく使われます。
罫線。ライン。ヨコやタテに引かれた線のことですね。
例えば、CASIO（カシオ）のサイト。
グレーや黒の罫線が、たくさん使われています。
罫線。
とくに、情報を視覚的に「区分け」するときに頼もしいデザイン要素なのですが、やたらめったら使えばよい、というわけではありません。
罫線の太さや色にも、それなりの「意味」「役割」があるんです。
情報の「強弱」を罫線で表現する
↓シンプルなデザインですが、下記の例を見てみてください。
★ペット大好き！
**************************************
このページでは、私のペットを紹介します♪
**************************************
【チワワ】
ウチで飼っているチワワのちくわちゃん。
アイフルのCMに登場するチワワよりぜ～んぜんカワイイ！と思います。
**************************************
【シーズー】
シーズーって、中国の歴代王朝の宮廷でも飼われていたんです。
ウチのマルちゃんも、中国四千年の歴史！の血が流れている！？
どうでしょうか？
私の感覚からすると、上記のデザインは、ちょっと見づらいと思います。
ココで使われている罫線は、すべて「******」です。メリハリが付けられていません。
「その罫線は、どのレベルの情報に付随するの？」
この強弱が、デザインに反映されていないんですね。
ココで、基本に立ち返ってみましょう。
ホームページに掲載されるすべての情報には「構造」があります。
重要度が「より高い」情報と、「比較的低い」情報がある。
先ほどの例で考えると・・・
「★ペット大好き！」
【チワワ】
【シーズー】
↑この3つの項目、決して「対等な関係」にはありませんよね。
この3つの項目のうち、「親」となるのは、「★ペット大好き！」です。
【チワワ】と【シーズー】は、あくまでも、その親の下にいる「子」。
ちょっと極端に言ってしまえば、親よりも、情報としての「重要性」は低いはずです。
この情報の強弱を罫線のデザインでも表現してあげれば、視覚的に、より伝わりやすくなるんです。
例えば、↓下記のように手直ししてみてはどうでしょうか？
★ペット大好き！
**************************************
このページでは、私のペットを紹介します♪
--------------------------------------
【チワワ】
ウチで飼っているチワワのちくわちゃん。
アイフルのCMに登場するチワワよりぜ～んぜんカワイイ！と思います。
--------------------------------------
【シーズー】
シーズーって、中国の歴代王朝の宮廷でも飼われていたんです。
ウチのマルちゃんも、中国四千年の歴史！の血が流れている！？
↑こちらの例では、罫線のデザインを、
「*******」
「-------」
の2パターンに分類してみました。
人によって好みも分かれるかとは思いますが、一般的には、「-------」よりも「*******」のほうが
視覚的なインパクトは強烈なはず。
つまり、先に目に飛び込んでくるということです。
罫線のデザインにメリハリをつけることで、情報の「強弱」を視覚的に表現できるんです。
時間の都合上（笑）、ココではシンプルなデザイン例しか載せられませんが・・・
よりキッチリとスタイルシートなどで表現する場合には、罫線のデザインバリエーションも、より多様に出来ると思います。
例えば、罫線の太さを変えてみる。色の濃さを変えてみる。
赤にしたりオレンジにしたり、色そのものを変えてみる。
・・・などなど。
いろいろ工夫できますよね（^ ^）
メリハリのついた罫線を活用することで、あなたのページの情報も、よりハッキリ伝わるようになるかもしれません！
※注意！
罫線はむやみやたらと使いまくればよい、というものではありません！
罫線を使いすぎると、逆に見づらくなってしまうこともあります。
罫線を入れる意味・理由をキチンと考えてデザインすることが大切です！
さらに突っ込んだデザインノウハウは、メルマガでお届けします！メルマガ読者限定の、サイト無料診断企画もたまにやってます。
>>バックナンバーを見る
Powered by
