デザイナー必見!! 女性向けWEBサイトデザインのポイント(2)装飾編

津田 祐典 津田 祐典


LoadingMY CLIP

  • このエントリーをはてなブックマークに追加

前回は、女性向けWebサイトデザインにおける「配色」のバリエーションについてご紹介しました。今回は、見出し等における細部の「装飾」に絞っていくつかのパターンをご紹介しようと思います。

手書き、アナログ風

女性向け(に限らないですが)、手書き風の文字やかすれた線を用いたアナログ的アプローチは、柔らかい雰囲気を出すオーソドックスな手法の一つです。

かすれた線

かすれた感じの見出しや囲みの線で、アナログ感を表現。普通の直線を消しゴムツールで適当に削るだけでもできてしまうので、比較的難易度も低いです。また、フォントはゴシック体よりも、線幅が不均等な明朝系の方が馴染みやすいですね。

にじんだボタン

エッジが少しにじんだようなデザインのボタン。ボタンは必然的に目立つような配置、色合いになるので、少しだけ手を加えるだけで全体の雰囲気を調整しやすいです。

ラフなトリミング

写真はきれいな四角や角丸、正円でトリミングされることがほとんどですが、手で書いたような微妙なトリミングにすることで印象を大きく変えることができます。

ファッション誌風

女性向けファッション誌で多用されているテイストをWebに持ち込んだパターン。イメージが確立しているので参考にしやすいです。

切り抜きの多用

人物や、関連するアイテムの切り抜きを見出しや背景に散らすことで、華やかさ・ポップ感を演出。吹き出しとセットで使われることが多いですね。

一工夫加えた文字組み

女性ファッション誌と言えば、凝った文字組み。HTMLで表示する小見出しなどに使うのは難しいですが、特集用のバナー、ヘッダーなどに一手間かけることで女性誌らしいニュアンスが加えられます。

リアルなアイテムをモチーフに

実在の可愛らしいアイテムを、見出しや囲みに用いたパターン。本・黒板・ペン・付箋・マーカー・セロテープ・切手などなど・・・。

キラキラ、ハート

定番のモチーフ!見出し周りにさりげなく配置することで女子力UP。

花、草木などのナチュラル素材

最後は、草花などを用いたナチュラルなテイスト。見出しや写真周りに散らせたり、背景に用いたり・・・。

まとめ

いかがだったでしょうか? 女性らしいあしらいの事例をもっと学ぶには、紙の雑誌やチラシを参照するのも良い勉強になると思います。ファッション誌、料理本、編み物本など、Webよりも明確に「女性向け」を意識している媒体が多いですし、Webよりも長い歴史があるのでテクニックにも一日の長があります。

現在のWeb制作の現場においては、更新性やマルチデバイス対応(スマートフォンなど)を考慮して、徐々に画像を減らしてHTML+CSSでシンプルにデザインすることが求められています。実装のしやすさと世界観の表現のバランスをよく考えて、使いどころを見極めてうまく活用してみてください。

街角のクリエイティブ ロゴ


  • このエントリーをはてなブックマークに追加


TOP