今日もフロントエンドのデザインをしているきゅうま(@kyumamorita)です。
ウェブサイトの背景画像にかぶせるためのドットデザインを作成する便利なツールを探していたところ、とても便利な作成ツールを発見しました。
当初はillustraterでドットを作ろうとしていたので、手間が大幅に省けたうえヘタに自分で作るよりも良いデザインに。便利な機能が色々揃っているツールなのでちょっと紹介しようと思います。
「PATTERNIFY」がドット柄作りにお役立ち
ドットデザインを作るためのツールなので、使い方はいたってシンプルです。
特徴１．プレビューを見れる
デザインを作って、サイトに反映させて確認して…という作業を繰り返すのは時間がかかりますよね。ドットのサイズ、カラー、透明度(Opacity)などの細かいデザインを調節するときにプレビューが見れるのは非常にありがたいです。
ただし、画像の上にこのドットデザインを重ねる場合、さすがに画像と重ねたプレビューはできないので、サイトに反映させて確認する必要があります。
特徴２．CSSを取得してそのままコピペ！
なんと、そのまま使えるCSSコードまで作ってくれるんですよ。
PATTERNIFYで作成したドットデザインを利用するには２つの方法があります。
一つはCSSコードを取得する方法。このコードを取得してcssのstylesheetに貼り付けるだけです。
もう一つはPNG形式の画像を取得する方法。この場合は「Download PNG」ボタンで画像を取得し、サイトのサーバーに画像ファイルをアップロードしてからCSSに記入して反映させる必要があります。
特徴３．既存デザインを使うもよし、オリジナルで作るもよし
オリジナルで作る場合は、「color」「opacity」を調節すればドットデザインのカラーや透明度も設定が可能。やってみると簡単です。
一方、PATTERNIFYが用意してくれているデザインもあります。実際によく使う柄を用意してくれているみたいなのでここから選部のもいいですね。
作成したドット柄でbackground-image(背景画像)を暗くして、文字を目立たせる
最後にCSSを反映させて、画像を完成させましょう。今回僕はサイトトップページ向けをイメージした背景画像を作ってみました。
ぱっと見だとあまりわかりづらいですね…。画像のうえにCSSで細かいドット柄をかぶせています。ちなみにドットだけだとこのように。
CSSは以下を参考にしてみてください。
See the Pen background-image by Kyuma Morita (@Kyuma1997) on CodePen.
画像URLを貼る場所はここです。うまく書けなかったけど説明入れてみました。
その他のCSSは自分のサイトに合わせて色々いじってみてください。
初級者向けに書くと、PATTERNIFYで作成したドット自体だけでは、実はドットの点が一つしか現れません。それでは意味がないので、background-repeatというCSS属性を使うことで画像全体にドット柄をかぶせることができます。background-repeatについては、僕もよく参考にするサイトがわかりやすいので載せておきます。
ドット柄の上に入れる文字はz-indexというCSS属性を使って、重なりの順序を指定することができます。