ASPaC
ASPaC 様
この記事では、アジア学生パッケージデザインコンペティション「ASPaC（アスパック）」の公式Webサイト制作事例をご紹介します。ASPaCは、日本・韓国・中国・タイ・インドネシア・台湾など、アジア各国のデザインを学ぶ学生を対象とした国際的なパッケージデザインコンテストです。
| クライアント | 一般社団法人アスパック協会 様 |
| 業種 | 協会・国際コンペティション運営 |
| 制作期間 | 1ヶ月 |
| サイトURL | https://aspac.jp/（※現在はドメイン移管により閲覧不可） |
| 制作方法 | HTML / CSS / JavaScript（フルコーディング） |
| 担当範囲 | コーディング（HTML/CSS/JavaScript）・アニメーション制作 |
プロジェクト概要
ASPaC（Asia Student Package Design Competition／アジア学生パッケージデザインコンペティション）は、2010年に日本と韓国でスタートした、デザインを学ぶ学生を対象とした国際的なパッケージデザインコンテストです。独立行政法人国際交流基金と一般社団法人アスパック協会の共催により、「アジア各国でデザインを学ぶ学生の国際交流を通じて、未来を拓く若い匠のデザイン力と世界に羽ばたく力を育成する」ことを目的として運営されています。
参加国は日本、韓国、中国、タイ、インドネシア、台湾など年々拡大し、応募総数は3,000点を超える規模に成長。各国・地域の予選を経て選出された作品がアジア決勝に進み、国際的な審査員による厳正な審査のもと、大賞・金賞・銀賞などが決定されます。受賞作品は東京や大阪での展示会を経て、アジア各国を巡回展示されます。
今回のプロジェクトでは、このASPaCの公式Webサイトのフロントエンド開発を担当。デザインデータをもとに、HTML/CSS/JavaScriptによるコーディングとアニメーション実装を行いました。
コンセプト
「国際的なデザインコンペティションにふさわしい、洗練されたWeb体験」
ASPaCは、アジア各国の学生が参加する国際コンペティションです。そのため、Webサイトには「国際的な信頼感」と「デザインコンペティションならではの美的センス」の両立が求められました。
また、応募者（学生）、審査員、協賛企業、メディアなど、多様なステークホルダーが訪れるサイトであるため、それぞれが必要な情報にスムーズにアクセスできる構造設計も重要なポイントでした。
デザイン・実装のポイント
デザインの意図を忠実に再現するコーディング
本案件はコーディング専任での参加であり、デザインは別の制作会社が担当しています。そのため、デザイナーの意図を正確に理解し、ピクセルパーフェクトな実装を心がけました。特にタイポグラフィや余白のバランスは、デザインコンペティションのサイトとして妥協が許されない部分であり、細部まで丁寧に調整しています。
アニメーションによる上質な体験演出
静的なHTMLサイトに動きを加えることで、訪問者に印象的な体験を提供しました。ページ遷移時のトランジション、スクロールに連動したフェードイン、ホバーエフェクトなど、JavaScriptを活用したアニメーションを随所に実装。過剰な演出は避けつつ、デザインコンペティションのサイトにふさわしい洗練された動きを追求しました。
多言語・多国籍を意識した設計
ASPaCはアジア各国から参加者が集まる国際イベントです。サイト構造は将来的な多言語展開を見据えた設計とし、テキストの長さが変わっても崩れにくいレイアウトを採用しました。また、画像やアイコンを効果的に活用することで、言語を超えた直感的な理解を促進しています。
受賞作品ギャラリーの実装
コンペティションサイトの核となるのは、受賞作品のギャラリー展示です。パッケージデザインの魅力が最大限に伝わるよう、画像を大きく表示し、作品の詳細情報とともに閲覧できる構成としました。年度別・賞別のフィルタリング機能により、過去の受賞作品も容易にアクセスできる設計としています。
レスポンシブ対応
PC、タブレット、スマートフォンなど、あらゆるデバイスで快適に閲覧できるレスポンシブデザインを実装。特にスマートフォンでは、応募要項やスケジュールなど、学生が外出先でも確認しやすい情報設計を意識しました。
制作を振り返って
国際的なデザインコンペティションのサイト制作に携われたことは、非常に貴重な経験でした。国際交流基金や日本パッケージデザイン協会といった権威ある団体が関わるプロジェクトであり、品質に対する要求も高いものでした。
コーディング専任として参加したプロジェクトでしたが、デザイナーとの連携を密に取りながら、デザインの意図を最大限に活かした実装ができたと考えています。特にアニメーション表現においては、デザインコンペティションのサイトにふさわしい「上品さ」と「印象の強さ」のバランスを追求しました。
アジア各国の学生たちが目にするサイトであり、彼らにとって「このコンペティションに挑戦してみたい」と思わせる魅力的なWeb体験を提供できていれば幸いです。
ホームページ制作をお考えの方へ
私たちがお手伝いできること- 地元のお客様に届く、魅力が伝わるホームページ制作
- 新規オープン・リニューアルの集客強化
- デザインからコーディングまでワンストップ対応
- 公開後の更新・運用サポート
地域密着の対応はもちろん、全国どこからでもご相談いただけます。 まずはお気軽にご相談ください
こちらのプロジェクトに関わった人
tkmt design 合同会社について
tkmt design合同会社は、神奈川県川崎市宮前区を拠点とするWeb制作会社です。ホームページ制作・Webデザイン・グラフィックデザイン・映像制作を通じて、地域の中小企業や店舗のビジネスをサポートしています。
私たちの強みは、企画・デザインからコーディング・公開後の運用まで、ワンストップで対応できること。お客様のご要望を直接お伺いし、スピーディーかつ柔軟に形にしていきます。「大手に頼むほどではないけど、しっかりしたものを作りたい」——そんなお客様にこそ、私たちのサービスが最適です。
川崎市をはじめ、横浜市・東京都内など近隣エリアのお客様を中心に、オンラインでの対応により全国からのご依頼も承っております。
私たちが大切にしていること
「つくることが好き」——それが私たちの原点です。
ユーザーにとって使いやすく、クライアントのビジネスに貢献するWebサイトを。そして、地元・川崎から価値あるクリエイティブを届けていきたい。小さな会社だからこそ、一つひとつの案件に丁寧に向き合い、大きな成果を生み出すことを目指しています。
川崎市のホームページ制作 対応エリア
tkmt designは川崎市宮前区を拠点に、
川崎市全域および周辺地域のお客様にホームページ制作サービスを提供しています。
神奈川県内・東京都内はもちろん、全国対応もさせていただいております。
川崎市
- 宮前区（宮前平、宮崎、鷺沼、土橋、馬絹、菅生、有馬、東有馬、犬蔵など）
- 高津区（溝の口、高津、久本、二子、坂戸、末長、久地など）
- 中原区（武蔵小杉、新丸子、元住吉、平間、丸子通など）
- 多摩区（登戸、向ヶ丘遊園、生田、読売ランド前など）
- 麻生区（新百合ヶ丘、柿生、百合ヶ丘、栗平など）
- 幸区（川崎、鹿島田、新川崎など）
- 川崎区（川崎駅周辺、京急川崎など）
横浜市
青葉区、都筑区、港北区、緑区など
東京都
世田谷区、狛江市、調布市、町田市、稲城市など
その他
オンラインでのお打ち合わせにより、 神奈川県内・東京都内はもちろん、全国対応も可能です。