プロジェクト概要と役割

アーティスト「空山基（SORAYAMA）」氏の過去最大規模となる回顧展『SORAYAMA 光・透明・反射 －TOKYO－』の公式プロモーションサイトです。展覧会のアート性をWeb上で表現し、国内外のターゲットユーザー（空山基ファン、アート愛好家、一般来場希望者）に対して開催情報や魅力を発信することを目的としています。

私はこのプロジェクトにおいて、フロントエンド開発全般を担当しました。HTML構造設計、CSS設計、JavaScriptによるインタラクション実装、そしてパフォーマンスチューニングまでを一貫して手がけました。

採用した技術スタック

• HTML5
• CSS3 (FLOCSS/BEM規約に基づく設計)
• JavaScript (ES Modules)
• Google Tag Manager (GTM)

特定のフレームワークに依存せず、セマンティックなHTMLと最新のCSS、モジュール化されたJavaScriptを組み合わせ、軽量かつ保守性の高いフロントエンド環境を構築しました。

私がこだわった設計と実装

保守性と拡張性を考慮したCSS設計

本プロジェクトでは、CSS設計手法としてFLOCSS（またはBEM）の規約を厳格に適用しました。クラス名を以下のように責務で分割しています。

• Project (p-): p-headerやp-modalなど、プロジェクト固有のUIコンポーネント。
• Component (c-): c-titleやc-buttonなど、サイト全体で再利用可能な最小単位のUI。
• Layout (l-): l-containerなど、ページのレイアウト構造を定義するコンポーネント。

この設計により、スタイルの競合を防ぎ、将来的なデザイン変更やコンポーネントの追加・修正にも迅速に対応できる、破綻しにくいコードベースを実現しました。

ユーザー体験を高めるUI/UX設計とアクセシビリティ

展覧会の世界観を伝えるため、リッチなビジュアル体験とユーザビリティの両立を目指しました。

• オープニングアニメーション: CSSアニメーションを駆使し、サイト訪問時の期待感を高めるオープニングシーケンスを実装しました。
• セマンティックHTML: <main>, <section>, <nav>などのHTMLタグを適切に使用し、マシンリーダブル（機械可読）な構造を設計しました。
• WAI-ARIA対応: ハンバーガーメニューのボタンにaria-label="メニューを開く"を設定するなど、スクリーンリーダー利用者に配慮し、アクセシビリティ（a11y）を確保しました。
• インタラクション: ハンバーガーメニューやモーダルウィンドウなど、複雑な情報を整理して表示するためのインタラクティブなUIを、ES Modulesを活用したJavaScriptで実装しました。

パフォーマンスへの配慮と画像最適化

アート作品を扱うサイトとしてビジュアル品質は最重要ですが、それによる表示速度の低下は許容されません。以下の点でパフォーマンスを最適化しました。

• レスポンシブイメージ: <picture>タグを全面的に採用し、スマートフォンからPCまで、デバイスの画面サイズや解像度に応じて最適な画像（通常画像と@2xの高解像度画像）を配信するよう設計しました。
• LCPの最適化: ページの体感速度に最も影響するLCP（Largest Contentful Paint）を改善するため、オープニングで必須となる画像には意図的にloading="eager"を指定し、ブラウザによる早期読み込みを促しました。
• スクロール制御: ページリロード時に前回閲覧した位置が表示されることを防ぐため、インラインJavaScriptを用いてスクロール位置を即座にトップへリセットし、常に意図した状態（オープニング）からサイトが開始されるよう制御しました。