WEBサイトの背景に使えるテクスチャ素材サイト8+1種!

2014.4.5 webツール

こんにちは!satohmsysです

先日から新しく製作の案件がスタートし、ビジネスのターゲットが”女性”との事だったので、
うーん…と悩んだ結果ペールトーンで攻めたり…webフォントでゼロゴシック使ってメリハリつけたり…と色々悩んだのですが、イチバン悩んだのが背景でした。

そこで、悩みの中ネットサーフィンして見つけた、背景画像に使える、テクスチャ素材サイトをいくつかご紹介いたします!

Transparent Textures

Transparent-Textures

Transparent Textures

即時プレビュー、pngファイルダウンロード可能、シームレスパターン、CSSコード吐き出し。完璧です!

SUBTLE PATTERNS

subtlepatterns

SUBTLE PATTERNS

シームレスでミニマル。素材詳細ページでブラウザ上でプレビュー可能です。

早速ですが、ここで採用案を見つけました。

BGREPEAT

bgrepeat

BGREPEAT

ミニマルなものからガーリー、エレガントまで。

ブラウザプレビューは出来ませんが、デモ画面のHTMLは生成できます。意味がわかりません

FREE STOCK TEXTURES

freestocktextures

FREE STOCK TEXTURES

グランジ系やメタルなどガチな写真素材、CG系が多数。

たまにシームレスでリピートして使えるものもあり。DTPにも使えそうです!

フリー素材テクスチャ館

フリー素材テクスチャ館

フリー素材テクスチャ館

系統は様々ですがリアル質感系が多いのでしょうか。

zip形式でダウンロードでき、種類別と高解像度verとPhotoshopパターンファイル(.pat)が入っていて、webだけでなく、ハガキなど印刷物系にも使える、オススメサイトです。
素材詳細ページに日本語で解説付き。

Pattern8

pattern8

Pattern8

イラスト系多数。未だにTOPページの素材一覧にサンタ帽があるのが気になりますが、ダウンロードしたファイルも軽くて種類も多いので結構好きです。

Indigo Note

indigo note

Indigo Note

Fireworks向けの解説ですが、Photoshopでパターンを定義(画像を開いて 「編集(E) > パターンを定義」)してしまえば使えますし、
ちょっと面倒ですがIllustratorでもスウォッチ登録で使えます。

ダウンロードファイルはzip形式。解凍すると、サイズの種類が豊富に収録されていて使いやすそうです。

Fireworks Texture Gallery

Fireworks Texture Gallery

Fireworks Texture Gallery

こちらもIndigo Note様と同じくFireworks向け。

ベーシックなものが多いですね。ダウンロードは、直接「右クリック > 保存」 でOKとのこと

ホワイトや明るいグレーの質感をアップするテクスチャ素材のまとめ | コリス

ホワイトや明るいグレーの質感をアップするテクスチャ素材のまとめ | コリス

ホワイトや明るいグレーの質感をアップするテクスチャ素材のまとめ | コリス

シンプルに、さらっと使えてしまう系。

フリーの高解像度コルクテクスチャ素材とボード制作の簡単チュートリアル | DotsDomino

コルクボードの素材

番外編。

フリーの高解像度コルクテクスチャ素材とボード制作の簡単チュートリアル | DotsDomino

LPの制作でブレット(メリットを列挙すること)部分をデザインするときにありがちなのがコルクボード。
こちらのページにはよくお世話になっています。

とくにこちら!

コルクボードpsd

ページ中「Download」からダウロードしてください。
ピンやバッジの素材もセットです!そのまま使えます。

いかがでしょうか?
僕がお給料をもらっている間に苦し紛れにしたネットサーフィンが、誰かのお役に立てれば幸いです。

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。