ウェブデザインにおけるテクスチャやパターンの使い方をしっかり学びたい人用のまとめ

当サイトでもテクスチャやパターンなどを素材として紹介しますが、ダウンロードして満足するだけでなく、どのように使うかが大切です。

テクスチャやパターンを効果的に使った実例を見ながら、その使い方を紹介します。

サイトのキャプチャ

The What, Why and How of Textures in Web Design

下記は各ポイントを意訳したものです。

1. ノイズのテクスチャ

ノイズのテクスチャは最近のウェブデザインでとても人気があります。これは背景からボタンまで、あらゆるデザインほとんどのエレメントにマッチします。

ノイズの使い方は使う場所に依存しますが、良いノイズというのはぱっと見では識別できないくらい繊細にすることです。

ノイズのテクスチャの代表的な使い方を見てみましょう。

サイトのキャプチャ

Kendo UI Dojo

デザインに奥行きを与え、エレメントにユーザーの視線が集まるように照明効果でビジュアルの興味を引き起こしています。

サイトのキャプチャ

Matthew Price

ノイズを使った繊細な照明のエフェクトで、二つのサービスの相違を強調しています。

シンプルでかっこいいノイズテクスチャの作り方

Photoshopのキャプチャ

新規で、サイズ:150x150、カンバスカラー:透明、で作成します。

Photoshopのキャプチャ

[Ctrl+A]で全体を選択し、カラーオーバーレイで「#007dba」で塗ります。

Photoshopのキャプチャ

新規レイヤーを「#000000」で塗り、[フィルター-ノイズ-ノイズを加える]で、量:200、分布:均等でノイズを加えます。

Photoshopのキャプチャ

[レイヤー-新規調整レイヤー-白黒]を選択し、ノイズをグレースケールにします。

Photoshopのキャプチャ

ノイズをレイヤーを右クリックし、クリッピングマスクを作成します。

Photoshopのキャプチャ

ノイズレイヤーを選択し、塗りを6-8%にします。

Photoshopのキャプチャ

仕上げにかかります。
ベースのレイヤーの上に新規レイヤーを作成し、グラデーションオーバーレイで、描画:焼き込みカラー、不透明度:15、グラデーション:黒白、スタイル:線形、にします。

Photoshopのキャプチャ

グラデーションのレイヤーの塗りは「0」にします。

2. リアルにするためのテクスチャ

テクスチャは現実世界のリアルさを演出するエフェクトを与えるために使用することもできます。

サイトのキャプチャ

Dials

背景に使われている木のテクスチャだけでなく、ダイヤルのメタリックなグラデーションと影にも注目してください。

サイトのキャプチャ

Six11Ink

文字通りにリアルにしなければならないわけではありません。この例ではコピーの背景に紙のテクスチャを使い、単にプレーンな背景より質の高い感じを演出しています。会社のビジネスにフォーカスをあわせた完璧な組み合わせです。

3. ビジュアル効果を与えるテクスチャ

最近のウェブデザインのトレンドとして、テクスチャを独創的に使用し、ビジュアルにインパクトを与える方法があります。

サイトのキャプチャ

Solid Giant

かなりシンプルなテクスチャですが、大胆なカラーを選択し、ビジュアルにインパクトを与えています。

サイトのキャプチャ

Visual Republic

サイト全体のデザインにテクスチャを使い、美しさを強めています。こういった使い方は、遠慮がちにするのがポイントです。

ビジュアル効果を与えるテクスチャの作り方

Subtle Patterns」のパターン素材を使って、インパクトのあるテクスチャを作ってみましょう。

Photoshopのキャプチャ

新規で、サイズ:500x500、カンバスカラー:白、で作成します。

Photoshopのキャプチャ

[レイヤー-新規塗りつぶしレイヤー-パターン]から「Bright Squeares」で塗ります。

パターンは全てモノクロなので、カラーを調整します。

Photoshopのキャプチャ

「トーンカーブ」で、入力:132、出力:109。

Photoshopのキャプチャ

「色相・彩度」で「色彩の統一」をチェックし、色相:360、彩度:100、明度:-28。

Photoshopのキャプチャ

「レベル補正」で、黒:30、グレー:1.1、白:200。

Photoshopのキャプチャ

「明るさ・コントラスト」で、明るさ:-10、コントラスト:10。

Photoshopのキャプチャ

「新規塗りつぶしレイヤー」から「#00b4ff」で塗り、モードを「カラー」にします。

4. トーンや印象を明確にするテクスチャ

ここまでの使い方は、テクスチャでどのようにビジュアル的な興味を加えるかでした。
ここでのアイデアは少しステップアップして、テクスチャがサイトの全体的なデザインコンセプトと矛盾せずに、トーンや印象を明確にするためにどのように使うかを見てみましょう。

サイトのキャプチャ

i-Avion

メインのイラストと見出しのフォントはレトロな雰囲気を与え、全体的にフレッシュでモダンな見た目となっています。背景に使われているサンバーストと水玉のテクスチャは、レトロな雰囲気と各エレメントを強調するために使用されています。もしこのテクスチャを取り除いてしまうと、デザインは全く違う印象になってしまうでしょう。

サイトのキャプチャ

Onst Creative

これもイラストの背景に効果的に繊細なノイズのテクスチャが使用されています。また、コンテンツにも1950年代の雰囲気を演出するためにテクスチャが利用されています。

5. シンプルなピクセルパターンの繰り返し

テクスチャから少し離れて、ピクセルパターンの使い方を見てみましょう。ピクセルパターンはテクスチャに比べて、シンプルでなくてはいけません。パターンの多くは10px程度の小さなもので、劇的なエフェクトを与えます。

サイトのキャプチャ

Outside The Wire

ブラウザいっぱいに表示された写真に目を奪われることでしょう。ただし、写真をそのまま使うのではなく、イメージの影響を減らすよう12x12のピクセルパターンをオーバレイで表示しています。これにより、デザインの印象だけでなく、ロゴやナビゲーションなどの他のエレメントにもイメージのトーンとコントラストを効果的にしています。

サイトのキャプチャ

Tust+

もう一つの例は、ブログの記事などの見出しの背景としてピクセルパターンを使用したものです。ピクセルパターンを使用すると、単に塗りの背景より洗練された面白い外見を与えることができます。

6. 大きなインパクトを与えるパターン

ここまでは、デザインを補完したり、拡張したりする使い方でした。ここではパターン自体が大きなインパクトを与える使い方を見てみましょう。

サイトのキャプチャ

National LGBT Museum

このデザインは大きなパターンを使ったテクスチャが非常に大きなインパクトを与えています。大胆にパターンを使用する際のポイントは、パターンとサイトのバランスをどのようにとるかで、ここでは右側に充分なホワイトスペースを確保しています。

サイトのキャプチャ

Pop The Box

もう一つ大胆で、繊細な例を見てみましょう。背景に使用されているテクスチャは大胆なタータンチェックの柄で、コンテンツの背景には繊細な布地のテクスチャが使用されており、サイトの目的に対してユーザーに明確な方向性を示しています。

top of page

©2017 coliss