分かりやすいイラストで、Webデザインに大切な10の要素をまとめたインフォグラフィック
Post on:2015年5月14日
デザインの基本を顧みることもたまには必要ですよね。
分かりやすいイラストで、Webデザインに大切な10の要素をまとめたインフォグラフィックを紹介します。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
元ページでは大きなインフォグラフィックがダウンロードできるので、壁紙やプリントしてポスターにしてもよいと思います。
※掲載する上での画像加工も許可を頂いています。

ラインとは、デザインの最も基本的な要素です。ラインは絵を描くときのペンや鉛筆のストロークであり、グラフィックデザインでは2つのポイントを繋ぐものです。
ラインはスペースを分けたり、目を特定の場所に惹きつけることに役立ちます。例えば、コンテンツとヘッドラインとサイドパネルを分離するためにどう使うか考えてみてください。

カラーとは、ユーザーとデザイナー共にデザインの最も明白な要素の一つです。単独でも、背景としても、またラインやシェイプやテクスチャやタイポグラフィなど、他のエレメントに適用しても活躍します。
カラーはデザインにムードを作り、そのブランドのストーリーを語ります。すべてのカラーそれぞれに異なるストーリーがあり、カラーを組み合わせることで更に印象を変えることができます。

シェイプとは、幾何学的または有機的な形がユーザーに興味を与えます。ラインやカラーを使って境界が定義され、その部分を強調するために使用されます。
すべてのものは突き詰めると形です。デザインで使用するさまざまな要素がどのような形を形成し、どのように相互作用をしているか、あなたは常に考えてデザインをする必要があります。

スペースとは空白のことで、非常に誤解されやすい要素です。空白のまま(白でも他の色でも)にすることはデザインの一部となり、全体的なイメージを作るのに役立ちます。
また、ネガティブスペースもデザインで十分利用されていません。他の要素と同様に形を作るためにデザインに使用してください。

テクスチャとは、2次元の外見で3次元の質感を演出することができる要素です。テクスチャを適用した箇所に実際には触れられないけれど、その手触り感について伝えることができます。
Webデザインやグラフィックデザインではスクリーン上のテクスチャの外見と印象が重要です。

おそらくグラフィックとWebデザインで最も重要なのは、このタイポグラフィです。カラーやシェイプやテクスチャのように、デザインに使うフォントはユーザーにそのコンテンツの印象を与えます。
言葉は確かに重要です、しかし言葉のスタイルは同様に本質的要素です。

オブジェクトのスケールとサイズをいろいろ変えてみましょう、これはエレメントに興味と強調を加えます。Webページ上のすべてのエレメントが同じサイズだったら退屈ですよね。
スケールを変える時の量は、コンテンツに強く依存します。専門的なコンテンツでは微妙に変え、独創的なコンテンツでは大胆に変えるのを好みます。

サイズやカラーやシェイプなどを変えることで、エレメントを強調することができます。これはスタイルのコントラストを高めた状態で、ユーザーのフォーカスを生み出すことができます。

バランスには、対称と非対称の2つの方法があります。多くのデザイナーは自然に人目を引く非対称の方を好みますが、対称が必要となるシーンも時々あります。

調和は、グラフィックデザインのゴールであるとも言われます。あなたも調和が重要であるに違いないことは知っているでしょう。
デザインのすべてのピースが一斉に機能する時、あなたは調和を手に入れるはずです。余分なものは必要ありません、素晴らしいデザインとは決して度が過ぎたものではありません。
sponsors