菓子メーカーキャンペーン｜応募フォーム

菓子メーカーが実施するキャンペーンにおいて、ユーザーが応募情報を入力し、レシート画像をアップロードして応募完了するまでのフォーム設計を担当しました。

応募フォームは、キャンペーンに興味を持ったユーザーが実際に参加する最後の接点です。

そのため、必要な情報を漏れなく取得するだけでなく、入力途中で迷ったり離脱したりしないよう、「次に何をすればよいか」が常に分かる画面構成と導線を意識して設計しました。

制作目的

キャンペーンへの応募に必要な情報をユーザーから正確に取得しながら、できるだけ迷いや負担を感じさせず、応募完了まで進んでもらえるフォームを設計することを目的としました。

課題

今回の応募には、個人情報の入力だけでなく、レシート画像のアップロードや入力内容の確認など、複数の操作が必要でした。

入力項目や操作が増えるほど、ユーザーにとっては「今どこまで進んでいるのか」「次に何をすればよいのか」が分かりにくくなり、途中離脱につながる可能性があります。

また、応募条件によって表示内容や操作が変化するケースも想定する必要があったため、単一画面を設計するだけではなく、ユーザーの操作ごとの分岐を含めて応募フロー全体を整理することが課題でした。

キャンペーンをきっかけに応募フォームへ訪れる、幅広いユーザーを想定しています。

Webサービスの操作に慣れている人だけを前提とせず、フォームを初めて見た人でも、画面上の案内だけで応募を進められることを重視しました。

特にスマートフォンからの応募を想定し、限られた画面幅でも入力項目やボタンの役割が分かりやすくなるよう設計しています。

応募に必要な要件をもとに、フォーム全体の情報整理から画面構成、画面遷移までを担当しました。

• 応募フローの整理
• 情報設計
• ワイヤーフレーム制作
• フォームUI設計
• 画面遷移・分岐設計
• レシートアップロードフローの設計
• 確認・完了画面の設計

1画面ではなく「応募完了までの体験」を設計する

フォーム設計では、各画面を単体で整えるのではなく、ユーザーが応募を開始してから完了するまでを一つの流れとして捉えました。

入力画面、レシートアップロード、確認画面、完了画面のそれぞれで、

「現在どの段階にいるのか」
「次に何をするのか」
「操作するとどこへ進むのか」

が分かる状態を維持することを意識しています。

また、戻る操作や入力内容の修正など、ユーザーが必ずしも理想的な順番だけで操作するとは限らないため、前後の画面遷移も含めて設計しました。

01｜応募の現在地が分かるステップ設計

応募フォームでは入力する情報が多いため、すべてを一つの長い画面として見せるだけでは、ユーザーが応募完了までの距離を把握しにくくなります。

そこで、フォーム上部に進行状況を示すステップを設け、

情報入力 → 画像アップロード → 確認 → 完了

という応募全体の流れを可視化しました。

02｜入力項目を迷わず理解できるフォームUI

氏名や住所などの入力項目では、項目名・必須表示・入力欄・補足情報の役割を明確に分けました。

入力例が必要な項目にはプレースホルダーを設け、選択式の項目については入力欄と見分けられるようUIを分けています。

03｜レシートアップロード時の迷いを減らす

画像アップロードは、通常のテキスト入力とは異なる操作になるため、フォームの中でも特に迷いが発生しやすい部分です。

そのため、画像を選択する操作と、アップロード後の確認を段階的に分け、ユーザーが「画像を正しく登録できたか」を確認してから次へ進める設計としました。

04｜分岐を含めた画面遷移を事前に整理する

応募フォームでは、ユーザーの操作や登録内容によって、同じ画面でも状態が変化する場合があります。

そこで、完成画面だけを個別に制作するのではなく、ワイヤーフレームを並べて画面同士を矢印で接続し、どの操作によって、どの状態へ遷移するのかを整理しました。

05｜応募完了後まで含めて体験を考える

応募ボタンを押した時点で体験を終わらせるのではなく、応募が正常に完了したことを明確に伝える完了画面まで設計しました。

ユーザーが「応募できたのか分からない」という状態にならないよう、完了メッセージを明確にし、その後に取れる行動も整理しています。

今回の制作を通して、フォームデザインでは見た目を整えること以上に、ユーザーの行動を想定し、迷いが生まれるポイントを事前に取り除く設計することが重要だと学びました。

特に、正常に応募するケースだけではなく、入力内容を修正する、前の画面に戻る、画像を変更するなど、ユーザーが取り得る複数の行動を考えることで、画面単体ではなくサービス全体を見る視点が身につきました。

また、ワイヤーフレームの段階で画面遷移や分岐を整理することで、デザインだけでなく、その後の実装や確認作業まで進めやすくなることを実感しました。