WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >WEBデザイン

今回は、ドット柄やストライプ柄の背景パターンをカスタマイズしてカンタンにCSSを生成できるツールをご紹介します！

マークアップに便利なほか、デザインイメージを考える際にも生かせるのでデザイナーも知っていて損はないツールです。
生成した背景をPhotoshopで再現する方法も合わせてご紹介しますね。

ドット柄

まずは下記サイトへ。
https://webspe.net/tools/polka-dots/

「カスタマイズ」の欄で数値などを指定すると、オリジナルのドット柄を作成できます。

さっそく設定してみましょう。まず「タイプ」を選択します。今回は左下の、斜めにドットが並んだイメージを選択しました。

次に、色を選択します。「色：」の横のボックスをクリックするとカスタマイズウィンドウが開きます。

バーを動かして色味や濃さを調節できるほか、カラーコードを入力して色を指定することもできます。

その他の項目についても、お好みに合わせて数値を入れて調節します。一つひとつのドットの大きさ、ドット間の距離などの数値をカスタマイズします。

これで、白背景＋薄いピンクのドット柄背景ができました！

この背景パターンのCSSは「CSSコード」の欄に自動で生成されますので、これをコピー＆ペーストするだけで実際に制作中のWebページへ背景パターンを反映させることができます。

ストライプ柄

同じWebサイト内で、ストライプ柄も生成することができます。

https://webspe.net/tools/stripe/

作業としてはドット柄の場合とほとんど同じです。「プレビュー」を見ながらお好みの色やサイズ、角度を調節しましょう。

角度は自由に調節できるので、デフォルトのように斜めにもできるほか、「0°」なら横ボーダー、「90°」にすると縦ストライプになります。
「135°」にすると右上がりになります。

背景色はデフォルトでは透明になっていますが、白にもできますし、他の色にもできるので、2色ストライプも可能です。

Photoshopでパターンを作成

このツールを使用して生成できたドット柄やストライプ柄を、Photoshopでデザイン制作する際に「パターン」として登録することもできます。

まず、ドット柄が完成した画面の「プレビュー」欄が入るようにスクリーンショットし、Photoshopのキャンバス上に貼り付けます。

そこから、パターンの一部を切り出します。
ドット柄のうち、「中央にドットが1つ＋四隅にドットが1/4ずつ含まれる」の範囲を「選択」ツールで囲います。言葉で説明するのは難しいので、下記イメージをご確認ください。

囲えたら、その状態で上部メニューから「編集＞パターンを定義」でパターン名を聞かれるので、分かりやすい名前を付けて「OK」します。

これで、先ほど生成したドット柄をPhotoshop上でいつでも呼び出せるようになりました！

ストライプ柄の場合は「線1本＋隣の線のうち1つの角に収まっている範囲」を囲います。こちらも言葉で説明するのは難しいので、下記のイメージをご確認ください。

ストライプの場合は角度によって変わってきますが、基本はこの範囲でパターン化すれば上手く反映されます。

パターンイメージをカンタンに作成して効率良く！

デザイン制作時、Photoshop上でドット柄やストライプ柄を自作して試すのは時間がかかってしまいます。今回ご紹介したツールを利用すれば、手早く柄パターンを生成できますし、コードも生成されるため、マークアップエンジニアさんへ共有することもでき、デザイン・コーディングともに効率を上げることができます！ぜひ試してみてくださいね。