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

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

サイトのキャプチャ

6 Tips for Designing With Lines

[ad#ad-2]

下記は各ポイントを意訳したものです。

はじめに

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

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

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

サイトのキャプチャ

clearideaz

対角線のエフェクトは、レトロを彷彿させるデザインに効果が大きいです。

6. Go Nuts

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

サイトのキャプチャ

davidfooks

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

sponsors

top of page

©2018 coliss