WEBアプリケーションでオンラインコンテストを実現可能に

DUAL DESIGN DEPT. では理美容業界最大級の組織「SPC GLOBAL」が主催するヘアショーコンテスト「STYLING COLLECTION 2021 TOKAI」の企画・制作を担当しました。

弊社では例年ヘアショーコンテストを企画から運営までトータルでご支援させていただいていますが、本案件ではコロナ禍の対応としてオンラインコンテストとして実施されました。

WEBアプリケーションでオンラインコンテストを実現可能に

例年リアルイベントとして開催されるスタイリングコレクションですが、本案件ではオンラインイベントとしての開催になりました。

作品応募・審査・審査結果公開・表彰まで全てオンラインに

本案件のアプリでは、サロンによる作品応募や応募管理、応募締め切り後の審査、審査結果の公開と表彰動画による表彰まで、ヘアショーコンストの全ての流れをWEBアプリケーションとコンテンツで完結させる必要がありました。

そのため静的なWEBサイトではなく、WEBアプリケーションとして応募者と管理者がイベント通して相互に作用できるよう設計しました。

イベントの応募から審査結果、表彰まで一貫して関係者が体験できるよう、より配所したアプリケーション設計が求められました。

Vue、Nuxtjs、Firebaseで柔軟にスケーリング

今回の案件ではNuxtjsを用いてSPAとしてアプリを開発しました。

SPA（Single Page Application）は動作が軽いのが特徴で、ユーザビリティに優れていますがSEOに弱いのが難点です。

そのためトップページは静的ページとして出力し、アプリケーションはSPAとすることでSEOに対応しました。

またWEBアプリのホスティングにはGoogleの提供するBaaS、Firebaseを使いました。

Firebaseを使うことで、価格を抑えてスケールすることができ、コンテストの流れに合わせて柔軟に対応できます。

またユーザー管理やログイン認証も提供されているため、開発工数を抑えて対応できました。

サロンマイページ、主催者管理ページ、ユーザーページでトータルに管理

今回の開発では、コンテスト作品の応募状況を管理するサロン側の管理ページ、また運営事務局による全体管理ページ、また一般ユーザー側のユーザーページの３側面を開発しました。

サロンマイページではCSVファイルによるコンテスト応募の一括登録機能を実装し、まとめて応募状況を登録できるよう配慮しました。

また応募状況に合わせてQRコードを発行し、それぞれLINE公式アカウントで対応できるよう管理機能も独自に実装しました。

主催者管理ページでは、全ての応募者のCSVエクスポート機能や基本的な追加、削除といった機能を最低限実装し、開発コストを抑えました。

表彰結果を管理するユーザーページでは、大量の作品画像を扱う必要があったため、画像の遅延読み込みの実装でページ読み込み時間の短縮と、コスト削減に対応しました。

表彰動画制作でユーザー体験を最大限に演出

スタイリングコレクションでは例年、コンテスト作品の表彰を華やかな映像として製作し、より盛り上がるよう演出しており、今回のオンラインコンテストでも表彰演出動画を製作しました。

製作した表彰動画は審査結果ページに掲載し、華やかなユーザー体験をオンラインでも最大限に演出しました。

最後に

DUAL DESIGN DEPT. では、WEB開発を用いたオンラインコンテスト開催を承っております。

またWEB開発においてもFirebaseやNuxtといったモダンな技術を採用することで要件や予算に合わせて柔軟に対応することができます。

ぜひ一度、お気軽にお問い合わせください。