WebGallery

Webデザインの初心者がスマートフォン対応しているWebサイトを淡々と紹介していくサイトギャラリーです。

*

キャッチコピーで見る人の心を掴む!KOSEの「feliscent」

   

KOSEの取り扱い商品「feliscent(フェリセント)」のホームページです。

キャッチコピーがとても印象的なサイトです。
「つけてるほうが、私らしい」という、パッと見ただけではなんの商品かが伝わらないようなフレーズです。
どういう商品なんだろう?という興味をもたせて、下にスクロールさせるという流れをつくっています。

そして、ファーストビューのすぐ下に大きく香水の写真を使うことで初めて「香水」の商品ということが分かります。
右側には5種類の色とりどりの香水が並んだ写真、左側には商品のコンセプトが書かれています。

さらに下には、5種類の香水がどんなシーンや気分に最適化が図で解説されています。
香水にカーソルを合わせると、ストーリー性の文章と写真が表示されます。自分に合いそうな香水を気分に合わせて探すことができるようになっていて面白いです!
クリックすると下にスクロールして、香りの詳細がパッケージイラスト・写真とともに表示される仕組みです。
香りの成分も書いてあるので、よりイメージしやすくなっています!

商品のラインナップも同時に表示される完璧な流れで、思わず購入するボタンをクリックしてしまいそうになります。
こういったページの構成はとても参考に、そして勉強になります!

 - 写真で表現, 色で表現 , ,

  関連記事

可愛いハリネズミに気軽に触ることができちゃうカフェ

六本木にあるハリネズミカフェ「HARRY」のホームページです。 ファーストビュー …

とにかくオシャレ!ミニマルデザインを取り入れたカフェのサイト3選!

無駄な要素を除いて、エレガントで洗練された「ミニマルデザイン」のwebサイトをよ …

サイトの配色だけでなく、写真の色合いも青系にしてガラス瓶の透明感を出している「びんむすめ」のサイト

日本ガラスびん協会が運営する「びんむすめ」のプロジェクトキャンペーンサイトです。 …

各ページごとに変わるカラーリング

  東京にある教育事業や就労支援などのサービスを行う企業のホームページ …

豊富な情報量をコンパクトにまとめた自動車教習所のサイトが可愛い!

大阪府高槻市にある大阪府公安委員会指定校の自動車教習所「高槻自動車教習所」のホー …

白と黒のコントラストが綺麗なレストラン

大阪堺市にあるフレンチレストラン「h」のホームページです。 ヘッダーの中央に配置 …

シームレスな移動が癖になる!素敵なサイト3選

ページ移動や要素にアニメーションを使用しているサイトって、ジャンルを問わずずっと …

ポップな色合いが楽しそうな「シェア畑」

畑を借りて野菜作りを楽しむ畑のレンタルサービス「シェア畑」のホームページです。 …

テクスチャを用いてデザインを統一

  大阪にある工務店のサイトです。トップにはグローバルナビと写真のみで …

写真や色を使って華やかな雰囲気を表現した生花店

東京都府中市にある生花店「花智」のホームページです。 トップページの綺麗な花の写 …