太い罫線、細い罫線
「罫線」（けいせん）
ホームページは作ったことのない人でも、MicrosoftのExcelでは、表など作成するときに罫線をちょくちょく使いますよね。
罫線。
情報を整理して見せるときには、欠かせないデザイン要素です。
そんな罫線を、よりパワフルに活用するために。今日は、罫線の「太さ」について、考えてみましょう。
なぜ、その罫線は、その太さでデザインするのか？？
まずは、さっそく、罫線を使った表組のデザイン例を見ていきましょう～。
▼デザイン例その1：「ちょっと暑苦しくないですか・・・？」しつこい感じの表組み
「とくに、どこがどう悪い、というわけではないけど・・・」
ハッキリ指摘することはできませんが、なんとなく、暑苦しい感じを受けませんか？
なぜか？
「普通の表組みに見えるよ？何が問題なの・・・？」
確かに、表組みであることは、見れば分かります。
でも、あと一歩、見せ方の工夫がほしい。
ここで、ちょっとイメージトレーニングを♪
この表組みが含んでいるデザイン要素を、ちょっと理屈っぽく（笑）分析してみましょう。
表組みに使っている罫線。
罫線を、情報を視覚的に見せるための「役者」、情報を区分する「役者」として、考えてみてください。
この表組みには、次の二種類の罫線が含まれていることが分かりますね。
- 表組み全体を取り囲む、外側の罫線
- 表組みの各情報を区分する、内側の罫線
さてさて、（1）と（2）の罫線。それぞれの役割は、まったく同じでしょうか？
これら二種類の罫線。それぞれに与えられた役割は、違うはずですよね。
▼デザイン例その2：「なんかヘンだよ・・・！？」ちょっとカン違いの表組み
ひとくちに罫線といっても、役割はいろいろある。
じゃあ、役割の違いを、見た目でも表現してみようじゃないの！
・・・というわけで、罫線の太さを変えてみました。しかし・・・！
「理由はよく分かんないけど、なんとなく気持ち悪いなあ・・・」
そんな印象を持ちませんか・・・？
なぜ、この表組みは、気持ち悪く見えるのか？？
罫線の「太さ」が、それぞれの罫線の「地位」（＝重要度）と、あべこべだからです。
- 表組み全体を取り囲む、外側の罫線
- 表組みの各情報を区分する、内側の罫線
↑（1）の罫線のほうが、（2）の罫線よりも、地位は「上位」。
役割として、より重要ですよね。
「ここのエリアが、『今日の献立』の表組みですよ～！」
情報全体を、ガッチリ、しっかり包み込むことで、そのようなメッセージを、見る人に伝えている。
いってみれば、親分（おやぶん）クラスの罫線です。
一方で、（2）の罫線は、どうでしょうか？
こちらは、表組みに含まれる情報を、区切る役割を果たしています。
もちろん、大切な役割であることに変わりはないのですが・・・（1）の罫線と比べたら、重要度は低いですよね。
じゃあ、太さをぶっとくするのは、どちら？
より重要度の高い、（1）の罫線を太くしたほうが、自然ではないでしょうか？
▼例その3：「ちょうどしっくりくる」平均的な表組み
「でも、このデザインがカンペキってわけではないでしょ？？」
もちろんです。
「このデザインが、100点満点で絶対正しいのさ！」
・・・なんてことは申しません。
あくまでも、デザインの考え方の例として、参考までにお見せしたまでです。
細い一本の線にも、ちゃんとした存在理由が！？
「Webデザインで最も重要なことは、情報の構造を、視覚的に表現すること」
すべてのデザイン要素には、しかるべき理由がある。
罫線を1本引くのにも、それなりの理由が必要になってきます。
*なぜ、この罫線を、ここに引くの？
*なぜ、この罫線は、この太さなの？
たかが罫線、されど罫線。
しっかり考えぬかれたうえで引かれた線は、強力な働きをしてくれます。
情報を、より伝わりやすくしてくれる。見やすくしてくれる。
逆に言えば、必然的な理由がないなら、余計な線は引かないほうがましです。
情報を、かえって見づらくしてしまうからです。
重要なことなので、くり返します。
「Webデザインで最も重要なことは、情報の構造を、視覚的に表現すること」
同じようなテーマで過去にも記事を書いているので、
ご参考までに読んでみてくださいまし～。
さらに突っ込んだデザインノウハウは、メルマガでお届けします！メルマガ読者限定の、サイト無料診断企画もたまにやってます。
>>バックナンバーを見る
Powered by
