WebGallery

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

*

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

   

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

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

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

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

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

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

  関連記事

コンテンツ毎にスクロールボタンを配置し、移動しやすく

高知県にある「サイバラ建設株式会社」のホームページです。 まず、中央に配置された …

5時間以上かけて炉窯で焼きあげる

東京都渋谷区にある薪焼きレストラン「炉窯ステーキ 煉瓦」のホームページです。 ト …

コンテンツの区切りを波のアニメーションにすることで、ワインぽさを演出したサイト

山梨県笛吹市にあるワイン製造工場「モンデ酒造」のホームページです。 コンテンツの …

画面いっぱいに表示されるメニュー

愛知県にある栽培支援システム開発会社「株式会社プラントライフシステムズ」のホーム …

まるで本当の雑誌を読んでいるかのようなレイアウト

クラフトタイムズが運営するウェブマガジンです。ビールを題材に取り上げ、様々な内容 …

画面いっぱいに画像を配置して文章のインパクトを強くする建築士事務所

愛知県松山市と神奈川県にオフィスを構える建築士事務所「i Landscape」の …

シネマグラフを使った写真が印象的!「京都 宇治 伊藤久右衛門」のサイト

「京都 宇治 伊藤久右衛門」のホームページです。 ファーストビューのスライダーが …

ヘッダーに固定された屋根と黒い背景で奥行きを出す

群馬県前橋市にある料理店「登利平」のホームページです。 ヘッダー上部にある屋根が …

フラットデザインで見やすい

  大阪経済法科大学のサイト。フラットデザインのイラストがとてもおしゃ …

海の中にいるような幻想的なデザイン

大阪府吹田市にある水族館・動物園・美術館が融合した新感覚ミュージアム「ニフレル」 …