プロジェクト概要
沖縄本島北部で開催された芸術祭「やんばるアートフェスティバル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構築）
プロジェクトの目的と課題
-
複雑だった求人検索UIの改善: 求職者が希望の条件（免許、車種、エリアなど）で直感的に検索しづらかったUIを解消し、スムーズで迷わない形へアップデートすること。
-
ビジュアルの刷新：簡素で時代遅れな印象を払拭し、若手からベテランまで幅広い求職者の目を惹く、現代風のキャッチーで親しみやすいデザインに刷新すること。
-
ユーザーの離脱防止と応募獲得: デザインとUIの最適化によりサイト内の回遊性を高め、最終的な求人応募（コンバージョン）へ繋げるための強力な営業・採用ツールへと変貌させること。
施策とこだわったポイント
1. 8の倍数デザインを厳格に守るピクセルパーフェクトコーディング
デザイナーが意図した「余白やフォントサイズがすべて8の倍数で構成された規則的で美しいレイアウト」を崩さないよう、ブラウザ間の差異に配慮しながらピクセル単位で正確にコーディングを行いました。細部のマージンやパディングを徹底的に管理し、提供されたデザインカンプ通りのクオリティをフロントエンドで再現しています。
2. JavaScriptによる、アーティスト情報のランダム表示実装
特定のアーティストに表示順が偏らないよう、RECOMMENDセクションではJavaScriptを用いてロード時に表示順をランダムにシャッフルする仕様を実装しました。DOM要素を取得して配列化し、順番を入れ替えてから再描画するロジックを組む際、レガシーブラウザ（IE）でも正常に動作するよう互換性を意識したコード記述を行っています。
3. 更新性を担保するWordPress構築
会期中に増えるお知らせや、多数参加するアーティストの情報を運営側がスムーズに更新できるよう、WordPressを導入してCMS化しました。更新頻度の高いコンテンツを適切にカスタム投稿タイプなどに切り分け、運用しやすい裏側の仕組みを整えています。
成果・評価
デザインの意図を正確なコードで具現化する実装力
「8の倍数による規則的なデザイン」というルールをはじめデザインデータに忠実にピクセルパーフェクトでコーディングしました。見た目の再現性の高さだけでなく、要件に合わせたJavaScriptによる動的処理（ランダム表示）の実装や、WordPressによるCMSの構築まで、フロントエンドエンジニアとしての実装力を示す実績となります。
