グラフィックデザイナー LOW sek vai 氏のデザインスタジオ「quarry’24/pangolin」の公式ウェブサイトを制作しました。フロントエンドの実装と、インタラクションのデザインを担当しています。 クライアントからは、スタジオの全仕事を整理する「アーカイブ」としての役割と、プレゼンテーションの場でもそのまま使えるようなツールとしての機能が求められました。 提供されたデザイン案は、一般的なポートフォリオサイトというよりも、1枚の長いドキュメントのように情報が縦に連なる独特な構成でした。その「あえて距離感を持たせるようなレイアウト」を、Web上でどう正しく機能させるかが大きな課題でした。 技術面では、クライアント自身が日常的にコンテンツを更新できるよう Sanity を導入し、Next.js と組み合わせることで高速で滑らかな体験を目指しました。サイトの構造は書籍をヒントに、「List（索引）」と「Image（一覧）」という2つのモードで行き来できるように設計しています。モードを切り替えても直前に見ていた作品の位置が引き継がれる仕組みを実装し、スクロールの手間を省いて閲覧のリズムを崩さない工夫をしました。また、マウスホバーでセリフ体からサンセリフ体へ切り替わる仕掛けも、レイアウトに影響を与えないよう実装することで、静かな画面の中に程よいニュアンスを与えています。デザイナーの独自のビジュアル表現を尊重しながら、実装者として使い心地の細部を整理していくことで、スタジオの思想を体現したサイトに仕上げました。