どの端末でも簡単に購入できるネットショップサイトにしよう

どの端末でも簡単に購入できるネットショップサイトにしよう

スマートフォンやタブレットなど、パソコンよりモバイル端末を使用する人がとても増えてきている現在。
お客様がどの端末を使っていても、あなたのネットショップで買い物がスムーズに行えることは売上に直結する重要な問題になります。

モバイル表示に適したサイトが有利に

主流の検索エンジンGoogleでは、モバイルファーストインデックスに順次移行が進んでいます。

モバイルファーストインデックス(MFI)とは
Google検索にインデックス登録・ランキング順位を判定する際に、今まではパソコンのサイトを基準にしていたのを、モバイル側のサイトを基準に判定するというものです。
既に順次移行は進んでおり、公式の発表では2020年9月には移行完了になるそうです。
これはインターネットを閲覧している端末が、既にモバイルがパソコンを上回っている背景と、今後もモバイルでの閲覧が増加すると予想されているためです。

なお、モバイル用にサイト表示を最適化した状態をモバイルフレンドリーと言います。

MFIでは検索結果に優先的にモバイルサイトが表示されるようになるため、影響を受けるサイト構成は主に下記2つと言われています。

・パソコン用のサイトとモバイル用のサイトの2つの構成で運営している場合
・アクセスしてきた端末によってパソコンサイトとモバイルサイトを動的に切替えている場合

レスポンシブデザインは1つのURLなのでMFIの影響はありません。(コンテンツを過剰に隠している場合は除く)
パソコンサイトしかない場合は、モバイルの端末では見づらいケースがほとんどで検索結果に影響はなくても、お客様が購入前にサイトから離脱してしまう可能性が高くなるので、モバイル対応を検討したほうがよいでしょう。

影響があるサイトは何をすればいいのか

パソコン用とモバイル用の2つのURLがある場合は、どちらがメインのサイトなのかの設定をしっかりしておく必要があります。
それぞれに「canonical」と「alternate」を設定しましょう。
設定例はこちらのGoogleの公式ページを参考にしてください。

※元々設定がされている場合は、入れ替えの修正をする必要はないとGoogle関係者が発表しているので、そのままで問題ありません。

また、別URLだけでなくレスポンシブのサイトでも注意が必要ですが、パソコンとモバイルでコンテンツの差が出ないようにしましょう。
モバイルは表示範囲が限られているためパソコンよりコンテンツを削ってしまっている場合が多いです。

削るのではなく、閲覧者の見やすさ(UX)に配慮して折りたたみ式で表示するなど一旦隠すなどで対応しましょう。
なお、動的に隠す(HTMLコードが後から追加されるような仕組み)だと悪質なサイトと判定される恐れがあるのでCSSで制御するように気を付けましょう。
また過剰にコンテンツを隠すことも同様に悪質と判定される可能性があります。

あくまで見る人がわかるようなUIという範囲で調整しましょう。
UX/UIについては下記記事にて説明しています。

レスポンスデザインを検討してみる

レスポンシブデザインとは、1つのサイト(URL)で、スタイルシート(CSS)を利用して画面サイズによって最適なレイアウトを表示する手法です。
例えば、パソコンサイズでは画像サイズが大きかったり横並びのコンテンツだったものが、モバイルサイズでは小さい画像になったり縦並びのコンテンツに変わったりします。
見る人の端末に適したレイアウト=モバイルフレンドリーなサイトが実現できます。

ただし、画面サイズが少しでも違うとレイアウト崩れを起こしたりするので、サイトを構築するときにそれなりの知識や技術が必要になるので、1から作るには敷居が高いことがデメリットです。

それをカバーするために便利なフレームワークがあるので利用を検討してみるのもいいでしょう。
ただし、1から構成するよりは楽ですがそれでもウェブ初心者には難易度が高いため、多少コストがかかってもCMSを検討したほうがよいでしょう。

フレームワークについて

ここでは、サイト構築するためのCSSフレームワークのことを指します。
CSSとはウェブ上のデザイン(スタイル)を調整するための記述ファイルのことです。
フレームワークとは、様々なウェブのデザイン部品が詰まったキットです。

たとえば、本来ボタンを自作するときは、CSSで角を丸くしたりボタンを立体的にしたりと、デザインを自分で調整しなければいけません。
フレームワークを使えば、すでにボタンのデザインは用意されているので、簡単に綺麗なボタンが作れます。

レスポンシブデザインのサイトもフレームワークを使うことで1から作るより断然簡単に作成できます。

有名なフレームワークを一部紹介しますが、デザイン豊富なのを選ぶか軽量を優先するかなど、各々特徴がありますので、是非あなたに合ったフレームワークを探してみてください。

Bootstrap
Foundation
Bulma
UIkit

CMSとは

コンテンツマネジメントシステムの略。
HTMLなどの専門的な知識がなくても、コンテンツを組み立てたりテンプレートを選んだりすることで簡単にウェブサイトを構築できるシステムです。

CMSは多数サービスが存在していますが、今いちばん有名なCMSはWordPressでしょう。

利用しているレンタルサーバーで簡単にインストールができるところも増えているので、すでに契約をしているサービスで確認してみてはどうでしょうか。

WordPressは手厚いサポートをしてくれるところはだいたいお値段高めになる可能性が高いので、低コストでデザインにこだわりたい人や自分で簡単に作りたい初心者の方には、難易度が高い印象があります。

また、最近のCMSはレスポンシブデザインのサイト構築ができるところがとても増えてはいますが、古いCMSだと今でも非対応の場合もあるため、利用前に必ず確認をするようにしましょう。

コンテンツの配置に配慮する

色々な端末幅で、どの位置にどのコンテンツがあるとユーザビリティが高いかを考えましょう。

たとえば商品を購入するボタンの場合。
端末がスマートフォンの場合は片手で持つため、片手でもタップできる位置やボタンサイズであるようにするのが理想です。

また、写真も端末が小さい時でも大きく見れるようにタップすると拡大したり、スライドで他の写真を見れるようにする工夫してみるのも良いでしょう。

逆に押し間違えを想定して、片手でのタップ位置に必要のないボタンやリンクは避けるようにしましょう。

どの端末でも、スムーズにお買い物ができるようなコンテンツ配置を心がけることが大事です。


モバイル対応していないネットショップ様で新規顧客を開拓したい場合は、モバイルフレンドリーは必須と言ってもいいくらい重要な対応です。

また、既に固定客がついているから特に困っていない場合であっても、「お客様のため」にサイトのユーザビリティを上げるため、今一度ネットショップを見直してみてはいかがでしょうか。

ネットショップ作成カテゴリの最新記事