デザインエレメント:ラインを使ってデザインする6つのチップス
Post on:2010年10月1日
デザインエレメントの中でも最もシンプルな『ライン』をデザインに使う際、知っておきたい役立つチップスを紹介します。

6 Tips for Designing With Lines
[ad#ad-2]
下記は各ポイントを意訳したものです。
- はじめに
- 1. Use an Underline
- 2. Break Up the Line
- 3. Flank the Type
- 4. Go Vertical
- 5. Go Diagonal
- 6. Go Nuts
はじめに
ここでは最もシンプルなデザインエレメントである「ライン」について見てみます。
デザインにシンプルなラインをほんの少し加えるだけで、退屈なデザインに構造とグラフィカルなスタイルを与えることができます。ラインが効果的に使われた時にはシンプルなトリックではなくなり、素晴らしいデザインになるでしょう。
1. Use an Underline
タイポグラフィの最も基本的なトリックであるアンダーラインから始めます。
アンダーラインを使用している見出しはより重要性を増し、ヘッダとボディの間に確固たる分離を与えます。

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

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

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

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

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

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

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

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

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

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

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

対角線のエフェクトは、レトロを彷彿させるデザインに効果が大きいです。
6. Go Nuts
最後は気楽にいきましょう。
次の例では、ドットのライン、ソリッドなライン、真っ直ぐなライン、カーブのライン、そしてダイヤモンドを伴ったラインを組み合わせて使用しています。個々のエフェクトでみると散らかっていますが、このラインを使うことで高級感を演出しており、非常に美しいものとなっています。

どんなデザインエレメントも同じですが、ラインも良くも悪くも使えます。
必要であるときは抑制をもって使い、デザインに価値を与えるためにラインを加えたり無しにして、あなたのデザインを試してください。
sponsors