サイト観察記 第一弾

サイトデザインのスキルアップのために1日1サイトレビューをしていきます!

今日のサイト

今回レビューするサイトは「みさとと」です!
https://www.town.shimane-misato.lg.jp/misatoto/
島根の美郷町魅力発見プロジェクトのサイトのようです!
それでは見ていきましょう!

概要

目的:美郷町の雄大な自然、いくつもの文化遺産、この町で暮らす人々をより多くの人に広めたい。
地域再発見プロジェクトのため、地域活性化や地方と都心の交流を目的として作られたサイトのようです。
ターゲット:20・30代の男女

構成

以下の構成から成り立っています。

  • トップ

  • みさとと遺産

  • みさとと川

  • みさとと猪

  • みさとと銘菓

  • みさとと商店

  • みさとと農

  • 島根県美郷町について

  • このサイトについて

  • 美郷町ホームページ(外部リンク)

UI

デザインについて詳細に見ていきます!

共通

◆グローバルメニュー
箇条書きのアイコンを使用したハンバーガーメニューになっています。
その下には、美郷町の紹介ページに遷移するマスコットキャラクター?のイラストがボタンとして設置されています。
ホバーで傾くのが可愛らしいですね。
フッター:ハンバーガーメニューが追従しているので、フッターはシンプルです。キャッチフレーズと「物語を読む」「美郷町について」のボタンが設置されています。

◆フォント
本文には「たづがね角ゴシック」が使用されています。
絵のインパクトが強いので、テキストはシンプルになっています。

◆色遣い
イラストはカラフルでビビットな色合いになっていて、ポップな印象を与えています。雲は淡いピンクになっていて、メインのイラストと差別化されていますが、統一感のあるデザインになっています。
テキストやボタンは、白と黒で構成されています。
サブタイトルの「みさとと○○」のタグはテキストが小さながらもビビットな色遣いで情報が伝わりやすくなっています。

トップ

スクロールするとイラストに奥行きが現れ、次々と別のイラストが表示されます(こういうサイトなんて言うんですかね?)
最近は、クボタさんでもこのようなサイトがありましたね↓

一つ一つタイトルを読ませることができるので、飛ばし読み防止のデザインになります。

下層ページ

それぞれ「みさとと○○」で下層は構成されています。可愛いイラストで親近感を与えつつ、テキストや文字の装飾が少なく、文章はシンプルなデザインになっています。
そのことによって、イラストや大きく配置された写真に目が行き、ビジュアル的な印象を重視していることが分かりますね。

おわりに

いかがでしたでしょうか。
下層ページは、地元の人にインタビューをした内容を掲載しているため、その地域での暮らしや人々の良さが全面に伝わってきます。
「みさとと」というサイトタイトルからも、地域内での繋がりはもちろん、地域外の人にも繋がりの良さを感じられるサイトになっています。

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