ウェブデザインのクオリティをアップする7つのポイント
Post on:2009年4月16日
sponsors
ウェブデザインのクオリティをアップする7つのポイントをFunction Web Design & Developmentから紹介します。
How to Spot Quality within Web Design: Examples & Tips
以下、その意訳です。
1. Spacing
スペースは、デザインされたエレメントの間に使用される巧妙なテクニックです。素晴らしいイメージを配置することも大切ですが、そのエレメントにどのようにスペースを与えるか充分に考慮する必要があります。
充分なスペース
コンテンツ内のテキストやイメージに対して、充分なスペースを与えている例です。
適切なスペース
エレメント同士のスペースを適切に設置し、クリック操作しやすくするだけでなく、デザイン的に魅力を引き出しています。
たくさんのスペース
スペースは、コンテンツの主張を手伝います。個々のポストには多くの内容はありませんが、スペースをたくさん与えています。
テキストが数行しか無いからといって、たくさんのスペースを与えてはいけないということはありません。
大きめのスペース
コンテンツの隅に注目してください。そこには、60px程の白のスペースがあります。一見ちょっと大きいのではないか、と思うかもしれませんが、このスペースの使い方は素晴らしく見えます。
スペースのよくある間違い
よくある間違いに、隅に充分なスペースを与えないことがあります。これはコンテンツを素晴らしくデザインしても、あまりにも多く詰め込むと、スタイルやクオリティが失われてしまいます。
充分なスペースがない例
スペースを少なくした例です。
スペースを少なくすることで、どれくらいデザインに悪影響を与えるか見ることができます。
効果的なスペースのポイント
- Design using a gird system
- デザインにグリッドシステムを使う
- グリッドシステムは、スペースの重要性を理解するのに役立ちます。
- Try & Try again
- トライをくりかえす
- 適切なスペースを見つけるまで、常に試行錯誤して挑戦してください。
- White Space isn't a wasted space
- ホワイトスペースは、無駄なスペースではありません
- スペースがあるからといって、そこを埋めることを意味しません。
- Less really is More
- 少なくというのが、本当は多いということです。
- そのエリアにフィットさせようとするより、スペースを与え、重要な情報をキープするようにしてください。
2. Pixel Perfect Detail
ここでのピクセルのディテールのポイントは、ライン、エッジや境界に使用するものです。単にシンプルなラインを使用するより、ディテールを加え、それが単純な1pxのシャドウやハイライトでグラデーションにするだけで充分な効果を得ます。
ブラックのエリアとグリーンのエリアの境界に、明るいグリーンのラインがあります。ライン無しでフラットに二つのエリアが配置されるより、立体的な効果を持ち、より洗練された印象を与えます。
Example1では、上部に1pxのハイライトを加えて、タブを魅力的にしています。
Example2では、アイコンにドロップシャドウ、白のエリアの上部とナビゲーションの上部にハイライトが使用されています。
この美しいナビゲーションには、1pxのピクセルのディテールを加えた素晴らしい例です。
ピンクのボタンに1pxのハイライトがあり、各ラベル間のラインは同レベルのディテールがあります。この境界にフラットなグレーのラインを用いるより、1pxのハイライトがナビゲーションを美しくみせています。
グランジスタイルのデザインでもピクセルのディテールは素晴らしい効果を与えます。トップのエリアに使用されている1pxのハイライトはデザインをいっそう磨いています。
ピクセルのディテールのポイント
- Keep it Subtle
- 繊細にする
- 細かいディテールは、素晴らしいコンテンツにするための重要な鍵です。
- Think in Pixels
- ピクセル単位で検討する
- ボーダー、グラデーション、ライン、シャドウなどは大きくしないでも効果を与えます。
- Before & After
- 使用前と使用後
- ピクセルのディテールを採用した際、その使用前と使用後を比べてみてください。実際にどれほど効果的であるか見ることができます。
3. Well thought out Typography
ウェブサイトのコンテンツは実際デザイナーによってライティングされたものではないものだろうと思いますが、デザインはコンテンツの全体的なクオリティに大きな影響を与えます。コンテンツを間違うことなく、より容易に伝えることは非常に大切です。
タイポグラフィは、メッセージを的確に伝える有用なテクニックです。
大きくて、美しい
タイトルはウェブデザインの中でも重要な要素です。最近のデザインのトレンドは、タイトルに大きい太字のフォントを使用しています。多くの場合、安全で確実なテクニックです。このテクニックは視線を集めるだけでなく、充分なスペースを生み出し、デザインの構造を定義する際にも効果があります。
上のキャプチャのタイトル周りはスペースが充分にあるため、可読性にも効果があります。
line-heightとspacing
テキストの可読性にとって、line-heightとspacingは重要な要素です。充分なline-heightはテキストを読み取りやすくします。
テーマにあったフォント
ウェブサイトで使用するフォントを見つけることは、試行錯誤を行い、デザインのテーマにふさわしいフォントを選択する必要があります。
上のキャプチャでは、タイトルのフォントがレトロな雰囲気に一役荷っています。適切なフォントを使用すると、デザインをより素晴らしいものにするでしょう。
タイポグラフィのポイント
- Is it Readable?
- 可読性は充分ですか？
- 大きくしたり、太字を使用することを検討してください。
- Have you thought about spacing?
- スペースは確認しましたか？
- スペースはリーダビリティを改善できます。
- Do your fonts fit the mood?
- フォントはデザインのテーマにあってますか？
- デザインをより素晴らしくするフォントを使用してください。
4. Organization of Elements
エレメントのデザインを組織化することは、創造的でなく、あまり面白みがない、と言われることがあります。しかし、ウェブサイトでは、特に特定の機能を表すエレメントのデザインでは非常に重要なテクニックになります。
ユーザーにアクションを起こさせたいサイトの例です。ここではプロダクトの購入を奨励する4つの重要な特徴があります。
最初に、大きい太字のタイトルでユーザーの注意をひきます。次に、イラストを使用したプロダクトのリストで興味を持たせます。三つ目の動画コンテンツでプロダクトへの欲求を起こします。そして、最後にユーザーのアクションです。
フッタにこうしたユーザーのアクションのポイントを設置することは、効果的です。
ブログなどのサイトの例です。このサイトで最初に目にとまるのは、ピンクの太字のタイトルでしょう。続きを読むリンクがあり、適度なパラグラフと画像・日付・著者があり、コンテンツデザインとして完璧な例の一つです。
ユーザーの注意をひくRSSアイコンのデザインは、購読者を増やすことでしょう。ユーザーに役立つリストとしては、関連記事や最新記事や人気記事などがあります。また、コンタクトの手段を複数掲載することも大きなプラスになるでしょう。
コンテンツを整理するポイント
- What are you designing for?
- サイトの目的は？
- サイトのゴールを決定してください。
- Design using a Grid
- グリッドを使ったデザイン
- グリッドはスペースを最大限に利用することができます。 Test the Placement of Elements
- エレメントの配置をテストする
- ユーザーの立場になって、サイトを使って検証してみます。
- Remove any unnecessary Elements
- 不必要なエレメントは削除
- 必要のないものは、削除するべきです。
- Balance of Attention
- 注目箇所のバランス
- 注目すべき箇所を目立たせるために、他の要素はシンプルにする必要があります。
5. Restraint & Subtlety
デザイナーは常に影響をあたえる特別な効果を生み出すデザインを探しています。大げさなものだけが大きな影響をあたえるものではありません。
ソフトなグラデーション
グラデーションは使われていても、しばしば大胆に使用されるだけで終わっています。けれども正確に使用されると、グラデーションはエレメントにリアリティと深みを与えます。たいていの人はグラデーションに気がつかないかもしれません。しかしグラデーションは確実に効果を与えています。
ドロップシャドウ
ハイライトしたピクセル、グラデーション、ドロップシャドウが使用されており、そのドロップシャドウに注目してください。使用しているドロップシャドウはそれほど大きくありません。しかし、ボックスにハイライトを置き、微量な不透明度がとても美しくみえます。
繊細なテクスチャ
ざらざらした感触の背景を使用することで、デザインに刺激をあたえることがあります。気をそらすような背景が好ましくない場合、このような繊細で柔らかいテクスチャを背景に使用するのは良いアイデアです。
テクスチャはデザインのスタイルや品質を高めるために大きな効果があります。
擦り切れ
繊細というのは難しいです。わずかなディテールで微妙であっても、それは目立つものでしょう。そしてそれは意識していなくても、影響を与えます。
ここに非常に小さいヒントがあります。この小さな擦り切れがフラットになってしまうと、デザインは大きく変わってしまうでしょう。
水彩の絵の具
水彩の絵の具は、色を混ぜたりするソフトなタッチが常に素敵です。この効果を使うことはいろいろな意味でデザインに役立つことができます。微妙な色を使用して、テクスチャに用いるのはなかなか人気の高い効果です。
フローラルのエレメント
フローラルの繊細なディテールを効果的に使用した素晴らしい例です。
他にも鮮明な花のイラストがありますが、ここでは背景にあるソフトなディテールに注目します。このフローラルのエレメントは本当に繊細で、ソフトな色合いとかすれた外見が重要な意味をなしています。
繊細なデザインのポイント
- Build up your layers
- レイヤを増やしてください
- 手軽にブラシやテクスチャを一つだけ使うのではなく、ディテールを強化してください。
- Experiment with opacity & Colour
- 不透明なカラーを使ってみてください
- 3%の不透明が大きな影響を与えることもあります。
- Don't worry, Be Brave
- 勇気をもってください
- あまりにも微妙だったり薄くても、恐れないでください。
6. Using Colour to it’s Full Potential
人々はしばしば、自身の好みの色で評価をします。しかし、それは大きなミスです。デザインの配色を決める際には、ブランドを意識し、テーマにあった配色設計を行ってください。
テーマがつまらないようなものでも、デザインもそれに合わせてつまらなくする必要がない、ということを証明しているサイトです。しばしば企業のサイトなどでデザイナーの独創的なセンスを好ましく思わない時があります。シンプルで、フラットで、グレーが適切であるように思われます。
このデザインではそれらを必要としないで、企業サイトでも魅力的なデザインを使用できることを証明しています。
このサイトは明るく活気に溢れ、非常に暖かいウェブサイトです。サマータイムの活動を促進しているであろうとイメージができます。
ここでは多くの異なった色が使用されています。しかし、それらの全てが適切に使用されています。各サービスに関係のある配色設計が上質なデザインとなっています。
背景に色を使用するだけでは洗練されたデザインとして充分ではありません。最も良い背景は若干の変化を持っています。
このサイトでは、美しいオレンジ系統の色と照明効果とグラデーション効果を使用しています。これは背景にエフェクトを与えフレッシュに見せ、フラットに見えることを阻止しています。
配色のポイント
- Experiment
- エクスペリメント
- つまらない配色設計はしなくてもいいです。
- Variety
- バラエティ
- グラデーション、パターン、ブラシなどでカラフルな背景を試してみてください。配色だけでは充分な効果を生み出せません。
- Stick to a Theme
- サイトのテーマに合わせて
- 使用しているカラーがサイトのプロダクトやサービスに関係しているか確認してください。
7. Doing something Nobody else has done
真にオリジナルで、他の誰もがしなかったことを創りだすことは、非常に大変な仕事です。驚くべき新しい何かを作るということは、成功と失敗の紙一重の状態です。しかし、勇敢に新しい試み挑戦してください。
ユニークなナビゲーション
平均的なナビゲーションを備えたウェブサイトは、それだけで良さそうに見えるでしょう。奇をてらったナビゲーションは受け入れられない可能性があります。
しかし、このナビゲーションはサイトに関連していて、適切なものとなっています。
ビジュアルナビゲーション
この素晴らしい仕事は、一つのゴールです。極めて少ししかテキスト情報を配置せず、ホバーに合わせてプレビューボックスが変化し詳細を明らかにします。
実際にはただのリンクのリストですが、非常に機能的で、魅力的なデザインとなっています。
ポイントはストレートに
このサイトはインターフェイスデザイナーのポートフォリオで、実績を見て、仕事の依頼を受けることを目的としたサイトです。提供しているサービスを使うように説得する飾った言葉などのテキスト情報はありません。仕事自身がそれらを語っています。興味をもった際は、イメージをクリックするとさらに詳細な情報を得ることができます。
新しい試みをするためのポイント
- Keep it Relevant
- 適切かどうか
- もし非常に新しい、ユニークな試みをしようとしているなら、本当にそれが意味をなすか検討してください。
- Ignore everything you know!
- 既存の概念をやぶる
- 原則がずっと同じのままであることはありません。しかし、新しいアイデアについてインスピレーションのポイントを間違わないでください。
- Keep a level of quality
- 品質レベルの維持
- 新しいアイデアが良さそうに見えて、そしてうまくいくのであれば、正当化することよりも簡単だと思います。
sponsors
