モンスト特設サイト制作におけるエンジニアGの取り組み

━━━━━━━━━━━━━━━━━━━━━━━━━━━━
モンスト特設サイトの制作秘話を公開！
ユーザーサプライズファーストを大事に！情報漏洩はNG！
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【出演】
福島 尚貴 / Naoki Fukushima
デザイン本部 テクニカルデザイン室 エンジニアリンググループ

▼エンジニアリンググループのCocoda記事
エンジニア視点で取り組む、デザイン組織のコミュニケーション課題解決
https://cocoda.design/umesan/p/p2d8d9f2af786
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
◇◆◇ Information ◇◆◇
note | MIXI DESIGN
https://note.com/mixi_design/
Cocoda | MIXI DESIGN
https://cocoda.design/teams/mixi-design
Youtube | MIXI TECH&DESIGN
https://www.youtube.com/@mixi_developers
ミクデザキャンプ
https://mixi-design-camp.mixi.co.jp/
Slide (SpeakerDeck)
https://speakerdeck.com/mixi_design/

採用情報
https://mixigroup-recruit.mixi.co.jp/
Webサイト
https://mixi.co.jp/

Transcript

1. デザイン本部テクニカルデザイン室エンジニアリングG リーダー/フロントエンドエンジニア 2015年9⽉に⼊社 福島 尚貴
2. 強みとするWebフロントエンド制作だけでなく、 サービスの⽴ち上げやプロジェクトを進める上で必要となってくる、 企画‧ディレクション‧デザイン‧QA‧リリース‧運⽤、といった 全ての制作過程で発⽣する技術課題をエンジニアリングの⼒で解決する
3. 投資事業 デザイン本部テクニカルデザイン室エンジニアリングG (全社横断型組織) デジタルエンターテインメント スポーツ ライフスタイル
4. WebView アプリ/ツール 公式サイト 特設サイト
6. 主にモンストにおける限定の新キャラクターや周年‧シーズナルのキャン ペーンの時に実施するプロモーションと連動したサイト。 他にもリアルイベントの情報を集約したサイトやキャラクター投票などが あります。 特設サイトとは?
7.  テンプレートと  ツールについて
8.  テンプレート
9.  時間と  クオリティの担保
10.  時間 • より短時間でサイトの制作が可能 • プロモーションプラン‧コミュニケーションプランに基づいて 制作‧運⽤
11. モンストニュースで情報解禁 公式サイト‧公式X‧特設サイトで情報を公開
12.  クオリティ • グループ内でコードに対する共通認識ができる • 外注した時もテンプレートのルールに基づいて実装できる • サイトでよく利⽤するUIの実装に対してコストをかけなくて良い • QAで判明した不具合や、サイト制作中に発⽣した課題を反映できる
13. 2025/4 使⽤技術 説明 タスクランナー テンプレートエンジン スタイルシート JavaScript 2D描画ライブラリ 使⽤技術 説明 フレームワーク スタイルシート TypeScript 2D描画ライブラリ
14. コードの品質と一貫性 使⽤技術 名称 説明 EditorConfig インデントのスタイル、改⾏コード、 ファイル末尾の改⾏ Prettier セミコロンの有無、インデント幅、 クォートの種類など、⾒た⽬の統⼀ Stylelint Sassの構⽂エラーやスタイルルールの 設定と違反の検出 ESLint JS/TSの構⽂チェックやバグ検出
16. アプリ起動ボタン SNSシェア モーダル ⾳声再⽣ YouTube再⽣モーダル サーバー時間の取得 ナビゲーション スクロール時の処理 Swiper アニメーション アコーディオン‧トグル オリジナルフッター
17. アプリ起動ボタン SP PC • ユーザーエージェントを使⽤し、 SP、タブレット（iOSとAndroid） とPCで表⽰や遷移先URLの分岐。 • SPとタブレットは「インストー ル」と「アプリ起動」どちらのボ タンも⽤意。PCは「インストー ル」のみ⽤意。
18. モーダル • モーダルに必要な機能（モーダル 外背景押下で閉じる、モーダルエ リアのみスクロール含めて）実装 • 「esc」キー押下で閉じる • WAI-ARIAの制御
19. YouTubeモーダル • YouTubeの動画IDを設定すること で使い回しができるよう実装。 • 動画のサムネイルもYouTubeのサ ムネイルのURLを参照
20. SNSシェア • X、LINE、Facebookそれぞれシェ ア⽤リンクを設定しなくても必要 な情報（Xならテキスト‧ハッシュ タグ‧URL）を設定することで シェアができる機能。
21. ⾳声再⽣ • JavaScriptのオーディオライブラ リ、howler.jsを使⽤して実装
22. オリジナルフッター • Astroテンプレート時にデザインを ⾒直しマージンやコンテンツの並 び順を変更 • ゲームプレイエリアはPixiJSを利⽤ して実装
23. アニメーション • スクロール時画⾯侵⼊したら発⽕ する処理に合わせアニメーション をいくつか⽤意。オブジェクトが ⼤から⼩へ。下から上へなど。 • ステージクリア時のボール絵のア ニメーションを⽤意。
24.  ツール
25.  情報漏洩への取り組み
26. モンストニュースで情報解禁 公式サイト‧公式X‧特設サイトで情報を公開
27. 画像確認ツール
28. description確認ツール
30. 「デザイン組織 コミュニケーション課題」 で検索