おいしそうなチョコレートのWEBサイトデザイン5選

こんにちは！コーダーのTsugaです。

もうすぐバレンタイン！ということで、今回はおいしそうなチョコレートのWEBサイトを集めてみました。

チョコレート選びの参考になりましたら幸いです！

株式会社BAKE

公式サイト：https://shiroishi-yougashiten.com/valentine2024/

株式会社BAKEの新ブランド『架空のパティスリー「しろいし洋菓⼦店」』による、バレンタイン期間の特設サイトです。
丁寧な手仕事から生み出される”アートなお菓子”をコンセプトに、架空の物語をモチーフにしたお菓⼦をつくっています。

サイトも物語のモチーフになっており、トップページをスクロールするとお話が進んでいきます。架空の森の動物と、その動物の愛するお菓子が紹介されており、先に進んでみたくなるようなレイアウトです。
全体的にアニメーションが多用されており、まるで映画を見ているような気分になります。

作り込まれた世界観が印象的で、見ているだけで楽しい気分になるサイトでした！

株式会社オールハーツ・カンパニー

公式サイト：https://yonimo.jp/

株式会社オールハーツ・カンパニーの商品、「世にもおいしいチョコブラウニー」シリーズの紹介がされています。

サイトを開くと最初に目に飛び込んでくる、チョコレートが溶け出したようなアニメーションが印象的です。
アレンジレシピを紹介するエリアで使われている写真は、チョコがかかったようなデザインになっており、ここでもアニメーションでチョコがとろける様子が再現されています。

文章や写真のみならず、アニメーションを有効に使ってチョコの美味しさを最大限に表現したサイトでした！

株式会社ケーツーコミュニケーション Lilionte（リリオンテ）

公式サイト：https://www.choco-ne.com/

奈良発の新しいお菓子を提供する、株式会社ケーツーコミュニケーション Lilionte （リリオンテ）のサイトです。
奈良を感じられるお土産向けのお菓子を作りたいと、昔ながらのラムネ菓子をチョコで包んだ「choco-ne(ショコネ)」というお菓子を販売しています。ラムネの酸味とチョコの甘さから生まれる味の変化が面白い新感覚のお菓子だそうです。

トップページのFVは、チョコとラムネが散らばったデザインになっており、そこをマウスでホバーすると、まるでチョコとラムネがその場にあるかのような動きをします。
思わず目を引かれますね！

斬新な商品にぴったりな、遊び心のあるサイトでした！

吉田ピーナツ食品株式会社

公式サイト：https://choco-nuts.jp/

創業以来100年以上、ナッツ、豆、ドライフルーツなどを使った商品を作り続けているという、吉田ピーナツ食品株式会社の商品、「チョコナッツ」を紹介するサイトです。

サイト内の情報量が多いわけではありませんが、全面に散らばったナッツが印象的で、アピールポイントが一目で分かるデザインになっています。
ナッツの動きが細やかに表現されていて、可愛らしい印象を受けますね。

シンプルかつ大胆に商品の魅力を伝えるサイトデザインでした！

株式会社バンダイ

公式サイト：https://www.bandai.co.jp/candy/camp/charapaki5th/

子供向け玩具などを扱う会社、株式会社バンダイが発売する「キャラパキ発掘恐竜チョコ」の5周年特設サイトです。

サイトを開くとまず、チョコがだんだんと割れていく様子が表現され、割れ切ると中身が見れるようになっています。
商品名に掛けているのか、中身が「発掘」されるような印象を与えられます。
ひらがなを多用したり、漢字にフリガナを振ったり、小さい子供も読めるような工夫がされており、コンテンツをホバーした際のアイコンが虫眼鏡になっていたりと、遊び感覚で楽しめそうな工夫が散りばめられています。

子供も大人も楽しめるようなサイトデザインでした！

まとめ

アニメーションが工夫されているサイトが多く、商品の良さが最大限に表現されていました。
文章や静的なデザインだけでなく、アニメーションの工夫も、デザインの大切な要素になるのだと感じました。
ぜひ参考にしてみてください！

※ご紹介させていただいたサイトはデザイン性が高いためピックアップさせていただきました。掲載の取消をご希望の場合はご連絡いただき次第速やかに対応させていただきます。