ウェブデザインのクオリティをアップする7つのポイント

ウェブデザインのクオリティをアップする7つのポイントをFunction Web Design & Developmentから紹介します。

How to Spot Quality within Web Design

How to Spot Quality within Web Design: Examples & Tips

以下、その意訳です。

1. Spacing

スペースは、デザインされたエレメントの間に使用される巧妙なテクニックです。素晴らしいイメージを配置することも大切ですが、そのエレメントにどのようにスペースを与えるか充分に考慮する必要があります。

充分なスペース

サイトのキャプチャ

GOOD

コンテンツ内のテキストやイメージに対して、充分なスペースを与えている例です。

適切なスペース

サイトのキャプチャ

Digitalmash

エレメント同士のスペースを適切に設置し、クリック操作しやすくするだけでなく、デザイン的に魅力を引き出しています。

たくさんのスペース

サイトのキャプチャ

Creattica Daily

スペースは、コンテンツの主張を手伝います。個々のポストには多くの内容はありませんが、スペースをたくさん与えています。
テキストが数行しか無いからといって、たくさんのスペースを与えてはいけないということはありません。

大きめのスペース

サイトのキャプチャ

Postbox

コンテンツの隅に注目してください。そこには、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のシャドウやハイライトでグラデーションにするだけで充分な効果を得ます。

サイトのキャプチャ

Envato

ブラックのエリアとグリーンのエリアの境界に、明るいグリーンのラインがあります。ライン無しでフラットに二つのエリアが配置されるより、立体的な効果を持ち、より洗練された印象を与えます。

サイトのキャプチャ

Tutorial 9

Example1では、上部に1pxのハイライトを加えて、タブを魅力的にしています。
Example2では、アイコンにドロップシャドウ、白のエリアの上部とナビゲーションの上部にハイライトが使用されています。

サイトのキャプチャ

RedBrick Health

この美しいナビゲーションには、1pxのピクセルのディテールを加えた素晴らしい例です。
ピンクのボタンに1pxのハイライトがあり、各ラベル間のラインは同レベルのディテールがあります。この境界にフラットなグレーのラインを用いるより、1pxのハイライトがナビゲーションを美しくみせています。

サイトのキャプチャ

avalonstar

グランジスタイルのデザインでもピクセルのディテールは素晴らしい効果を与えます。トップのエリアに使用されている1pxのハイライトはデザインをいっそう磨いています。

ピクセルのディテールのポイント

Keep it Subtle
繊細にする
細かいディテールは、素晴らしいコンテンツにするための重要な鍵です。
Think in Pixels
ピクセル単位で検討する
ボーダー、グラデーション、ライン、シャドウなどは大きくしないでも効果を与えます。
Before & After
使用前と使用後
ピクセルのディテールを採用した際、その使用前と使用後を比べてみてください。実際にどれほど効果的であるか見ることができます。

3. Well thought out Typography

ウェブサイトのコンテンツは実際デザイナーによってライティングされたものではないものだろうと思いますが、デザインはコンテンツの全体的なクオリティに大きな影響を与えます。コンテンツを間違うことなく、より容易に伝えることは非常に大切です。
タイポグラフィは、メッセージを的確に伝える有用なテクニックです。

大きくて、美しい

サイトのキャプチャ

The Netsetter

タイトルはウェブデザインの中でも重要な要素です。最近のデザインのトレンドは、タイトルに大きい太字のフォントを使用しています。多くの場合、安全で確実なテクニックです。このテクニックは視線を集めるだけでなく、充分なスペースを生み出し、デザインの構造を定義する際にも効果があります。
上のキャプチャのタイトル周りはスペースが充分にあるため、可読性にも効果があります。

line-heightとspacing

サイトのキャプチャ

Viget Labs

テキストの可読性にとって、line-heightとspacingは重要な要素です。充分なline-heightはテキストを読み取りやすくします。

テーマにあったフォント

サイトのキャプチャ

Web Design Ledger

ウェブサイトで使用するフォントを見つけることは、試行錯誤を行い、デザインのテーマにふさわしいフォントを選択する必要があります。
上のキャプチャでは、タイトルのフォントがレトロな雰囲気に一役荷っています。適切なフォントを使用すると、デザインをより素晴らしいものにするでしょう。

タイポグラフィのポイント

Is it Readable?
可読性は充分ですか?
大きくしたり、太字を使用することを検討してください。
Have you thought about spacing?
スペースは確認しましたか?
スペースはリーダビリティを改善できます。
Do your fonts fit the mood?
フォントはデザインのテーマにあってますか?
デザインをより素晴らしくするフォントを使用してください。

4. Organization of Elements

エレメントのデザインを組織化することは、創造的でなく、あまり面白みがない、と言われることがあります。しかし、ウェブサイトでは、特に特定の機能を表すエレメントのデザインでは非常に重要なテクニックになります。

サイトのキャプチャ

37signals

ユーザーにアクションを起こさせたいサイトの例です。ここではプロダクトの購入を奨励する4つの重要な特徴があります。
最初に、大きい太字のタイトルでユーザーの注意をひきます。次に、イラストを使用したプロダクトのリストで興味を持たせます。三つ目の動画コンテンツでプロダクトへの欲求を起こします。そして、最後にユーザーのアクションです。
フッタにこうしたユーザーのアクションのポイントを設置することは、効果的です。

サイトのキャプチャ

WellMedicated

ブログなどのサイトの例です。このサイトで最初に目にとまるのは、ピンクの太字のタイトルでしょう。続きを読むリンクがあり、適度なパラグラフと画像・日付・著者があり、コンテンツデザインとして完璧な例の一つです。
ユーザーの注意をひく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

デザイナーは常に影響をあたえる特別な効果を生み出すデザインを探しています。大げさなものだけが大きな影響をあたえるものではありません。

ソフトなグラデーション

サイトのキャプチャ

Things

グラデーションは使われていても、しばしば大胆に使用されるだけで終わっています。けれども正確に使用されると、グラデーションはエレメントにリアリティと深みを与えます。たいていの人はグラデーションに気がつかないかもしれません。しかしグラデーションは確実に効果を与えています。

ドロップシャドウ

サイトのキャプチャ

IconDock

ハイライトしたピクセル、グラデーション、ドロップシャドウが使用されており、そのドロップシャドウに注目してください。使用しているドロップシャドウはそれほど大きくありません。しかし、ボックスにハイライトを置き、微量な不透明度がとても美しくみえます。

繊細なテクスチャ

サイトのキャプチャ

Scouting For Girls

ざらざらした感触の背景を使用することで、デザインに刺激をあたえることがあります。気をそらすような背景が好ましくない場合、このような繊細で柔らかいテクスチャを背景に使用するのは良いアイデアです。
テクスチャはデザインのスタイルや品質を高めるために大きな効果があります。

擦り切れ

サイトのキャプチャ

Viget Labs

繊細というのは難しいです。わずかなディテールで微妙であっても、それは目立つものでしょう。そしてそれは意識していなくても、影響を与えます。
ここに非常に小さいヒントがあります。この小さな擦り切れがフラットになってしまうと、デザインは大きく変わってしまうでしょう。

水彩の絵の具

サイトのキャプチャ

Web Designer Wall

水彩の絵の具は、色を混ぜたりするソフトなタッチが常に素敵です。この効果を使うことはいろいろな意味でデザインに役立つことができます。微妙な色を使用して、テクスチャに用いるのはなかなか人気の高い効果です。

フローラルのエレメント

サイトのキャプチャ

Dara's Garden

フローラルの繊細なディテールを効果的に使用した素晴らしい例です。
他にも鮮明な花のイラストがありますが、ここでは背景にあるソフトなディテールに注目します。このフローラルのエレメントは本当に繊細で、ソフトな色合いとかすれた外見が重要な意味をなしています。

繊細なデザインのポイント

Build up your layers
レイヤを増やしてください
手軽にブラシやテクスチャを一つだけ使うのではなく、ディテールを強化してください。
Experiment with opacity & Colour
不透明なカラーを使ってみてください
3%の不透明が大きな影響を与えることもあります。
Don't worry, Be Brave
勇気をもってください
あまりにも微妙だったり薄くても、恐れないでください。

6. Using Colour to it’s Full Potential

人々はしばしば、自身の好みの色で評価をします。しかし、それは大きなミスです。デザインの配色を決める際には、ブランドを意識し、テーマにあった配色設計を行ってください。

サイトのキャプチャ

Oypro

テーマがつまらないようなものでも、デザインもそれに合わせてつまらなくする必要がない、ということを証明しているサイトです。しばしば企業のサイトなどでデザイナーの独創的なセンスを好ましく思わない時があります。シンプルで、フラットで、グレーが適切であるように思われます。
このデザインではそれらを必要としないで、企業サイトでも魅力的なデザインを使用できることを証明しています。

サイトのキャプチャ

Summer in Tnvacation

このサイトは明るく活気に溢れ、非常に暖かいウェブサイトです。サマータイムの活動を促進しているであろうとイメージができます。
ここでは多くの異なった色が使用されています。しかし、それらの全てが適切に使用されています。各サービスに関係のある配色設計が上質なデザインとなっています。

サイトのキャプチャ

Saturized studio

背景に色を使用するだけでは洗練されたデザインとして充分ではありません。最も良い背景は若干の変化を持っています。
このサイトでは、美しいオレンジ系統の色と照明効果とグラデーション効果を使用しています。これは背景にエフェクトを与えフレッシュに見せ、フラットに見えることを阻止しています。

配色のポイント

Experiment
エクスペリメント
つまらない配色設計はしなくてもいいです。
Variety
バラエティ
グラデーション、パターン、ブラシなどでカラフルな背景を試してみてください。配色だけでは充分な効果を生み出せません。
Stick to a Theme
サイトのテーマに合わせて
使用しているカラーがサイトのプロダクトやサービスに関係しているか確認してください。

7. Doing something Nobody else has done

真にオリジナルで、他の誰もがしなかったことを創りだすことは、非常に大変な仕事です。驚くべき新しい何かを作るということは、成功と失敗の紙一重の状態です。しかし、勇敢に新しい試み挑戦してください。

ユニークなナビゲーション

サイトのキャプチャ

MB Dragan

平均的なナビゲーションを備えたウェブサイトは、それだけで良さそうに見えるでしょう。奇をてらったナビゲーションは受け入れられない可能性があります。
しかし、このナビゲーションはサイトに関連していて、適切なものとなっています。

ビジュアルナビゲーション

サイトのキャプチャ

Visualboxsite

この素晴らしい仕事は、一つのゴールです。極めて少ししかテキスト情報を配置せず、ホバーに合わせてプレビューボックスが変化し詳細を明らかにします。
実際にはただのリンクのリストですが、非常に機能的で、魅力的なデザインとなっています。

ポイントはストレートに

サイトのキャプチャ

Nikola Mircic

このサイトはインターフェイスデザイナーのポートフォリオで、実績を見て、仕事の依頼を受けることを目的としたサイトです。提供しているサービスを使うように説得する飾った言葉などのテキスト情報はありません。仕事自身がそれらを語っています。興味をもった際は、イメージをクリックするとさらに詳細な情報を得ることができます。

新しい試みをするためのポイント

Keep it Relevant
適切かどうか
もし非常に新しい、ユニークな試みをしようとしているなら、本当にそれが意味をなすか検討してください。
Ignore everything you know!
既存の概念をやぶる
原則がずっと同じのままであることはありません。しかし、新しいアイデアについてインスピレーションのポイントを間違わないでください。
Keep a level of quality
品質レベルの維持
新しいアイデアが良さそうに見えて、そしてうまくいくのであれば、正当化することよりも簡単だと思います。

top of page

©2017 coliss