こんにちは、つしまです。今週はバナーの作成やパンフレットの修正をして、「罫線」にはさまざまな使い方があること改めて感じました。「罫線」は普段何気なく使っているレイアウト要素のひとつですが、要素を区切ったり、強調させたり、太さや色によっては装飾的なあしらいにもなるため、多くのデザインで必ずと言っていいほど登場します。
今回は、デザインで使われるさまざまな罫線の使い方をまとめていきます。きちんと理由のあるデザインをするためにも、シンプルな素材ですが、「線」への理解を深めていきたいと思います。
「分ける」ための線
区切りの線はグループの分け目に引く、最も基本的な線です。塗りを使うのではなく、線を使って区切ることで、スッキリとしたデザインにすることができます。
細い罫線でシックな雰囲気に
細い罫線は繊細でスタイリッシュな印象を演出します。白地に黒の罫線は視認性も高く、コンテンツごとのまとまりがわかりやすいです。
また、細い罫線は写真の邪魔にならないため、ビジュアルをしっかりと見せつつ情報を整理することができます。破線やドットの線を用いてポップ感を演出しているデザインも見かけます。
太い罫線でインパクトを
細い罫線はシャープでクールな印象だったのに対し、太い罫線は力強くインパクトのある印象を与えます。
逆に黒い線ではなくグレーの線を使うことでコンテンツとなじみ、線の主張が強くなりません。目立たせながらも柔らかく馴染みのいい印象にすることができます。
「強調する」ための線
ポイントに下線を引くことで、要素を強調させることができます。優先順位の高いテキストにマーカー風の太いアンダーラインを引くことで強調したり、要素を枠線で囲って目立たせたりなどさまざまな活用方法があります。塗りなしの線だけで囲うことで情報を整理することができますが、あまりに多いと視線があちこちに散ってしまうので注意したいです。
「揃える」ための線
線には要素を揃える効果もあります。
例えばテキストの配置を左に揃えるレイアウトで、揃え位置がまだ曖昧に見える場合。
これに1本の線を加えると、揃え位置が強調されます。
線を加えたことで、視線があちこち動くことが減りますし、関連した情報であることが視覚的にもわかりやすくなります。
「装飾する」ための線
装飾的に罫線を使うことで、よりにぎやかな印象にデザインすることができます。飾り枠を使って格式高いイメージを表現したり、鉛筆で書いた手書き風の線を使ってナチュラルさを表現するなど、使い方によってさまざまな雰囲気を演出できます。
「繋げる」ための線
右のWebサイトでは、問い合わせ後のワークフローを線で繋げ、順序を表しています。
数字のみの表記でも順序は分かりますが、線で結ぶことによって、より視覚的に把握できます。引かれた線が視線を誘導してくれるため、とても読みやすいデザインになります。
さいごに
今回の記事では、よく使われる「罫線」の使い方をまとめました。上記のように線を使ったデザインは数多く存在します。
線はビジュアルの邪魔をしないので、情報の整理や装飾としてとても便利なデザイン要素です。とても大事なデザイン要素なので、そのさまざまな使い方をしっかりと押さえた上でいろいろな配置を実践して、素材となる「線」を効果的に使っていきたいです。
