繰り返しパターン画像作成の手間なし!Webデザインでサクッとテクスチャを使用する方法

「Webデザインに質感を加えたい」

Webデザインをしているとこのような機会は多いですよね。

ただ、グラフィックデザインの際とは違い、テクスチャをつけるのにもサイズや継ぎ目などを考慮した繰り返しパターンを作成する必要があるので、手間がかかるもの。

というわけで今回は実際にテクスチャをつけて、Webサイトに実装するまでの流れを簡単にできる方法をまとめていきたいと思います。

完成のイメージとサンプルサイト

まずは、テクスチャを使用しているサイトを一つ紹介します。

下記リンクの「はまきた保育園」のサイトですが、背景の色に画用紙のようなテクスチャが加えられていて、あたたかみのある雰囲気がでていますよね。

はまきた保育園 Webサイト画像
はまきた保育園 Webサイト
https://www.hamakita-hoikuen.com/

続いて、下記リンク先が今回サンプルで作成したページになります。

サンプルページを見る

作成手順

1.Transparent Texturesというサイトを利用しよう

今回は簡単にということがテーマなので、「Transparent Textures」というサイトを利用して、サクッと実装してしまいましょう。

まずは下記サイトにいって、使用する色やテクスチャを使用しましょう。

サイトへ

2.使用したいテクスチャの種類と色を決めよう

サイトにいったら使い方は簡単です。

  1. ピッカーから色を決めるか、カラーコードを入力
  2. 使用したいテクスチャをパネルから選択
  3. 出力されるコードをコピーして、サイトの使用したい箇所に貼り付ける

実際の見た目はサイトの背景に即時反映されるので、見た目も確認できます。

Transparent Texturesのサイトのキャプチャ画像

テクスチャ画像はダウンロードして、オリジナル素材にも使用できる

上記の方法でWebサイトには反映できますが、自分の作成している素材に同じテクスチャを反映させたい時もありますよね。

その際はテクスチャ素材自体をテクスチャパネルからダウンロードできるので、ダウンロードして使いましょう。

「Create Wallpaper」では、デバイスに合わせたサイズの色付きの画像もダウンロードできます。

Transparent Texturesのサイトのキャプチャ画像

今回はダウンロードした素材を使用して、波線の素材を作成してサンプルページに反映させてみました。

イラストレーターでダウンロードしたテクスチャを使い素材を作成

このような形でダウンロードした素材を使用した画像を作成すればCSSと合わせて使用できます。

サンプルページを見る

background-imageの画像は自身のサーバ上に置いておく方が安全

ちなみに私が仕事で扱うときは、万が一サイトがなくなった時のためにサイトで作成されたbackground-imageのURLは使用せず、ダウンロードした素材をサーバにあげて使用しました。

もちろん、自身のサイトなどであれば修正すれば良いだけなので、大丈夫なのですがクライアントワークの場合はそちらの方が安全ですね。

テクスチャの使い方に慣れて、デザインの幅を広げていこう!

いかがでしたか?テクスチャの使い方に慣れると、デザインの幅がぐっと広くなりますよね。

近年はフラットデザインなどが流行ったこともあり、使用機会も減少しましたが雰囲気を出したい時や、オリジナリティ出したい時はテクスチャは有効な手段です。

また、フラットデザインも初期ほどシンプルな方向性ではなくなってきていますし、テクスチャが使用されることも増えてきましたよね。

今回のサンプルように背景に使わなくても、要所要所で使用しても大丈夫なので色々な使用方法を検討してみてくださいね。