ブラックベースの暗いウェブデザインで気をつけたいポイント

Post on:2009年8月4日

はじめに

ブラックベースのウェブデザインは人気が高く、エレガントでクリエイティブな魅力があります。しかし全てのウェブサイトに適したものという訳ではなく、適切であるときだけ使用されるべきデザインです。

ブラックベースのデザインを使用すると印象的なビジュアル効果を与えられますが、それらをユーザーに飽きさせずに効果的にする必要があります。
ここでは、ブラックベースのウェブデザインをより多くのユーザーに魅力を伝えられるようにするためのいくつかのTipsを紹介します。

Pro Bloggerの最近の調査によると、明るいデザインと暗いデザインを比較した場合、47%が明るいデザインを好むとでています。主な理由はリーダビリティでしょう。たいていの人は暗い背景の明るいテキストは好きではありません。
暗いデザインは10%が好み、38%は状況しだいとしています。

ウェブデザイナーとして我々はクライアントのために有効なブラックベースのデザインを学ばなければなりません。
これは暗いデザインでも読みやすく、ユーザーフレンドリーにできるということを意味します。

1. ホワイトスペースの活用

ホワイトスペース（ブラックスペースでしょうか）は、どんなタイプのデザインでも重要です。これは暗い背景のウェブサイトでも欠かすことはできません。

暗いデザインは重い印象を与えがちです。ホワイトスペースを使用して大きな効果を生み出している下記のサイトを見てみてください。

Black Estate

ユーザーが最初に見るであろうロゴの周りに充分なホワイトスペースをとっています。また、コンテンツの見出しとビンのテキストを強調するようにホワイトスペースが使用されています。

Tictoc

打ち出しに画像とテキストと共にホワイトスペースが配置されています。コンテンツに注意を払わせるほど充分なホワイトスペースとなっています。
そしてこのデザインのポイントは、ホワイトスペースがページの終わりまでユーザーをガイドしているということです。暗いデザインはデザインに深さを加えます。ホワイトスペースに頼りすぎると、暗い背景のクリエイティブな効果が面白くなくなってしまうでしょう。

Mark Dearman

このサイトのホワイトスペースは、均等に分散したものとなっています。それぞれの枠内にあるホワイトスペースがリズムを生み、次のコンテンツに読み進むポイントになっています。
ホワイトスペースはデザインに優雅さを与える重要な要素なので、暗いデザインには欠かすことはできません。

2. テキストのホワイトスペース

リーダビリティは暗い背景を好きではない理由の一位のため、デザイナーはテキストに充分な注意を払う必要があります。
このリーダビリティを改善する一つの方法は、パラグラフのサイズやカーニングを調整することでホワイトスペースを増やすことです。

文字間、行間を調整し、明るいデザインと比較したものです。

暗いデザインでリーダビリティを改善するもう一つの方法はフォントサイズを増やすことです。より大きなフォントを使用するということはホワイトスペースを増やすことを意味します。

例えば、「a」のサイズが大きくなるにつれ、より多くのホワイトスペースを保持します。

注釈：: 小さいテキストの可読性は明るい背景より、暗い背景の方がより容易です。
タイポグラフィを策定する際は必ずそれが読みやすいかどうかダミーテキストを使用して確認してください。

3. テキストのコントラスト

多くの人々は暗いウェブサイトで眼が疲れるかもしれません。あまりにも高かったり、あまにもわずかしかないコントラストがその原因です。

もしあなたが真っ暗な部屋で突然ライトをあてられたらよい気持ちにはならないでしょう。けれども、それほど暗くない部屋でそれほど明るくないライトを見るのは問題ないでしょう。この原則はウェブデザインにも当てはまります。

パーフェクトなコントラストを見つけることは、背景の暗さとテキストの明るさとのバランスを保つことを意味します。

背景とテキストのコントラストがどのように働くかのラフなガイドです。

純粋なブラックの背景でテキストのための適切なコントラストを見つけ出すことは非常に難しいです。パーフェクトなバランスを見つけるためには、異なるシェードを使用してスタディしてください。
最も良い結果は通常、純粋なブラックではない背景と純粋はホワイトではないテキストです。

4. フォントの取り扱い

フォントはデザインにおいて大きな役割を果たし、暗いデザインでも重要な存在です。

サンセリフの方が明らかに読みやすいでしょう。しかし、多くのデザイナーはセリフを優雅さのために選択します。

セリフを使うポイントは、大きいテキストだけにセリフを使うことです。充分なホワイトスペースが生じ、テキストを非常に読みやすくします。

コピー、見出しなどの大きいサイズのテキストには優雅さのためにセリフを使用し、ボディテキストなどの小さいサイズのテキストにはリーダビリティのためにサンセリフを使用しています。

5. カラースキームは最小に

暗いデザインに、クリーンで整頓された見た目を与えるためには、カラースキームを常に最小にすべきです。

あまりにも多くのカラーを使用すると、コントラストがシャープになり暗い背景の邪魔をしてしまいます。
一つあるいは二つのカラーをベースにカラースキームを作成してください。

多くの暗いウェブサイトはエキサイティングなカラースキームをもっていることがあります。それでこのルールは破綻していると考えられますが、テクニックの一つとして身につけておくとよいでしょう。
一般的に多くのカラーを使用するとウェブサイトがあまりにも落ち着きがないものに見せます。暗いウェブサイトは既に深さを持っているので、カラーは注意して使用してください。

6. スタイルスイッチャー

暗いウェブデザインをより魅力的にしようと多くの努力を行っても、全てのユーザーを満足させることはできないでしょう。
解決方法として、明るい背景と暗いテキストに変更できるようスタイルスイッチャーを提供するというのがあります。

二つのスタイルシートを用意し、デフォルトは暗いデザイン用、代替で明るいデザイン用のものにします。

7. 暗いデザインがはまるサイトとは

暗いデザインがある特定のタイプのウェブサイトに機能しますが、正確にどのタイプであるかについてはあいまいです。

傾向としては、クリエイティブなものやエレガントなデザインに暗いデザインのものがはまります。モダンやスリークなウェブサイトでは暗い背景が優雅さを加えます。グランジや手書きスタイルでは暗い背景がレイアウトのクリエイティビティを更によくするでしょう。

8. エレガントな暗いデザイン

Larissa Meek

背景にヴィンテージスタイルのパターンを使用し、優雅なトーンを演出しています。このテクニックは他のデザインにも有用で、ヴィンテージやクラシックなパターンやテクスチャを使用しサイトにあったデザインにできます。

Depth Core

このポートフォリオサイトでは、ロゴとポートフォリオ以外にイメージやテクスチャを使用していないことに注意を払ってください。非常にきれいなデザインで、ポートフォリオの仕事の結果としても優雅さを見えさせるかもしれません。

デザインのプロセスは、最初に不可欠なコンテンツを加え、次にデザインエレメントを考えることです。レイアウトが過度になっていないことを確認して、一旦中断し、それからそれぞれの新しいエレメントを加えることを考えます。

Tapbots

暗いデザインはアートワークをより価値があるように見せることができるように、プロダクトもそうすることができます。暗くてスリークなデザインがプロダクトを目立たせるのに効果があります。

デザインはグラデーションとライトのエフェクトで、デバイス自体を映しています。他のデザインもそのテクスチャの影響を受けています。

9. クリエイティブな暗いデザイン

Inca un calator

通常、暗い背景は少量のコンテンツにはあまり適していないものですが、このサイトでは暗いカラーを使用したユニークなレイアウトを採用しています。

Trozo

暗いグランジのデザインは全てのルールを破っているように見えます。せわしないテクスチャ、混雑したレイアウト、広範囲なカラーなどにもかかわらず、このウェブサイトは機能しています。

これらの取り散らかしたエレメントを機能させているのは、組織化です。背景ははっきりと区切られており、コンテンツもセクションごとにブロックとして設計されています。
そして重要なのは充分はホワイトスペースです。背景にはテクスチャが使用されていますが、その繰り返しパターンはデザインを明るくするのに一役買っており、ホワイトスペースとしてユーザーに見られます。ロゴの左、ナビゲーションの下、右側にあるホワイトスペースが最も目立つものです。各ブロックごとのホワイトスペースも通常より多く使用しています。