WebGallery

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

*

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

   

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

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

 

ファーストビュー

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

 

背景の切り替えが上手!

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

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

 

最後に

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

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

 - 動きで表現

  関連記事

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

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

想像するだけでワクワクが止まらない「ハンズの夏準備」

「ハンズの夏準備」という東急ハンズの特設サイトです。 サイトのトップには、キャッ …

ジャンプ率の差を大きくしてタイトルを目立たせたツアーサイト

「UNISON SQUARE GARDEN」の6thアルバムツアー「Dr.Izz …

動きのあるグローバルナビでサイトの雰囲気を暖かくする

秋田市にある写真館「岩田写真館」のホームページです。このサイトは何といってもグロ …

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

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

グローバルナビよりも目立った言語切り替えボタン

熊本県にある有限会社「球磨川ABC」のホームページです。左側に固定された言語選択 …

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

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

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

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

多彩なアニメーションを使ったサイト

  私が言っていいものかどうか分かりませんが、懐かしきCyndi La …

フルスクリーン動画が迫力ある水族館は、サメやエイに触ることも出来る!?

大阪府大阪市にある世界最大級の水族館で、平成25年の3月14日に開設された「海遊 …