キャンペーンサイトの作り方|制作の進め方と費用・期間の目安
村上 悠希
Updated:
キャンペーンサイトの作り方を、目的設定から公開後の検証まで7つのステップで解説。制作期間と費用の目安、応募までの導線で分かれる3つの構成パターン、繰り返し実施する場合の設計のポイントもあわせて紹介します。

村上 悠希
Updated:
キャンペーンサイトの作り方を、目的設定から公開後の検証まで7つのステップで解説。制作期間と費用の目安、応募までの導線で分かれる3つの構成パターン、繰り返し実施する場合の設計のポイントもあわせて紹介します。

キャンペーンサイトは、目的の設定、ターゲットと訴求の整理、構成、デザイン、実装、公開前の確認、公開後の検証という7つのステップで作ります。期間を区切って1つの目的に集中させるサイトですが、作り方そのものは通常のWebサイトと大きく変わりません。違うのは、公開日が動かせないことと、終了後の扱いまで決めておく必要があることです。
もう一つ見落とされやすいのが、年間に何本作るかという前提です。1年に1本なら1件ずつ丁寧に作る進め方で問題ありませんが、月に何本も走る組織では同じやり方が続きません。ここを最初に決めておくと、進め方の判断がぶれにくくなります。
キャンペーンサイトとは、商品やサービスの販促企画に合わせて公開する、期間限定のWebサイトです。応募の受付、来場や参加の告知、認知の拡大など、企画ごとに設定した1つの目的に向けて構成されます。
通常のコーポレートサイトやサービスサイトが継続的な情報提供を担うのに対し、キャンペーンサイトは公開期間があらかじめ決まっています。この違いが、設計と運用の考え方を分けます。
似た言葉が並ぶため、整理しておきます。ただし排他的な区分ではなく、1つのサイトが複数に当てはまることもあります。
種類 | 主な目的 | 公開期間 | ページ数 |
|---|---|---|---|
キャンペーンサイト | 企画への応募・参加 | 期間限定 | 1〜数ページ |
LP(ランディングページ) | 資料請求・購入などの獲得 | 継続または期間限定 | 1ページ |
プロモーションサイト | 商品・ブランドの認知拡大 | 継続が多い | 数ページ以上 |
たとえばキャンペーンサイトを1ページ構成で作れば、それはLPでもあります。実務で「キャンペーンLP」と呼ばれるのはこの形です。呼び方が変わっても進め方は変わらないので、分類にこだわる必要はありません。進め方を分けるのは、次に見る年間の実施本数です。
ページ構成の基本については、LPの構成要素を図解でまとめた記事も参考になります。
同じキャンペーンサイトでも、年1本と、月に何本も走る場合とでは適した進め方が変わります。まずここを確認してから、手順に入ることをおすすめします。
実施本数が少ない場合:内製化を急ぐ必要はありません。頻度が低いと社内にノウハウが蓄積しづらく、制作体制を整えるコストが先に立ちます。デザインの品質を優先し、企画ごとに最適な表現を追求したいなら、外部パートナーと組む進め方が向いています。
実施本数が増えてきた場合、または急な差し込みがある場合:内製、あるいは内製と外注の併用を検討する価値があります。制作会社への発注では、要件のすり合わせに加えて見積もりと社内の決裁が挟まるため、公開までの期間が読みにくくなります。ヘルスケアテクノロジーズでは、新規のWebページ制作に2〜3ヶ月かかっていました。外注していたエンジニアの実装作業は、平均1ヶ月程度を要していました(ヘルスケアテクノロジーズの事例)。ここに社内の企画検討期間が加わります。季節性のある企画や競合への対応では、この期間が間に合わない場面が出てきます。
判断の目安は次の3つです。
年間の実施本数:本数が増えるほど、企画ごとの見積もりと修正のやりとりが積み上がります
企画から公開までに使える期間:準備期間の短い企画が定期的にあるなら、外注のみの体制では間に合わない場面が出てきます
公開後の修正頻度:更新を外注していると、文言や日程の差し替えのような小さな修正でも、そのつど費用と待ち時間が発生します
公開後の修正にかかる時間を決めるのは、直す量ではなく体制です。日本経済新聞社の「NIKKEI OFFICE PASS」では、句読点一つの削除でも反映まで半月〜1ヶ月かかっていました(日本経済新聞社の事例)。
内製に寄せる場合の段階的な進め方は、LP内製化の始め方をまとめた記事でタイミングの見極め方とあわせて整理しています。
進め方が決まったら、次の順序で進めます。
最初に、このキャンペーンで何を達成したいのかを1つに絞ります。応募数なのか、来場者数なのか、認知の拡大なのかで、構成もデザインも変わります。
同時に、成果をどう測るかも決めておきます。応募数のように数えられる指標であれば計測は簡単ですが、認知が目的の場合は事前に測り方を決めておかないと、終了後に振り返れなくなります。
誰に向けた企画かを具体化します。既存顧客への再購入促進と、新規層への認知獲得では、伝えるべき情報の順序が変わります。
参加のハードルになりそうな要素も、この段階で洗い出しておきます。応募条件が複雑、必要な情報が多い、期限がわかりにくいといった要素は、後の構成設計で解消していきます。
伝える情報の順序を決めます。キャンペーンサイトでは、次の要素がおおむね共通して必要になります。
企画の内容と参加によって得られるもの
応募・参加の条件
応募方法と手順
実施期間と締切
注意事項・規約
問い合わせ先
このうち締切と応募方法は、訪問者が最初に探す情報です。ページの上部と応募ボタンの近くの両方に置いておくと、探す手間が減ります。
注意事項と規約は、この段階で中身まで詰めておきます。対象になるのは、応募資格、当選者の決め方と発表方法、賞品の発送時期、個人情報の利用範囲、企画を中止・変更する場合の扱いです。いずれも後から追記しようとすると、公開直前の差し戻しにつながりやすくなります。
また、景品を用意する企画では、応募に商品の購入や来店を条件とするかどうかで、景品表示法の景品規制がかかるかどうかが変わります。購入も来店も条件にせず誰でも応募できる形(オープン懸賞)は、景品規制の対象外です。購入者や来店者を対象にする場合は取引に付随する提供とみなされ、賞品の金額に上限がかかります。企画の型が決まった時点で、消費者庁の景品規制の概要と社内の法務部門にあたっておくと、後戻りを避けられます。景品規制の内容は改正されることがあるため、過去の企画の判断をそのまま流用せず、そのつど最新の情報を確認します。
企画の世界観を表現しつつ、応募までの導線をわかりやすく保ちます。この2つは競合しやすく、演出を優先した結果、応募ボタンが見つけにくくなるケースがあります。
スマートフォンでの見え方を先に確認しておくことも大切です。キャンペーンサイトは広告やSNSから流入することが多く、スマートフォンの比率が高くなる傾向があります。本文は16px以上が目安で、応募ボタンは指で押しやすい大きさを確保しておくと、公開直前の手戻りが減ります。
デザインをWebページとして形にします。コーディングによる制作のほか、ノーコードツールやCMSを使う方法もあります。応募フォームを設ける場合は、フォームツールとの連携方法や、取得した個人情報の扱いをこの段階で確定させます。
公開日が動かせないため、確認の時間を最初からスケジュールに組み込んでおきます。特に次の項目は見落とされやすい部分です。
応募フォームが正しく送信され、データが届くか
締切日・開催日の表記に誤りがないか
注意事項や規約の記載に漏れがないか
主要なスマートフォン・ブラウザで表示が崩れないか
公開して終わりにせず、期間中の数値を記録します。応募数だけでなく、どの流入経路から来た人が応募したかまで残しておくと、次回の企画設計に使えます。
終了後の処理も、公開前に決めておきます。ページを削除するのか、終了の告知に差し替えるのか、次回まで残すのかで、必要な作業が変わります。ここを決めていないと、終了したキャンペーンのページが残り続けることになります。
構成とデザインの方向性は、企画の世界観をどこまで前に出すかで分かれます。実務では次の3つの型に整理できます。
世界観を前面に出す型:ブランドや作品の雰囲気を伝えること自体が目的の企画に向いています。ファーストビューに大きなビジュアルや動きを置き、印象を残す構成です。演出を強めるほど応募ボタンが埋もれやすくなるため、スクロールに追従するボタンを併用すると導線を保ちやすくなります。
応募までを最短にする型:応募数を指標にする企画に向いています。企画の説明を短くまとめ、応募条件と手順、応募ボタンを画面の早い位置に置きます。装飾は配色と文字組みで抑え、読む量を減らす方向で設計します。
シリーズで統一する型:同じ企画を季節ごとに繰り返す場合や、複数の商品で横展開する場合に向いています。レイアウトと配色のルールを先に決めておき、写真とコピーだけを差し替えます。2本目以降の制作時間が短くなるほか、企画をまたいだ見た目の統一も保てます。
参考サイトは、見た目の好みではなく、応募までの導線がどう設計されているかで見ると、自社の企画に転用しやすくなります。
ファーストビューで何を見せているか:企画の内容、参加して得られるもの、締切のうち、どれを最初の画面に置いているかを確認します。スマートフォンでも開いてみると、締切と応募方法にどれだけ早く到達できるかの差が見えます。
応募ボタンの数と位置:1ページのどこに、何回置かれているかを見ます。演出の強いサイトほど、ボタンが背景に埋もれていないかの扱いが参考になります。
注意事項の見せ方:規約や注意事項をページ内に展開しているか、別ページに分けているかを見ます。応募のハードルを上げずに必要な情報を載せる方法として、他社の判断が参考になります。
型の当たりをつけたあと、配色やレイアウトの実物を見る段階に入ったら、作例そのものを開いた方が早く進みます。Studioのキャンペーンサイト向けテンプレート一覧では、公開されているデザインをそのまま複製して確認できます。イベント告知を目的としたサイトであれば、イベントサイトのデザイン事例に構成やビジュアルの実例をまとめています。
制作会社に依頼する場合の制作期間は、1ページ構成なら1ヶ月程度、数ページ構成なら1〜2ヶ月程度が目安です。会社によっては2〜4ヶ月を目安として示しているところもあります。ここに発注前の要件整理と社内確認の期間が加わります。応募フォームや抽選機能を伴う場合は、要件の確定と検証に時間がかかるため、さらに余裕を見ておく方が安全です。自分たちで編集する前提のサービスでは、テンプレートを差し替えて最短3日で公開できるものもあります。
費用の幅を決めているのは、テンプレートを使うかどうかよりも、誰が手を動かすかです。
制作会社に依頼する場合、テンプレートを流用した数ページ構成で20万〜50万円程度が目安です。テンプレートが削るのはデザインを起こす工数だけで、要件整理、原稿と画像の流し込み、フォーム設定、表示検証は残ります。オリジナルデザインに応募フォームやSNS連携を加えると、50万〜150万円程度が目安です。200万円を超えるのは、応募の仕組みそのものを作り込む場合です。応募したその場で当落がわかるインスタントウィン、ルーレットやクイズのミニゲーム、カメラをかざすAR演出などが該当します。抽選の判定と結果の通知をシステムとして用意し、応募が集中する時間帯に耐える設計も必要になります。撮影やイラストなどの素材制作は、これに加算されるのが一般的です。期間中の運用や更新を任せる場合は、月3万〜10万円程度の運用費を別に見ている会社もあります。
自分たちで編集する前提のサービスなら、初期費用5万〜15万円程度と月額数千円から始められます。ただしデザインや原稿の作成を任せると、ページごとに費用が発生し、制作会社に頼む場合の水準に近づきます。金額の差は作業の量ではなく、その作業を社内で持つかどうかで生まれます。
実際の見積もりは条件で大きく変わるため、要件を整理したうえで複数社に相談する方が精度が上がります。
内製に切り替えた場合の変化については、実際の数値が参考になります。セール期間が数日単位のECを運営するla belle vieでは、企画から公開まで2〜3ヶ月かかっていたLP制作が最短3日間になりました。大型キャンペーン時に限られていた制作も、月3本程度まで継続できるようになりました(la belle vieの導入事例)。費用の面では、トヨタファイナンシャルサービスの例があります。おでかけアプリ「my route」のWebサイトのうち、交通チケット販売に関連するページで毎月1〜2ページの更新や新規作成が発生し、外注していました。1ページあたり約20万円のコストがかかっていたところ、内製化によって年間約100万円以上を削減しています(トヨタファイナンシャルサービスの導入事例)。
いずれも本数や体制が前提にある数値です。年1本の企画にそのまま当てはまるものではありません。
年に複数回キャンペーンを実施する場合、2本目以降の負担を決めるのは1本目の作り方です。次の3点を初期設計に含めておくと、企画ごとに作り直す範囲が狭まります。
共通パーツをまとめて管理する:注意事項、応募規約、フッターの表記などは、企画が変わっても内容が近いものです。これらを共通部品として管理しておくと、修正のたびに全ページを確認する必要がなくなります。特に金融や医薬品のように表示ルールが厳しい分野では、記載漏れを防ぐ仕組みとして機能します。
変更してよい範囲を決めておく:複数人で更新する場合、どこまで触ってよいかを決めておかないと、レイアウトの崩れや誤った公開が起きます。編集できる箇所を限定しておくと、Webに詳しくないメンバーでも安全に更新できます。
更新しやすさを初期設計に含める:テイクアンドギヴ・ニーズでは、年2〜3回のイベントごとにサイト内のコンテンツを更新する前提で、更新のしやすさを含めて全体を設計しています。外注から社内制作に切り替えたことで、スケジュールが短いときもサイト制作を社内で完結できるようになりました。制作したイベントサイトについては、参加者の約8割が「わかりやすかった」と回答しています(テイクアンドギヴ・ニーズの導入事例)。
共通パーツの管理や編集範囲の制限は、ノーコードツールの標準機能として備わっている場合があり、繰り返し作る前提では効いてきます。一方で、複雑な抽選ロジックや外部システムとの高度な連携が必要な企画では、標準機能だけでは実現しきれないことがあります。追加の作り込みや、別の手段の検討が必要になります。企画の要件を先に整理してから判断する方が確実です。
最も多いのがこのパターンです。公開までは全員が集中しますが、終了後の処理は担当が曖昧になりがちです。掲載期間が終わったページをどうするかを、公開前に決めて記録しておきます。複数のキャンペーンを並行して走らせている場合は、終了処理そのものが定常業務として積み上がる点にも注意が必要です。
応募規約や注意書きは、企画ごとに少しずつ異なります。前回のページから複製して一部を書き換える運用を続けると、修正漏れが起きやすくなります。共通部分と企画ごとに変わる部分を分けて管理しておくと、確認する範囲が狭まります。
キャンペーンは関係部署が多く、直前に文言の修正が入ることがあります。公開直前の修正を誰がどのくらいの時間で対応できるかは、体制を決める段階で確認しておく項目です。
進め方を決める前に確認したいのが、年間の実施本数です。本数が少なければ今の体制を続ける判断で無理はありませんし、本数が増えて待ち時間が課題になってきたなら、内製や併用を検討する段階に入っています。どちらが正解というものではなく、自社の実施頻度と使える期間から逆算するのが現実的な進め方です。
繰り返し実施する見込みがあるなら、1本目の設計時点で共通パーツの管理と更新範囲の決め方を織り込んでおくと、2本目以降の負担が変わってきます。
広告代理店・SaaS企業を経て、現在はStudioでマーケティングを管掌。
無料ではじめる