Webサイトは、ページを複数に分ける場合が多々ありますね。
ユーザーが求める情報に辿り着きやすく・得た情報の理解をしやすくといった情報設計目的を中心に、世界観の演出であったり、サイトの重さ・SEO面などが理由の場合もあるでしょう。
枝分かれしているサイトでユーザーがさまざまな情報を得るには、ページ間を行ったり来たり（=回遊）する必要があります。

回遊がしやすく作られたWebサイトは、情報を集めやすい、質のよいサイトと言えます。
さらに、時にはユーザーが求めている情報の提供だけでなく、それ以外の企業の魅力や強みの紹介にも誘導することができれば、ブランド価値の向上に繋がりますね。

では、具体的には、どのように回遊させるのか？
その手段のひとつがボタンです。
[詳しくみる][私たちについて]といったページ回遊のボタンは、[購入する]のようなコンバージョンボタンほど目立つ存在ではありませんが、登場回数が多く、担っている役割も大きいのです。

参考事例として札幌市定山渓自然の村のWebサイトをご紹介します。
札幌市定山渓自然の村 Webサイトの詳細はこちら

例えば、利用方法ページの「各種用具の貸出・販売」部分に、[レンタル物品一覧ページを見る]というボタンを設けています。
そして、遷移先のレンタル物品ページと販売物品ページの下部には、レンタル物品と販売物品を行き来できるボタンが設けてあります。
これらのボタンを設けることで、ユーザーはサービスの概要を把握したのち、そのまま実際の取り扱い商品情報までスムーズに得ることができます。

ページ回遊のボタンは何度も目にするため、派手すぎず鬱陶しくない見た目や動き、またサイトの雰囲気を崩さない動きが求められます。
単体で見ると地味に見えるかもしれませんが、馴染みやすい、実用的なものを目指しました。

※@media (hover: hover)でタッチデバイスのタップ時の作動をカットしています。

ボタン類は、基本的にはデザイン時点で、線や色・アイコンなどを使い押せる示唆がなされいるかと思います。
そこに、更に動きもついていると、PC閲覧時の「押せる感」が増し、より心地よい操作感のWebサイトになりますね。

ですが、アニメーションに関しては意外にデザイナー側からの明確な指示はなく、こちら側で考えて実装したのちに調整をかけていくことが多い部分なのではないでしょうか？
その上、昨今モバイルユーザーの割合が増えており、BtoCのサイトではホバーアニメーションどこまで時間をかけるべきか悩む部分でもあるかと思います（同じ時間でスクロールアニメーションをこだわった方が良かったりしますよね）。
そういった場合のちょっとした時短として、ぜひこの記事を役立てていただけたら嬉しいです。

また、今回ご紹介した案件以外の事例では、どのような情報設計・実装になっているのか。
興味のある方は、ぜひWORKSもご覧ください。

札幌市児童会館

PRISM