WebGallery

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

*

しかけ絵本を見ているかのようなサー・トーマス・リプトンのストーリー

      2016/11/09

%e5%90%8d%e7%a7%b0%e6%9c%aa%e8%a8%ad%e5%ae%9a-1

リプトンのプレミアムシリーズ「サー・トーマス・リプトン」のホームページです。

リプトンの黄色いイメージとは打って変わって、黒を基調とした高級感のあるデザインになっています。
トップのスライダーの背景には茶葉の写真を使ったり、アクセントにロゴカラーの濃い黄色を使っています。

フォントとビジュアルが合うようにタイトルのフォントを少し特殊なものにしたり、スライダーの文字やボタンは光沢感のあるデザインにしたりと、世界観が統一されています。また、ボタンを横並びにしたり、コンテンツを画面幅いっぱいに表示させて区切る役割も果たしていたりと、とても参考になります。

「サー・トーマス・リプトンストーリー」のページでは、イラストと共にストーリーを体感することができます。パララックス効果を使って奥行きを出すことで、まるでしかけ絵本を見ているかのような楽しいページになっています。

 - キャンペーンサイト, 絵で表現, 色で表現 , , ,

  関連記事

手前の木をぼかし、奥の木は色を濃くして奥行きを出し、更に動きを付けることで立体感が出る

北海道仙台市中心部観光スポットを結ぶ巡回バス「るーぷる仙台」のホームページです。 …

写真以外の色を抑えて写真を際立たせる

北海道札幌市にある花屋ウェディング「有限会社 花たく」のホームページです。 白と …

多彩なアニメーションを使ったサイト

  私が言っていいものかどうか分かりませんが、懐かしきCyndi La …

たくさんの家が集合したような病院の外観をモチーフにした「ゆい動物病院」

和歌山県和歌山市にある動物病院「ゆい動物病院」のホームページです。 たくさんの家 …

スクロールに合わせて写真が動く!「オロナイン」の公式サイトが可愛い!

大塚製薬が販売している「オロナイン」の公式サイトです。 ファーストビューの日常の …

「デザミス株式会社」のサイトが、青系の美しいグラデーションを効果的に使ったデザインで魅力的!

「デザミス株式会社 (desamis Co,Ltd.)」のホームページです。 フ …

ボックスでまとめられた情報で、レイアウトをすっきりさせる

墨田区にある接骨院「立花接骨院」のホームページです。 すごく可愛らしいデザインの …

時間帯によって背景が変化するアニメーション

燃料販売やガス供給などを行っている企業「株式会社 吉田石油店」のホームページです …

レンズ越しに見る片山津温泉の風景

片山津温泉観光協会のオフィシャルページ「水と光と音のまち 片山津温泉」のホームペ …

品川区にある漢方薬局のサイトが親しみやすくて可愛い!

東京都品川区にある漢方薬局「高山薬局」のホームページです。 ロゴカラーの茶色と緑 …