WEBサイトリニューアルの記録
2025年7月頃から進行していた、WEBサイトのリニューアルプロジェクトの記録です。
これまで使用していた国産ヘッドレスCMS「Newt」のサービス終了を受け、CMSの移管作業に着手する以前に、手前味噌で構築していたサイト構造そのものを見直す必要があると判断し、Webデザイナーのboko氏を中心にプロジェクトを進行しました。
boko氏について
私自身、インディペンデントな立場で、特定の組織に所属・依存することなく、領域横断的に具現化したアイデアを通じてコミュニティを広げていくことを大切にしています。今回のリニューアルにあたっても、同様に柔軟な発想を持ちながら、デザインと実装をシームレスに横断しつつ、思考できる方に依頼したいと考えていました。
以前、normalize.fm の配信を通じてお話を通じてboko氏の思想やスタンスに触れていたことに加え、WebGLを活用した 1:09(いちき)さんのサイトが非常に魅力的だったこともあり、今回のプロジェクトをご相談しました。
進行
こちらの要望をお伝えするにあたり、サイト構造や必要機能についてはFigma上で図解を行い、デザインのトーンについてはNotionにまとめたリファレンスを共有したうえで、ご相談を進めました。
全体を通じてこちらからのFBは最小限に抑えつつ、デザイン面のアートディレクションや、レイアウト・各種エレメントに関するアイデアについては、boko氏に主導していただき、プロジェクトを進行しました。
今回は少人数で進行するプロジェクトであり、各々が堅実な自己マネジメント力を持った体制だったため、着手時点では細かなタスクの切り分けまでは行わず、プロジェクト終盤に差し掛かった段階で改めて洗い出しを行いました。
コンセプト
これまで同様、オルタナティブな立場から自身のWorksを育てていく姿勢をコンセプトの軸に据えながら、単なるポートフォリオとして完結するのではなく、使い続けることで徐々に愛着が湧いていくような、ツール的な拡張性を持ったサイトを考案していただきました。
将来的な活動の変化やアウトプットの広がりにも柔軟に対応できる構造になっており、インタラクションの緻密な設計もさることながら、アーカイブとしての見やすさと可変性の両立を意識した設計になっています。
CMS移管
プロジェクトの起点となったCMS移管については、boko氏からご紹介いただいたSanity を使用しています。サイトの構成に合わせてカスタムしていただき、更新頻度に沿った非常に扱いやすい構成に刷新されました。
Projects
サムネイルのアスペクト比はあえて統一せず、それぞれのプロジェクト固有の魅力が引き立つよう設計していただきました。
全体をグリッド状に並べるスタイルは以前のWebサイトでも採用していましたが、今回は新たにCategoryとVisual・Textによるソート機能を実装したことで、古いプロジェクトにもアクセスしやすくなり、より網羅的に各プロジェクトへ触れられる構造になっています。
Writings
以前まではnoteで独立していたメイキング記事を、サイト内で扱えるようにしていただきました。
関連するProjectに紐づいた状態で表示される構成にもなっており、各プロジェクトから自然に記事へ遷移できるなど、回遊性の高い導線設計になっています。
ポートフォリオとして完結するのではなく、今後の活動やアーカイブの広がりにも寄り添える機能になったと実感しています。
Color mode
右上のカメレオンのアイコンをクリックすることで、サイト全体のテーマカラー・カメレオンのカラーが変わります。カメレオンのモデルはこちらでモデリングとIKを行いました。一定時間、画面を放置するとスクリーンセーバーとして機能します。3DCGのオブジェクトがサイト全体に立体感を与えており、非常にかわいいです。
以下、boko氏のコメントです。
田村さんの「作品を育てていく」という考え方に共感し、ポートフォリオとして長く使ってもらう中で徐々に愛着が湧くようなサイトを目指しました。
単に作品をアーカイブするだけでなく、それらに紐づく思考の痕跡なども集約できるようWritingsという項目を追加したり、ご自身が繰り返し閲覧しても飽きやストレスがないよう、シームレスで軽快な動作を大事にしたりと、常に道具としての側面を意識して作っていました。コンセプトはポートフォリオ“ツール”です。
もちろん機能を満たすだけでなく、サイト自体にユニークさを感じさせるための遊び心やサウンドUIなど、各所に絶妙な加減のチャレンジをしています。この辺りは田村さん、SKYTOPIAさんとたくさんコミュニケーションしながら作ることができて、とても嬉しかったです。
前段の通り、全体のディレクションはboko氏を主体として進行していただきましたが、初稿をご提案いただいた段階からFIXに至るまで、コンセプトが一切ブレることなく貫かれていた点に強く感動していました。
また、デザインと実装の両面を横断しながら、プロジェクト全体を自走させていくboko氏自身の推進力にも、終始刺激を受けていました。
サウンドUIについて
自身が音楽関連のプロジェクトに携わる機会が多いこともあり、そのエッセンスをサウンドUIなどで取り入れたいと考えていました。
全体のデザイン方針が定まり始めた段階で、普段から別案件でも深く関わりのある SKYTOPIA 氏に相談し、ホバー音やトランジションなど、それぞれの役割に応じたサウンドUIを構築していただきました。
いくつかのリファレンスを共有したうえで、ツールとしての拡張性や、ワークス全体のトーンを横断できる包括性を意識しながら、多様な表情やリズムを内包できるサウンドUIの設計を前提に進行していただきました。
以下、SKYTOPIA氏のコメント。
様々なモーションがあるデザインのサイトだったので、そこから音を連想してそれぞれカスタムメイドで作りました！何度聞いても耳障りにならない、新たな発見がある音を目指しました。
SKYTOPIA 氏とは、横浜DeNAベイスターズ の B-PARTY 2026 におけるサウンドデザインや、互いの自主企画である SKYTOPIA × TAMURA Ikuho Collaboration Project などを通じて、多くの関わりがありますが、高いクオリティを保ちながら制作を進行されるスピード感や、アイデアの幅広さには、いつも感服しています。
今回のサウンドUIはミニマルなパーツ構成ながらも、多様なアイデアをもとにした緻密な検証を重ねながら進行していただき、大変感謝しています。
まとめ
サイト全体の前提条件の整理から実装まで、約1年をかけて進行しましたが、おふたりの高いスキルセットや自己マネジメント力に支えられ、大きく停滞することもなく、終始スムーズに進行したプロジェクトだったと感じています。
お忙しいなか、最後まで尽力していただいたおふたりには、本当に感謝しています。
このサイトを起点に、自身のキャリアをさらに大きく発展させながら、より強固な活動基盤を築いていきたいと考えています。今後の活動の変遷とともに、ぜひたくさん見て、触っていただけたら嬉しいです。