PC・SPデザイン デバイスごとの最適なデザインで、
ショッピング体験を最大化する

DESIGN / FUNCTIONS
PCとスマートフォンのそれぞれに、独立したデザインを設定できる機能です。商品詳細ページ・ジャンルページ・ランディングページなど主要なECページで、デバイスの特性を最大限に活かしたレイアウトと表現を実現します。デバイスごとに最適な見せ方をすることで、購買体験とCVR向上をサポートします。
PC SPデザインのイメージ
メルカートのデザイン機能をまとめた資料はこちら

PC・SPデザインとは

PC・SP個別設定
PCとスマートフォンそれぞれに完全独立したデザインを設定できる。デバイス固有のUIに最適なレイアウトを実現。
対応ページ
商品詳細ページ・ジャンルページ・ランディングページなど、主要なECページすべてに対応。
レイアウト最適化
カラム構成・ビジュアルサイズ・情報の配置順をデバイスごとに個別に最適化できる。
デバイス別販促
PCとSPでバナーや訴求コンテンツを出し分けた施策が実施可能。デバイスの利用シーンに合わせたマーケティングを実現。
LP高没入設計
ドーム一体型ランディングページに対応。PCとSPそれぞれに没入感の高いLP体験を提供できる。

PCとスマートフォン、それぞれに最適なデザインを設定

デバイスによって異なるユーザーの閲覧環境・操作方法・購買行動に合わせて、商品の魅力を最大限に引き出すデザインを個別に設定できます。

PCに特化した、情報量豊かなデザイン

PCでショッピングするユーザーは、大きな画面を活かして複数の商品画像や詳細スペックを一度に確認したい傾向があります。商品詳細ページやジャンルページをPCの広い表示領域に最適化したレイアウトで設計することで、比較検討から購入決定までのプロセスをスムーズにサポートします。ジャンルページでは最適な列数・バナーサイズでの商品陳列も可能です。

  • メイン・サブ画像を大きく並べて表示し、商品の質感や詳細を訴求
  • スペック表・レビュー・関連商品など豊富な情報を整理して配置
  • ジャンルページのバナーや商品一覧をPCに最適な列数・サイズで表示
  • ドーム一体型LPでビジュアルを活かした高没入なページ体験を実現
¥12,800 カートに入れる お気に入りに追加
図:PCサイトの商品詳細ページ デザイン例(2カラムレイアウト)
¥12,800 ★★★★☆ (128件) 購入する
図:スマートフォンの商品詳細ページ デザイン例(縦型フルスクリーンレイアウト)

スマートフォンに特化した、直感的な購買体験

スマートフォンユーザーは縦スクロール操作が中心で、タップのしやすさや情報の取捨選択が重要です。SP向けに商品画像をフルスクリーンで大きく見せたり、購入ボタンを画面下部に固定したりと、モバイルならではのUXを追求したデザインを設定できます。ジャンルページもSP専用のバナーサイズと陳列レイアウトで最適な見せ方が可能です。

  • 縦長画面に合わせたフルスクリーン商品ビジュアルで視覚的インパクトを最大化
  • 購入ボタンやカゴ追加CTAをタップしやすいスティッキーフッターに配置
  • ジャンルページのバナーをSP専用のサイズ・比率でシャープに表示
  • スクロールに沿った情報の優先順位設計で迷いのない購買動線を実現

デバイス最適化デザインが生む3つの効果

PCとスマートフォンでデザインを使い分けることで、それぞれのデバイスでの購買体験を高め、売上に直結する成果をもたらします。

  • 📈

    購入転換率(CVR)の向上

    デバイスの画面サイズや操作感に合わせたレイアウトにより、ユーザーが迷わず購入判断できる環境を整えます。特にスマートフォンでの購入率改善に直結し、機会損失を防ぎます。

  • 🎨

    ブランドの世界観を余すことなく表現

    PCではリッチなビジュアルと情報量で世界観を演出し、SPでは大胆なフルスクリーン表現でブランドの印象を高めます。デバイスごとに最適なクリエイティブでブランド体験を届けられます。

  • 📣

    デバイス別の販促施策を自在に展開

    PCではじっくり閲覧するユーザーに向けた詳細訴求コンテンツを、SPでは外出先での購買を促す即時CTA型レイアウトを設定するなど、デバイスの利用シーンに合った施策が実現できます。

PC・SPデザインについてよくあるご質問

PCとスマートフォンで完全に異なるデザインにできますか?
はい、PCとスマートフォンそれぞれに独立したデザインを設定できます。レイアウト構成やビジュアルの配置、情報の見せ方を各デバイスに合わせて自由に設計可能です。
どのページでPC・SP別デザインを設定できますか?
商品詳細ページ・ジャンルページ・ランディングページなど主要なECページで設定が可能です。ドーム一体型のランディングページにも対応しています。
スマートフォン向けに商品画像の配置やサイズを変えられますか?
はい、SP専用のレイアウトとして画像のサイズ・縦横比・配置位置を個別に設定できます。スマートフォン特有の縦長画面を活かした表示設計が可能です。
PCとSPでバナーや販促コンテンツを出し分けることはできますか?
はい、デバイスごとにバナーサイズや訴求内容を変えた販促コンテンツの出し分けが可能です。デバイスの利用シーンに合わせた施策展開が実現できます。

PC・SPデザイン に関連する機能