細い罫線の多いページデザインは、ごちゃごちゃして見づらい

デザインで細罫線は、コンテンツを区切っての差別化、表組みの横線、サイドナビゲーションメニューの仕切り線など、さまざまな場面で役立ちます。

特にwebサイトのトップページは、いろんなコンテンツの目次になるハブの役割を担うので、ついついグレーの細罫線で区切ってしまいがち。

便利なんだけど多用すると罫線だらけで、ごちゃごちゃしたデザインになってしまいます。

特に横罫線ばかりだとコンテンツが分断されすぎて、どこで意味のある区切りを入れたいのかが分からず、読みにくくなってしまいます。

罫線なしでデザインする。

コンテンツ(ブロック)の場合

コンテンツ(ブロック)の差別化のために、罫線を使いたくなりますが、ごじゃごじゃして見にくい場合も。

そんなときは、ページの背景色に色をつけ、コンテンツの背景色は白にして、線ではなく面で区切った方がスッキリして見やすいです。

逆に背景色は白でコンテンツの背景色を薄い色を引いたりするのもいいですね。

バナーの場合

背景色を使い、罫線を使用しないようにします。

全面写真や、色ベタにするのもいいですね。

見出しの場合

ジャンプ率の高い(大きい)フォントサイズにして、差別化するのがシンプルでいいかも。

アイコンなどアイキャッチを使用したり、色帯に白抜き文字にしてしまうのもいいですね。

罫線が必要なデザイン

WEBリンクの場合

テキストリンクやサイドバナーは、罫線があったほうがリンクとわかりやすいので必要です。

ユーザービリティを考慮するなら、リンクに罫線は重要視スべきですね!

縦罫線

縦計線は、ワンポイントとしてあっても良いんじゃないでしょうか。

結論

罫線を多用したデザインより、面で区切るデザインのほうが、スタイリッシュになるかな。

  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です