プロジェクト概要
沖縄市とスマホ決済サービス「PayPay」が連携した地域経済応援キャンペーン「最大30%戻ってくる」の特設ランディングページ（LP）制作プロジェクトです。キャンペーンの認知拡大と利用促進を目的に、LP全体のデザインからHTML/CSSコーディングまでを一貫して担当しました。消費者向けのお得な情報と、店舗向けの導入案内を1ページ内で分かりやすく整理し、幅広い年齢層のユーザーが迷わずアクションできる構成に仕上げています。
基本情報
サイト種別: キャンペーン用ランディングページ（LP）
ターゲット: 沖縄市で買い物をする消費者、および市内の事業者（店舗）
担当領域
Webデザイナー / フロントエンドエンジニア
（情報設計 / ビジュアルデザイン作成 / HTML・CSSコーディング）
プロジェクトの目的と課題
- 最大のメリットを瞬時に伝える: キャンペーンの最大の魅力である「最大30%還元」というメリットを、ファーストビューで強烈に印象付けること。
- ターゲットごとの情報整理: 「お買い物をするみなさまへ（消費者）」と「参加したい店舗のみなさまへ（事業者）」という異なる2つのターゲットに向けた情報を、混乱を招かないよう明確に切り分けて配置すること。
- 誰もが理解できる分かりやすさ: スマホ決済に不慣れな幅広い年齢層にも理解できるよう、専門用語を避け、図解を用いて直感的に伝わるデザインにすること。
施策とこだわったポイント
1. ブランドカラーを活かした、インパクトと信頼感のあるデザイン
PayPayのブランドカラーである鮮やかな「赤」を基調とし、ガイドラインを遵守しながら視覚的なインパクトを持たせました。ファーストビューでは「最大30%」の文字を最も大きく配置し、ユーザーのメリットを瞬時に伝達。自治体との公式コラボレーションとしての信頼感を損なわないよう、メリハリのあるクリーンなタイポグラフィを心がけています。
2. 図解を用いた直感的なインフォメーションアーキテクチャ（情報設計）
「ポイント還元の仕組み」や「店舗側の導入費用（初期費用・月額費用などが0円になる仕組み）」など、テキストだけでは伝わりにくい複雑な条件を、フロー図やアイコンを用いたステップ図で視覚化しました。これにより、読む負担を減らし、直感的な理解を促進しています。
3. 消費者・店舗の双方を迷わせないUIとコーディング
1つのページ内に消費者向け・店舗向けの情報が混在するため、セクションの見出しデザインを変えるなどして明確な区切りを設けました。また、店舗の紹介セクションでは、沖縄市の地域性を感じさせる魅力的な写真をグリッド配置し、利用意欲を高める工夫をしています。各種ボタンやQRコードへの導線もタップしやすいサイズでコーディングし、コンバージョン率の向上を図りました。
成果・評価
ブランド規律を守りつつ、確実なアクションを促すLPの構築
大手プラットフォームのブランドガイドラインという制約の中であっても、要件を満たすデザインとコーディングを実装しました。「情報を整理し、図解を用いて分かりやすく伝える」ということを意識し、地域活性化という目的を持つキャンペーンの成功を後押しする制作物となっています。
