プロジェクト概要
ミスタードーナツとポケモンのコラボレーション企画である「ポケモンドーナツ ネーミング選挙キャンペーン（#新しいドーナツの名前募集チュウ）」の特設ランディングページ（LP）制作プロジェクトです。X（旧Twitter）を用いたユーザー参加型の投票キャンペーンにおいて、ビジュアルデザインの作成からHTML/CSSを用いたフロントエンドのコーディングまでを一貫して担当しました。
基本情報
プロジェクト: ミスタードーナツ×ポケモン キャンペーン特設LP制作
サイト種別: キャンペーン・プロモーション用LP
URL:
（※現在はリニューアルによりページが変更されています）
担当領域
担当領域: Webデザイナー / フロントエンドエンジニア （ビジュアルデザイン / UIレイアウト設計 / HTML・CSSコーディング）
プロジェクトの目的と課題
- 世界観の融合と表現: 「ミスタードーナツ」と「ポケモン」という両社のブランドイメージを損なわず、冬期のキャンペーンにふさわしいワクワク感のあるビジュアルを構築すること。
- フェーズに応じた画面設計: 「投票受付中」「集計中」「結果発表」など、キャンペーンの進行に伴って変化する掲載情報（得票数のグラフや告知バナーなど）を、レイアウトを崩さずに展開できる設計にすること。
- ユーザー参加（投票）の促進: 幅広い年齢層のユーザーが迷わずX（旧Twitter）からハッシュタグ投票を行えるよう、参加手順を視覚的かつ直感的にわかりやすく整理すること。
施策とこだわったポイント
1. IPの魅力を引き立てる、冬期プロモーションのデザイン
クリスマスの時期を見据えた赤色と雪景色をベースカラーに設定し、ピカチュウやプレゼントボックスなどのモチーフを配置しました。子供から大人まで親しみやすいポップなトーン＆マナーでまとめ、大型IPコラボならではの特別感と祝祭感を画面全体で表現しています。
2. 運用と変化を見据えたUIコンポーネントの作成
キャンペーン期間中の情報更新を想定し、得票状況を示す棒グラフや、「現在集計チュウ！」「結果発表！！」などのステータスバナーをパーツ単位でデザイン・実装しました。フェーズが切り替わってもページ全体の統一感が保たれるよう、あらかじめ運用要件を考慮したレイアウト設計を行っています。
3. 迷わせない導線設計と正確なコーディング
最も重要なコンバージョンである「SNSからの投票」を促すため、ステップ図（①フォロー ②投稿 ③完了）を用いて参加方法を視覚化しました。デザイン作成後はHTML/CSSを用いて、スマートフォン・PCのどちらから閲覧・操作しても、タップやテキスト入力がスムーズに行えるよう正確なコーディングを行っています。
成果・評価
変化する運用要件に耐えうるデザインと実装力
両ブランドの世界観を反映した魅力的なグラフィックを作成するだけでなく、時間経過とともに切り替わるキャンペーン特有の要件を満たすUI設計とコーディングを完遂しました。見栄えの良さと、実際の運用・ユーザー行動（投票）を見据えた実務的なフロントエンド制作能力を示す実績です。
