WebGallery

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

*

商品の見せ方がオシャレでかっこいい!ガトーショコラ専門店「Chocolaphil」

   

ガトーショコラ専門店「Chocolaphil」のホームページです。

鮮やかな青いネイルの手が持つガトーショコラの写真がとても印象的なファーストビューです。

トップページのあちこちにガトーショコラの写真が散りばめられていますが、スクロールに合わせて左右に動いたりミラーのように動いたりします。
背景の商品の写真が暗い色合いなのに対し、文章の部分は白い背景を使うことでコントラストが映え自然と文字に目が行くようになっています。

トップの「Product」部分は商品の画像を掲載しているのですが、右下の+ボタンをクリックすると下に配置されている画像に切り替わる仕組みになっています。
1枚だけでなく2枚を重ねて縦の長さを抑えるだけでなく、おしゃれに画像を魅せるレイアウトは参考になります!

サブページに移動するときのアニメーションもこだわっていて、切り替えもとてもスムーズです。
「story」のページでは、右側に動画を配置してガトーショコラが出来る工程を映像で見せてくれます。画像もランダムに配置することで、動きのあるサイトになっています。

 - 写真で表現, 動きで表現

  関連記事

一つのコンテンツで二つの情報が見れる

10月24日から行われるイベント「Any Tokyo 2015」のホームページで …

雑誌のようなレイアウトのスライダーを使った美容室のサイトがカッコいい!

愛知県名古屋市と豊明市にある美容室「BUSH」のホームページです。 ファーストビ …

水色と白の透明感のある配色が綺麗なディズニーのイベントサイトが見やすい!

2017年4月8日の土曜日から9月24日の日曜日まで、お台場にある日本科学未来館 …

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

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

パララックス効果を使ったデザインの、建設会社のサイトがカッコいい!

熊本県熊本市にある建設会社「快建設」のホームページです。 全体のレイアウトがとて …

商品の紹介を最小限に抑え、写真を大きく見せることでスマートフォンからでも見やすくする

コーヒー機器製造メーカー「Kalita」のホームページです。 上部に固定されてい …

背景に迫力のある写真を使った動物園のサイトが面白い!

大阪府大阪市にある動物園「天王寺動物園」のホームページです。 ファーストビューの …

視線誘導がとても上手い「STRIA CLINIC」

福岡県福岡市にある医療レーザー脱毛専用医院「STRIA CLINIC(ストリア …

動く虎たちが見ていて楽しい!病院ということを忘れさせてくれそうな「やざわ虎クリニック」のホームページ

長野県諏訪市にある内科・外科病院「やざわ虎クリニック」のホームページです。 ファ …

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

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