プロジェクト概要
沖縄の古都・首里を舞台に、史跡、伝統、人、芸術などの魅力を伝える3分番組「時の首里彩画」の公式Webサイト制作プロジェクトです。サイト全体のUI/UXデザインから、HTML/CSSおよびJavaScriptを用いたフロントエンド実装（コーディング）までを一貫して担当しました。番組が持つ上品で穏やかな世界観をWeb上で再現するため、レイアウトにおける「余白」の取り方から、ホバー時やスクロール時の「微細なアニメーション」に至るまで、視覚と操作感の両面からアプローチしています。
基本情報
サイト名：時の首里彩画（ときのすいさいが）
サイト種別: 番組公式サイト / 動画・コンテンツギャラリー
URL：https://tokino-suisaiga.com/
担当領域
Webデザイナー / フロントエンドエンジニア
（UIデザイン / レイアウト設計 / HTML・CSSコーディング / JavaScriptによる各種アニメーション実装）
プロジェクトの目的と課題
-
番組の世界観の体現: 沖縄・首里の歴史や文化を伝える番組のトーンに合わせ、サイト全体に「ゆったりとした時間」や「気品」を感じさせること。
-
没入感を高めるインタラクション: 多数の動画アーカイブや記事コンテンツをグリッド状に並べる中で、ユーザーが直感的に興味を持ち、クリックしたくなる心地よい動線を作ること。
-
デザインと動きの融合: デザインツール上の静的な美しさだけでなく、ブラウザで実際に操作した際のリッチな体験（アニメーション）を実装レベルで両立させること。
施策とこだわったポイント
1. 沖縄の「ゆとり」を感じさせる、計算された余白とレイアウト
首里の持つ優雅さや、沖縄特有のゆったりと流れる時間を表現するため、コンテンツ同士の間に贅沢な「余白」を設けたデザインを採用しました。グリッド状に並ぶ各エピソードのサムネイル画像に対して、上品な明朝体のテキストをゆとりを持って配置することで、ごちゃごちゃとした印象を与えず、一つのアートギャラリーを見ているような洗練された空間を作り出しています。
2. JavaScriptを用いた、没入感を生むホバーエフェクトの実装
各タイルリンク（サムネイル）にカーソルを合わせた際のインタラクションを、JavaScriptを用いて緻密にコーディングしました。ホバー時に背景の写真が「ゆっくりと少しだけ拡大」し、同時に「黒いオーバーレイ（暗転）が外れる（またはかかる）」という繊細な動きを再現しています。これにより、静止画に奥行きと生命感が生まれ、ユーザーを番組の世界へと引き込むリッチな手触りを与えています。
3. サイト全体の空気感を統一するフェード表示
ページ遷移時やスクロール時に、各コンテンツが唐突に表示されるのではなく、「ふわっと表示される」アニメーションを実装しました。番組の穏やかなトーンを損なわないよう、イージング（動きの速度変化）を細かく調整し、サイト全体の挙動から気品を感じ取れるようエンジニアリングの視点からこだわって制作しています。
成果・評価
世界観を崩さない「デザイン×フロントエンド実装」の融合
「沖縄のゆとり」という抽象的なイメージを、余白を活かした静的なデザインとして表現するだけでなく、JavaScriptを活用した動的なアニメーション（ホバーエフェクトやフェード表示）へと落とし込みました。デザインの意図を自らの手で正確にコーディングし、リッチなユーザー体験として完遂できるフロントエンドエンジニア・デザイナーとしての対応力を示す実績です。
