コンタクトレンズ洗浄液メーカーキャンペーン｜応募フォーム

コンタクトレンズ洗浄液メーカーのキャンペーンにおいて、ユーザーが購入商品を選択し、レシートをアップロードし、ポイントの獲得・賞品応募まで進める一連の応募フォームデザインを担当しました。

単一画面のデザインではなく、商品選択・レシート投稿・ポイント付与・賞品選択・応募完了までの体験全体をスマートフォン上で成立させることを意識して設計しています。

応募に必要な操作が複数ある中でも、ユーザーが迷わず進めること、現在地を把握できること、操作に対する結果が分かりやすいことを重視しました。

制作目的

キャンペーン参加ユーザーが、購入した商品の登録から応募完了までをスムーズに進められる応募フォームを設計することを目的としました。

単に必要情報を入力してもらうだけでなく、「何をすれば応募できるのか」が一画面ごとに分かるUIにすることで、途中離脱を防ぎながら応募完了へ導くことを目指しました。

課題

今回のフローでは、一般的な入力フォームとは異なり、

• ポイント獲得フロー
  • 購入商品の選択
  • レシート画像のアップロード
  • ポイント獲得
• 商品の応募フロー
  • 賞品の選択
  • 応募完了確認

といった大きく分けて2つのユーザーフローが発生します。

工程が増えるほど、ユーザーにとっては「今どの段階にいるのか」「次に何をすればよいのか」が分かりにくくなり、離脱につながる可能性があります。

また、キャンペーン特有の仕組みとして、ポイントの獲得・保有・消費といった状態変化もあるため、単に画面を並べるのではなく、ユーザーの状態に応じて必要な情報と行動を整理することが課題でした。

キャンペーン対象商品を購入し、スマートフォンから応募を行う一般ユーザーを想定しています。

Webサービスやキャンペーン応募に慣れている人だけでなく、初めて利用する人でも、画面を順番に見ていくだけで応募を進められることを重視しました。

特にスマートフォン利用を前提とし、限られた画面サイズの中でも情報が整理され、ボタンや選択肢の役割が直感的に分かるUIを意識しています。

キャンペーン要件をもとに、応募導線全体の設計からUIデザイン、画面遷移整理までを担当しました。

• 応募フローの整理
• フレームワーク作成
• フォームUIデザイン
• レシートアップロード導線の設計
• ポイント獲得・賞品応募フローの設計
• 画面遷移の整理
• 修正・調整対応

レシート登録の流れ

ドラッグで動かし、画像を押すと拡大します

応募の流れ

ドラッグで動かし、画像を押すと拡大します

応募フォームではなく「応募体験」全体を設計する

今回の制作では、各画面を個別に整えるのではなく、ユーザーがキャンペーンへ参加してから応募を完了するまでを一つの体験として捉えました。

商品選択、レシート登録、ポイント獲得、賞品選択、応募完了まで、それぞれの画面で

「今何をしているのか」
「次に何をすればよいのか」
「この操作によって何が起きるのか」

が分かることを意識しています。

また、通常のフォーム入力だけでなく、画像アップロードやポイント利用など、ユーザーにとって理解負荷の高い操作も含まれるため、一画面ごとの役割を明確に分けることを重視しました。

01｜工程ごとに役割を分け、迷いを減らす

複数の操作を一画面に詰め込むのではなく、商品選択・レシート登録・賞品選択など、役割ごとに画面を分けて整理しました。

これにより、ユーザーが一度に理解すべき情報量を抑えながら、順番に進める構成にしています。

一つひとつの画面で求める行動を明確にすることで、操作への迷いを減らすことを意識しました。

02｜現在地が分かるUIで応募フローを可視化する

キャンペーン応募では、完了までの流れが見えないと離脱につながりやすくなります。

そのため、賞品応募のステップや、進行状況が分かる表示を取り入れ、ユーザーが自分の現在地を把握しやすいUIを設計しました。

「あと何ステップで完了するのか」が分かることで、操作に対する心理的負担を軽減することを狙っています。

03｜レシートアップロードの不安を軽減する

画像アップロードは、入力フォームの中でも特にエラーや不安が発生しやすい工程です。

そのため、レシート登録では、アップロード操作・確認・再登録といった行動を整理し、ユーザーが「正しく登録できたか」を確認しながら進められるよう設計しました。

アップロード後の状態変化が分かるようにすることで、単に画像を送るだけでなく、登録結果が理解できる体験を意識しています。

04｜ポイント獲得と賞品応募の関係を分かりやすくする

今回のキャンペーンでは、購入や登録の結果としてポイントが付与され、そのポイントを使って賞品へ応募する流れが含まれていました。

このような仕組みは、UI上で整理されていないと、ユーザーが「今持っているポイント数」「どの賞品に応募できるのか」を理解しにくくなります。

そのため、保有ポイント・必要ポイント・応募可能な賞品の関係が画面上で把握しやすくなるよう構成し、応募条件と行動の関係を視覚的に整理することを意識しました。

05｜ブランドイメージに合わせたUIトーンを整える

コンタクトレンズ洗浄液という商材の特性に合わせ、清潔感・やわらかさ・安心感を感じられるトーンでUIを設計しました。

ブルーを基調としたカラーリングや、丸みのあるボタン・やさしいグラデーションを用いることで、機能性だけでなく、ブランドとの一貫性も持たせています。

情報量の多い画面でも圧迫感が出すぎないよう、視認性と親しみやすさのバランスを意識しました。

06｜状態変化や例外まで含めて画面を整理する

応募フローでは、理想的な遷移だけでなく、エラーや未達成状態なども発生します。

そのため、正常系の画面だけでなく、応募できない状態やエラー表示なども含めて整理し、画面の抜け漏れがないよう設計しました。

ワイヤーフレームや画面一覧として全体を俯瞰できる形にすることで、デザイン段階だけでなく、その後の実装や確認作業でも扱いやすい構成を目指しました。

今回の制作を通して、応募フォームのUIでは見た目の美しさだけでなく、複数の行動を伴うフローをどれだけ分かりやすく整理できるかが重要だと学びました。

特に、購入登録・レシート投稿・ポイント付与・賞品応募といった状態変化を含む設計では、画面単体ではなく、体験全体の流れを捉える視点が必要だと実感しました。

また、エラー時や分岐も含めて画面を整理することで、デザインの完成度だけでなく、実装や運用まで見据えた設計につながることを学びました。