レビュー

無料でウェブサイトに使える繰り返し背景パターンをカスタマイズしてダウンロードできる「Hero Patterns」


ウェブサイトで使いたくなる色んな柄の繰り返し背景パターンを、色の組み合わせや柄の不透明度を自由にカスタマイズ&無料でダウンロード可能なのが「Hero Patterns」です。SVG形式のファイルをダウンロードできるほか、CSSコードをコピー&ペーストすることも可能になっています。

Hero Patterns
http://www.heropatterns.com/


デフォルト状態のウェブページには薄い青とやや濃い目の青の背景パターンが並んでいます。市松模様や十字模様などシンプルなものもあれば……


歯車やダイヤ、葉っぱなど、ポップな模様もあります。


画面上部のツールを使って、背景や柄の色を変更可能。柄の色を緑色にしてみました。


さらに、背景色も変更。


柄の不透明度も調整できます。以下は、やや薄めにした様子。


不透明度を上げると柄がくっきりと浮かび上がります。


また、各背景の右下にある「Use Pattern」をクリックすれば……


自分でカスタマイズした背景をダウンロードしたり、CSSコードをゲットしたりが可能。なお、最終的な背景の調整はここでも行えます。


右上の「Download unstyled SVG」を押せばSVGデータをダウンロードできるほか、テキスト欄のCSSコードをコピー&ペーストしてもOKです。


背景パターン自体は62種類なのですが、カラーや不透明度を変更することで、多様な背景パターンを無料でゲットすることができるわけです。


なお、背景パターンは現在も随時更新されているとのことです。

この記事のタイトルとURLをコピーする

・関連記事
無料で大量の背景テクスチャをダウンロードできるサイト「Subtle Patterns」 - GIGAZINE

無料で商用利用できる写真を13のサイトから一気に串刺し検索してゲット可能な「LibreStock」 - GIGAZINE

商用・非商用を問わず完全フリーで使えるハイクオリティな画像検索サイト「Pixabay」 - GIGAZINE

なぜウェブデザイナーは暗黒面に落ちて人をだます「ダークパターン」を使うようになるのか? - GIGAZINE

ウェブサイトのデザインを4分で劇的によくする方法を視覚的にわかりやすく解説した「Web Design in 4 minutes」 - GIGAZINE

使いにくいアプリ・ウェブサイトの原因である「認知的負荷」を削減するためのデザインの基本原則 - GIGAZINE

シンプルなカラーで作る失敗知らずのウェブデザイン - GIGAZINE

写真を使ってデザインするために最も重要な5つのルール - GIGAZINE

マーケティングでよく言われる効果的な6つのルールを48種類の広告で検証 - GIGAZINE

無料でレスポンシブサイトをクリックだけでデザインしてダウンロードも可能な「Launchaco」 - GIGAZINE

無料で作成中のUIデザインを複数人で共有&リアルタイム編集できるネットサービス「Figma」 - GIGAZINE

無料で使える日本語ウェブフォント9種類をGoogleが公開中 - GIGAZINE

in レビュー,   ネットサービス, Posted by logq_fa

You can read the machine translated English article here.