WebGallery

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

*

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

   

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

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

 

ファーストビュー

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

 

背景の切り替えが上手!

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

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

 

最後に

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

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

 - 動きで表現

  関連記事

もうすぐバレンタイン!2019年バレンタイン特設サイトを集めました!

明日はいよいよバレンタインデーですね! 皆さんはもう誰かにチョコレートを上げまし …

東京メトロとコラボしたフラットデザインなドラえもんが可愛い!

東京メトロとドラえもんがコラボし、4月1日からスタートしたキャンペーン「すすメト …

シネマグラフを使った写真が印象的!「京都 宇治 伊藤久右衛門」のサイト

「京都 宇治 伊藤久右衛門」のホームページです。 ファーストビューのスライダーが …

水色と黒を使用し、近未来感を演出したデザイン

メルセデス・ベンツとPerfumeがコラボレーションしたメルセデス・ベンツのiP …

簡単に起業できちゃいそうな会社設立サポート屋さん

東京都渋谷区にある会社設立の手助けをしてくれる「GAGEEN」のホームページです …

空気清浄したくなる

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

画面いっぱいに表示されるメニュー

愛知県にある栽培支援システム開発会社「株式会社プラントライフシステムズ」のホーム …

ロゴマークの表示を統一することで、ページにアクセントをつける

福岡県福岡市にある「がんこクリニック」のホームページです。 まず初めに、画面いっ …

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

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

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

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