ウェブサイトのデザイン: シンプルで使いやすいデザインのヒント 10 選

[編集者注] この記事の著者である Mark Praschan は、約 10 年の経験を持つ Web デザイナー、Web 開発者、Web プロジェクト マネージャーです。 この記事は、複雑で高度な効果はデザインに多くの色彩を加えることができるが、誤って使用すると、ユーザーの注意を主要なコンテンツから逸らしてしまうだけであることを強調しています。高度なエフェクトは優れたデザインのパンチ力を発揮しますが、それでも、それを補完するよりシンプルなエフェクトも必要です。

シンプルな効果とテクニックは、今日のデザインの基礎となる要素です。たとえば、適切な色やテキスト効果の選択方法がわからなければ、鮮やかなスターバースト効果は何の役にも立ちません。

「少ないほど豊か」というコンセプトに基づいた、シンプルで使いやすい 10 のデザイン手法は、デザインの専門性と魅力を大幅に高めるのに十分です。基礎がまず第一です。 歩く前に這うために、シンプルで効果的なデザインの最も基本的な概念から始めましょう。

1. コントラストを上げる

残念なことに、コントラストを追加することは、最も見落とされ、使われていないテクニックの 1 つです。

Joost de Valk は、訪問者がページのさまざまな領域を区別しやすくするために、細くてコントラストの高い境界線を使用しています。上記の画像の拡大部分を見ると、ほとんどの場合、コントラストは 1 ピクセルの明るい線と 1 ピクセルの暗い線だけであることがわかります。

とはいえ、このページの「詳細」ボタンと「進む」ボタンは周囲とのコントラストが弱すぎるため、探していても見逃してしまう可能性があります。

WordPress では、ページ上で最も人気のあるリンク「ダウンロード」に対照的な色を使用しています。 この赤は、ページのクールなグレーの色調に対して、それ自体が際立っています。ただし、ページ全体の効果に影響を与えないように、この赤の明るさは抑えられています。

コントラストを使用するかどうか決めかねている場合は、メイクを施すのと同じように意思決定のプロセスを扱ってください。人々に「見て、色のコントラストを見て！」と叫ばせるのではなく、ページ上の重要なコンテンツに自然に注目を集め、すでにそこにある重要なポイントを強調することが目的です。

2. グラデーション

テクノロジーにより、グラデーションを使用したい人なら誰でもグラデーションを作成するためのツールを利用できるようになりました。しかし、グラデーションは本当に良いのでしょうか?

Media Temple は Web サイトのすべてのページでグラデーションを使用していますが、デザインが成功している鍵は、グラデーションの使用の抑制と繊細さにあります。ロゴ、見出し、ボタン、背景にはすべて、コンテンツを強調するために微妙なグラデーションまたは反転したグラデーションが施されています。最も複雑なグラデーションは、訪問者の注意を必要とする焦点となる、幅 120 ピクセルのシンプルなボタン (サブページの「アクティブ化」と「詳細」) に使用されています。

Commission Junction のグラデーションの使用は Media Temple のものよりはるかに詳細ではなく、グラデーションの種類が多すぎます。

ページ上部の黒からグレーへの水平方向の線形グラデーション

ヘッダーの緑の放射状グラデーション

ログイン ボックスの背景にある「CJ」ロゴの上にぼやけた斜めのグラデーション

入力ボックスの背景に明るい垂直の線形グラデーション

ナビゲーションバーの背景の垂直グラデーション

ウェビナー広告の明るい線形グラデーション

タイトルに使用されているもう一つの垂直線形フェード

このデザインは少しリスクがあり、グラデーションのほとんどは機能しますが、まだいくつか問題があります。最も顕著な点は、デザインの一貫性が失われていることです。認識しやすい色の組み合わせを選択するのと同じように、デザイナーはプロジェクトごとに適切なグラデーションの組み合わせを選択する必要もあります。

たとえば、大きな水平グラデーション (1) は、視線をページ全体に誘導します。これは問題ありませんが、このグラデーションのすぐ下には、視線を中央に引き寄せる放射状グラデーション (2) と、視線を右下隅に向ける対角グラデーション (3) があります。これは訪問者を混乱させる可能性があり、視覚的な流れが変動することで読みやすさも損なわれます。

グラデーションを使用する場合は、視覚的な流れを良好に保つことが重要です。控えめに、控えめに使用してください。覚えておくべき最も重要なことは、グラデーションは全体的なデザインに貢献する場合にのみ使用する必要があるということです。

3. 色

色を賢く使うのは難しいです。完璧な色の組み合わせを選択し、それぞれの色相の適切な配置を見つけると、あっという間に時間が過ぎてしまいます。

Realmac Software は、404 ページでフルカラーのグラデーションを大胆に使用しています。これにはいくつかの理由があります。まず、Realmac はページの背景をニュートラル グレーに設定しており、さらに重要なのは、青いテキスト リンクと散在した印象に残らない色を除いて、ページの残りの部分には目立った色がないことです。

フルスペクトルのカラーグラデーションは注目を集めるのに最適です。シンプルで、グレーの配色なので、目にも優しいです。しかし、デザインに 4 色または 5 色以上を使用するのは、通常やりすぎです。デザインに非常に多くの色が必要であることが確実でない限り、シンプルな 4 色の組み合わせにこだわることをお勧めします。

デザインにおいて色を控えめかつ賢明に使用すると、訪問者の注意を重要な項目に引き付けることがかなり簡単になります。 Interspire の「会社概要」ページでは、訪問者の注目はページ上部のロゴの赤い点にすぐに引き付けられ、次にタイトル、そしてページ右側のロゴ写真に引き付けられます。

フォントに少し時間を費やしてください。レタリングの芸術は広大で奥深く、ほとんどの人の想像をはるかに超えています。フォントの x ハイト (アセンダ) とサイド ベアリングを超えて拡張する部分には、創造性を発揮する余地が十分にあり、興味深い詳細を追加できます。ただし、以下のテクニックを適用することがより重要です。

4. 文字間隔

文字間隔、つまりカーニングは、タイトル、段落、ロゴなどのテキスト関連のコンテンツに大きな影響を与える可能性があります。各キャラクター間の距離だけではありません。

Krop の新しいポートフォリオ作成ツールは、テキストに関してはスペースを非常に節約しています。サイト上のテキストベースの画像のほとんどは、文字間のスペースがほとんどないため、物語がより簡潔で力強く見えます。

上の画像は、文字間隔がデザインに与える悪影響を示しています。小さくアンチエイリアス処理されていないフォントでは、適切な文字間隔がないと読みにくくなります。

これまで気にしていなかった場合は、今すぐデザインの文字間隔を調整してみてください。その違いに驚かれることでしょう。画像では「Myriad Pro」フォント、HTML テキストでは「Trebuchet MS」フォントを使用することをお勧めします。

5. 大文字の使用

大文字と小文字を変更するには、Shift キーまたは Caps Lock キーを押すだけですが、このテクニックを最大限に活用しているデザイナーはほとんどいません。

MSNBC の大文字の使い方は注目に値する。ロゴはすべて小文字で、ページの残りの部分では大文字と小文字が微妙に異なります。ページ上部にある大きなバナー通知。通常は大文字で「ライブで視聴」または「最新ニュース」と表示されます。これらのアナウンスは非常に重要なコンテンツであり、この方法は訪問者の注目を集めるのに適しています。

また、小さなボタンを明瞭かつ読みやすくするために、すべて大文字のボタンを使用します。 この 5 ピクセルの高さのアプリケーションでは、a、m、x などの小文字の高さが 2 ～ 3 ピクセルしかないため、認識するのが非常に困難です。

ニュースサイトの例を続けると、CNN ではページのバランスをとるためのフォントの大文字と小文字のバリエーションが不足しています。ナビゲーション バーはすべて大文字ですが、ページの残りの部分は伝統的にほぼすべて大文字で書かれています。

6. アンチエイリアシング

アンチエイリアシングは技術的には複雑ですが、「エッジを滑らかにする」と要約でき、さまざまなデザインで使用されます。 Web デザインの世界では、アンチエイリアシングを使用するかどうかは、テキストが画像内に表示されるのか、それとも HTML テキスト内に表示されるのかによって決まります。事態を複雑にするもう 1 つの点は、一部のブラウザーやオペレーティング システムでは、ある程度のエイリアシングが自動的に除去されますが、一般に HTML テキストはアンチエイリアス化されないことです。

Stockxpert は、一部の広告ページでアンチエイリアスを使用し、一部のテキストではアンチエイリアスを使用しないという賢明な対応をしました。テキストの大部分は滑らかなエッジを持っていますが、ページの上部と下部の小さな文字はギザギザのエッジが残っています。上記の MSNBC ボタンと同様に、高さ 5 ピクセルのテキストは、読みやすさを維持するために、できるだけシャープなエッジが必要です。この場合、ぼやけたエッジや滑らかなエッジにより目が疲れ、最終的には読むことを諦めてしまう可能性があります。

組み合わせが重要です! 完璧なものは通常、偽物や退屈に見えます。木の枝や葉は完全に対称ではありません。どんな照明でもバランスの取れた影は生まれません。カメラのレンズは風景の一部をぼかしてレンズフレアを生み出すことがあります...デザインによっては、きれいな人工的なスタイルが求められる一方、少し混ぜ合わせる必要があるものもあります。

7. 製造上の欠陥

コンピューターを 10 分間使用したことがある人なら誰でも、それが完璧ではないと言うでしょう。しかし、設計プロセスでは、コンピューターが完璧な結果を生み出すことができます。お気に入りのデザイン ツールで線ツールを使用する場合は、デフォルト設定を使用するだけで、特定の 2 つのポイント間に完全に直線を描くことができます。

この Retro Ace デッキのチュートリアルでは、デッキを不完全に見せるための多くの手順が説明されています。このプロセスは簡単ではないと言わざるを得ません。コンセプトは非常にシンプルです。物を古く見せ、欠陥を作り、作品に独特の質感を与えます。

この蝶の写真は 20 世紀半ばに撮影されたように見えますが、これも不完全さの 1 つの例です。実際はデジタルカメラで撮影したもので、フィルターや色調整を施してノスタルジックな雰囲気を出しています。

デザインに芸術的な欠陥を作り出すのは、思っているよりも簡単です。素材をグレーまたは茶色に変更し、少し詳細を追加するだけです...

8. ぼかし

何かを目立たせたり、ぼかしたりする方法がまだわからない場合は、さまざまなぼかし方法を試してみてください。前景や背景、あるいはデザイン全体をぼかすことで、プロジェクトのインパクトを動的に高めることができます。焦点がぼやけているため、少なくとも部分的には関連性がある必要があります。 1 つの要素をぼかすことで、別のコンテンツに焦点が当てられます。

Ios V2 の壁紙は、シンプルなぼかしを使用して、落ち着いた鮮やかな雰囲気を作り出します。いくつかのシャープな線を使用して画像の焦点を作成し、ぼかした背景は壁紙の全体的な効果に不可欠です。

ぼかしにより、奥行き感や重層的なカバー感も作り出せます。 Windows Vista の Aero 効果は、ウィンドウの背後にあるコンテンツをぼかし、クールな拡散ガラス効果を生み出します。ガウスぼかしを使用して同様の効果を作成できます。

9. アライメント

物事をすっきりと整然と保つことに重点を置いていますが、それでもデザインにさらに興味を引く要素を加える必要があります。

この例のロゴでは、「logo」という文字が右上隅に移動されています。デザイン要素の配置を変更すると、覚えやすくなり、説明しやすくなるため、全体的に効果的なデザインになります。

このテクニックは言葉だけに限ったものではありません。デザイナーの中には、デザインコンセプトを考える際に、テンプレート化されたコンテンツや個人的な作業習慣を使用する人もいます。これにより、クライアントへの応答がスピードアップしますが、特にコンテンツの調整に関しては創造性が制限されることがよくあります。

Icon Designer は、特定の要素を回転させることによって他と差別化します。このページは簡単に退屈なものになる可能性がありましたが、いくつかの簡単な工夫により興味深いものになりました。

今日のほとんどの Web ページは幅が 700 ～ 900 ピクセルで、通常はブラウザの中央に配置され、正方形のボックス構造になっています。ほとんどの場合、これによってコンテンツは整理されますが、デザイナーが既成概念にとらわれずに考え、機能を作成することが求められるサイトもあります。

次に、そして最も重要なことは…

10. 雑然としたものをなくす

これはおそらく最も重要でありながら、最も見落とされがちな設計手法です。不要な部分を削除することも、最も難しい作業の 1 つです。

CSS Remix は、不要な部分をすべて削除して必要なものだけを残し、7 つの大きな広告 (128 x 96 ピクセル)、53 の favico 広告 (16 x 16 ピクセル)、および多数の Web サイト (56) を同時に表示できるようにします。これらすべてをページの上部 1000 ピクセル以内に表示できます。Web サイトのロゴも 53 x 7 ピクセルに削減されました。

人生でも同じことが言えます。良いことをやりすぎると、それはもはや良いことではなくなります。ロゴが小さすぎて判読できず、紹介されているサイトを区別することが困難です。奇妙なことに、ページ上部の Twitter フィードは、サイトのロゴやナビゲーションに比べて目立ちすぎています。

その他のヒントについては、以下を参照してください（英語）。

優れたユーザーインターフェースデザインのための 12 の便利なテクニック

グリッドベースのデザイン: 6 つのクリエイティブな列テクニック

翻訳者のブログ:

楊建超: http://yjc.me/

ベンホエル: http://blog.benhuoer.com/

元のタイトル: ウェブサイトのデザイン: シンプルで使いやすい 10 のデザイン手法

キーワード: ウェブサイト、10、シンプル、使いやすい、戦略、編集者、この記事、著者、マーク、ウェブマスター、ウェブサイトのプロモーション、収益化