ECサイト構築・リニューアルならクラウド型ECサイト構築ASPサービスサイトへ
資料請求
TOP

CATEGORY

SERVICE

マルチデバイス時代に合わせたユーザーに最適なLPを考える

マルチデバイス時代に合わせたユーザーに最適なLPを考える

マルチデバイス対応のランディングページとは

前回の記事「マルチデバイス時代に合わせた Google検索や広告出稿に最適なランディングページとは?」ではGoogleの広告運用の変更やGoogleが推奨するサイト構築方法について解説いたしました。

今回はGoogleが一番推奨するレスポンシブwebデザインを使ってどのようにランディングページを構築していけばよいかを解説していきます。

スマートデバイスを中心にサイトを構築する

レスポンシブwebサイトでランディングページを構築する場合、ただ単にPCサイト用のコンテンツをスマートデバイスに縮小するだけでは意味がありません。

これまでのPCサイトでの構築の考え方を変える必要があります。ランディングページに限らずレスポンシブwebサイトを構築する上で非常に重要なのがワイヤーフレーム(サイトの骨組み)の構築になります。

それぞれのデバイスでどのような表示をさせるのかを構築する前に決めてしまえば、あとはコンテンツの配置に従い当て込んで行けばよいので非常にスムーズに構築ができます。

PC、タブレット、スマートフォンのワイヤーフレームイメージ

ポイントは各デバイスで共通したコンテンツを使うという事になります。

前述したように、Googleは1ソース1URLでのサイト構築/運用を推奨しています。テキストももちろんですが画像(バナー素材)でもPCを中心に考えて作るとPCではうまく表示できるもののスマホでは画面が小さいが為にまったく読めない文字になる可能性もあります。

PC用をスマホにそのまま小さくすると見にくい

よってレスポンシブwebサイト構築を考える上で『スマートデバイスから考える』という事が大きなポイントになります。

サイト上にあるランディングページを見ていると、『PCサイトをスマホで最適化されている風にする』という方法をよく見かけますが、これは論外です。既にエンドユーザーのスマホサイトに対する目が肥えてきている中でしっかりと最適化されていないECサイトは確実にCVRが下がります。

どのデバイスでもきっちりと情報が閲覧でき、ユーザーが目的としている情報をにたどり着けるように最適化しなければなりません。

レスポンシブwebサイトでもPCとスマホサイトでは表示を変えてこだわりたい

前述したようにレスポンシブwebサイトでは共通のコンテンツを表示させることが原則としてあります。

しかしCVRを上げる為にどうしてもデバイスに合わせたデザインをしたい!という声も実際多く頂きます。弊社aishipRではそのようなお客様のご要望にもお答えできるよう、デバイス毎に表示させるコンテンツをクリック1つで切り替えることができます。

スマホ用コンテンツに切り替える

上記のようにスマートフォン専用のヘッダーやスマートフォン専用のメイン画像を用意し、管理画面にて簡単にデバイス毎の表示が切り替え可能になっています。

クリック1つで表示の切替可能

 

まとめ

レスポンシブwebサイトというととても小難しく考えてしまいますが、その必要はありません。まずはレスポンシブwebサイトとは何なのかをしっかりと理解し、実際にサイトオーナー側がスマートデバイスやPCなど様々なデバイスで買い物をする際のUX(ユーザーエクスペリエンス)を各デバイスに反映させていけばよいのです。

これはランディングページを考える上でも同じです。

これまでもEC事業者様の多くはPCサイトではランディングページ等取り組んでこられたと思います。そのリソースを今後はスマートデバイスを中心にシフトしPCサイトでも閲覧できるコンテンツに考え直しレスポンシブwebサイトで構築していく必要があります。

岡村

                   
商品の販売に“夢中”になれる
クラウド型ECサイト構築ASP

ECサイト構築、リニューアルを2000社以上支援してきた知見から
ECの専門家として御社のEC事業成長をサポートします。

  • 導入実績2000社以上


    導入実績

  • 注文単価増加率114%

    導入1年後の
    注文単価
    増加率

  • 売上成長率128%

    導入1年後の
    売上成長率

  • EC支援歴20年


    EC支援歴

         

レスポンシブWebデザインカテゴリの最新記事