ウェブデザインにおける透過の効果的な使い方と注意点
Post on:2013年2月14日
sponsors
半透明のパネルにテキストを配置したり、ナビゲーションを半透明にしたりなど、ウェブデザインでよく利用される透過のエフェクトの効果的な使い方と注意点を紹介します。
Using Transparency in Web Design- Dos and Don'ts
下記は各ポイントを意訳したものです。
- はじめに
- コントラストを作るために透過を使う
- イメージの重要な部分は隠さない
- さまざまなレベルの透明度を使う
- 透過するとテキストが読みやすくなるとは限らない
- 透過を使うのは少しのスペースに
- 激しいコントラストの画像には透過は置かない
- 透過をアートとして使う
- 透過を飾りとして使用しない
- 背景に透過を使う
- 同時に多くの透過のエフェクトは使わない
- 循環するイメージに透過を使用する
- おわりに
はじめに
透過を使ったウェブデザインは非常に美しいですが、慎重にデザインする必要があります。透過はカラーのブロック・テキスト・イメージなどを薄めさせ、背後にあるものが見えるようになるエフェクトです。
この透過のエフェクトは適切に使用すると非常に効果的で、特定の場所にフォーカスをもたらすことができます。
デザイナーは透過を使う時は、とても注意深くなる必要があります。このエフェクトの一番の注意点はリーダビリティです。うまく使わないと透過にしたボックスもテキストもユーザーの気を散らすだけで、デザイン全体にも悪い影響を与えます。
ここではこの透過のエフェクトをデザインに使用する時に、するべきこと、してはいけないことをまとめました。
コントラストを作るために透過を使う
デザインに透過を使う一番のベネフィットは、コントラストです。これは画像の上のテキストやさまざまななカラーの画像でも特定の場所にフォーカスを与えることができます。
テキストが読みにくい背景でも、透過のエフェクトを与えることでそのテキストを背景から離し、読みやすくなります。
透過のエフェクトを使用する時、コントラストを考慮することは特に重要です。透過は単に画像でも背景でもテキストを読みやすくするだけです。透過のエフェクトを使うことで、ユーザーにテキストや画像を理解することがより容易になるか検証してください。
イメージの重要な部分は隠さない
透過を使う時は、画像や背景の重要な部分は隠すべきではありません。透過したエレメントを配置する時は、その部分が失われるということを忘れないでください。
さまざまなレベルの透明度を使う
透明度はこれが完璧というレベルはありません。80%の透明度がいい時もあれば、15%がいい時もあるでしょう。それぞれのプロジェクトでさまざまなレベルの透明度を試してください。
透過するとテキストが読みやすくなるとは限らない
テキストを透過したパネルに配置したからといって、テキストが自動的に読みやすくなるわけではありません。必ず、コントラストについて考えてください。透過したパネル、テキスト、背景の画像、透明なフレームなど。
テキストを配置する画像やパネルに透過のエフェクトを使う時は、リーダビリティを考慮することは非常に重要です。もしデザインがテキストを読みにくくするのであれば、ユーザーにメッセージは伝えられないでしょう。
透過を使うのは少しのスペースに
透過はあなたのサイトのメインではありません。このエフェクトは小さいスペースで非常に良く機能します。ナビゲーションに使用したり、ボタンのホバーやクリッカブルなエレメントに少しだけ使用します。使用する時はサイトのデザインを通じて、適用するエレメントと透明度のスタイルを選びます。
激しいコントラストの画像には透過は置かない
その理由はリーダビリティです、透過を使う時にコントラストが激しい、例えばブラックとホワイトなどを避けたほうがよいでしょう。コントラストが激しいエレメントに透過を使用すると、場合によってはデザインに悪影響を与えてしまいます。
コントラストが激しい箇所には透過ではなく、淡い色合いのパネルを試してみてください。
透過をアートとして使う
透過は単にエフェクトの一つだけではありません。透過のエフェクトはあなたのサイトのために非常に効果的なイメージを作り出すことができます。例えば、透過の箇所を大きく使うことで、コントラストや強調を使ったヴィジュアル的な興味を加えることができます。
透過を飾りとして使用しない
デザインが退屈しているからといって、透過をあとから思いつきで加えるべきではありません。透過の使用は計画的に行い、十分に考えぬいて使用するべきエフェクトです。透過はボールドのような単純なエフェクトではなく、適切な加減で使用しないとプロ的には見えません。
背景に透過を使う
透過のエフェクトはエレメントに使うだけではありません。背景のイメージにも非常に効果的です。ポイントは繊細に使うこと。
例えば下記のTony Chesterのサイトでは、透過を使ったレイヤーのテクニックで多次元のデザインを作りだしています。
同時に多くの透過のエフェクトは使わない
透過のエフェクトはプロジェクト毎に異なるタイプのものを一つ使用するくらいにしてください。透過はコントラストやヴィジュアルの興味を作るエフェクトなので、このようなエフェクトをあまり多く使用することはユーザーの気を散らしてしまいます。
循環するイメージに透過を使用する
透過の使用は一つのページだけ、静的なデザインだけに限定されるものではありません。さまざまなイメージと背景で機能させることもできます。
回転などで循環するイメージに透過を使うのはトリッキーですが、非常に効果的です。多数の背景イメージについて注意深く考えてください。背景が動く間に一つの透過で機能するように、類似したカラー・コントラストを持ったイメージを使用します。透過がそれぞれのイメージに一貫したヴィジュアルを維持するように注意を払います。
おわりに
透過をいろいろ使ってみることは、あなたのデザインの引き出しを増やす素晴らしい方法です。多くの他のエフェクトと同様に、使うべき箇所にこのテクニックを使い、それが機能し、意図させた通りに見えるよう多くの環境でデザインをテストしてください。
透過を勉強するときは、テキストが読みやすいように作ること、透過の下に大切なものを隠さないことに注意してください。透明度を異なるレベルで使用し、どれが一番よく機能するかやってみてください。
sponsors
