BLOG 2019.03.27
【CSS】パターンをかぶせた背景画像を作れる便利ツール
こんにちは！制作部のゆりです。
ずーっと気になっていた「パターンをかぶせた背景画像を作る方法」を見つけたので、ご紹介します！
——————————–
ドット柄などの模様を、画像の上に載せていて魅力的なサイトって結構たくさんありますよね
例えば、こんな感じのもの↓
※「ORENZNERO」様のホームページより
http://pentel-orenznero.jp/identity.html
私はこれを、イラレで作るものだと思い込んでおり、
「画像 ドット柄 イラレ」などで調べても、いまいちピンとくるやり方は出てこず…
ほぼ諦めかけていましたが、ふと”網掛け”という言葉を思いついたので、
検索で「画像 網掛け」と打ってみました
すると、「画像 網掛け css」というGoogleの予測キーワードが表示され、これだ！と思い検索をかけてみると、どんぴしゃり！
私が知りたかったやり方そのものが見つかりました！(一番最初ではなく1ページ目の後の方)
これはCSSで作れるものなんですね( ..)φメモメモ
※ちなみに「ドット柄 画像 css」で検索しても出てきます
もしまだ知らないよという方がいらっしゃれば、ぜひ一度さらーっとご閲覧ください！
★ただ背景にドット柄を入れたい方は、こちらのツールが役に立つかと思います:-)
https://webparts.cman.jp/box/dot/
CSS対応！パターン制作ツール「Patternify」
私がたどり着いたサイトで紹介されていたツールです。
このツールを使うことによって、簡単にサイトの画像にパターンをかぶせることが出来ます。
使い方はとてもシンプル。左側のマス目にクリックで形を作っていくだけ。
右上にプレビューが表示され、その下にCSSコードが自動的に生成されるようになっています。
自分のオリジナルでもいいですし、左下にはよく使われるようなテンプレートがありますので、そこから選ぶのも良いですね！
また、パターンの色や透明度も「Color」「Opacity」の部分で変えることが出来ます。
以下のリンク先が「Patternify」です。
実際に試してみてください(*^_^*)
「Patternify」を使う上での注意点
「Download PNG」で画像としてダウンロードする場合、
手入力でPNG形式に変更する必要があります。
ダウンロードしただけでは、画像として表示されません。
※ダウンロード後、名前の最後に.pngと付け足して頂ければ、変換されるかと思います。(確認済み)
「パターンをかぶせた画像」を用いたサイト4選
ここからは、パターンをかぶせた画像を用いているサイトを紹介していきたいと思います。
作庭 平岡
メインビジュアルを見ていただくと、パターンが使用されているのが分かります。
白の文字が目立ち、背景の動画も雰囲気が出ておしゃれですね:-)
森のピタゴラス
こちらもメインビジュアルの動画にかぶせる感じで、パターンが使われています。
ドットではなく、右斜め上を指す矢印のような模様になっていますね。
Patternifyツールではこのような編集になるでしょうか、、？
LINICA
モダンな印象を受ける「株式会社LINICA」様のホームページ。
正方形が規則正しくならんだカジュアルっぽさのあるパターンが、
メインビジュアル以外にも、下層ページのトップや文字に使われていて、
親しみやすさが感じられます:-)
このパターンも試しに作ってみました。
MURO
最後にこちらのサイトですが、ブログのアイキャッチ画像に
さりげなくパターンがかぶせられています。
このように大きな画像でなくても、ちょっとしたところに取り入れるだけで
サイトが引き締まってオシャレに見えるので、活用の幅は広そうですね！
まとめ
「webデザイン参考サイト集」から探すこと僅か10分ほどで、今回紹介した4サイトを見つけました。
それだけパターンをかぶせた背景画像を使っているサイトが多いということ！
パターンを使うことのメリットとしては、
・画像上の白文字が見やすくなる
・少し荒れた画像でも綺麗に見える
・サイトがおしゃれになる
・雰囲気を変えられる・合わせられる
・質感がアップする
などでしょうか。
紹介したサイトを見ても、動画の上にかぶせているところが多い気がします。
サイトのデザインに合わせて、使えそうなところは使っていきたいですね！
私はまだこの方法(ツール)を見つけたばかりなので、
これからたくさん試していきたいと思っています(`･ω･´)
では、ご閲覧ありがとうございました！
