「TOMOMI SHIBAKUSA」の裏側に迫る #01
Web版「WHAT’S ON +」は、気になるデジタルコンテンツの制作の裏側を制作者ご本人に解説してもらう企画です。Webサイト公開記念となる初回は、2024年6月18日に発売された『Web Designing』8月号の「WHAT’S ON +」でも取り上げた「TOMOMI SHIBAKUSA」のWebサイトを制作したtote inc.の山口国博さんに、本Webサイトの技術的な側面を解説していただきました。
話してくれた人
山口 国博さん
インタラクティブなWebサイトの企画・デザイン・開発を得意とするデザインスタジオ、tote（トート）フロントエンジニア。音楽業界で多数のアーティスト特設サイトやオフィシャルサイトなどの制作実績多数。デザイン性を重視した演出系のサイトづくりに取り組んでいます。レトロゲーム好き。
目次
重厚デザイン vs エンジニア魂：その闘いの舞台裏
「TOMOMI SHIBAKUSA」
当社はクライアントの個性を活かしたユニークなサイトづくりが多いです。デザイナーから毎回斬新な案が出るので、制作は「仏の心」でその案の意図や目的を紐解くところからスタートします。デザイナーが持ってくる案は、良くも悪くも常に私の想像力の限界を攻めてきます。今回も独創的なデザイン案が登場し、笑顔で対応させていただきました。
デザイナーの意図を汲み取り、共感を示しつつ具体的な改善点を伝えるのがポイントです。無数の修正ループにハマらないよう、コミュニケーションは重要だと考えています。デザインが確定する前に問題点を洗い出し、技術的な制約やリスクを丁寧に説明します。デザイン案を受け取ったら、デザインの個性を守りつつ、双方が納得できる代替案を提案します。
デザイン案に向き合う時は、細部まで理解するのが重要です。しかし、最初は迷子になることもあります。そういう時は、チョコチップクッキーを食べながら時間をかけて取り組むことで、最終的には良い成果が出ることもあります。今回のデザインも独創的なため、実装時には技術的な課題が必ず出てくると思っていました。しかしこれまでデザイナーとともに制作を進めてきた中で、私は、新しい技術ではなく、既存の技術を組み合わせた柔軟な解決策を見つける技を生きる術として身につけてきました。今回もそのアプローチで乗り切りました。
デザイン性と表示速度のバランスは難しく、今回も表示速度の確保に多くの時間と労力をかけました。デザイン変更で速度が大幅に向上する場合は、デザイナーと真剣勝負。具体的なメリットを示して理解を得ます。制作効率の向上も同様で、デザイナーのこだわりを尊重しつつ、必要性を説明します。
多数の画像にアニメーションを設定する際は、手間を減らす工夫を凝らします。デザイナーが知らないところで効率アップを図るのも重要です。今回のサイトはユーザーに魅力的な体験を提供するため、アニメーションや装飾を多用しています。インスピレーションが湧いたらすぐに対応できる環境を維持し、開発時間を短縮しています。
デザインファイルのレイヤー数が非常に多い上に構造が複雑で作業効率が低下しそうだったので、デザイナーに整理を依頼しました。その際、デザイナーの苦手分野を意識しつつ、やる気を見せることが重要です。作業分担も積極的に引き受け、円滑な進行を図ります。
複雑な動きを説明する際は、お互いに図解やジェスチャーを交えて具体的なイメージを共有します。認識のズレを防ぎ、コミュニケーションを円滑にするため共通の表現ワードを設けます。また、パラメータエディタを活用し、デザイン調整を効率化して精度の高いデザインを目指します。
当社のプロジェクトは個性的なデザインが多く、デザイナーの才能を最大限に引き出すことを重視しています。今回も会議やプレゼンテーションではデザイナーを前面に出し、アイデアや意見を尊重しました。それは決して、私が口下手だからではないということでお願いします。
〈次回へ続く〉
