モバイルファーストサイト100選 その19 風の丘ファーム|西会津の農産品直売所
福島県西会津の農産品直売所「風の丘ファーム」。期間限定、土日だけの営業。採れたて野菜や果物、加工品・工芸品など西会津の生産者を盛り上げる商品を販売しています。
週末限定の直売所のサイトです。
商品を売るのが目的ではなく、
お店の営業を告知するのが目的と思われます。
https://kazenooka-farm.jp/
手書き風のフォントやイラストがたくさん使われていて、
なんだか楽しそうに思えるサイトですね。
サイトを訪れた人に、ちょっと行ってみようかな?
と思わせる気持ちのいいデザインだと思います。
![風の丘ファーム](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/c40ef4f7-d81a-48bc-a526-c0da8ebe7b92-1024x536.jpg)
構成
メインは真ん中、左右の背景にはイラストが使われています。
左にロゴ。右側にナビゲーションとSNSボタン、オンラインショップへの外部リンクがあります。
これらはタブレット時に消えてヘッダーとなってメイン上に現れます。
![spナビ](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/be2498a7-9c1f-4545-91b3-201ac206497c.jpg)
商品紹介のエリアにスライダーが2か所つかわれていますが、
販売ではなく、イメージ画像ですね。
明るめの露出で新鮮さが出ていると思います。
他の写真の部分には、ちょっとイラストが添えられており、
これが少しだけ動くアニメーションが施されています。
これ、良いですね。
なんかすごく楽しそうな感じがします。
全体の雰囲気も上げていると思います。
この写真+イラストは参考にしたいところです。
また、インスタグラムのボタンの下に、
いくつかインスタの画像を載せている点が良いなと思いました。
というのは、SNSで拡散やフォローする場合、
そこで発信している内容が、どんなものか確認する必要があるんですね。
もし仮に、自分で拡散するに値しない内容だったら嫌ですから。
なので、「こんなことを発信してますよ~」という内容を見せるのは、
拡散、フォローしてもらうためには、必要なことだと思います。
私はSNSボタンがあっても、ただあるだけだったら、
ほぼ使いませんから。
このようにちょっとだけでも見れるのは
かなり効果があるんじゃないかと思います。
![sp1](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/sp1-4-148x1024.jpg)
![sp2](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/sp2-4-148x1024.jpg)
![sp3](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/sp3-2-125x1024.jpg)
配色
このサイトで使われている色はこちら
![配色](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/スクリーンショット-2024-01-11-180846.jpg)
画像には黄色も使われています。
野菜というと緑をイメージしがちですが、
緑は使われていませんね。
イラストがPOPなので、落ち着く色よりは
暖色系のほうが良いのだろうと思われます。
フォント
本文は全て Noto Sans JP。
色が#1a1a1aと結構薄いですが、
全体の雰囲気にはあっていると思います。
まとめ
とても楽しそうなサイトでした。
SNSボタンがホバーでちょっとだけ動くのも、
さりげなくてかわいい感じがします。
こういうほんのちょっとした動きなどが、
全体の印象に与える影響は大きいんですね。
ほんの少しが大切なのだと知ることができました。
参考にしたいと思います。
![野菜](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/gabriel-gurrola-fcgPRZmTM5w-unsplash-1024x683.jpg)