NONAME Produce（n2p）では、デジタルプロモーションに関するさまざまな制作を行っています。今回は、プロモーションのなかでキャンペーンサイトを制作するなかでエンジニアがどのように活躍しているか、実際の案件事例とあわせてご紹介します。

今回紹介する事例について

2023年の夏頃に実施された、アイドルプロデュースゲーム『あんさんぶるスターズ！！』の絵はがき合成＆投稿キャンペーン。n2pでは仕様策定から、デザイン、コーディング、システム制作までを担当いたしました。

▼今回の制作実績を詳しくチェック

https://n2p.co.jp/works/ensemblestars/

▼制作実績一覧はこちら

https://n2p.co.jp/works/

受注からリリースまでの流れ

クライアントから案件の発注が確定後、スケジュール管理やサイト構成の作成をディレクターが行います。デザインが完成後、エンジニアの業務がスタートします。

1.コーディング制作

本案件のコーディング制作は、FigmaやXD、Photoshopで制作されたデザインとユーザーフロー図を元に、外部のフロントコーダーと連携する形で進行を行いました。

基本的にディレクターと連携を取る形で進行。本案件の特徴でもある画像合成は、サーバサイド言語を使用せず、フロントエンド言語で完結させました。

2.システム制作

主にスマートフォンでの合成がスムーズになるよう、Javascriptを多用したブラウザベースでのシステム構築。データベース処理やサーバーサイドプログラム合成処理がなく、ブラウザ完結でスムーズな合成ができる仕様となっています。

◾️使用言語・ツール

言語：HTML/CSS/SCSS/JavaScript

API：Canvas

ライブラリ：Gulp

ソースコード管理ツール：Git

弊社はスキルの高い社外のエンジニアとの関係も厚いため、それぞれの知見が豊富なベテランエンジニアに相談しながら制作に取り組めます。

3.デバッグ／テスト

サイトの要件に対応すべく、ディレクターを中心に、エンジニア・デザイナーなど複数人で行うことでクオリティを担保しています。

本案件では、エンドクライアントの意向で、画像合成後にweb share APIを使用してTwitterへ画像投稿させる仕様を追加実装いたしました。

4.リリース

インフラエンジニアがBasic認証を解除してサイトを公開後、他エンジニアやディレクターがサイトを確認します。リリース後、インフラエンジニアはサーバでエラーなどがでてないかしばらく監視します。

担当エンジニアのコメント

アクセスが多いと予想される案件でしたので、どのくらいのスペックのサーバを準備するかに時間がかかり苦労しました。また、弊社として初めてのフロントのみで制作する画像合成を制作したため、バックエンド側で処理するよりも、サイトがスムーズで早いことを実感できました。

今回は、n2pで働くエンジニアがキャンペーンサイト制作でどのように動いているのかをご紹介しました。n2pでは、未経験から転身した若手エンジニアも大活躍中です。みなさんのご応募お待ちしております。

▼【ポテンシャル採用】設計から開発まで一貫して担当したいエンジニア募集中！

https://www.wantedly.com/projects/1461168