[無料ダウンロードOK]サイトの背景に使用できるパターン素材

Webサイトで使用できる背景パターンのフリー素材です。
Webサイトの背景として写真や背景色を敷いた時に、そのままシンプルに見せる方法もありますが、さらにパターン画像を重ねてテクスチャ感をプラスしてみると、視認性がよくなったり、また少し違った表現が可能になります。そんな時に使用できるパターン素材です。

フリー素材ですので、Webサイトなどのデザインに自由にお使いください

パターンの使用例

こちらは背景写真の上にパターン画像を設定した例。
bgpatterns_example_01

BiNDで設定する場合は、まずはページ設定で、ページ全体(または各エリアなど)に写真を背景として設定します。
bgpatterns_setting_02

ブロック設定でブロックの背景画像にパターン画像を設定します。パターンなので配置はタイリングのままで大丈夫です。
bgpatterns_setting_01

単色の背景にパターン画像を重ねるだけでも少し雰囲気が変わります。
bgpatterns_example_02

ブロック設定で背景色と背景画像を設定します。
bgpatterns_setting_03

もちろん、Dressで見出しなど各要素の背景として使用することもできます。
bgpatterns_example_03

配布素材のサンプル

シンプルな斜めラインのパターンです。こういう素材は使い回しがしやすく、デザインの妨げにもなりにくいのでおすすめです。
bgpatterns_sample_01

同じくシンプルな斜めラインで黒バージョンです。
bgpatterns_sample_02

半透明色の大ぶりな斜めライン。少し印象を変えたい時などにどうぞ。
bgpatterns_sample_03

半透明の水玉模様。ポップな雰囲気を演出したい時などに。
bgpatterns_sample_04

素材はPNG形式の画像なので、BiNDなどに取り込んでぜひお使いください。
下記よりログインして、ダウンロードしてご活用ください。

[デザイナー厳選] 覚えておきたい おすすめWebフォント30選

見た目や可読性に大きく影響するホントに使える30のWebフォントを、本文から見出し、日本語から欧文まで用途ごとにデザイナーが厳選しました。

今すぐ資料をダウンロード
  • POINT

  • 背景写真の上にパターン画像を重ねてテクスチャ感をプラス
  • 背景色と組み合わせるだけでも一味違う雰囲気に
  • 見出しやメニューなど、個別の要素に使ってもOK

あわせて読みたい