fc2ブログ

Home > デザイン > トレンドのフラットデザインとは対照的なスーパーコラージュ&リッチなキャンペーンページ

トレンドのフラットデザインとは対照的なスーパーコラージュ&リッチなキャンペーンページ

febreze.png

ちょっと前にトレンドになって、展開され始めて可愛いサイトが沢山でてきている中、別勢力、と言ったらいいのでしょうか。
女性向け製品のキャンペーンページ(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にキャプションを打ち込んでいる場合もある
・グラデーションでリッチに見せる
・ゴールド感大事。キラキラ感も大事っぽいです。


デザインカンプの時点での作りこみが大事そうですね。
印象的なサイトを作るための、ひとつの方法かもしれません。
こういったサイトを作ることになった時に参考にしてみてください。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/94-cf9f4fe0
Listed below are links to weblogs that reference
トレンドのフラットデザインとは対照的なスーパーコラージュ&リッチなキャンペーンページ from バニデザノート

Home > デザイン > トレンドのフラットデザインとは対照的なスーパーコラージュ&リッチなキャンペーンページ

Sponsored Link
【WebDesign】Photoshopでプロになる!オシャレ&クールなWebデザイン作成講座
▲Udemy講座第二弾!Photoshopデザインカンプ作成の流れをレクチャーします。クーポンコード【PS_BANIDESIGN】
はじめよう!Wordpressで作るおしゃれサイト【デザイン入門】
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、お得な価格で受講可能!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。10年以上に渡りオールラウンドウェブクリエイターとして活動した経験を活かして高品質なPhotoshopデータでの「デザインカンプ作成」のお仕事を主に行っています。業務提携いただける企業さま、ウェブディレクターさまを随時募集中です。Wordpress(ワードプレス)、レスポンシブ、スマホ用サイトもできます♪
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items