MILEZ

俳優・岡田准一が主宰する、日本の伝統・文化・技術を国内外へ発信するメディアプロジェクト「MILEZ」のWebサイト制作を担当しました。

クライアントとの窓口から予算管理・スケジュール調整・テクニカルディレクションまでをワンストップで担い、デザイン・フロントエンド・サウンドデザインはそれぞれ専門のクリエイターにディレクションしながら、バックエンド実装と運用保守は自ら手がけています。

単なるエディトリアルサイトではなく、「記事を読む」という行為そのものを映像体験に近づけることをコンセプトに設計しました。WebGLを活用した流体的なアニメーションが全体を貫き、訪問者はページ遷移や記事閲覧の中で水のような滑らかな動きを体験します。さらに、記事ごとにその場所や題材の環境音が自動再生される仕組みを実装し、視覚と聴覚を組み合わせた没入感のある閲覧体験を実現しています。

記事詳細では、写真や映像を画面いっぱいに大きく見せながら、パララックスや横スクロール、WebGLによるフィルター表現を重ねることで、ひとつの記事そのものが流れる映像作品のように展開します。

記事一覧は、サムネイルが円環状に並んで無限に回転し続けるインターフェースとして設計しました。リストの「端」を感じさせず、ユーザーは回し続けるだけで次々と記事に出会えます。一覧を「探す」ではなく「巡る」体験に変えることで、トップで提示した映像的な没入感を回遊導線にも引き継いでいます。

サイト全体の背景素材として、京都・西陣を拠点とする唐紙作家・嘉戸浩のスタジオかみ添（kamisoe）の唐紙を起用しました。伝統的な型押し技法で制作された和紙のテクスチャが、デジタルな映像体験に静謐な奥行きをもたらしています。和紙の撮影は写真家・田巻海（Kai Tamaki）が担当しました。

クライアント自身がフィールドに出て撮影した写真・動画・音声が記事の核となるため、高品質なメディアをいかにストレスなく届けるかが技術的な主題でした。動画のスムーズな配信を担保しつつ、モバイル回線を含むあらゆる通信環境で快適に動作するよう、アセットの圧縮・遅延読み込み・プログレッシブレンダリングを組み合わせた緻密な最適化を行っています。

Astro.js をベースに、コンテンツ管理には microCMS を採用したヘッドレス構成です。コンテンツはビルド時に microCMS から取得して静的サイトとして生成し、Cloudflare Pages の CDN から配信しています。コンテンツが更新されると webhook で GitHub Actions が起動し、ビルドからデプロイまで自動で完了するため、編集側の操作性と開発側の柔軟性を両立しました。

静的配信を前提とした構成は、WebGL や高品質メディアを多用する本サイトのパフォーマンスにも直結しています。リクエストごとのサーバー処理を介さず CDN エッジから即座に配信できるため、重い表現を載せても初期表示を軽く保てる土台になっています。

サイトの更新やプロジェクトの動きを、関心を持ってくれた読者へ継続的に届けるため、ニュースレターの仕組みも実装しました。メール配信には Resend を採用し、サイト内の購読フォームから登録された読者をそのままリストとして管理しています。

編集側は管理画面で本文を用意するだけでニュースレターを届けられ、開発側の手を介さず運用できる形にしました。送信処理やリスト管理を Resend に寄せることで、到達率やインフラの保守を自前で抱え込まずに、継続的な発信を無理なく続けられる構成にしています。