2023年 多摩美術大学 情報デザイン学科 卒業研究制作展 Webサイト
本番サイト公開中 — idd.tamabi.ac.jp ↗
終わりはいつだって、
始まりの合図だ。
このWebサイトは、卒業研究制作展の世界観を直感的に体験できるように設計されている。 ユーザーの操作に応じて背景やコンテンツが動的に変化し、単なる情報サイトではなく、 インタラクティブな空間として展示の雰囲気を表現している。 展示公開までの期間を告知するオーキャンサイト（2022年7月公開）と、 展示情報を届ける本番サイト（2023年3月公開）の2段階で構成した。
卒展のWebサイトをただの情報ページではなく、触って、感じて、楽しんでもらえる体験の場にしたいと考えた。
多摩美術大学情報デザイン学科での4年間、私たちは「情報をどう見せるか」「どんな体験を届けるか」を 考え続けてきた。会場の日時やアクセスを伝えるだけではなく、学科の雰囲気や私たちの考え方を サイトそのものから感じ取ってもらえるよう、デザインや動き、構成の一つひとつにこだわった。 未来の自分たちへ、そしてこれから社会に出ていく仲間たちへ。情報デザインの力を信じ、 今の私たちだからこそ生み出せる表現を、このWebサイトに込めた。
「触れる」という体験を通して、情報デザイン学科の考え方を感じられる構成にした。マウスの動きやスクロールに応じて背景や球体が変化し、情報をどう見せ、どう伝えるかを考える学科の思想を、直感的に体感できるデザインにした。
展示会の日時、会場までのアクセス、来場時の注意事項をシンプルにまとめた。特に新型コロナウイルスの影響が残る時期だったため、感染対策や安全への配慮についても丁寧に掲載し、来場者が安心して訪れることができるよう工夫した。
コード実装を担当。あわせてウェブリサーチ、Webデザイン全体の考え方の整理、 インタラクション設計、ビジュアル班との連携も行った。
Webサイトのデザインコンセプトを確立するために、ビジュアル班と相談を重ねた。情デの特色や雰囲気を視覚的に伝え、直感的に魅力が伝わるデザインを目指した。
デザインの方向性が決まった後、インタラクションの考えを進めるためにリサーチを行った。「どんなWebサイトは面白いのか、それはなぜか」という事例を分析し、学校サイトに最適なインタラクションを提案した。
インタラクションの方向性が定まった後、具体的なページ構成を決めるためにワイヤーフレームを作成した。情報の整理とユーザー導線を意識しながら、レイアウトの骨組みを設計した。
ワイヤーフレームが完成した後、Figmaを使用してプロトタイプを作成した。実際のユーザー体験をシミュレーションしながら、細かい動きや操作感を調整した。
デザインが確定した後、私はフロントエンドの実装を担当し、デザインをWeb上で再現する作業を行った。特に、スクロールやインタラクションを駆使し、没入感のあるユーザー体験を構築することに注力した。
「卒業研究制作展ってどんなものを作る？」
「どんなテーマで作られているんだろう？」
「面白そう！どんな作品が展示されるのかな？」
「ビジュアルやコンセプトが面白そう」
「マウスを動かすと星空が変わるのが面白い！」
「こんなにインタラクティブなサイトなら、展示も期待できそう！」
「この球体、まるで本当に宇宙を覗いているみたい！」
「サイトの見せ方が独特で、興味を引かれる」
「Webサイトの体験と展示の雰囲気がつながっている！」
「友達と一緒に行けば、違う視点で作品を楽しめそう！」
「来てよかった！この展示、みんなにも勧めたい！」
「写真を撮ってSNSに投稿したら、みんなも興味を持つかも！」
ユーザーがWebページ内でマウスをクリックすると、SphereとCubeが切り替わる。
マウスを動かすと、画面中央にある透明なSphereとCubeがカーソルに追従する。遅延のある動きを加えることで、宇宙空間で浮遊する物体のような感覚を演出。ゆっくり動かすと滑らかに追従し、速く動かすと慣性を持った動きになる。
スクロールアップすると球体とCubeが拡大し、画面に近づいてくる。スクロールダウンすると縮小し、遠ざかるように見える。
アクセスすると、広大な宇宙をイメージした星空の背景が広がる。マウスを動かすと星々がゆっくりと流れるように動く。下にスクロールすると、画面中央の透明な球体（Sphere）が拡大し、背景との一体感が増す。
「これが私の爆発」のコンセプトコピーを、星空の中で読ませる構成にした。
「来場者の皆様へのお願い」で安全で快適な観覧のための注意事項を、「会場・スタッフの感染対策」で安心して来場できる取り組みを紹介する。
地図がフェードインしながら現れ、視覚的に分かりやすくナビゲートする。
最下部までスクロールすると、卒展の来場者に向けた特典（VISITOR GIFT）が登場する。
はじめて本格的にWeb制作に関わり、表現を体験として届けることの難しさと面白さを実感した。
「触って、感じて楽しめる」インタラクティブなWebを作った。ただ情報を並べるだけじゃなくて、動きや演出を通じて伝えることを考えた。ユーザーがどんなタイミングでどう感じるかを想像しながら、「どう動くとおもしろいか」「どう見えると印象に残るか」を意識して設計した。
ビジュアル班との連携を通して、共通の世界観やコンセプトを共有しながら制作を進める難しさと、その重要性を実感した。表現したいことと実装上の制約の間で調整を重ねる中で、技術的な視点からの提案力や柔軟な対応力が求められた。異なる視点を持つメンバーとの対話を重ねる中で、アイデアが磨かれ、個人では到達できない表現にたどり着けた。
インタラクション表現を重視しすぎたことで、処理が重くなり、パフォーマンス面での負荷が大きくなった。
Three.jsやアニメーションライブラリなど、新しい技術を多く取り入れた結果、コード量が増加し、実装作業にも想定以上の時間と労力がかかった。デバイスやブラウザによっては動作が不安定になり、特にスマートフォンではアニメーションによるスクロールの違和感や操作の重さが顕著だった。また、表現にこだわりすぎたあまり、情報の見やすさや導線のわかりやすさが後回しになった部分もあり、細かい動作の不具合が公開直前まで残ってしまった。
このWebサイトは公開後、日本でも中国でも多く高い評価を得た。
日本では、複数の教授から「これまでにないおもしろい卒展サイトだった」と評価され、従来の堅い・無難な卒展サイトの枠を超えた演出や体験設計が高く評価された。また、中国のSNSでも話題になり、日本のデザインや多摩美術大学という存在そのものへの関心を高めるきっかけにもなった。作品そのものを見せるのではなく、「Webサイトそのものが体験になる」設計が、多くの人に新鮮に映ったことが印象的だった。
もっと多くのWeb制作経験を積む必要があると強く感じた。
表現や動きにこだわるあまり、自分の理想を優先してしまう場面があり、ユーザーの視点に立った設計や配慮が十分ではなかったと振り返っている。今後は、誰が・どこで・どんな環境で見るのかをより意識しながら、見る人にとって心地よく、伝わりやすいWeb体験をつくっていきたい。