
トレンドのフラットデザインとは対照的なスーパーコラージュ&リッチなキャンペーンページ
- 2013-11-15 Fri 10:00:48
- デザイン

ちょっと前にトレンドになって、展開され始めて可愛いサイトが沢山でてきている中、別勢力、と言ったらいいのでしょうか。
女性向け製品のキャンペーンページ(LPページ&サイト)が非常に「見た目的に」リッチで、コーディングもHTMLのベースのやり方とも違う、「とにかく目立てばいい☆」「ボタンがどれかはお楽しみ☆」という趣旨であろう、キャンペーンページを見かけたので、ご紹介します。
資生堂 TSUBAKI

スクロールすると白のボトル「ヘアエマルジョン」が付いてきます。
大きくて高精細な写真と、大胆な構成、金色のキャッチコピー。
TSUBAKIの赤が差し色になっています。
http://www.shiseido.co.jp/tsubaki/index.html
ファブリーズ スリープコレクション

印象はオーロラ。背景のオーロラ押しです。
紺〜紫のグラデーション背景が美しいです。photoshopで描いているんでしょうか。
ラベンダーとモデルさん、その他の要素のコラージュに手が込んでいます。
どれがボタンなのか、最初はわかりません。けれど、だいたい押せます。
http://www.febreze.jp/sleepcollection/index.aspx
花王 ASIENCE

パッケージの金色カラーの背景で塗っています。
ファブリーズもそうでしたが、非常にダイナミックです。
一部コンテンツページでは、ASIENCEの「花」のグラフィックがパララックスっぽく動きます。
http://www.kao.co.jp/asience/lineup/detail01.html
フレアフレグランス

他の製品ページと比べると、背景全部塗りではないので控えめな印象ですが
製品から香りをイメージさせるようなキラキラと、花が咲き乱れております。
組み方的には、文字も重要なところ以外はだいたい背景のようです。
http://www.kao.co.jp/flair-fragrance/mist/
これらのサイトの共通点
・tableは使わずだいたいhtml+css
・時折CSSアニメーション系や、jquery系の動きの制御はあるが、基本軽い
・ビジュアル重視、見た目のテクニック重視
・ボタンのアニメーションなどは凝るが、テキストはちょっと軽視しているところもある
・全部要素込みで背景で入れて、空白gifのaltにキャプションを打ち込んでいる場合もある
・グラデーションでリッチに見せる
・ゴールド感大事。キラキラ感も大事っぽいです。
・時折CSSアニメーション系や、jquery系の動きの制御はあるが、基本軽い
・ビジュアル重視、見た目のテクニック重視
・ボタンのアニメーションなどは凝るが、テキストはちょっと軽視しているところもある
・全部要素込みで背景で入れて、空白gifのaltにキャプションを打ち込んでいる場合もある
・グラデーションでリッチに見せる
・ゴールド感大事。キラキラ感も大事っぽいです。
デザインカンプの時点での作りこみが大事そうですね。
印象的なサイトを作るための、ひとつの方法かもしれません。
こういったサイトを作ることになった時に参考にしてみてください。
- 関連記事
-
-
ウェブデザインに関する知識や技術の相互関係チャート 2014/04/11
-
ウェブデザイン配置のちょっとした「もやもや」をスッキリさせる解決例。 2014/04/05
-
2014年の1月時点でのウェブトレンドをおさらい。 2014/01/31
-
トレンドのフラットデザインとは対照的なスーパーコラージュ&リッチなキャンペーンページ 2013/11/15
-
自分らしく仕事をするための時間管理の方法 2013/11/06
-
photoshopでのウェブデザインの勘どころ 2013/07/08
-
フラットデザインの参考になりそうなフリーアイコンやUI Kit、イラスト 2013/07/02
-