エンジニアYの“今週のUI研究”-エンジニアY-
こんにちは、エンジニアYです。
今回は馬路村ふるさとセンターの公式サイトを例にUI研究をします
みなさんに気づきを提供できる記事になっていれば幸いです。
【なぜこのサイト?】
それは 私がこっそりブックマークしてきた “推しサイト”だから。(Yは数年前からユニオンネットさんのファンです。)
UNIONNET Inc.さんが制作した「馬路村ふるさとセンター(まかいちょって家)」公式サイト(https://umajimura.jp)は、
高知県の小さな村が若い世代にも届くようデザインされた観光サイトです。
心に響くサイトデザインが至る所に散りばめられているのでその一部をご紹介します。
【 1 |トップに出る方言のあいさつ】
開いた瞬間に方言まじりのコピー
「よう来たねぇ〜。ゆっくりしていきや」がドーンと表示されます(画像にテキストが埋め込まれている形)。
これだけで「温かい田舎のもてなし」を感じられ、村の空気を⼀呼吸でイメージできます。
【 2 |テーマカラーが光る ゆずイエロー × リーフグリーン 】
サイトの決め手は ゆずの果皮を思わせるイエロー と 高知の森を連想させるグリーン。
この イエロー×グリーン は、馬路村の看板商品「ごっくん馬路村」のラベル配色と同系列。
サイトと物産が同じカラーストーリーを共有することで、画面で見た色=現地や商品で体験する色というブランディング連携が成立しています。
【 3 |迷わせないメニュー】
画面上部のメニューはたった5項目。
1. うまじ村ってこんなとこ
2. おすすめのめぐり方
3. お出かけスポット
4. イベント情報
5. アクセス
観光サイトにありがちな深い階層がなく、迷いにくいデザインになっています。
【 4 |情報整理の3つの柱】
制作会社が掲げた整理ルールはとてもシンプル。
1. ゆず以外の魅力も伝える
2. 村での過ごし方をイメージしてもらう
3. 情報は整理して分かりやすく
これだけに絞って全ページを組んであるので、欲しい内容にすぐ手が届く感覚を感じられるサイトになっています。
【 5 |「遊び心 × 懐かしさ」のデザイン】
サイトのトーンは
1. 遊び心(手書き風アイコンやイラスト)
2. 懐かしい田舎感(紙っぽいテクスチャ)
をミックスしつつ、レイアウト自体はあくまでも今風にシンプル。
結果、自分たちのような若い世代でも「かわいい」と感じる外観になっています。
【 6 |モデルコース”の見せ方】
実際にスタッフの方が現地を歩いて取材した写真付きで、「半日で楽しむ温泉ルート」など具体例を提示。
旅の経過をシーンごとに写真で見ることができ、実際に旅をしているかのような感覚になります。
スクロールするたびにシーンとシーンを繋ぐドットのラインがついてくるのも可愛いです。
これが”行ってみたい熱”を後押しする仕掛けになっています。
【まとめ】
地方の観光サイトは「情報が多い・デザインも凝りたい」で複雑になりがちですが、
このサイトは目的(若い世代に伝える)を先に決め、すべてをその目的に沿ってそぎ落とした好例です。
自社サイトでも「誰に」「何を感じてほしいか」をまず決めてから設計すると、
見る人にやさしいUIになる。それを教えてくれる一枚の教材だと感じています。
ユニオンネットさんの制作された他サイトもめちゃ良いので、気になる方は是非チェックしてみてください!
ではまた次回の社員ブログで!
こんにちは、エンジニアYです。
今回は馬路村ふるさとセンターの公式サイトを例にUI研究をします
みなさんに気づきを提供できる記事になっていれば幸いです。
【なぜこのサイト?】
それは 私がこっそりブックマークしてきた “推しサイト”だから。(Yは数年前からユニオンネットさんのファンです。)
UNIONNET Inc.さんが制作した「馬路村ふるさとセンター(まかいちょって家)」公式サイト(https://umajimura.jp)は、
高知県の小さな村が若い世代にも届くようデザインされた観光サイトです。
心に響くサイトデザインが至る所に散りばめられているのでその一部をご紹介します。
【 1 |トップに出る方言のあいさつ】
開いた瞬間に方言まじりのコピー
「よう来たねぇ〜。ゆっくりしていきや」がドーンと表示されます(画像にテキストが埋め込まれている形)。
これだけで「温かい田舎のもてなし」を感じられ、村の空気を⼀呼吸でイメージできます。
【 2 |テーマカラーが光る ゆずイエロー × リーフグリーン 】
サイトの決め手は ゆずの果皮を思わせるイエロー と 高知の森を連想させるグリーン。
この イエロー×グリーン は、馬路村の看板商品「ごっくん馬路村」のラベル配色と同系列。
サイトと物産が同じカラーストーリーを共有することで、画面で見た色=現地や商品で体験する色というブランディング連携が成立しています。
【 3 |迷わせないメニュー】
画面上部のメニューはたった5項目。
1. うまじ村ってこんなとこ
2. おすすめのめぐり方
3. お出かけスポット
4. イベント情報
5. アクセス
観光サイトにありがちな深い階層がなく、迷いにくいデザインになっています。
【 4 |情報整理の3つの柱】
制作会社が掲げた整理ルールはとてもシンプル。
1. ゆず以外の魅力も伝える
2. 村での過ごし方をイメージしてもらう
3. 情報は整理して分かりやすく
これだけに絞って全ページを組んであるので、欲しい内容にすぐ手が届く感覚を感じられるサイトになっています。
【 5 |「遊び心 × 懐かしさ」のデザイン】
サイトのトーンは
1. 遊び心(手書き風アイコンやイラスト)
2. 懐かしい田舎感(紙っぽいテクスチャ)
をミックスしつつ、レイアウト自体はあくまでも今風にシンプル。
結果、自分たちのような若い世代でも「かわいい」と感じる外観になっています。
【 6 |モデルコース”の見せ方】
実際にスタッフの方が現地を歩いて取材した写真付きで、「半日で楽しむ温泉ルート」など具体例を提示。
旅の経過をシーンごとに写真で見ることができ、実際に旅をしているかのような感覚になります。
スクロールするたびにシーンとシーンを繋ぐドットのラインがついてくるのも可愛いです。
これが”行ってみたい熱”を後押しする仕掛けになっています。
【まとめ】
地方の観光サイトは「情報が多い・デザインも凝りたい」で複雑になりがちですが、
このサイトは目的(若い世代に伝える)を先に決め、すべてをその目的に沿ってそぎ落とした好例です。
自社サイトでも「誰に」「何を感じてほしいか」をまず決めてから設計すると、
見る人にやさしいUIになる。それを教えてくれる一枚の教材だと感じています。
ユニオンネットさんの制作された他サイトもめちゃ良いので、気になる方は是非チェックしてみてください!
ではまた次回の社員ブログで!