女子にモテるWebデザイン 【2】 模様を攻略!ひと味ちがうデザインへ
女性向けのデザインが苦手なWebデザイナーの方に、
ちょっとしたコツをご紹介するこのコーナー。
今回は、デザインが寂しい時に重宝する、柄・模様の使い方です。
Photoshopのパターンファイルつきなので、ぜひ実践してみてください。
第1回 「ピンクを使いこなそう」はこちらから
ストライプ
意外と盲点なのが、ストライプ。
カジュアルな雰囲気のデザインに加えると、かわいさアップ!
さりげなく入れる縦ストライプはクラシカルな雰囲気に。
Sophie et Chocolat ソフィー エ ショコラ
第1回「ピンクを使いこなそう」でも参考にご紹介したサイトです。
ヘッダの斜めストライプがポップなアクセントに。次に出てくる水玉模様も使っている
女の子の「好き」がいっぱいつまったデザイン。
朝の谷間、ながもち、リボンブラ。|LALAN(ララン)
手描きイラストがかわいらしいデザインですが
太めの縦ストライプがクラシカルで少し大人っぽい印象をあたえています。
背景全面にストライプを淡く入れるのは取り入れやすい上に
手を加えた感に大きく効果があるのでおすすめです。
(※こちらのサイトは現在リニューアルして別のデザインになっています)
水玉
ポップな印象ですが、ストライプよりは女の子らしい柄です。
配色次第では、しっとりとした雰囲気にも使えます。
玉の大きさが大きいとダイナミックに、小さいとおとなしい印象に。
美容専門学校 モア・ヘアメイクカレッジ
水玉がポップでガーリー。淡いグレーのパターンなので
背景全面をパターンで埋めていてもコンテンツを邪魔していません。
ちなみに、このサイトは4つのパターンからランダムで表示されます。
赤ちゃん・ベビー用品のグレコ
水中の泡のような、玉のランダムパターンが大胆に配置されたサイト。
ふわふわとした浮遊感が赤ちゃんのイメージにぴったりですね。
カラフルながらやさしさが感じられる水玉模様です。
花柄
女性向けデザインの王道、花柄です。
ただ、情報量が多い柄なので、デザインに組み込むのが難しいです。
一番使いやすいのはアラベスク模様。背景にさりげなく入れるとエレガント。
小花柄は、パッチワークのように吹き出しの背景に入れてはどうでしょうか?
ひとつの模様が大きい花柄は、上級者向け。インパクト大!
Tanya Merone - Online Portfolio
背景色になじむぐらい淡い花柄を背景にしてあるデザイン。
おちついた色調がエレガントですね。
このさりげなさは、取り入れやすいのではないでしょうか。
東京ガールズコレクション'11 S/S
花で埋め尽くされた、まさしく「ガールズ」らしいデザイン。
ヘッダフッタに花が覆いかぶさっているこだわりのディティールにも着目。
Heath Waller Creative
図版のような美しい植物のイラストを大胆に背景パターンにしたサイト。
要素にコントラストをつけるために、コンテンツ部分はシンプルになっています。
まとめ
大きく目立つ柄は情報を殺してしまうリスクがあります。
どこかで引き算をしないと、どこを見ていいかわからないデザインになるので注意が必要です。
まずは、デザインの一部分や、背景に淡くのせるなど、さりげなく使ってみてください。
Photoshop用パターンファイル
いろんな場面で活躍しそうな、ストライプとドットのパターンを黒と白で用意しました。
地の色の部分を透過してあるので、好きな色と組み合わせてください。
個人・商用問わず、利用可。
PhotoShopパターンファイル/stripe_dot_pat.zip
(おまけ)パターンのサイズを知りたい
コーディング時に背景イメージとして切り出したいときは
パターンパレットのチップにカーソルを持って行くと、
サイズがpxで表示されるのでそのサイズで切りだしてください。