Blog スタッフブログ

こんにちは、Webデザイナーのそいです。

ようやく涼しくなってきましたね。今回は、秋も近づいてきたということで秋シーズン商品サイトに焦点を当て、すてきなレイアウトデザインをピックアップ！ずっと眺めていたくなる＆メニューを頼みたくなる魅力たっぷりなサイトを紹介していますのでぜひご覧ください！

すき家

https://news.sukiya.jp/special/sukiyaki202409/index.html

水彩・手描きタッチのイラストがあしらいに使われたデザインです。

ファーストビューはうさぎでなく牛が餅つきをしているイラストが添えられています。牛丼というコンセプトも引き継がれてとてもかわいらしいですね！

ページ構成はいたってシンプルで、商品紹介がWEBオーダー・アプリオーダー・店舗検索とそれぞれのリンクボタンが配置されたわかりやすいページになっています。

びっくりドンキー

https://www.bikkuri-donkey.com/lp/2024_tsukimi

びっくりドンキーはモバイルファーストデザインが採用されたサイトでした。

1枚目の画像を見ると、左右にコンテンツナビゲーションや商品のコンセプトキャッチが表示されていますね。

サイトにアクセスすると、ふわふわと雲のようにアニメーションでコンテンツが表示されます。ところどころでうさぎが出てきてかわいらしい＆和風なサイトデザインになっています。

楽器のイラストなど音が出るコンテンツも盛り込まれておりワクワクしますね！

コンセプト、商品、CM集、店舗検索や来店予約のリンク、キャンペーン告知といった構成になっており各コンテンツの切り替わりが青や紺、夜明けをイメージさせる黄色、夜をイメージさせる漆黒など綺麗なグラデーションで表現されていることが印象に残りました。

サイト全体感で「お月見」を感じさせる引き込まれるようなデザインでした。

丸亀製麺

https://jp.marugame.com/menu/kamatama/index.html

丸亀製麺はモバイルファーストデザインが採用されたサイトでした。

びっくりドンキーのサイトと同じく、コンテンツナビゲーションがサイドに表示されています。

ランディングページでは動画やアニメーションを組み合わせて構成されることも多く見られますが、特にこの商品サイトでは商品動画・静止画の商品に湯気を出すアニメーション・コンテンツ表示（スクロール）アニメーションがふんだんに使われている印象でした。

こんなにもアニメーションが使われているのにゴテゴテさを感じさせない＆美味しそうな魅力を演出できることにすさまじいセンスを感じます！

定番の「釜玉うどん」にアレンジを加えた新商品紹介のサイトですが、もともとの定番メニューにおけるコンセプトやこだわりもしっかり掲載されています。また、定番メニューと秋のおすすめメニューも紹介する構成となっておりランディングページとしても非常に勉強になるページとなっていました。

デザイン・アニメーション・構成すべてが素晴らしいサイトとなっていますので、初心者のデザイナーさんに特に見てもらいたいサイトだと感じました。

モスバーガー

https://www.mos.jp/oc/tsukimi202409

最後にモスバーガーのサイトです。こちらもモバイルファーストデザインが採用されたサイトでした。ここ数年前まではさほど見かけなかったものの、商品サイトは店舗アプリとの相性も抜群ですので、スマホユーザーをメインにレイアウトされることが主流になってきているのかもしれません。

レイアウトは商品のコンセプトである「月見」「裏月見」を主とした構成になっていました。

秋限定の商品紹介が並び、最後にキャンペーン告知が掲載されています。

「月見」「裏月見」は推し商品ということもあり「開発者の想い」といったこだわりの説明文が紹介され、その他の商品やスイーツも網羅して掲載されていました。

この、モスバーガーのサイトにはちょっとしたゲーム的要素も盛り込まれています。

「このサイトに隠された謎」というコンテンツですが、サイト内のどこかの部分を探ると隠しページにアクセスすることができるのです！

隠しページを見つけると、このような画面に。

キャンペーン自体は終わってしまっていますが、クイズに答えてクーポンがもらえるという面白い仕組みになっています。キャンペーンサイトではこういったユニークな仕掛けもあると話題になりますね！

まとめ

いかがでしょうか。今回は秋限定の商品サイトをもとに各サイトの工夫されたポイントやデザイン、特徴を調査しました。ランディングページの作り方・色合いや組み合わせ・商品の見せ方・演出・仕掛け・デザインなどこの4サイトで色んなことが学べましたね！アイデアの引き出しとしてストックしていきたいなと思いました。

最後に、キャンペーンサイトは期間限定で公開されることが多いのでチェックはお早めにどうぞ！

今回もご一読いただきありがとうございました。