プロジェクト概要
沖縄本島北部で開催された芸術祭「やんばるアートフェスティバル2021」の公式サイト制作プロジェクトです。提供されたデザインデータをもとに、フロントエンドのコーディング（HTML/CSS/jQuery）およびWordPressを用いたCMS構築を担当しました。規則的な余白設計（8の倍数ルール）の意図を読み取り、デザインをブラウザ上で正確に再現するピクセルパーフェクトな実装を行っています。
基本情報
サイト名: やんばるアートフェスティバル2021
サイト名: やんばるアートフェスティバル2020
URL:
https://2021.yambaru-artfes.jp/
https://2020.yambaru-artfes.jp/
担当領域
フロントエンドエンジニア（HTML・CSS・jQueryコーディング / WordPress CMS構築）
プロジェクトの目的と課題
-
デザインの意図を汲む正確な実装: デザイナーが意図した「8の倍数ルール」に基づく緻密なレイアウトを、ブラウザ間の差異に配慮しながら寸分違わず再現すること。
-
多岐にわたる情報の整理とUI実装: 多数のアーティスト情報やコンテンツが混在する中で、ユーザーが迷わず目的の情報へアクセスできる操作性の高いUI（タブ切り替えなど）を実装すること。
-
運営側の更新性を考慮したシステム化: 会期中に頻繁に発生するお知らせやアーティスト情報の追加に備え、HTMLの知識がない運営スタッフでもスムーズに情報発信ができる運用基盤（CMS）を構築すること。
施策とこだわったポイント
1. 8の倍数デザインを厳格に守るピクセルパーフェクトコーディング
デザイナーが意図した「余白やフォントサイズがすべて8の倍数で構成された規則的で美しいレイアウト」を崩さないよう、ブラウザ間の差異に配慮しながらピクセル単位で正確にコーディングを行いました。細部のマージンやパディングを徹底的に管理し、提供されたデザインカンプ通りのクオリティをフロントエンドで再現しています。
2. JavaScriptによる、アーティスト情報のランダム表示実装
特定のアーティストに表示順が偏らないよう、RECOMMENDセクションではJavaScriptを用いてロード時に表示順をランダムにシャッフルする仕様を実装しました。DOM要素を取得して配列化し、順番を入れ替えてから再描画するロジックを組む際、レガシーブラウザ（IE）でも正常に動作するよう互換性を意識したコード記述を行っています。
3. 更新性を担保するWordPress構築
会期中に増えるお知らせや、多数参加するアーティストの情報を運営側がスムーズに更新できるよう、WordPressを導入してCMS化しました。更新頻度の高いコンテンツを適切にカスタム投稿タイプなどに切り分け、運用しやすい裏側の仕組みを整えています。
成果・評価
デザインの意図を正確なコードで具現化する実装力
「8の倍数による規則的なデザイン」というルールをはじめデザインデータに忠実にピクセルパーフェクトでコーディングしました。見た目の再現性の高さだけでなく、要件に合わせたJavaScriptによる動的処理（ランダム表示）の実装や、WordPressによるCMSの構築まで、フロントエンドエンジニアとしての実装力を示す実績となります。
