ウェブデザインの見栄えをよくするための7つのキーワード
ウェブデザインの見栄えをよくするための7つのキーワードをNoupeから紹介します。
7 Key Principles That Make A Web Design Look Good
下記、そのポイントを意訳したものです。
1. バランス
バランスで一番大切なことは、デザインが一方向に偏らないことです。対称あるいは非対称のものでもウェイトにはバランスをおくようにします。
実例：
このグラフィックの重要なポイントは右のクロスです。このクロスはビジュアルのウェイトに大きな影響を与えています。
この小さなクロスがどれだけグラフィックのバランスに効果があるかは、あなたの手でクロスを隠して見てください。
これが非対称のバランスと呼ばれるものです。ビジュアルのサイズやカラーをコントロールし、ウェイトを調整することができます。
仮にクロスのカラーがオレンジ色で輝いていたら、バランスを失い釣り合いがとれていないレイアウトとなるでしょう。
こんどは対称のバランスの実例です。ヘッダのグラフィックは非対称なものでバランスがとられたものとなっています。その下は対称の縦列のグリッドで、非対称とのバランスをとることがいっそう難しいものとなっています。
あなたが良さそうだと思うデザインのベースにも、しっかりと組み立てられたバランスがあることに気がつくでしょう。
2. グリッド
グリッドの概念はバランスと密接な関係があります。グリッドは分類することを助ける一連の水平および垂直のルーラーともいえます。
カラムを想像してみてください。カラムはコンテンツをより容易に吸収できるようにリーダービリティを改善する効果があります。適切なスペースや三分割法、黄金比の使用は、より読みやすくするものとなるでしょう。
三分割法と黄金比は例えば、サイドバーがページのおよそ三分の一くらいの幅である理由を説明します。写真も通常は中央ではなく、九分割した格子の交差点に配置するとよりよく見えます。
実例：
グリッドは特にミニマリストのデザインにマッチします。
グリッドを使用してエレメントを組み立てることは、ビジュアル的に印象に残り、人の目にもやさしいものとなるでしょう。
3. カラー
もし、さきほどの「5 Thirty One」のレッドベースのカラーをライムグリーンに変えたらどうなるでしょうか？ それは良さそうに見えるでしょうか？
ライムグリーンではあまり見込みが高そうではありません。なぜならそれは同じカラーパレットに属していないためです。カラーはいくつかのものは一緒にうまくいきますが、むやみやたらな配色はうまく働きません。カラーに関するセオリーがあり、その組み合わせは充分に検討する必要があります。
カラーがどのように相互作用をもたらすかは、可能な限り多くのウェブサイトを見て吸収してください。ベースカラーを二つ三つ選び、パレットを拡張する際はこれらのカラーに白や黒を混ぜたカラーを試してみてください。
素敵なカラーを選択することは正しいカラーを選ぶことと同じくらい重要です。すべてのカラーにはメッセージがあり、正しいメッセージを送るのはあなた次第です。
実例：
このサイトはモノクロのカラースキームで、アクセントにレッドを使用しています。
ブラックとホワイトでプロフェッショナル感とシックさを伝え、レッドを使用して特定のエレメントを際立たせて、デザインにスパイスを与え退屈に見えないようにしています。
カラーと言えばこのサイトを忘れてはいけません。
このサイトで使用されているソフトなパステルはデザインを輝かせていると言えるでしょう。一見、カラーの選択は任意に見えるかもしれませんが、しっかり見ると全てのエレメントにマッチしたカラーパレットを定義していることに気がつくでしょう。
4. グラフィック
素晴らしいデザインには必ずしもファンシーなグラフィックを必要とはしません。しかし、チープなグラフィックは確かにデザインを傷つけます。
グラフィックはビジュアルメッセージを補うものです。
実例：
このサイトではグラフィックをほんの少ししか使用していません。控えめな背景画像と洗練された王冠のグラフィックの二つです。ビジュアル的には決して立派なものではありませんが、場違いなものは何一つありません。
このサイトでは逆にグラフィックの比重が高くなっています。
あなたは偉大なイラストレーターやフォトグラファーではないかもしれません、しかしそれは素晴らしいグラフィックをサイトに配置することができないことは意味しません。ストックフォトを利用し、Photoshopの基本的な操作ができれば問題ありません。
5. タイポグラフィ
タイポグラフィは多くの要素があるため、話しをするときは慎重を要します。これは完全なタイポグラフィのリファレンスを提供する場ではありません。ここでは短期で役立つものに限定します。
ウェブのタイポグラフィは印刷と比較するとハンデがあります。もっとも大きな違いは完全にコントロールができないことです。ユーザーのコンピューターに入っていないフォント、OSやブラウザによる差異などがあります。
ウェブのタイポグラフィの可能性を広げるにはCSS3を待たなければならないかもしれませんが、それまでの間楽しめる面白いテクニックがあります。
ツラ揃え：
リーダビリティを改善する方法の一つとして、ビュレットがあります。ビュレットで頭出ししたリストはページの他のテキストとツラを揃えるように配置します。
また、引用時にも同様にツラを揃えます。
ツラを揃えることで、ユーザーは自然にテキストの流れをおうことができます。
※訳者注
他の項目として、「Font Stacks」「行間」「プリントルール」「画像の置換」がありますが、英語圏主体のため省略しています。
6. ホワイトスペース
ホワイトスペースや空白スペースは、そこに何も無い、ということが重要です。テキストにホワイトスペースを与えるとスペースにゆとりが生まれます。また、エレメントの周りにホワイトスペースを与えることで、より際立たせることもできます。例えば、コピーは狭苦しく見せるべきではありません。リーダービリティを確保するためにもパラグラフには充分なホワイトスペースがあることを確認してください。
実例：
デザインはタイポグラフィとホワイトスペースに大きく依存したものとなっています。このホワイトスペースはページの50%を占めています。
ホワイトスペースの使用は、読みやすいデザインを作成するための効果的な方法です。
このサイトは、心地よいサイトにするために多くのものが必要ではないことを示しています。若干の人はミニマリストをシンプルと混同するかもしれません。しかし、このようなスタイルをうまくやることは、シンプルではなく、そして簡単ではありません。
7. コネクション
この「Connection」は便宜上の用語です。意味は、一貫性と整合性の両方を持っているウェブデザインを指しています。
デザインが首尾一貫していないと、ユーザーは混乱しビジュアルの効果は失われます。この一貫性なしで、良いデザインを持つことは非常に困難です。それはデザインを「いい加減」にみせるかもしれません。
これまでに挙げたキーワード全てにコネクションは関係しています。バランス、グリッド、カラー、グラフィック、タイポグラフィ、ホワイトスペースは全て繋がっています。
きれいなタイポグラフィ、厳選したカラーパレットを使用しても、グラフィックがひどいものだったら、デザインは失敗するでしょう。
実例：
カラーでもとりあげたWebDesignerWallは、コネクションの例としても素晴らしいです。
全てが手描き風の水彩画のような外見をもっており、水彩の背景画像、落書き風のアイコンなど細部のデザインも卓越してものとなっています。
おわりに
良いウェブデザインはここでとりあげた7つのキーワードに限定されるものではありません。アクセシビリティやリーダビリティやユーザビリティも同様に重要な役割を果たします。
これはウェブデザインがなぜ難しいかという理由となっています。
今日ではブログ作成ツールで簡単にウェブサイトを築くことができます。しかし、ウェブデザインのすべてをマスターするには時間がかかります。
Post on:2009年10月22日
Comments
ITキヲスク | 2009年10/18～10/24の週間ブックマーク
on 2009年10月25日
[...] サイトの見た目を良くするデザインキーワード7選（解説付き） [...]
今週の管理人Bookmark (10/18-10/25) - ElectricBrain Standard
on 2009年10月25日
[...] ウェブデザインの見栄えをよくするための7つのキーワード | コリス [...]
コリス
on 2009年11月5日
テストです