QRコードのランディングページは、ほぼ必ずスマートフォンで開かれます。しかも、立ちながら、急いでいて、モバイル回線を使っている人が多い。その瞬間のために設計してください。ページはひとつ、目標はひとつ、読み込みは速く、タップ領域は大きく、ファーストビューでQRコードの横に書かれた約束をそのまま叶える。これができれば、メニュー閲覧、登録、決済、ダウンロードにつながります。できなければ、訪問者は数秒でタブを閉じます。
まず「読み取る瞬間」を想像する
デザインを始める前に、読み取る人の姿を思い浮かべてください。カフェの中、バス停、店の棚の前、展示会のブース。両手がふさがっていることもあり、照明は悪く、Wi-Fiではなくモバイル回線の可能性もあります。机に座ってゆっくり閲覧している人ではありません。
これがすべての設計判断を変えます。快適な回線とノートPCでは問題なく見えるページも、遅い回線のスマホでは壊れたように感じられます。リンクが10個ありニュースレターのポップアップが出るレイアウトは、マウスを使うデスクトップ訪問者には合っていても、ポスターのQRコードを読み取って「ひとつのこと」をすぐ得たい人にはストレスです。
実践的な結論は2つです。第一に、スマホを「デスクトップの小型版」ではなく標準デバイスとして扱うこと。第二に、ページ上で最も希少なリソースは訪問者の注意力であると扱うこと。読み込みの1秒1秒、余分な要素1つ1つが、訪問者の忍耐と競合します。
QRコードの横に書いた約束と一致させる
QRコードの横の文字は期待を設定します。「メニューはこちらを読み取り」「読み取ってクーポンゲット」「読み取ってアプリをインストール」。訪問者が最初に見る画面は、スクロールせずに、そのファーストビューでこの約束を確認させなければなりません。
コードには「メニュー」と書いてあるのに、ページを開くとヒーロー画像と「ようこそ当店へ」のバナーだけのブランドトップページだったら、訪問者はメニューを探し回ることになります。多くの人は探しません。どのキャンペーンでも同じで、ランディングページはポスターが始めた文をその続きとして完結させるべきです。
具体的には:
- 約束したもの(メニュー、フォーム、クーポン、動画、Wi-Fiの接続手順)をページの最上部に置く。
- キャンペーンの文言を見出しとしてそのまま使う。ステッカーに「本日のおすすめを読み取り」とあれば、ページの見出しは「本日のおすすめ」でよい。
- 本体コンテンツの前に、画面遮断(インタースティシャル)、スプラッシュ画面、アプリダウンロードの壁、「国を選択してください」ページを置かない。どれも訪問者が離脱する機会になります。
これは信頼の問題でもあります。印刷された約束とページの不一致は不審に映ります。QRコードがどこにつながるかに人は慎重になって当然です。
ページを速く読み込ませる
表示速度は技術面で最大の要因です。列に並んでいる人は重いページを待ちません。目安であり保証ではありませんが、一般的なモバイル回線で数秒以内に主要コンテンツが見えることを目標にし、5秒を超えるようなら訪問者を失うリスクがあると考えます。
そのために:
- 画像を圧縮し、適切なサイズにする。カメラから直接持ち込んだ写真は数メガバイトになりますが、リサイズと圧縮で同じ画像はその何分の一かになります。ツールが対応しているなら新しい画像形式を使う。
- ファーストビューに必要なものだけを読み込む。遅延読み込みのスクリプト、アナリティクスタグ、埋め込みフォント、サードパーティのウィジェットはすべてページを重くします。点検して、本当に必要でないものは削る。
- 自動再生の動画や大きな背景画像を避ける。モバイルデータを消費します。訪問者の中にはギガバイト単位で料金を払っている人もいます。
- JavaScriptを待たずに描画できる程度にシンプルに保つ。プレーンなHTMLとCSSは速く表示されます。重いクライアントサイドフレームワークは、スクリプトが終わるまで白い画面を表示しがちです。
- ブラウザキャッシュを活用し、可能ならCDN(コンテンツデリバリーネットワーク)を使う。再訪問や遠方からのアクセスが速くなります。
有効な訓練がひとつあります。ブラウザの開発者ツールで「Slow 3G」相当の速度制限をかけてページをテストすること。そこで素早く表示されれば、実際のほとんどの回線では一瞬に感じられます。
1ページ1目標
QRコードは単一目的の招待状です。ランディングページには主要なアクションをひとつ定め、ページ上のすべてをそれに合わせます。
作る前に目標を決めてください。メニューを見る、フォームを入力する、クーポンを受け取る、セットアップ手順を進める、フィードバックを残す、ファイルをダウンロードする。そこから逆算して設計します:
- 見出しで目標を明言する。
- 主要ボタンをファーストビューで最も目立つ要素にする。
- 関係のないものは削るか目立たなくする。リンク6個のフッター、Cookieの壁、「他の商品もご覧ください」の行、チャットウィジェットは、どれもアクションから注意をそらします。
副次アクションが本当に必要な場合、たとえば「Web版を使う」の代替として「アプリをダウンロード」を置くなら、主要ボタンより視覚的に控えめにします。同じ強さのボタンが2つあると迷いが生じ、迷いは離脱を生みます。
親指のための設計:タップ領域とレイアウト
スマホは親指で操作します。多くは片手です。それがレイアウトを決めます:
- タップ領域を大きくする。一般的な目安として、ボタンやリンクは44×44ポイント程度(画面上でおよそ9mm)以上、間に余白を置いて、親指が2つ同時に当たらないようにする。
- 主要ボタンは親指が自然に届く位置に。画面の下寄り中央が、最上部の小さなリンクより使いやすい。
- 1カラムレイアウトにする。デスクトップ向けの複数カラムのグリッドは、狭い画面では窮屈になり、押し間違いが起きる。
- 拡大なしで読める文字サイズにする。本文は16px以上が現実的な基準です。屋外の日差しの中では小さい文字は読みにくい。
- 余白を残す。密集したページは安っぽく見え、視覚的にも読み取りにくい。
- 縦向きと、必要なら横向きの両方で動作し、端末の文字サイズ設定を尊重することを確認する。
フォームは短く、必要な項目だけ
目標がフォーム(登録、フィードバック、キャンペーン応募、問い合わせ)なら、目標が許す最短の長さにします。項目が1つ増えるたびに完了率は下がります。
- 実際に使う情報だけ尋ねる。電話をかけないなら電話番号を聞かない。
- 適切なキーボードを指定する。数量欄には数字キーパッド、メール欄にはメール用キーボード。マークアップの小さな変更で、入力ミスが目に見えて減ります。
- ラベルは入力欄の上に表示する。入力開始と同時に消えるプレースホルダー(仮置きテキスト)ではなく。
- 入力中または送信時に検証し、エラーメッセージは具体的に。「エラー」ではなく「有効なメールアドレスを入力してください」。
- フォームが長くなる場合は、いくつかの明確なステップに分けて進捗を表示する。ただし、まず短くできないかを問うこと。
- 送信後はページ上で明確な完了表示を出す。送信ボタン後の沈黙は、最も多い、防げたはずの失敗です。
言語、アクセシビリティ、わかりやすさ
ページの言語は、QRコードの設置場所を選んだのと同じ基準で選びます。特定の国や会場のポスターにあるコードなら、ページはその読者の言語で開くべきです。ブラウザの自動翻訳もありますが、即時ではないし、常に正確とも限らず、摩擦を加えます。多様な読者に対応するなら自動判定に頼らず、ページ上部に見える言語切替を用意してください。
アクセシビリティは支援技術を使う訪問者だけでなく全員を助けます:
- 文字はテキストとして実装する。テキストの画像にしない。スクリーンリーダーもブラウザの拡大も機能します。
- すべての画像に意味のある代替テキストを付ける。
- 文字と背景のコントラストを十分に確保する。特に屋外では画面が日光と戦います。
- キーボードで操作でき、スクリーンリーダーに対応すること。適切な見出し、ラベル付きの入力欄、内容がわかるリンクテキスト。
- 意味を色だけで伝えない。
平易な言葉もアクセシビリティです。短い文、具体的な表現、明確な手順は、小さな画面で急いで読んでいる人に役立ちます。
プライバシー、データ取得、信頼
ページが何かを取得するなら(メールアドレス、名前、写真のアップロード、店舗検索のための位置情報)、それを明示してください。フォームの近くに短く読める説明を置くこと(「メールアドレスは領収書の送信だけに使います。プライバシーポリシーはこちら」)は信頼を築きますし、多くの国や地域のデータ保護規則で求められます。完全版のプライバシーポリシーへのリンクを付けつつ、平易な要約はデータを取得するその場所に置きます。フッターの奥に埋めないこと。
QRコード固有の信頼ポイントが2つあります:
- HTTPSを使う。非安全ページはブラウザに警告表示されます。物理的なコードを読み取って来た訪問者にとって、この警告は特に致命的です。
- リンク先URLを安定させておく。印刷済みコードの指す先を変える必要が出たら、再印刷ではなく自分で管理するリダイレクトを使い、そのリダイレクトを速く保つ。
トラッキングスクリプトも控えめに。ページを遅くし、多くのキャンペーンに必要な量を超えて収集します。訪問者と、キャンペーンの明示された目的に役立つものだけを取得してください。
実機と遅い回線でテストする
デスクトップのプレビューは嘘をつきます。印刷する前に、実際のスマホでテストしてください:
- 印刷したコードを少なくとも2台の異なるスマホで読み取る。可能ならAndroidとiPhoneの両方。カメラとブラウザの挙動は異なります。
- オフィスのWi-Fiだけでなくモバイル回線でテストする。Wi-Fiを切るか、ブラウザの速度制限ツールで遅い回線を再現する。
- 全工程を通す。読み取り、着地、読了、主要ボタンのタップ、フォームの完了、完了表示の確認。すべてのステップが動くことを確認する。
- コードの設置場所が屋外や明るい場所なら、それに合わせた環境で確認する。
- プロジェクトを知らない人に試してもらい、どこで迷うかを見る。
公開前チェックリストとよくある失敗
QRコードを公開する前に、このリストを通してください:
- ファーストビューに約束したコンテンツが、スクロールなしで表示される。
- 速度制限をかけた遅い回線で数秒以内に読み込まれる。
- 主要ボタンが大きく、親指が届き、一目でわかる。
- フォームは必要項目のみ、正しいキーボード、明確な完了表示。
- 拡大なしで文字が読め、コントラストが十分。
- コンテンツを塞ぐポップアップ、アプリ導入の壁、Cookieの壁がない。
- ページの言語がコード設置場所の読者と一致している。
- HTTPSが有効で、データ取得箇所にプライバシー表示がある。
- 実機で印刷済みコードを読み取り、モバイル回線でテスト済み。
- リンク先URLを(理想はリダイレクト経由で)自分が管理しており、印刷後も問題を修正できる。
避けるべきよくある失敗:
- デスクトップ専用ページへのリンク。広い画面向けに設計され、ピンチ操作で拡大しないと読めないページは、最も多く、最も致命的なQRの失敗です。
- 具体的なコンテンツではなくトップページへのリンク。訪問者は自分で探すことになり、多くは探しません。
- 重いページ。未圧縮の写真、自動再生動画、複数のサードパーティスクリプト。
- 本体コンテンツの前のポップアップやインタースティシャル。
- 必要のない情報を求める長いフォーム。
- 約束とページの不一致。ポスターが言うこととページが見せることが違う。
- 印刷済みコード自体をテストせず、デスクトップブラウザでURLだけ確認して終わる。
まとめ
QRコードのランディングページは、読み取る瞬間への配慮で成功します。1台のスマホ、1人の人、1つの目標、限られた忍耐。印刷された約束をファーストビューで叶え、速く読み込み、親指のために設計し、フォームを短く保ち、データについて正直に、そして印刷前に実機と遅い回線でテストする。QRコードを作るとき、たとえばQRCodeMax.Vipのような無料ツールを使うときでも、リンク先ページをプロジェクトの半分として扱ってください。コードが読み取りを獲得しますが、成果を稼ぐのはページです。