【参考サイトまとめ】食品・飲料編
こんにちは。
WEB構成で参考になるサイトを個人的にまとめています。
今回は「食品・飲料編」でまとめてみました。
No.1 KIRIN Casillero del Diablo悪魔メシ 特設サイト
大胆に世界観を表現しているのに、意外と扱いやすいレシピページ
KIRINから販売されている「Casillero del Diabl」というワインサイトの中にある「悪魔メシ」という特設サイトがとても面白い構成で、かつ扱いやすいサイトでしたので紹介いたします。
「Casillero del Diablo」は日本語で訳すと「悪魔の蔵」という意味となります。「悪魔の蔵」という意味を持つワインですので、それに合う食べ物として「悪魔メシ」といった特設サイトが制作されたのかなと思います。
こちらの悪魔メシのサイトは、1ページ全てが「長いテーブルを真上から見てる」かのような構成になっています。
(ECサイトに遷移してもらえるよう、フッターメニューが大きい)
料理のオブジェクトをタップするとレシピ動画が。
動画内容もこだわっており、ロックな感じに仕上がってました!
1点自分の中で残念だなと思う箇所は、フッターの上にある赤丸のクラブメンバー募集のボタンです。大きなフッターメニューに入れ込んで欲しかったなと個人的には思います。スクロールをする際に意図しないで触ってしまうのでそこが残念ではありました。その箇所以外悪い部分は特にありません。
世界観→必要な情報→詳細といった優先順位をしっかり決めて作られたサイトだなと感じます。
現在のレシピ系サイトでは中々見ることのない構成であり、別角度の参考としては良いサイトなのではと考えこちらをnoteにて紹介いたしました。
No.2 Starbucks Coffee Japanの公式サイト
業界トップのサイトは参考にしやすい。
2つ目はスターバックスコーヒーJAPANの公式サイトです。
スタバは誰もが知っているコーヒーチェーン店であり、利用者も多数おります。私もスタバを利用している顧客ですが、サイトを見たことがありませんでした。これを機に拝見したところ、ユーザビリティが非常に高いサイトであると感じます。WEB構成の参考としては非常に良い参考です。(特にECサイトのデザインを行う方は良い参考になるかと)
どのような箇所が参考になるのかというと、カードの扱い方です。
大体カードとなると、項目ごとに大きさを変えず縦に並べること(スクロールさせて見せること)が多いのですが、スタバの場合は項目ごとに大きさを変え横に並べる(カルーセルで見せる)ようになっています。
他にも情報があるように見える。
一貫性のある簡潔的なサイトデザインのため、文字サイズが13pxでも見やすく感じる。
フッター近くにある優先度の低い情報はカードでなく、メニューリストとなっています。
カードは情報をまとめやすい要素ではありますが、
同種類のカードを何枚も縦に置いてしまうと、カテゴリ内の情報が多く見え、離脱率を高めてしまう可能性もあります。必要な大カテゴリの情報は縦に。小カテゴリは横で見せるというのはユーザビリティが高いサイトでもあるのかなと。(もちろん案件によってはカードを縦に置くことが良い場合もあるため一概には言えません)
カードのサイズや使用例としてはスタバは良い参考になる思い、noteにて紹介いたしました。
その他有名企業のカード参考例
◉びっくりドンキー
ブランディングイメージを全面に出しながらも、幅広い年代でも扱いやすいよう、テキストやタップターゲットは大きめであり、諸々の要素がユーザビリティ高めのデザインになっています。
FV一面に限定メニューとキャンペーンのカードを入れているの個人的にGood ポイントです。
◉BURGER KING
70年代アメリカを意識したグラフィックデザイン。
ブランディングを守りつつも、カードを使用しシンプルにまとめたデザインに。
実際のところ不明ではありますが、企業サイトはCSSなどのテンプレを使っているところもあるのかなと思います。CSSテンプレを拝見し、顧客ファーストのフォーマットを参考にするのも良いかもしれません。
No.3 KIRIN 午後の紅茶特設サイト
誰もができる「少しの気遣い」で項目をより見やすく
またしてもKIRINからのサイトとなりますが「午後の紅茶」の特設サイトは、要素を見やすく配置しているWEBサイトかと思います。
見やすく構成されている箇所は、「端を意識した配置」です。項目ごとに左側、右側と寄っており、端に空きスペースをもたらしています。
こちら通常通り画面いっぱいに画像を配置すると、
同項目ばかりで一体どこを読んでいるのか迷子になりやすいのかなと思いましたが、同項目でも左右交互に端に寄せて配置すると情報迷子になりづらいのかなと感じました。
ほんの少しの気遣いで、情報をはっきり分けることができるのは素晴らしいデザインかと思います。どのサイトでも応用が効きやすい構成のためnoteにて紹介いたしました。
以上となります。
食品・飲料系ということで、真っ先に思い浮かんだのが
「大手メーカーの食品、飲料系のサイトってどのように作っているのだろ
う」という考えでした。
業界TOPや有名企業のサイトは「ブランディング」を優先というより商品をECサイトなどで購入してもらいためか「ユーザビリティ」を一番に優先し、その次に「ブランディング」にこだわっているのだなと思います。
(悪魔メシに関しては、「Casillero del Diabl」のサイトの中の1種のページなので、ユーザビリティというよりは、遊びや世界観を優先に制作されたものなのではと感じます)
ユーザビリティの高いサイトを作る上では、顧客ファーストを常に考えている業界TOPのサイトを調べると良いかもしれません。
最後までご覧いただきありがとうございました。