執筆者
國嶋利幸 ｜ 代表取締役・株式会社ORENCH
Webデザイン・LP制作600件超の実績を持ち、D2C・食品・美容・健康領域を中心にランディングページと自社サイトの設計を手がける。市場分析からコンセプト設計、コピー、デザイン、公開後の改善までを一貫して担当。自社でもD2Cブランドを運営し、「作って終わり」ではなく数字が動くまで伴走する制作を行っている。
主な実績
本記事は株式会社ORENCH（福岡・Webデザイン／LP制作）が制作しています。
この記事の要点
デザインでCVRを上げるには、まず「表示待ち要素」を洗い出すことが先決です。表示待ち要素とは、ページを開いてから購入ボタンや必要な情報が画面に出るまでを遅らせたり、その位置をずらしたりするデザイン上の要素を指します。見た目を整える前に、読み込み速度・操作への反応・表示のずれを実際のユーザーデータで確かめてから、見た目を足す順序が重要です。
目次
見た目は良くなったのに、なぜCVRが上がらないのか
「デザインをリニューアルしたのに、問い合わせも購入も変わらない。」
この言葉を、私はこれまで何度も聞いてきました。広告費は出ていく。流入数はある。でも、コンバージョンに結びつかない。何が悪いのか分からないまま、次の施策を探している——そういう状況で、この記事に辿り着いた方も多いと思います。
結論から言うと、CVRが変わらない原因の多くは「デザインの好み」ではなく、「お客さまが操作できるまでの待ち時間とずれ」にあります。
リニューアルで起きやすい落とし穴
たとえば、こんな改善をしたとします。
- メイン画像を大きく、印象的なものに差し替えた
- ファーストビューにスライダーを入れ、複数の訴求を見せるようにした
- サイトを開いた直後に、キャンペーン告知のポップアップを表示するようにした
制作者のパソコンで確認すると、見た目は格段に良くなっています。訴求も伝わる。自信を持って公開した。
ところが、スマホで開いたお客さまの画面ではどうなっているでしょうか。大きな画像が読み込まれるまでの間、画面は空白です。スライダーが読み込まれると、その下にあった購入ボタンの位置がずれます。押そうとした指が、別の場所に触れる。そのまま離脱する。
これは、見た目の問題ではありません。「お客さまが操作できるまでの体験」の問題です。
「見た目の改善」と「お客さまの操作性」は別の問題
見た目が良くなることと、お客さまが迷わず購入の判断を下せることは、まったく別の軸です。
発注する側にいたとき、私自身がこの罠にはまりました。制作会社から上がってきたデザインを、デスクトップで確認して「OK」を出す。でも実際のお客さまはスマホで見ていて、読み込みに時間がかかり、ボタンの位置が読み込みのたびにずれている。
デザインは綺麗になった。でもCVRは動かない。その原因が分からず、「次はコピーを変えよう」「次はバナーを変えよう」と施策を重ねてしまう。
問題の本質は、見た目の前に解決しておくべき「表示待ち要素」にあります。
デザインの良し悪しを「好み」ではなく「指標」で測る
「このデザインは良いのか？」という問いに、感覚で答えようとすると、会議室での議論は終わりません。社内で「本当に効果があるの？」と問われたとき、根拠を持って答えるためには、測定できる指標が必要です。
3つの指標で、お客さまの体験を測る
Googleは、ユーザー体験を測るための指標として「Core Web Vitals（コアウェブバイタル）」を定めています。（出典：Google web.dev「Web Vitals」）
この指標は3つです。
| 指標 | 測るもの |
|---|---|
| LCP（Largest Contentful Paint） | ページを開いてから、最も大きなコンテンツが表示されるまでの時間 |
| INP（Interaction to Next Paint） | ボタンをタップしてから、画面が反応するまでの時間 |
| CLS（Cumulative Layout Shift） | ページ上で要素がずれる量の合計 |
LCPは「読み込みの速さ」、INPは「操作への反応の速さ」、CLSは「表示のずれのなさ」と言い換えると分かりやすいでしょう。
「良好」の基準は、Googleが定めている
これらの指標には、明確な基準値があります。（出典：Google web.dev「Web Vitals」）
- LCP：2.5秒以内が「良好」
- INP：200ミリ秒以下が「良好」
- CLS：0.1以下が「良好」
この基準は、Googleが実際のユーザー体験のデータをもとに設定したものです。感覚ではなく、数値で「良好かどうか」を判断できます。
「デザインはどうか」という問いに感覚で答えるのではなく、「LCPは2.5秒以内か」「CLSは0.1以下か」という問いに数値で答えられる。これが、発注側が持つべき判断軸です。
検索順位だけでなく、お客さまの待ち時間を減らすために
Core Web VitalsはGoogleの検索ランキングを決める要素の一つでもあります。（出典：Google Search Central「ページ エクスペリエンスの Google 検索結果への影響」）
ただ、この記事で伝えたいのは検索順位の話ではありません。お客さまが迷わず購入の判断を下せる体験を作るために、待ち時間とずれを減らすことが、CVR向上の前提条件だということです。
SEOのためではなく、お客さまのために測る。その順序が大切です。
表示のずれを招くデザイン上の決め方
CLSの数値を悪化させる要因は、デザインの設計段階の決め方にあります。「後から追加される」要素が、周囲の要素を押し動かすことでずれが発生します。
サイズを指定していない画像が、後から読み込まれる
Google web.devの「Cumulative Layout Shiftの最適化」によると、CLSの一般的な原因の一つは、サイズを指定していない画像です。（出典：Google web.dev「Cumulative Layout Shiftの最適化」）
画像のwidth（横幅）とheight（高さ）を事前に指定していない場合、ブラウザは読み込み前にその画像がどれだけのスペースを取るかを知りません。画像が読み込まれた瞬間、その分のスペースが確保され、下にあったテキストやボタンが一気に押し下げられます。
押そうとしていたボタンが、指が触れる直前にずれる。この体験が、購入の判断を遠ざけます。
広告やバナーが、後から差し込まれる
サイズが決まっていない広告、埋め込みコンテンツ、iframeが後から差し込まれるときも、同じずれが起きます。（出典：Google web.dev「Cumulative Layout Shiftの最適化」）
デザイン段階では「広告をここに入れる」と決めていても、そのスペースのサイズを確保しておかないと、差し込まれた瞬間にレイアウトが崩れます。
解決策はシンプルです。広告・バナー・埋め込みコンテンツを入れる場所には、あらかじめそのサイズ分のスペースを確保しておくことです。
ウェブフォントの読み込みで、テキストの位置が変わる
ウェブフォント（サーバーから読み込むフォント）が遅れて表示される場合、最初はシステムフォント（端末のデフォルトフォント）でテキストが表示され、ウェブフォントが読み込まれた瞬間にサイズや行間が変わって、テキストの位置がずれます。（出典：Google web.dev「Cumulative Layout Shiftの最適化」）
これも、事前の設計で対策できます。フォントの読み込み方法を工夫するか、表示のフォールバックを適切に設定することで、ずれを最小限に抑えられます。
デザイン上のこれらの決め方は、見た目には現れません。だからこそ、制作段階でチェックリストとして持っておく必要があります。
開いた直後のポップアップが信頼を損なう理由
「お知らせをサイトを開いた直後に表示したい」という要望は、発注側からよく出てきます。キャンペーン情報を確実に見てもらいたい。その気持ちは分かります。ただ、タイミングと方法を間違えると、逆効果になります。
ユーザーが見たいコンテンツを、ポップアップが塞ぐ
Googleの検索セントラルは、「煩わしいインタースティシャルやダイアログを避けること」を推奨しています。（出典：Google Search Central「煩わしいインタースティシャルやダイアログを避ける」）
特に、ページを開いた直後に全画面で表示されるポップアップは、ユーザーが見たかったコンテンツへのアクセスを妨げます。商品の情報を見ようとして辿り着いたページで、まず全画面のお知らせが出てくる。その「塞がれた」感覚が、ユーザーの体験を損ないます。
「邪魔だ」という感情が、購入の判断を左右する
ユーザーの感情は、購入の判断に直接影響します。
「邪魔だ」「押しつけられた」という感情が先に来ると、その後にどれだけ良い商品説明が続いても、判断の土台がすでに傾いています。見た目がどれだけ洗練されていても、信頼が損なわれた後ではCVRは上がりません。
ポップアップを使うことが問題なのではありません。「いつ、どのタイミングで、どの大きさで出すか」の設計が問題です。ユーザーがある程度コンテンツを読んだ後で、全画面ではなくバナー型で表示するなど、コンテンツへのアクセスを妨げない方法を選ぶことが大切です。
| デザイン上の要素 | 影響する指標 | 根拠 |
|---|---|---|
| 大きなメイン画像・スライダー | LCP（読み込み速度） | Google web.dev「Web Vitals」 |
| サイズを指定していない画像・後から差し込まれるバナー・ウェブフォント | CLS（表示のずれ） | Google web.dev「Cumulative Layout Shiftの最適化」 |
| 開いた直後のポップアップ・全画面のお知らせ | 閲覧の妨げ・信頼の損失 | Google 検索セントラル「煩わしいインタースティシャルやダイアログを避ける」 |
実際のユーザーのデータで、自社の状態を確かめる
「ウチのサイトは大丈夫だろうか」と思ったとき、確認する場所を間違えると、問題を見落とします。
制作者のパソコンではなく、実際のユーザーのデータを見る
発注側と制作側の両方を経験して分かったことがあります。発注する側は往々にして、制作者から送られてきたデスクトップ版のURLで確認します。高速な回線、スペックの高いパソコン、Chromeの最新版。その環境でサイトを見ると、ほぼ問題は起きません。
ところが、実際のお客さまのほとんどはスマホで見ています。移動中や、電波が弱い場所で。その環境でのデータが、本当に必要なデータです。
制作者の画面で確認するのではなく、実際のユーザーが経験したデータを見ることが、改善の出発点になります。
Search Consoleで、モバイルとパソコンを分けて確認する
Google Search ConsoleのCore Web Vitalsレポートは、実際のユーザーの使用状況データ（フィールドデータ）に基づいています。（出典：Google Search Console ヘルプ「Core Web Vitals レポート」）
このレポートは、モバイルとパソコンで分けて表示されます。自社のサイトを開き、左のメニューから「Core Web Vitals」を選ぶと、モバイルとパソコンそれぞれで、LCP・INP・CLSの状態が「良好」「改善が必要」「不良」に分類されて表示されます。
多くの場合、パソコンでは「良好」でも、モバイルでは「改善が必要」や「不良」になっていることがあります。その差が、CVRを損なっている原因の一つです。
75パーセンタイルで評価する理由
Core Web Vitalsの評価は、75パーセンタイルの値で行われます。（出典：Google Search Console ヘルプ「Core Web Vitals レポート」）
75パーセンタイルとは、「100人のユーザーが訪問したとき、速い順から75番目のユーザーの値」です。最も速い環境のユーザーではなく、「速い方から4分の3を占めるユーザー」が良好な体験を得られているかどうかを基準にしています。
これは、一部の高速環境のユーザーだけが快適でも意味がない、という考え方に基づいています。実際に購入の判断を下すのは、平均的な環境のお客さまです。その体験が基準になることは、発注判断として合理的です。
表示待ち要素を減らしたうえで、見た目を足す
CVRが大きく動いたケースを振り返ると、変えたのは「見た目の質」ではなく「出る順番と大きさ」でした。
メイン画像も演出も、大きさと置き方を決めてから使う
多くのLP制作に関わってきた経験から、一つ確信していることがあります。見た目を足す前に、出る順番と大きさを決めること。これが最初の一手です。
メイン画像・スライダー・アニメーション演出は「使ってはいけないもの」ではありません。それらを「どの大きさで、どの順番で、スペースをあらかじめ確保してから配置するか」を決めてから使うものです。
スライダーを入れることを決めたなら、そのスライダーの高さをあらかじめ指定する。メイン画像を大きくするなら、そのサイズをHTMLに明記する。これだけで、CLSの多くは改善できます。
デザインの指示書や要件定義に「各要素のサイズを事前に確定する」という一行を加えること。これが、発注側から制作側に渡せる最も具体的な指示の一つです。
購入に必要な情報が、早く・ずれずに出ることを優先する
表示待ち要素を減らすことが、デザイン改善の第一歩です。その後で、見た目を足す。
この順序が逆になると、どれだけ見た目を磨いても、お客さまは「読み込みを待って」「ずれた画面を操作して」「ポップアップを閉じてから」購入の判断をしなければなりません。それでは、CVRは上がりません。
購入ボタンと商品名が、開いた直後から早く・ずれずに出ること。この前提を整えてから、ブランドの世界観や演出を乗せていく。その順序を発注の基準として持っておくことが、D2C・EC事業者として重要な判断軸になります。
デザインとCVR、始める前に気になること──よくある質問
Q. メイン画像は小さくしたほうがよいのか？
A. メイン画像を使うこと自体は問題ではありません。重要なのは、大きさと置き場所を事前に決めることです。サイズをHTMLに指定してから配置すれば、読み込み中の表示ずれを防げます。大きな画像でも、サイズが明記されていれば周囲の要素は動きません。
Q. ポップアップは使わないほうがよいのか？
A. ポップアップを使うこと自体は問題ではありません。重要なのは、ユーザーが見たいコンテンツを塞がないタイミングと方法です。ページを開いた直後に全画面で表示すると、ユーザーの不満を招き、サイトへの信頼を損ないかねません。ユーザーがある程度コンテンツを閲覧した後で、小さなバナー型で表示するなど、コンテンツへのアクセスを妨げない設計が重要です。
Q. Core Web Vitalsが良好ならCVRは上がるのか？
A. Core Web VitalsとCVRの直接的な相関については、この指標の定義文書には記載されていません。Core Web Vitalsは、お客さまの待ち時間とずれを測る指標です。これらを改善することは、CVR向上の前提条件を整えることですが、それだけでCVRが上がるとは言えません。購入への動線設計やコピーの内容なども、あわせて見直す必要があります。
Q. どこで自社の数値を確認できるのか？
A. Google Search ConsoleのCore Web Vitalsレポートで、実際のユーザーの使用状況データを確認できます。モバイルとパソコンで分けて表示されるため、それぞれの状態を確認してください。Search Consoleにログイン後、左メニューの「Core Web Vitals」から確認できます。
Q. デザインを変えたら、何を見て効果を判断すればよいのか？
A. Search ConsoleでLCP・INP・CLSの数値がどう変わったかを確認してください。同時に、実際のCVRの変化も追跡することで、デザイン改善が購入の判断にどう影響したかを判断できます。指標が改善されてもCVRが変わらない場合は、コピーや導線など別の要因を確認する段階に進みます。
デザインとCVRの改善を、一緒に考える
今の自社サイトのCore Web Vitalsを確認してみてください。Search Consoleを開き、左のメニューから「Core Web Vitals」を選ぶだけです。モバイルの数値に「改善が必要」や「不良」の表示があれば、それが出発点です。
確認した数値を手元に置き、「どの要素がどの指標に影響しているか」を整理することが、次の一手になります。
デザインをリニューアルしたのに成果が変わらなかった経験、社内で「本当に効果があるの？」と問われる状況——その出口を見つけるための相談を、無料で受け付けています。
LPの成果について、相談先をお探しなら
私は、LP制作に加えて、公開後の数字が動くまで伴走しています。
- 600件を超えるLP制作
- D2C・単品リピート通販に特化
- CVRが落ちている箇所の特定から着手
「作り直すべきか、直すべきか」の判断からご相談を承っています。
今のLPが「どこで・なぜ」成果を落としているのか。その一点を一緒に見るところから始めます。
