デザインエレメント：ラインを使ってデザインする6つのチップス

Post on:2010年10月1日

はじめに

ここでは最もシンプルなデザインエレメントである「ライン」について見てみます。
デザインにシンプルなラインをほんの少し加えるだけで、退屈なデザインに構造とグラフィカルなスタイルを与えることができます。ラインが効果的に使われた時にはシンプルなトリックではなくなり、素晴らしいデザインになるでしょう。

1. Use an Underline

タイポグラフィの最も基本的なトリックであるアンダーラインから始めます。
アンダーラインを使用している見出しはより重要性を増し、ヘッダとボディの間に確固たる分離を与えます。

ラインの役割は単に二つのエレメントの間を分離するだけではなく、カラムの幅を定義するのにも一役買います。
しかし、下記のようなアンダーラインが文字と衝突する際の処理に私は頭を悩まします。

これを避ける最も簡単な解決方法は、ラインの衝突している部分を隠すことです。この見栄えは隠していないものよりずっと素敵です。

ラインの延長

アンダーラインはテキストの幅と同じにしなくてもよいということを覚えておいてください。

もしアンダーラインを延長するなら、ネガティブスペースの中でラインを使用する楽しみを考えてください。その形状は、曲げることもできます。

下記の例は、アンダーラインの終りにドットを用いたものです。これは右にあるコンテンツが接続されている印象を与えます。

captovate

2. Break Up the Line

ラインは常にソリッドなものを使用するわけではありません。ダッシュ、ドット、トライアングル、スターなどもラインとして使用できます。
ここに明確なセクションを作るために、見出しの中央にドットのラインを使った例があります。テキストは中央に配置されていますが、デザインはラインの機能上、見出しのビジュアルの境界線として機能し、縦列の左右を延長しているので適切に見えます。

traxor designs

[ad#ad-2]

3. Flank the Type

もしフォーマルなデザインをするなら、見出しの上にもアンダーラインを使用すると古いスタイルの紙のイメージをつくりだすことができます。このようなスタイルに新聞を思い出す人もいるでしょう。

フォーマルな感じを少しラフにするのであれば、異なる形状のラインを試してみてください。スタティックなページではこういった動きのあるエフェクトは有用です。

4. Go Vertical

ここまでの三つは水平なラインについてでした。次に垂直のラインを見ててみます。垂直のラインは本当にクリエイティブで、グラフィカルな面白さをデザインに追加することができます。次の例は、タイポグラフィに垂直のラインを組み合わせた非常にクールなものです。

Stockholm Hairdresser

垂直のラインの伝統的な使い方としては、コンテンツを二つのカラムに縦列に区切る時でしょう。これはギャップをもたずに、多くのスペースをカラム間に置くことができます。

5. Go Diagonal

もしこれがおかしく見えるなら、コンテンツを傾けてください。このラインは一般的な規則を破るエキサイティングなデザインで強い印象を与えることができるものです。コンテンツを傾けることは、少し任意に見えることができますが、アートワークの中のラインを拡張することはそれが意図的に見えるのを助け、エフェクトとして後押しします。