WebGallery

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

*

松本薫さんが開店したアイスクリーム屋さん「Darcy’s」のサイトが可愛い!

   

松本薫さんの引退会見、衝撃的でしたね!
テレビではいつも柔道でかっこいい姿を見てきた松本薫さんでしたが、引退後はアイスクリーム屋さんを経営したいとの宣言から間もなくオープンしたアイスクリーム屋さんは大盛況だそうで、連日整理券が配られているみたいですよ!

今回ご紹介するのは、2019年2月12日にオープンした東京新宿区高田馬場にあるギルトフリーなアイスクリーム屋さん「Darcy’s」のホームページです。

 

ファーストビュー

トップにはアイスを食べてにっこり笑うイラストアニメーションが設置されています。
「ピンク」と「こげ茶」の配色も相まってとても可愛らしいファーストビューになっています。
すぐ下にはグローバルナビが設置されていますが、「CONTACT US」のボタンのみ背景色をつけることで程よく強調されています。

 

背景の切り替えが上手!

また、背景色の切り替えを上手く使っています!
左側に機械のアニメーションを設置しているのですが、そこから出てくるアイスクリームの白とブラウンを真ん中で分け、境界線部分に矢印や数字を設置することでカチッとしたレイアウトになっています。
ですが、楽しい雰囲気が出るようh2にあたる見出し部分は柔らかな曲線を描いており、上手くバランスを取っています。

「作り方の流れ」まで読み進めると、背景がブツっと途切れるのではなくアイスが溜まったかのようになだらかに白背景に切り替わります。
メニューの紹介でもカップに乗せた写真ではなくアイスデッシャーに乗せた画像を左右から表示させて、画面全体に動きをつけています。

 

最後に

極力javascriptやcssアニメーションを使うのではなく、構成や写真の切り抜きで画面の動きをつけたデザインはとても参考になります!

「ギルトフリー」とは「罪悪感を感じない」という意味らしいので、気兼ねなくアイスクリームが食べられるそうですよ!
近くに来たら食べてみたいですね…!普段訪れない場所なので、写真つきで研究所までのルートが紹介されているのもありがたいです!

 - 動きで表現

  関連記事

要所で動きを使い、注目度を上げる

エステサロンクレジットカード決済導入「株式会社ジェイ・シー・エス」のホームページ …

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

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

壮大なスケールを感じさせるデザイン

  見た瞬間発狂しました。「ICO」や「ワンダと巨像」の制作を手掛けた …

写真を使って島の魅力を伝える

2016年4月に「星野リゾート リゾナーレ西表島」からリオープンする「ホテル ニ …

折り紙の発想から生まれたオフィスチェア「FLIP FLAP」の特設サイトが、オフィスチェアのデザインを使ったレイアウトでカッコいい!

折り紙の発想から生まれたオフィスチェア「FLIP FLAP」の特設サイトです。 …

「伝統」と「革新」を伝える「廣榮堂 採用サイト」

岡山で160年の歴史を誇る老舗和菓子屋「廣榮堂」の採用ページです。 学生たちをタ …

トップの部分だけでなく、色々な場所で背景に動画を使用する

毎年夏に東京ビッグサイトで行われるアートイベント「万国學生藝術展覧祭 學展」のホ …

京都にあるチョコレート専門店のサイトが、可愛くて美味しそう!

京都にあるローチョコレート・ビーントゥバー専門店「KYOTO COCO」のホーム …

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

ガトーショコラ専門店「Chocolaphil」のホームページです。 鮮やかな青い …

空気清浄したくなる

  下ではなく上にスクロールする形のサイト。動いている灰色のものは空気 …