# コンバージョンを確実に引き上げる、ECのデザイン判断10選 > 「余白を増やそう」でも「ボタンの色をテストしよう」でもありません。実際のストアでコンバージョンを動かす、視覚的な階層、写真、書体、モバイルに関する具体的な選択を紹介します。 Ryan Badger - 2024年11月3日 - 読了目安 7 分 ## コンバージョンを実際に動かすデザイン判断 デザインの記事は、たいてい2つの陣営に分かれます。「たっぷり余白を使おう！」（漠然としすぎ）か、「ボタンの色を47通りA/Bテストしよう」（細かすぎ）です。どちらも、自分のストアのコンバージョン率が1.3%なのはなぜだろう、と眺めている人の助けにはなりません。 この記事では、ECストアのコンバージョンを確実に動かす、具体的なビジュアルデザインの判断を扱います。好みの話でも、ブランドの美学の話でもありません。人が買う手助けになるか、邪魔になるかを分ける、レイアウト、階層、色、書体の選択です。 ## 1. 視覚的な階層：最も重要なものが、最も重要に見えるようにする 多くのストアは、商品ページのあらゆる要素に同じ視覚的な重みを与えています。本文は16px、価格は18px、見出しも18px。どの要素も競り合い、勝つものがありません。視線の入り口がないのです。 解決策：クリックしてほしいものを、ページで最も大きく、最もコントラストが高いものにします。 - 商品名：28-36px - 価格：20-24px、太字で、はっきり区切る - カートに入れるボタン：モバイルでは幅いっぱい、ページで視覚的に最も重い要素に - 説明、スペック一覧、配送情報：14-16px、控えめに 商品ページを8フィート（約2.4m）離れて眺めたとき（文字どおり、のけぞって見てください）、主要な行動が何か分かりますか？ ページ全体が灰色のスープのように見えるなら、階層が崩れています。 ## 2. 余白はCTAの周りに。どこにでもではなく 「もっと余白を使おう」は、万能のデザインのコツとして持ち出されます。実際に大切なのは、余白そのもののための余白ではなく、ボタンと主要な要素の周りの余白です。 - カートに入れるエリアの周りに、少なくとも40-60pxのパディング - 価格は、ほかの文字に押しのけられず、独立したすっきりしたスペースに - 商品画像にはゆとりを（余白のない端から端までの配置にしない） それ以外（レビュー、配送情報、関連商品）は、もっと詰めて構いません。それらは二次的なものです。CTAのエリアは、唯一ゆとりのある場所であることで勝ちます。 ## 3. 「より良い」商品写真より、統一された商品写真 50商品のカタログで、写真がどれも少しずつ違う（背景、照明、ズームの度合いが違う）と、素人っぽく見えます。すべての写真が、同じ角度、同じ照明、同じトリミング、同じ背景なら、プロらしく見えます。 これは品質ではなく、数の問題です。売れ筋の上位5点には、磨き込んだヒーロー画像を使って構いません。それ以外は、多少地味でも、すべて同じように撮影しましょう。「小さくて信頼できない店」というシグナルは、低品質よりも不統一から伝わります。 実践的なルール： - メイン写真：白または無地の背景、中央配置、カタログ全体で同じトリミング - サブ写真：ライフスタイル／使用シーン、トーンを統一 - すべての写真で、アスペクト比と解像度を同じに ## 4. 大事なのはCTAの色ではなく、コントラスト 「オレンジのボタンは緑よりX%コンバージョンが高い！」。この手のテスト結果をよく目にします。単独では意味のない話です。大切なのは、**周りのページとのコントラスト**です。オレンジを基調にしたサイトのオレンジのボタンは見えません。同じサイトの青いボタンは、灯台のように目立ちます。 サイトの主要なカラーパレットとのコントラストが最も高い色を選びましょう。ページが白、黒、タン（黄褐色）なら、CTAはほかのどこにも出てこない唯一の色にします。 補足：主要なCTAには、ゴーストボタン（枠線だけで塗りなし）を避けましょう。上品に見えますが、目には「二次的」と映るため、コンバージョンのテストでは成績が悪くなります。カートに入れる、注文する、今すぐ購入には、塗りつぶしのボタンを使いましょう。 ## 5. モバイルでの文字サイズと行の長さ モバイルのストアの多くは、文字が小さすぎるうえ、行が長すぎます。スマートフォンは画素密度が高く、デスクトップで16pxの文字も、モバイルでは小さく感じられます。 モバイルの書体の最低ライン： - 本文：最低16-18px - 行の長さ：1行あたり40-60文字 - 行の高さ：フォントサイズの1.4-1.6倍 - ボタン／タップ領域：高さ最低44px（Appleのアクセシビリティガイドライン） 訪問者が商品説明をピンチで拡大しているなら、文字が小さすぎます。ブラウザのモバイルエミュレーターではなく、実機を腕を伸ばした距離で持ってテストしましょう。 ## 6. モバイルの追従型「カートに入れる」 モバイルで長い商品ページをスクロールしてみてください。説明を読み終える頃には、「カートに入れる」ボタンは3画面分も上にあります。購入を決めたお客様は、いまや上までスクロールで戻らなければならず、それがコンバージョン率を下げます。 解決策：元のボタンが画面外にスクロールされたら、モバイルの表示領域の下部に浮かぶ、追従型の「カートに入れる」を用意します。1回のタップでカートが開き、スクロールして探す手間がありません。 デスクトップ：表示領域が広いので、追従型のカートは任意です。モバイル：必須です。 ## 7. 商品ではなく、結果を見せるヒーロー画像 多くのヒーローセクションは、商品だけを白背景に置いて見せています。参考写真ならいいのですが、ヒーローとしては間違いです。ヒーローは「これがあると暮らしがどうなるのか」を2秒で伝える必要があります。 より良い方法：商品が使われている様子を、想定する買い手に合った人物や場面の文脈の中で見せます。 - スキンケア：使っている人、朝の光、洗面所 - 家具：実際の部屋に置かれた、生活感のある様子 - アパレル：マネキンではなく、動いている人が着ている様子 - 食品／コーヒー：商品写真ではなく、準備している、または楽しんでいる様子 使用中の商品をヒーローにしたほうが、商品だけのヒーローよりコンバージョンが高くなります。買い手のために想像の作業を多く肩代わりするからです。想像しなくても、自分がそれを使っている姿が見えます。 ## 8. ストア全体で統一されたコンポーネント よくある失敗：商品ページは1つのカードスタイル、カテゴリページは別のスタイル、トップページはさらに3つ目のスタイル。お客様は、言葉にはできなくてもこの不統一を感じ取ります。同じコンポーネントが一貫して現れると、ストアは信頼できるものに見えます。 小さなECデザインシステムとは、こういうものです。 - 商品カードのコンポーネントは1つ（トップページの注目商品、カテゴリの一覧、関連商品、検索結果で共通） - ボタンのシステムは1つ（プライマリ、セカンダリ、ターシャリ。この3つだけ） - 見出しスタイルのシステムは1つ（H1、H2、H3を一貫して適用） - カラーパレットは1つ（ブランドカラーは多くても3色、それにグレースケール） - タイプスケールは1つ（サイズは多くても3-4つ） 多くのストアは、1つで足りるものを15通りに作っています。バリエーションが少ないほど、プロらしい見た目になります。 ## 9. 最初の画面は、スクロールを促す広告 最初に読み込まれたときに見える領域（ファーストビュー）の仕事はただ1つ。訪問者に、スクロールしたいと思わせることです。それだけです。最初の画面で売ろうとしないでください。 ファーストビューに必要なもの： - 誰のためのものか（1行で） - 商品が何か（ビジュアルで、よい画像を1枚） - 明確なCTAを1つ（カートに入れる、または今すぐ購入） - 安心できる信頼のシグナルを1つ（評価とレビュー数、メディアの引用、または著名な顧客） ファーストビューに必要ないもの： - 注目を奪い合う複数のCTA - 3秒ごとに自動で切り替わるヒーローカルーセル（コンバージョンを殺します。内容が動くと、お客様は固まってしまいます） - 商品のあらゆるメリット - お客様の声のギャラリー ## 10. トップページのカルーセルをやめる 上の話と関連しますが、独立した項目にする価値があります。トップページのヒーローカルーセルは終わっています。回転するヒーローのスライドがクリックされる率は1-3%で、まともに注目されるのは最初のスライドだけだと、調査は一貫して示しています。スライド1に置くはずの1つのメッセージを選び、それを静止したヒーローにしましょう。残りは捨ててください。 ## Shoprocketでできること テーマ付きのストアフロントには、上で述べた視覚的な階層、コントラスト、モバイルのパターンにすでに沿ったテンプレートが付いています。自分のサイトにウィジェットを埋め込む場合、周囲のページのデザインはあなたが管理しますが、次の機能があります。 - **カートドロワー**（フルページのカートではなく）が標準 - **追従型のモバイルカート** に対応 - 自動のWebP配信と適切なアスペクト比を備えた、**レスポンシブな商品画像** - デザインシステムをゼロから作らなくて済む、**サイトビルダー＋40以上のテーマ** - サイトに合わせて埋め込みをテーマ化できる、**カスタムCSSのフック** ```
``` Shoprocketが管理しないもの：ヒーロー画像、写真の統一感、コピー、色のシステム。これらは、あなた自身が成功も失敗も握っています。 > **ヒント：** 今すぐスマートフォンで自分のストアを開いてください。商品ページを1つ選びます。スクロールせずに「カートに入れる」が見えますか？ 価格は、明らかに2番目に大きいものですか？ 目を細めずに説明を読めますか？ 1つでも「いいえ」なら、それが最初に直すべきデザインです。 ## 要点まとめ - **階層：** 最も重要な要素が、最も重要に見えるように。8フィートテストで確認しましょう - **余白はCTAの周りに。** 余白のための余白をどこにでも置くのではなく - **写真の統一感は、写真の質に勝ります。** カタログ全体で1つのスタイルに - **CTAは色ではなくコントラスト。** ページのパレットに対してコントラストが最も高い色が勝ちます - **モバイルの書体：本文は16px以上、タップ領域は44px以上** - **モバイルの追従型「カートに入れる」** は必須です - **ヒーロー画像は結果を見せます**（使用中の商品）。白背景の商品ではなく - **小さなデザインシステム（3色、4サイズ、3種類のボタン）** のほうが、15種類のバリエーションよりプロらしく見えます - **最初の画面が売るのはスクロールであって、商品ではありません。** 明確なメッセージを1つ、CTAを1つ - **トップページのカルーセルはやめましょう。** 静止したヒーローが勝ちます これらのパターンを備えたテーマ付きのストアフロントが欲しいなら、[無料トライアルを始めましょう](https://app-v3.shoprocket.io/signup)。14日間、カード不要です。 --- - HTML version: https://v3.shoprocket.io/ja/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion - Language: 日本語 (ja) - Also in: [العربية](https://v3.shoprocket.io/ar/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-design-entscheidungen-die-conversion-messbar-steigern.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [English](https://v3.shoprocket.io/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Español](https://v3.shoprocket.io/es/blog/diez-decisiones-de-diseno-ecommerce-que-mejoran-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/dix-decisions-design-ecommerce-qui-augmentent-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/sepuluh-keputusan-desain-ecommerce-yang-terukur-menaikkan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/dieci-scelte-di-design-ecommerce-che-aumentano-la-conversione.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/ti-designvalg-nettbutikk-som-loefter-konverteringen.md), [Nederlands](https://v3.shoprocket.io/nl/blog/tien-ontwerpkeuzes-webshop-die-conversie-verhogen.md), [Polski](https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/dez-decisoes-de-design-que-aumentam-a-conversao-no-ecommerce.md), [Română](https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia.md), [Русский](https://v3.shoprocket.io/ru/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari.md), [中文](https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md)