「TOMOMI SHIBAKUSA」の裏側に迫る #04
Web版「WHAT’S ON +」は、気になるデジタルコンテンツの制作の裏側を制作者ご本人に解説してもらう企画です。Webサイト公開記念となる初回は、2024年6月18日に発売された『Web Designing』8月号の「WHAT’S ON +」でも取り上げた「TOMOMI SHIBAKUSA」のWebサイトを制作したtote inc.の山口国博さんに、本Webサイトの技術的な側面を解説していただきました。
話してくれた人
山口 国博さん
インタラクティブなWebサイトの企画・デザイン・開発を得意とするデザインスタジオ、tote（トート）フロントエンジニア。音楽業界で多数のアーティスト特設サイトやオフィシャルサイトなどの制作実績多数。デザイン性を重視した演出系のサイトづくりに取り組んでいます。レトロゲーム好き。
エンジニアの細部への愛：ここを見て！ニッチ解説
「TOMOMI SHIBAKUSA」
画面遷移は複雑な階層構造を廃止し、「前へ」「後へ」のシンプルな操作で直感的に行えるようにしました。まるで次の部屋へ進むような感覚で、ユーザーはストレスなくページを閲覧できることを目指しました。そして、メイン画面内の要素切り替えは、ページをめくるような自然な回転動作となるようにしました。これにより、ユーザーは現在の要素と次の要素を明確に区別でき、快適に操作できる状態を狙っています。
このWebサイトは「感じるレイヤー」「見るレイヤー」「読むレイヤー」の3つの階層で構成され、それぞれ異なる技術を用いて奥行きのある世界観を表現しています。静止画に空間構造を持たせ、水彩画と点描画を重ねるように実装しました。
Webサイト全体のアニメーションは一貫性のある動きで統一しました。これにより、ユーザーに直感性と安心感を提供し、インターフェースの使いやすさの向上を目指しました。ユーザーのインタラクションに応じてベクトルを感じさせ、何もない時は繰り返しアニメーションを多めに使用して安定した体験を得られるようにしました。
サブ的なアニメーションや装飾にはランダムな動きを取り入れ、ライブ感を演出しました。これにより、単調さを打破し、コンテンツに新鮮な印象が残るようにしています。使い慣れた操作性と革新的なビジュアルを両立させ、ユーザーが飽きない「するめサイト」を目指しました。
もう一つ飽きさせない施策として、ドットの反射ライティングを工夫しました。横線状に反射させて構図を安定させ、ライトの強さを調整することで単調にならないようにばらけさせました。細部までこだわったデザインとちょっとした水平技術によって、ユーザーに飽きさせないインタラクティブな体験を提供できたと思います。
全体的にゆったりしたWebサイトですが、ユーザーとのインタラクションに関わるアニメーションは即座に反応するように設定しました。これにより、操作に対するフィードバックを迅速に提供し、操作性を向上させました。できるだけ、開始直後からトップスピードになるように設定しています。
ABOUTページのファーストビュー周辺の文字は、一瞬だけ表示させてすぐに消すという演出を採用しました。これにより、奥行き感を生み出し、ユーザーの視線を自然に画面中央へと誘導する狙いがあります。また、BGMがちょっとひずんでいます。メインページは「和」の雰囲気に合わせて晴れやかな音色にしていますが、ABOUTページでは落ち着いた雰囲気を出すために音にエフェクトをかけています。ぼかした音響で空間を演出し、ユーザーに奥行きを感じさせるつくりにしています。
キラキラ光るドットエフェクトは私のお気に入りです。ブレンドモードのタイミングなど、細部まで調整を重ね、理想の輝きを追求しました。納得のいく仕上がりになったときの達成感はひとしおでした。
また、スクリーンセーバーに一番のこだわりがあります。メインページで何も操作しないでいるとランダムに配置された点が一本の線へとつながります。今回のWebサイトのコンセプトを視覚化し、柴草朋美さんに興味を持ってもらえるよう特別な演出を込めました。
最後に404ページですが、ローディングとは対照的なアニメーションで立体ではなく、平面的に表現し、完結感を演出しました。デザイナーの要望で「O」の中に小さな「404」を回転させる細かい処理を入れました。普段はアクセスしないページですが、これには非常に多くの時間を費やしました。
こうして、デザイナーとの緻密なコミュニケーションの上で、今回の「TOMOMI SHIBAKUSA」のWebサイトが完成しました。ぜひWebサイト内で、私たちのこだわりを見ていただきたいと思います。
〈終わり〉
