見出し画像

SuuHaaのサイトを分析してみた

長野県の情報発信長野県の移住総合WebメディアSuuHaaのサイトを分析させていただきました。イラストでつくられた世界観が長野の魅力を存分に引き出しています。

KNAPのデザイナー3人でトークしてます。
あくまでメンバーで個人的に分析をさせていただいておりますことをご了承ください。

画像3

デザイン分析元の基本情報

商品の特徴:長野に移住するための総合メディアサイト
#森の日 #長野 #移住 #深呼吸 #イラスト #Webデザイン
URL:https://suu-haa.jp/
企業名:田舎暮らし「楽園信州」推進協議会

トップページ

イラストが可愛くて、長野に住むことが楽しそう!住んでみたい!と思わせられるようなコンテンツ・デザインになってました。

-ファーストビュー

スクリーンショット 2021-05-18 15.34.37

空気が美味しそうな自然写真を使ってるので、「スーハー」というサイトのコンセプトに合っており、長野県の自然豊かな雰囲気が伝わります。
KVでは背景の一部にイラストが敷かれており、スクロール後にイラストが中心になっても馴染みやすくなってました。ナビゲーションも山っぽい形になっており細かいところまでデザインされています。

画像5

画像6


-コンテンツ

スクリーンショット 2021-05-18 15.42.06

イラストと写真がマッチするようにトリミングなどで随所に工夫がされてます。花や風、雲などの自然豊かなアイテムでタイトルまわりも装飾されており見ていて飽きないデザインです。また、全体的に動きがあって楽しさが伝わってきます。

画像7

画像8


スクリーンショット 2021-05-19 17.16.16

地図上のエリアを押すと、右に出てくる情報が変わります。色やキャラクターが変わるので、変わったのが分かりやすいですね。
「中信エリア」で深呼吸するなどの動線のボタン名が可愛くて面白いので、押したくなります。

スクリーンショット 2021-05-19 17.17.38

バナーを作成する際に飛び先のデザインにしがちですが、このサイトに合うようにデザインされているがサイトの世界観を崩さなくて良いなと思いました。

-共通箇所(サイトマップ、フッター)

スクリーンショット 2021-05-19 17.58.13

ナビゲーション開いた時も、なみなみにカットされている部分や、キャラクターが上手く使用されており細かく作り込まれています。コンテンツが完全に隠れないのも分かりやすいなと感じました。

スマホデザイン(レスポンシブ)

スクリーンショット 2021-05-19 17.26.40

スマホでは、情報量の多い記事系のコンテンツをスライドで見せるなど、長くなりすぎない工夫がされていました。動きもPC同様丁寧につけられていてどんどんスクロールしたくなります。

下層ページ

-エリアから探す

スクリーンショット 2021-05-19 17.58.05

エリアごとに、ファーストビューのイラストの背景や写真が違うので、どのページを見たか分かりやすく作られていました。また、トップページのキービジュアルと混同しないようにトリミングをトップページでは、尖った山、各詳細エリアページでは丸い山で分けてました。

スクリーンショット 2021-05-19 17.19.29

それぞれエリアごとに担当の動物が決まっており、その動物があしらわれています。動物が持っている物が名産で、それぞれどんな物があるのかわかりやすく、他のページも回遊したくなりました。

-コンタクトページ

スクリーンショット 2021-05-18 15.52.10

業務的なコンタクトページすら楽しくデザインされていて、入力中もワクワクを増やすデザインになってました。

写真

スクリーンショット 2021-05-19 17.21.37

自然を感じられる空気の美味しそうな写真を使用しており、色味も鮮やかで目にとまる色合いになってました。

動き

画像20

楽しさ&空気の美味しさが伝わってきます。gifアニメで作られているようです。空気を吸ったときにお腹が大きくなるなど細かいところまで再現されています。「長野の空気を深く吸い込もう」のコピーとも合ってます。

フォント

スクリーンショット 2021-05-19 18.01.13

英語フォントは少しクセのあるフォントを使用していますが、ロゴと色を合わせているので、サイト全体の統一感が出ていました。

日本語デバイスフォント:筑紫オールドゴシック Std B / 筑紫ゴシック Pr5 M
英語:Signika
フォントのカラー:#2D5D24 #13120F #3F2B19 #89826A

フォントの説明
日本語フォントは、見出しに筑紫オールドゴシック Std B、テキストに筑紫ゴシック Pr5 M を使用していました。筑紫書体は活字の滲みの表現を起こしているため、あたたかみのある印象を与えることができます。どちらも筑紫シリーズですが、筑紫オールドゴシックのように少し味があるフォントを見出しに、すっきりして見やすい筑紫ゴシックをサイズが小さいテキストに使い分けています。

カラースキーム分析

画像21

山の緑や土を思い起こさせる配色となっていました。背景色やキャラクターたちも茶系が多く、まとまりがあると同時に暖かい長野の雰囲気が伝わってきます。

ファビコン

画像10

OG画像

画像9

タイトル

オンラインで移住相談 | 長野県の移住総合WEBメディア「SuuHaa(スーハー)」

長野の空気を深く吸い込もう。長野県(信州)への移住・滞在に関する情報が詰まったWEBメディアです。「暮らす」・「働く」・「つながる」を切り口に様々なコンテンツを長野県庁・信濃毎日新聞社・(株)Huuuuがタッグを組んで発信していきます。

画像1

この記事を書いているメンバーが働いている会社
よかったら見に来てください!

画像2


この記事が気に入ったらサポートをしてみませんか?