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

ブラックベースの暗いデザインのウェブサイトを制作する際に、取り入れたいポイントや注意すべきポイントをWeb Designer Depotから紹介します。

The Do's and Don'ts of Dark Web Desig

The Do's and Don'ts of Dark Web Design

下記は、その意訳です。

はじめに

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

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

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

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

サイトのキャプチャ

Drew Wilson

このサイトのデザインは確かに最小のカラーを使うルールを破るものです。けれども、それは明るく着色されたヘッダがこのデザインの特徴の一つとして機能します。それは過度にパワーアップされたものではありません。

暗い背景はヘッダをより明るく見せ、際だたせています。
暗い背景は照明のエフェクト時に使用され、明るい色がより際だつようになります。

注意:
ページの下の方で、グラデーションやテクスチャやカラーでユーザーの気をそらないように注意してください。

終わりに

暗い背景はウェブデザインにエレガントやクリエイティブ感を与えます。しかしながら、全てのサイトに適しているものではありません。
より大きなウェブサイトなどではスタイルスイッチャーを使用しても禁じられるかもしれません。

いつか暗い背景のウェブサイトを設計する必要がある時に、これらのTipsは助けになることでしょう。

sponsors

top of page

©2018 coliss