WebGallery

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

*

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

   

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

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

 

ファーストビュー

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

 

背景の切り替えが上手!

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

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

 

最後に

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

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

 - 動きで表現

  関連記事

自分が本を選んでいるかのようなスクロール

  丸善出版株式会社とジュンク堂書店が佐賀県とコラボレートした「ほんの …

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

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

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

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

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

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

まるで本当の雑誌を読んでいるかのようなレイアウト

クラフトタイムズが運営するウェブマガジンです。ビールを題材に取り上げ、様々な内容 …

豆苗についてもっと知りたくなる!「豆苗研究会」

広島県広島市にある豆苗やブロッコリースプラウトなど、スプラウト野菜を生産・販売し …

猫!

  サイトを開けた途端猫がお出迎えしてくれます。しかもこの写真、日替わ …

「ミルク王国」という世界観を大切にしたデザイン

石川県河北郡内灘町の「ミルク王国ウチナダ」のホームページです。 パステルカラーの …

商品を色々な角度から見ることができる

  シチズン時計株式会社の特設サイトです。まず最初のオープニングアート …

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

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