イラスト調のオブジェクトがすいすい動く! ポップでかわいい島根県美郷町魅力再発見プロジェクトのウェブサイト!
柔らかな雰囲気が最高に気持ち良い
今回ご紹介するのは、珍しい日本の自治体に関するウェブサイトです。
その自治体というのが島根県にある美郷町です。
今回のサイトは自治体の公式サイトというよりは、島根県美郷町魅力再発見プロジェクトという企画による特設サイトだとは思うのですが、町の様々な魅力がギュッと詰まった、素晴らしい完成度のサイトとなっています。
リンク:
スクロールでスイスイ動く様子が楽しい
今回のサイトは、いわゆる SPA 的なシングルページで表現されている部分をハブにして、各種コンテンツが場合によっては別窓で表示されるようになっています。
トップページは縦に長いページ構成で、実際にスクロールバーも表示されるのですが、ユーザーが見ているページ部分は「中身のコンテンツが動的に変化する」ようになっていて、上から下にただスクロールして進んでいくのとはちょっと違った構図ですね。
例えば、トップページ部分から少しスクロールしてやると、画面全体を覆っていた雲が徐々に動いて晴れていき……
最終的にはその雲の下にある美郷町を模した地図のイラストが出てくるようになっています。
さらにそのままスクロール操作を進めていくと、地図の上をスムーズにカメラが移動していきます。
このカメラワークはオートスクロールというか、スクロールに反応して定形の軌跡を描くようになっていますね。
マウスのドラッグ操作で自由に視点を動かしたりすることはできませんが、スクロールバーを操作してあげると大きく一気に移動したりすることもできるため、それほど問題はありません。
むしろ、スルスルとスクロールに応じてシーンが目まぐるしく変化していく様子は心地良い感覚で操作できると思います。
場合によっては、単に地面に対して水平にカメラが動くだけでなく、立体的に、奥や手前に向かって大きくカメラが移動する場面もあります。
あくまでもイラストをベースにした二次元的な表現を中心にしつつも、立体的な奥行きもしっかり感じられるように、かなり様々な点で工夫が凝らされていますね。
カメラだけでなく、絶えずオブジェクトが浮遊しているかのようにゆらゆら動いているのも、視覚的なアクセントになっていると思います。
いやあ、すごくよくできてますね……これ……
ここではキャプチャ画像等は用意しませんでしたが、各フェーズから「読む」のボタンなどを押すことで、さらに詳細なコンテンツページへと移動することもできます。
コンテンツページのほうでは画像なども交えつつ、町の文化や歴史にも触れられており、すごく内容の濃いサイトとなっています。
全体的なデザインの統一感も素晴らしいですし、日本特有の風合いも強く感じられ、とても完成度の高いサイトだと思いました。
ぜひチェックしてみてください。