記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

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のサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
         

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