【参考サイトまとめ】飲食店・グルメ編
こんにちは。
WEB構成で参考になるサイトを個人的にまとめています。
今回は「飲食店・グルメ編」でまとめてみました。
No.1 オートミールクッキー FruOats（フルオーツ）
わかりやすさ+一工夫が絶妙にマッチしておりストレスなく情報が見れるブランディングサイト
こちらは、オートミール×おからのグルテンフリークッキーのブランドサイトとなります。
写真をメインに見せるシンプル構成のものは多く存在しますが、
こちらは縦の構成を生かして
・見出し文言を左側縦に配置
・写真も縦に配置し数枚をモーションで動かす
と、他とは少し違う見せ方になっていまいす。
セカンドビューもパララックスがいい塩梅で動き、
右下の追従購入ボタンに被らないよう、左側にお菓子(ブランド)の説明が記載されています。
カードの扱い方も非常に上品で、参考になります。
文字サイズは最小サイズ12pxにも関わらず、余白の計算がしっかりと取れた構図になっているため、見やすいです。
一瞬、よく見るデザインだなと感じますが、
わかりやすさ＋一工夫の塩梅が絶妙にいいバランスをとっており、
「わかりやすくシンプルで、一工夫のあるWEBサイトを作りたい」という方にはおすすめの参考サイトであると思い、こちらを選ばせていただきました。
No.2 阿部守商店の公式サイト
縦構造を使った遊び心のあしらいがGood
2つ目は阿部守商店の公式サイトです。
スマホ特有の縦構造を使った遊び心を少し盛り込んだサイトなっています。
何が遊び心かというと、FVをスクロールをすると魚の絵が「鮭の滝登り」を現しているかのような構図になっており、見ている人を楽しませてくれます。
その下に鮭の身の写真に繋がり、辻褄があっていてGoodポイントです。
セカンドビューでは、「右から読む縦書き」のメインコピーと
その下のテキストは、「左から読む横書き」でレイアウトされています。
一瞬読みづらいだろうなといった構図でも、
写真とテキスト背景の間にメインコピーを入れることで、何かを繋ぎ止めているシールのような見方になり、ストレスがなく見ることができます。
商品一覧も、前回お話しした「午後の紅茶のブランドサイト」のように、
端によせて紹介しています。縦構造を意識したデザインになっているため、
見出しが縦に置かれ追従形式になっています。
追従することで自分が今何を読んでいるか一目見てわかる構造になっており、UIとしてはとてもGoodなデザインかと個人的には思います。
こちら、見出しが横だと巷でよく見る項目に近く、かといって追従をしてしまうとあまり意味のない動きに見えてしまう。
こちらも、見やすさ+一工夫が絶妙なのと、縦構造のメリットを存分に生かして視覚的に楽しめるサイトのため、参考にさせていただきました。
No.3 SWISS洋菓子店
ナビゲーションの項目を縦オブジェクトにまとめてエレガンスな印象に。
こちらのサイトはモーションを使うことなく、写真とナビゲーションの工夫されたオブジェクトによってエレガンスなブランディングに見せているサイトとなっています。
ナビゲーションを縦に透けた暗いガラスのようなあしらいにすることで、
・横幅を狭く感じさせない
・ナビゲーション存在感が保てる
・ブランディングがきわたつ
・他社と差別化できる
といった4つの効果が出るデザインとなっています。
扱いやすいかと言うと、通常よく見かける横向きのナビゲーションの方が扱いやすいですが、
こちらは扱いやすいよりも印象的を残すということ意識したデザインになるのではと思います。
ちょっとした工夫でガラッと個性をだしているサイトのため、参考として選ばせていただきました。
以上となります。
あしらいも企画によって匙加減はピンキリになるかと思いますが、少しのことでインパクト大を与えたい場合もありますよね。
今回はそんなちょっとしたあしらいで印象に残る、差別化しやすいサイトを選んでみました。
最後までご覧いただきありがとうございました。