WebGallery

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

*

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

   

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

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

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

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

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

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

  関連記事

シンプルなデザインのヘアサロンのサイトが、おしゃれでカッコいい!

原宿・表参道・渋谷・青山・鎌倉にある美容室/ヘアサロン「vicca(ヴィッカ)」 …

フォントで全体的に統一感を持たせる

  愛媛県で毎年行われる「オレンジフィルムフェスティバル」というイベン …

左側に交通アクセスや最新情報を掲載して情報を伝わりやすくする

滋賀県大津市にある食事処「洗心寮」のホームページです。 全体的に文章が縦書きで背 …

上空から撮影したリゾート地の写真がカッコいい!サイト

三重県志摩市にあるリゾート施設「NEMU HOTEL & RESORT( …

京都の魅力がギュッとつまった観光情報配信サイト

株式会社ユニオンネットが運営する、京都のおすすめ観光スポットを掲載している「KY …

臨場感のある写真で、教会の神秘的な雰囲気を味わえる

長野県軽井沢町にある教会「石の教会 内村鑑三記念堂」のホームページです。 トップ …

余白を使い、高級で洗練されたレイアウトにする

  2017年に公開されるトワイライトエクスプレス「瑞風」の特設サイト …

綺麗にレスポンシブされて、且つ分かりやすい

  福岡県福智町のふるさと納税特設サイトです。福智町のロゴの下に水引が …

カレッタ汐留で開催するイルミネーションの特設サイトが綺麗!

東京都港区にある「カレッタ汐留」で、2017年11月16日から2018年2月14 …

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

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