WebGallery

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

*

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

   

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

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

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

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

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

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

  関連記事

常夏の色合いがステキな「潜水屋Ti-Da」

愛知県名古屋市にあるダイビングショップ・スクール「潜水屋(もぐりや)Ti-Da」 …

シンプルな配色で写真を際立たせた一級建築士事務所のサイトが綺麗!

神奈川県葉山町にある一級建築士事務所「tentline(テントライン)」のホーム …

ファーストビューにイベントやフェアのバナーを設置して最新情報がすぐ分かる!沖縄のホテルのサイト

カトープレジャーグループが運営する沖縄県沖縄市にあるリゾートホテル「オキナワ グ …

コントラストの強い配色で高級感のある雰囲気を演出したサイト

フランスのファッションデザイナー「pierre cardin」の日本公式サイトで …

カラコンの色味を背景で表現したサイトがとにかくオシャレ!「PLAY / UP(プレイアップ)」

カラーコンタクト「PLAY / UP」のホームページです。 丸ドットで作られた背 …

文字を光らせ幻想的な世界観を創造する

  えのすい(新江ノ島水族館)で行われるナイトワンダーアクアリウムの特 …

アニメーションをゆっくりとした動きにし、筆のようなフォントや落ち着いた配色で重厚感を感じさせるデザイン

北海道沙流郡平取町にある「二風谷アイヌ匠の道」のホームページです。 黒・白・赤の …

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

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

フォントを使い和風な雰囲気を出す

  島根県にある旅館のWebサイトです。特徴的な切り抜き方のキャッチ画 …

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

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