2.SEINOFLOWER #サイトレビュー
【概要】
岐阜県大垣市にあるお花屋さん「SEINO FLOWER」のWebサイト
【レビュー】
ファーストインプレッション
外観や内観、植物の手入れ、子供が活花体験を楽しむ様子が映る動画が、緑色の配色で囲まれており、その配色が動画と調和して、お店のナチュラルで落ち着いた雰囲気が伝わります。
フォント
本文：游ゴシック体
→穏やかな印象の日本語ゴシック体
調べてみたところ、游明朝体と一緒に使うことを想定して開発された、スタンダードな角ゴシック体ファミリーだそうです。
英文：Josefin Sans
→デザイン性のあるおしゃれなフォント。細身のフォントに定評があるそうです。小文字のeが斜めになるのがかわいらしいです。
https://spc-jpn.co.jp/blog/10128/
配色
ベースカラーが白に近いベージュ、メインカラーが明るめな緑色、アクセントカラーが落ち着いた茶色（亜麻色に近い感じ）。
ベースカラーとアクセントカラーが落ち着いた色なので、明るい緑色があるおかげで、ナチュラルな中に明るさが加わります。
イメージ
ナチュラル 落ち着き 癒し
サイト構成
❶TOP
❷ABOUT
ー店舗情報
ー店長紹介
❸SERVICE
ーオーダーアレンジメントブーケ
ーレッスン、ワークショップ
ー花育
ーコーディネート・会場装飾
ーお仏花・お供え花
ーオリジナル商品
＞CONTACT
＞ONLINESTORE
トップページ構成
①mv
②ABOUT
③SERVICE
④ONLINE STORE
コンテンツ量が少なく、すっきりしていて見やすいです。
デザイン
［MV］
・「彩りや緑と暮らす」というキャッチコピーが、自然を取り入れた生活を想起させ、自然に囲まれた丁寧な暮らしに憧れる気持ちをより搔き立てます。
・mvに営業時間や定休日が記載されていることで重要な情報がすぐ伝わります。
・スクロールダウンのSCROLLの文字がゆっくり周っている動きがお店やサイトの雰囲気と合っています。
・（Photoshopで確認したところ、)キャッチコピーと英文のジャンプ率が約３倍でしたが、フォントのおかげで力強くは感じず、ナチュラルで落ち着いた雰囲気に合っています。
ーメモー
☆ファーストビューに動画を使うメリット
・サイトイメージを伝えやすい
「このサイトで得られる情報」や「サイトの世界観」「ブランドイメージ」を映像イメージで伝えることで、ユーザーの関心度を高め、さらには感情に訴えて共感を得られる。
・短時間で多くの情報が伝わる
動画で伝わる情報量は1秒あたりにWEBページ3600ページ分と言われている。ユーザーにできるだけ短い時間で、できるだけ多くの情報を伝えることによって、サイトへの関心を高めることができ、詳しく知って欲しい情報へとユーザーを誘導できる。
・動きでユーザーの注意をひく
人は動いているものを目で追ってしまう性質があるため、強調したい内容や伝えたいイメージを動きによって目立たせることができる。
サイトの世界観や有益な情報を得られる期待感によって、ユーザーの関心を惹き、より詳細な情報へ誘導することで早期の離脱を防ぐことができる。
［ABOUT］
・画像にシェイプが少し重なって配置されていたり、よく見ると左右で配色が違ったりしていて、シンプルなデザインだからこそ、リズムが感じられて印象的です。
［SERVICE］［ONLINE STORE］
・ずらしたレイアウトを使用しています。
調べてみたところ「ブロークングリッドレイアウト」と言うデザイン手法であることを知り、勉強になりました。
要素をずらしたり重ねたりするレイアウトは、リズムができ、シンプルさ単調さからの脱却を図れるとのことです。
ーメモー
☆グリッドレイアウト：初心者におすすめの基本的なレイアウト手法。きっちり情報を伝えたい時におすすめ。
☆ブロークングリッドレイアウト：グリッドレイアウトに「ずらす・重ねる」を加えたレイアウト。トレンドや他サイトとの差別化を表現できる。
☆ノングリッドレイアウト：規則・法則のないレイアウト手法。オリジナリティや躍動感を表現したい時におすすめ
［パララックス］
・店内の植物たちの様子がパララックスを使って表示されています。店内の素敵な雰囲気が伝わり、画面越しでもマイナスイオンが伝わってくるようで、癒されます。
ー補足ー
☆パララックスのメリット:おしゃれや先進的といったイメージを持たせることが可能。表示させたいコンテンツのポイントを訴求することができる。簡単にいうと「イマドキ感」が演出でき、スタイリッシュなサイトを作ることができる。
実装
ABOUTページでは画像が左から右に動きながら表示されます。また、ヘッダーのメニューもホバーすると、下線が左から右にスライドするような動きで、動きが統一されて実装されています。
全体
・コンテンツ量が多すぎず、適度な量でとても見やすかったです。
興味があっても、コンテンツや下層ページが多いと離脱されてしまう可能性も高まるので、見やすいなと感じました。
・各ページには外観や店内の植物の写真が掲載されており、実際に足を運びたいという気持ちが高まります。
・インスタやオンラインストアも見ましたが、花束やコサージュがとてもかわいらしかったです。最近は、素敵なお店などはインスタなどの口コミでも広がると思うので、webサイトにインスタやオンラインストアを載せることは改めて非常に有効であることを感じました。（当たり前のことですが😶）
その他
・景観を損なわないために、Googleマップを埋め込まずに、ACCESS情報が固定されているのかなと感じました。ABOUTページのINFORMATIONのセクションでも、Googleマップは別ページで表示されるようになっています。
［ターゲット］
・丁寧な暮らしをしたいと思っている。
・植物やお花にそこそこお金をかけられる。
・結婚式や成人式などのお祝い事の行事を控えている。
・25才～50代の女性
［目的］
店内の雰囲気を知ってもらい、来てもらう。
遠くて来れない方はインスタやオンラインショップを見てもらい、購入に繋げる。
［戦略］
1⃣ 店内の素敵な雰囲気を知ってもらい、訪れたいと思っていただけるような魅力を伝える。
・メインビューで色んな角度からのお店の動画を流す。
・各ページに植物や内観、外観の画像を載せる。
2⃣ オンラインで販売していることを知ってもらう。
・インスタとONLINE STOREをヘッダーに固定。トップページにONLINESTOREのセクションを載せる。
3⃣ 植物をただ販売しているでけでなく、ワークショップや花育、会場装飾も行っていることを知ってもらう。
・SERVICEページで紹介。
（ターゲット、目的、戦略は自分なりの予想です。見当違いだったらすみません🙇）
感想
このサイトは、スクールの課題で喫茶店のwebサイトを作る際にギャラリーサイトを見漁っていた時に見つけ、すごく素敵で印象に残っていたサイトでした。
特に明るい緑色に囲まれたファーストビューが素敵で印象的で、ファーストビューは期待を持たせることが大事だと学びましたが、このサイトではそれが実現されているなと感じました。
レビューのためにサイトをたくさん見ていたんですが、見れば見るほど素敵で、落ち着いたらお休みの日にし絶対行きたいです🌿
※今回から、フォントが与える印象や調べて初めて知ったことなどはメモ代わりにnoteに記載することにしました。
この記事が気に入ったらサポートをしてみませんか？