デザインを魅力的なものにする、シンプルな10個のテクニック
Post on:2009年4月6日
sponsors
デザインを魅力的なものにする、シンプルな10個のテクニックをSmashing Magazineから紹介します。
10 Simple and Impressive Design Techniques
以下、その意訳です。
手間のかかるデザインテクニックは高度な効果を与えることができますが、間違ったところに使用してしまうと、意図したフォーカスとは異なり、ユーザーの気をそらすだけになってしまうことがあります。
これらのテクニックは、効果的に見せるために必要なデザインかもしれません。しかし、よりシンプルなテクニックでも充分な効果を与えることができます。
シンプルなテクニックやエフェクトというのは、デザインの基本です。
「less is more」の考えを元に、デザインの概観とパフォーマンスを劇的に改善できる非常にシンプルで印象的な10のデザインテクニックを紹介します。
1. Add Contrast
コントラストを加える
悲しいことに、特別なコントラストを加えることは最も見落とされやすい、そしてあまり利用されていないテクニックの一つです。
異なるセクションを区分する細いラインに、高いコントラストを使用しています。暗い1pxのラインに沿ってハイライトのラインがあることに注目してください。
しかし、その一方でこのページの「More」や「Go」ボタンはコントラストが少ないため、そのボタンを探そうとしても探しにくいものとなってしまってます。
最も人気が高いリンク「Download」にコントラストを加えています。
ブルーやグレーの中でレッドを使用すると際立ちがちですが、明るさを抑えているため奇抜さを感じません。
2. Gradients
グラデーション
このサイトではほとんどの箇所でグラデーションを使用しています、適度で巧妙というのがデザインの成功への鍵となります。
微妙なグラデーションを持つロゴ、ヘッドライン、ボタン、背景はそれぞれ内容をひきたたせ、最も複雑なグラデーションを持つ大きめのリンクエリアは注目が集まるようにデザインされています。
このサイトでは、さまざまな異なるタイプのグラデーションが使用されています。
- ページ上部：
ブラックからミディアムグレーへの水平方向のライン状のグラデーション - グリーンのヘッダ：
グリーンの放射線状のグラデーション - ログインボックス：
CIを淡い対角線状のグラデーション - インプットボックス：
ライトな垂直方向のライン状のフェード - ナビゲーション：
垂直方向のグラデーション - バナー：
明るいライン状のフェード - 見出し：
垂直方向のライン状のフェード
デザインは少々大胆で、大部分は機能しています。しかし、若干の問題があります。最も重要な問題は、一貫性が無いことです。
適切なカラーパレットを選択し、慎重に少しのタイプのグラデーションを使用すべきです。
例えば、1番目のグラデーションはユーザーの視線を集めます。それ自体は問題ではありません。しかし、その下に放射線状のグラデーション（2番目）とログインボックスのグラデーション（3番目）が横切ってしまい、目をひきます。
これは、ページの流れを紛らわしいものにしています。途切れがちなビジュアルは、ページの内容を理解しにくくしてします。
グラデーションを使用するときは、ビジュアルの流れをキープしておくことが重要です。慎重に、また微妙に使用してください。
そして一番重要なことは、そのプロジェクトの全体的な雰囲気をひきたたせるときだけにグラデーションを使用してください。
3. Color
配色
これは404ページで、配色に全部のスペクトルを使用するという、非常に大胆なアイデアです。背景に使用しているニュートラルなグレーに対照させています。そしてもっと重要なポイントとして、コンテンツ箇所にはテキストリンクのブルー以外に色を使用していないということです。
スペクトルの配色はユーザーの気をひきますが、それは単純なものです。背景がグレーで、目の刺激を和らげる効果をもたせています。
デザインで圧倒させようとする時、多くの場合4、5色以上を使おうとします。多くの色を使用することに自信がない時は、シンプルな4色のカラーパレットで辛抱してください。
少なめの配色でも、重要なポイントにユーザーの注意をひきつけることは簡単にできます。
上記のページでは、最上部のロゴに使用されているダッシュ、見出し、ページ右のロゴとユーザーの視線を適切にひきつけられます。
4. Letter Spacing
字詰め
文字の間隔やカーニングは、テキストを伴う見出しやパラグラフ、ロゴなどに大きな影響を与えます。
文字の間隔を減らし、メッセージにパワフルで簡潔な印象をもたせています。
この例は、文字の間隔がデザインに対して、どのようにネガティブな印象を与えるかの実験です。
小さかったり、アンチエイリアスの無いテキストは、文字の間隔が調整された状態で読むのは非常に困難です。
もし文字の間隔を調整したことがないなら、一度挑戦してみてください。きっとその差に大きな衝撃をうけることでしょう。
5. Case
大文字と小文字
ロゴは小文字で「msnbc」となっていますが、他のエリアでは大文字を絶妙に使用しています。
また、メッセージバーにある「WATCH LIVE」のように大文字を使用することは、ユーザーの注意をひきつける素晴らしい方法です。
他にも「NEWS」や「UPDATED」ボタンに大文字が使用されており、ボタンが小さくても視認性を確保しています。
CNNの場合は、格好良くしようとして使用したミスがみられます。
ナビゲーションの全ての項目に大文字が使用されています。しかし、ページ内のそれ以外の箇所では先頭文字のみ大文字が使用された伝統的なデザインとなっています。
6. Anti-Aliasing
アンチエイリアス
このサイトではランディングページで、アンチエイリアスのテキストを数行使用したシンプルなデザインを意識的に採用しています。
ページ内にあるテキストの大部分がアンチエイリアスのかかった非常に滑らかなもののため、ぎくしゃくした感じには見えません。
しかし、ページの上部と下部のテキストはそうではありません。小さいサイズのテキストは上で述べたmsnbcのように視認性を確保するため、エッジのきいたテキストにする必要があります。
完璧にすることは、時には間違いだったり、つまらなくしてしまうこともあります。
7. Imperfection
インパーフェクション
このアンティークなスペードのエースを描くチュートリアルは、多くのステップを経て作成されるもので、単純に作成できるものではありません。しかし、そのコンセプトは非常にシンプルです。
このユニークなタッチをだすために、古ぼかした汚したふうにしています。
人為的な欠陥をデザインに加えることは、あなたが考えているより簡単です。素材をグレースケールかセピアに変換して、そこからデザインを始めてください。
8. Blur
ぼかし
目立たせようとして困った覚えがあるなら、「ぼかし」を試してみてください。対象の前景や背景にぼかしを使うことで、著しくインパクトを与えることができます。
ぼかしで、もう一つの対象にフォーカスをあてることができます。
この壁紙はシンプルなぼかしを使い、落ち着いた雰囲気をだしています。シャープなラインで、イメージにフォーカスを与えています。そして、ぼかしを入れた背景は、この壁紙にとって極めて重要なポイントとなっています。
9. Alignment
配置
このロゴは、上に配置された「logo」が大きな特徴です。この配置を変更したデザインが印象的で、とても効果的なものとなっています。
この例は、要素を回転させることで目立たせています。この回転が無ければ変化に乏しいものとなるでしょう。しかし、この単純な回転がデザインを面白くさせています。
最近のウェブサイトは、幅700～900pxで垂直方向に配置されており、コンテンツの始まりがあり、終わりにはストレートな縁取りがあるものが大部分です。多くの場合、秩序があり予測しやすいということは良いことです。
しかしながら、デザイナーが比喩的に、そして文字通りボックスの外から出て、考えることは多いなベネフィットとなるでしょう。
10. Trim Fat
余分を削る
おそらく最も重要で、過小評価されているデザインテクニックは、不必要な箇所の調整です。
すべての不必要な要素が削減されており、必需品だけが残されたものとなっています。
ロゴは非常に小さいため、目立つものではありません。優れた特徴をもつウェブサイトたちは、時々区別するのが難しいくらい似ていることがあります。
ページ上部の「Twitter」のリンクは、不思議なことにロゴやナビゲーションより目立ったものとなっています。
sponsors
