WebGallery

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

*

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

   

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

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

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

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

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

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

  関連記事

写真を使ってコンテンツを際立たせた旅館サイト

北海道の阿寒湖温泉街にある温泉宿「あかん鶴雅別荘 鄙の座」のホームページです。 …

壮大な日本海の写真

新潟県村上市にある温泉旅館「大観荘 せなみの湯」のホームページです。 トップのス …

くるくると回るキャッチ画像

株式会社エーペック貿易のホームページです。 くるくると回るキャッチ画像がとても綺 …

動きや写真で伝統や歴史の重さを表現する

開創から1200年を迎えた高野山の公式ホームページです。トップにあるそれぞれの写 …

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

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

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

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

ユーザーごとにデザインを切り替える

ヤマト運輸株式会社の公式ホームページです。 個人・法人・行政や自治体ごとのページ …

映像で構成されたシンプルなサイト

  株式会社コナミが制作したメタルギア・ソリッドシリーズの主人公に惚れ …

装飾を使わずレスポンシブしやすいデザインに

建築会社「TASSAY」のホームページです。 写真などでブロック化されたコンテン …

背景を道に見立てたデザインの地図アプリのサイトがおしゃれ!

株式会社Strolyが制作した地図アプリ「Stroly」のホームページです。 フ …