ウェブデザインのタブーをあえて破ってみるための10のTips

Post on:2009年7月16日

はじめに

ウェブデザインの進化は、一貫した有用なデザインの保証とともに確立されてきました。そして、ある特定のルールを乱用したという理由で、いくつかのルールが作成されました。
しかし、これらのルールは魅力的なデザインにするために必要な場合には、タブーを破ってみるべきです。

ここでは、あなたのウェブデザインにそれが必要ならば、破ることができる10のTipsを紹介します。

1. 水平方向のスクロールバーを表示しない

水平方向のスクロールが避けられる理由の一つに、マウスの多くが水平のホイール機能をもっていないことがあげられます。これは、水平にスクロール際にカーソルをウインドウの底部にもっていき、スクロールバーをドラッグ操作しなくてはいけないことを意味します。
ここにその問題を解消した事例を紹介します。

benek
JavaScriptを使って垂直ホイールで水平スクロールを操作します。

The Horizontal Way
矢印をクリックすることで水平方向にスクロールし、各コンテンツを画廊のように見せています。

2. フォントの書体は必要最小限の数だけ使用する

使用する書体の数が多すぎると、デザインが乱雑になりユーザーを圧倒させ混乱させてしまうことがあります。
多くの書体を同時に使用するときは、デザインがテキスト指向で、他の要素はなるべくおとなしいものである必要があります。

Links LA
過度に装飾せずに、多種多様なフォントを使用してレイアウトしています。内容を素早く把握するのは難しいですが、ユーザーの視線を惹きつけます。

Geo Elements Design Studio
通常いろいろなフォントを使用することはエネルギーやカオスの印象を与えますが、このサイトは開放感を強く与えています。ユーザーがフォント同士を関連付けさせないように充分なスペースを確保しています。

3. やたらと多くのカラーを使用しない

無難なデザインをしようと、色数を少なくすることがあります。しかしこれは時々、単に活気がないだけのデザインになってしまうことがあります。
ここではユーザーの目を楽しませる多くの色を使用したサイトを紹介します。

Matt Mullenweg
絵画のように美しく彩色されたサイトです。テキストの箇所は背景に注意して配置します。

Travic Isaacs
ヘッダにカラフルなグラデを使用しています。リンクのカラーもこのグラデに負けないくらいのピンク色を使用しているのも大きなポイントです。

4. サイトのゴールを明白にする

ブランドの認知はサイトの重要なゴールの一つです。しかし、インフォメーションを控えることで、逆にユーザーの興味をそそらせることもできます。

Piepmatzel
言語の壁を切り抜ける素晴らしい解決方法の一つに、言葉を使わないことがあります。このサイトはCSSのギャラリーで、訪れたユーザーはすぐにそれを認知するでしょう。

5. ナビゲーションは理解しやすいものにする

ナビゲーションはサイトのボトルネックであるべきではありません。ユーザーが素早く、探しものを見つけることができるように設計をします。
しかし、直感的ではないが魅力的なナビゲーションがユーザーに大きな効果を与えることがあります。

Kasulo
このサイトに初めて訪問した際、目的地にどのように行くか分からないかもしれません。しかし、クリックをするとそれが明白になります。
クリックだけでなく、ホイール操作も楽しんでください。

Marcio Kogan
明白ではない大きなナビゲーションの例です。
巨大なナビゲーションをドラッグし、ポートフォリオをクルーズします。それぞれのディテールも非常に印象的です。

6. テキストと背景には異なるカラーを使用する

多くの新人デザイナーはテキストが読めなくなるのではないか、と恐れをなすでしょう。しかしシンプルなテクニックで、類似色をテキストと背景に使用することができます。

Linksys
背景にさまざまなブルーを使用し、かつテキストやリンクにもブルーが使用されています。

Powerset
ブルーのサイトを続けて紹介します。なぜなら、ブルーは人の目から見てもっとも読むことが難しい色とされているからです。もし、テキストのエフェクトがブルーで可読性が充分であるなら、他の色でも問題がないでしょう。
このサイトでは、ブルーのテキストに背景から分離するレタープレスのエフェクトを使用しています。

Horacio Bella
このサイトのエフェクトはプレスではなく、飛び出すようなエフェクトを使用しています。このエフェクトの明瞭性をアップさせているのは、きついカーニングです。

7. コンテンツにはアニメーションを配置しない

ユーザーが読んでいる箇所に、Flashやポップアップなどの広告を配置しないでください。ユーザーは気が散ることを楽しみません。

aba
このサイトでは、小さいクモがコンテンツをゆっくり動きます。クモは確かに気を散らすものではありますが、デザインも美しく、問題がないように思えます。
私が見た中では、このサイトが唯一の例外です。

8. ウェブセーフフォントを使用する

まだそんなに浸透していませんが、フォントを置換するsIFRなどを使用します。

Diseñorama
レッドの「Recientemente」が置換したものです。これはテキストなので、カーソルで選択が可能です。ただし、スクリプトやフラッシュが利用できない環境ではデバイスフォントで表示されます。

9. スプラッシュ（ランディング）ページを使用しない

多くのデザイナーはクライアントから、スプラッシュページの良いアイデアがないか、と問いかけられます。Googleではたいていこのようなスプラッシュページをより低くランク付けする傾向があります。
しかし、きちんとしたスプラッシュページを設ければ、特に問題もなく、ユーザーに強い印象を与える美しいものになります。

Gloss Postproduction
このサイトのスプラッシュはロードのタイミングでランダムに画像が表示させ、ユーザーにエモーショナルな体験を与えます。
スプラッシュで使用した画像はそのままコンテンツに縮小表示され、動きもポートフォリオに継続され、ユーザーのモチベーションを自然に移行させています。