カード型のオブジェクトを活用してコンテンツの回遊性を高めた Westbourne Grammar のウェブサイト

doxas : 2026-01-05 12:02:39

多様な視点での閲覧性

今回ご紹介するのは Westbourne Grammar というオーストラリアにある学校のウェブサイトです。

いわゆる私立の学校なのかなと思うのですが、日本とはもしかしたら制度とかがだいぶ違うのかもしれません。サイト内には学校独自の考えや取り組みなどが事細かく網羅されています。

それぞれの事柄はカード状のオブジェクトによって示されますが、カードはあくまでも入口でより詳細な下層ページもきちんと用意されています。

今回のサイトの WebGL 実装は、カードを立体的に配置したり動かしたりするための用途として用いられています。

いわゆるエフェクトを掛けてかっこよく見せる、みたいなことが目的ではないためすごくシンプルな実装内容に終止しています。

こういうウェブサイトの場合、演出でごまかすということができないので動きやインタラクションなどをしっかり作り込まないとチープな印象になってしまいがちですが、今回のサイトの場合はみなさんの目にはどのように映るでしょうか。

この上のスクリーンショットは Enter ボタンのような役割のアイコンをクリックした直後、球体の表面に並ぶような姿勢で配置されていたカードが一斉に飛び散る瞬間を撮ったものです。

カードが飛び去っていく一連のアニメーションはスピード感もほどよく、心地よい味付けになっていますね。

カードがバラバラに飛び去ったあと、あらためて空間全体に広く散らばったように配置されると、そこからインタラクティブなモードへと移行します。

インタラクティブなモードでは、これ文章で説明するのがちょっと難しいのですが、マウスのボタンを押し込んだ瞬間にぐっとカメラが引くような感じで動きます。

そうすることで画面内に映り込む範囲が広くなり、全体を少し俯瞰して見ているような感じになるんですよね。

こういう小さな工夫が事細かく、またしっかりと組み合わせられていることで、閲覧体験が底上げされているなと個人的には感じました。

ウェブサイトを構成する要素って本当にいろいろありますよね。

今回のサイトの WebGL によるインタラクティブビューだけをとってみても、カードのようなわかりやすいオブジェクトだけではなくカーソルやメニューなど複数の要素が配置されているわけですが、それらがなんらかの役割を持って駆動している感じがします。

WebGL 実装としてはすごくシンプルに見えますが、実装者が自分自身だったらと想像しながら見てみると、いろいろな工夫が見え隠れしてなかなか興味深いのではないでしょうか。