世界遺産 高野山 金剛三昧院には、海外から大勢の観光客がやってきます。今回のリニューアルでは、英語サイトを入れることになり、ページ数も日本語と英語サイトを合わせると80ページほどになり、住職の説法を入れると、130ページを超えるサイトになります。

STUDIOで制作するにあたり、もっとも苦労したのがナビゲーションです。まずは、PC用で見ていきましょう。

ジャイアントメニュー

PCサイトのメニューに写真を入れジャイアントメニューにすることにしました。
「金剛三昧院の魅力」と同様に「宿坊」もジャイアントメニューを作用しようと考えたのですが、「金剛三昧院の魅力」のメニューを開いき、そのまま「宿坊」をクリックすると「金剛三昧院の魅力」が閉じることなく開いたまま、「宿坊」のジャイアントメニューが重なるカタチで開いてしまう。
大問題発生！

そこで急きょ、新たな見せ方でごローバルナビゲーションを作りました。ページ数が多くあるので、シンプルなプルダウンメニューでは、ユーザーが今、何処を見ているかが分からなくなってしまうため、工夫が必要でした。

最初に表示される時には、金剛三昧院の3つの基本カラーの「紫色」で表示させ、さらに下層ページがあることを知らせます。しかし、紫色のナビを表示させ続けると目立ちすぎて見せるべき写真が色あせてしまいます。

そこで、出現時を「紫色」で表示させ、数秒後に「グレー」になるように設定することにより、落ち着いたサイトのイメージになりました。

スマートフォンのナビゲーション

ベージ数の多いサイトではSTUDIOでのスマートフォンでのナビゲーションの見せ方は、もっとも苦労するところの一つでしょう。ナビゲーションを横スクロースさせるようにしました。しかし、横スクロールがあることに気が付かないユーザーもいらっしゃると思いますので、出現時に、「横スクロール」してくださいと、分かるようにメニューが横からスライドインして表示せるようにしました。

表組みがSTUDIOでは「時間がかかる」「面倒」と言われていますが、慣れるとスピーディに作ることができます。表組みも工夫次第ですね。

よりよいナビゲーションの表現の仕方がSTUDIOでできるようになったら、このコラムでお知らせいたします！