WebGallery

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

*

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

   

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

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

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

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

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

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

  関連記事

居酒屋のメニューやビールの写真を大胆に使ったレイアウトがおしゃれで綺麗!

東京都町田市・神田市・立川市に店舗を構える居酒屋「我が家」のホームページです。 …

全てのページのファーストビューに写真を画面いっぱいに使ったデザインのサイトがオシャレ!

沖縄県国頭郡にあるリゾートホテル「沖縄かりゆしビーチリゾート・オーシャンスパ」の …

モデルハウスのパンフレットを見ているような気持ちになる箱根のリゾートホテルのサイトがオシャレでカッコいい!

神奈川県足柄下郡箱根町にあるリゾートホテル「NEST INN HAKONE(ネス …

白を基調にして衣装や料理の写真を際立たせているモダンレストランのサイトがオシャレ!

愛知県安城市にある和モダンレストラン「hana no utage(花の宴)」のホ …

どの言語で閲覧してもデザインが崩れない

東京のデザインやファッション、食べ物や観光地・宿泊施設などを世界に紹介するWeb …

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

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

文字の太さで強調する部分をはっきりさせる

  千葉県の海浜幕張公園で行われる花火フェスタのホームページです。背景 …

舌でも目でも石巻を楽しむことができる、「泳ぎ寿司 石巻」

今年の3月6日・11日に東京都にある「代々木ビレッジ code kurkku」で …

子供たちへの愛情がつまった地下足袋「FUM FUM」

化粧品やサプリメントを取り扱っているゲンナイ製薬株式会社と、靴の販売をしている株 …

写真を様々な形に切り取ることでアクセントに

  表参道にある鳥カフェのホームページです。アクセントに様々な種類の鳥 …