デザイン日記（1月19日）＃牧場・養鶏場

今回は、牧場・養鶏場のデザインについてまとめていきます。
選んだ理由は、今日卵料理を食べたからです。牧場とかのデザインは前にもみたことがあったんですけど、改めて色々みていくと結構それぞれ印象違うもんですね。

今回注目していきたいのは、空間を表現する写真の使い方です。それぞれ立地とかも違うから、写真の使い方も変わってくるようでした。
また、今回も個人的にどのサイトが好きだったかも話していきます。
それではいきましょう。

今回のwebサイト
・なかほら牧場：https://nakahora-bokujou.jp/
・福島県の黒毛和牛 | 石川はちみつ牛：https://hachimitsugyu.com/
・大分県くじゅう高原の平飼い養鶏場 | グリーンファーム久住：https://kuju-egg.jp/

大きく立体的な写真の配置

なかほら牧場
全体的かなり写真を大きく配置して、牧場の様子がありありと伝わってくるレイアウトになっています。
スクロールが滑らかなのと、文字と画像と背景でスクロールの速さが違うことから、立体的に見えるようにもなっています。立体感のあるサイトは、その世界に入り込んだような感覚があって、より一層現地の雰囲気が感じられますね。
あと、ページネーションがすごいおしゃれです。写真の個性がはっきりしているので、小さく、白黒にしてもいいアクセントになっています。この場合、単なる図形とかのページネーションだと、寂しいかもしれないです。

こちらは動画のセクションですが、背景の緑の帯があることで、デザインにメリハリがついています。（こういうパーツって名前ついてるんでしょうか？）

こちらはオンラインストアへの導線です。
写真は切り抜いて掲載されていて、商品を手に取るイメージがしやすいです。大きさとかは分かりにくそうですかね。
あと、切り抜き写真はECを連想させづらいと思いました。現地で買えるものの一覧なのかなーみたいな印象を受けますので、Productsの見出しを思い切ってオンラインストアに変えてもいいかと思いました。

余白をとった洗練された配置

福島県の黒毛和牛 | 石川はちみつ牛
ファーストビューは全画面の動画が使われていました。動画を使うと、画像と比べてもより詳細に雰囲気を伝えることができていますね。
受賞のマークも目につきやすいところに配置しており、信頼性のアピールもできています。

また、ファーストビューにも特にキャッチの文言はなく、文字数も少ないので、洗練されたイメージがあります。飼育へのこだわりの強さが感じ取れる部分です。
画像も、他と比べると小さいですね。余白がかなり多く取られているのが印象的です。これも洗練されたイメージにつながっているように感じます。また、山間にある牧場だから、あまり大きく画像を使っていないのかもしれません。

ハンバーガーメニューのなかにネットショップへの導線を見つけました。全く目立つ場所ではないので、このサイトはあくまでブランディングとして、集客をメインに考えていないのかもしれません。
そもそもネットショップで買い物をする人はターゲット外かもしれませんね。

画像背景で雰囲気を伝える

大分県くじゅう高原の平飼い養鶏場 | グリーンファーム久住
ファーストビューは全画面の画像のスライドでした。全て風景や星空の画像で、高原がどういう場所なのかを主に見せています。
グローバルメニューをファーストビューの領域のみ隠していることからも、1番にこの環境を見せたいのが伝わってきます。
スクロールの誘導はありますが、めちゃくちゃ最低限ですよね。

次のセクションにいくと、隠れていたメニューが表示され、TOPに戻るボタンもあらわれます。
このセクションも画像が背景になっていて、立体感はないものの、雰囲気を掴みやすいです。よくあるコンテンツの配置でもあるので、かなり直感的に操作ができそうでもありますね。
コードをみてみると、

height: 100vh;

が書いてありました。セクションの高さをデバイスの表示ちょうどに合わせられているのも、親切だと思いました。

オンラインストアの導線も見つけました。
これだけ大きく扱えば、ユーザーに見逃されることもないでしょう。

立体感のあるアニメーションのなかほら牧場が好き

どれも美しいデザインでしたが、このなかだとなかほら牧場が好きですね。奥行きを感じさせる配置とアニメーションが素敵でした。
ページネーションがおしゃれなのが印象的だったのもあります。
こういうページを見てるとオンラインショップで買い物したくなりますね。
はちみつ牛のローストビーフが美味しそうでした。