1つのデザインの中で「線」がどんな役割をはたすのか？についてのお話です。
架空のカフェをテーマに紹介カードを作成をしながら、レイアウトの中で「線」の役割を考えてみる
ということをやってみました。
今回は「線」というシンプルな素材ですが、素材の理解というはとても大事ですね。
この記事のアウトライン
初期設定
デザインするにあたっては何をテーマにするか？が重要です。
とにかくデザインを勉強したいという場合は、どんなテーマで何をデザインするのか？を明確にします。
デザインのテーマとなるカフェの設定
| 名称 | あおぞらカフェ（Aozora Cafe） |
| 紹介文 | ロンドンのオープンカフェのようなスタイリッシュでゆったりとした時間をお過ごしいただけます。 |
| 住所 | 新潟市中央区万代3-154 |
| 電話番号 | 025-123-4567 |
| 営業時間 | AM8:00 – PM17:00 |
今回は線の役割についてなので、テーマは適当に設定しました。
制作物の要件
| スタイル | 店舗の紹介カード |
| サイズ | 120mm × 120mm |
| 配色 | 白・黒・グレーのみ |
サイズは正方形で、配色はモノトーンのみです。
モノトーンにしておくと素材の効果を理解しやすくなります。
複雑な配色はある程度の経験値も必要になりますので、今回はやめておきましょう。
揃え位置の強調をする線
基準線という言葉がからもわかるように、線には「揃える」効果があります。
テキストの配置を左に揃えるレイアウトをしただけでは、揃え位置はまだ曖昧です。
これに1本の線を加えると、揃え位置が強調されます。
線を加えたことで、視線がアチコチ動くことが減ります。
文字をインデントさせているので、カフェに関連した情報であることが視覚的にもわかりやすくなります。
領域を分割する線
境界線という言葉の通り、線には「分ける」効果もあります。
このように線を引くと、上・中・下と領域が分割されたように見えます。
分割された領域に、分類された情報を配置していくといくと、カテゴリごとに整理された本棚のような効果を得ることができます。
線を入れずに文字を配置した場合と比べると、情報が整理されているように感じると思います。
「領域を分ける」はウェブデザインでもよく利用されています。
「ズルい線」と呼ばれる1pxのグレーの線もこういった効果を生み出しています。
繋がり・関連を表す線
フローチャートのように、項目と項目の関連を示す線があります。
つまり、線には「つなげる」効果があります。
このレイアウトは一見何も考えずに配置したように見えます。
ここに1本の線を追加してみます。
カフェの名前と店舗情報が1本の線でつながり、関連性を表しているように見えます。
製作段階では手順は逆になることもあります。
はじめに線を描いてから、文字を配置することもあるので、製作状況に合わせて臨機応変に。
情報の整理をしながらデザインを完成させていくこともときには必要です。
文字などを強調する線
文書の中の強調したい箇所に「アンダーライン」を引く人もいるように、線には特定箇所を「強調する」効果があります。
文字を縦方向に並べてみました。
ここに強調の線を加えてみます。
カフェの名前に真っ先に視線が行くようになります。
線幅もカフェの名称の部分は1.5mm、あとの2本は0.5mmにしてあり、強弱をつけてあります。
線と文字の間隔にも気を配ってみます。
文字と線が重なるくらいまで近づけてしまうと、文字が読みづらくなります。
離れ過ぎていると関連性がぼやけてしまいます。
ちょうどいい距離を探りながら、自分の感覚で線の配置を覚えるようにした方がいいです。
この記事のまとめ
「1本の線が1つの効果を生み出す」というわけではありません。
他の要素や文字との位置関係が変わると、1本の線が複数の効果を生み出すことを忘れないようにします。
例えば、境界線として利用しながら、関連性を表すという場合もあります。
今からページのはじめに戻って、線の効果がどう現れているかを再確認するとよくわかると思います。
線を配置したときに、文字や写真にどれだけ近づけるかでもその効果をコントロールすることができます。
いろいろな配置を検証して、レイアウトを実践していくと、素材となる「線」を効果的に使うことができます。
ぜひお試しを。
