記事内に広告を含む場合があります。

スマホサイトとPCサイトの違い・PCでスマホサイトを見る方法

WordPressでサイトを作る場合、複数のデバイス(画面サイズ)に自動的に対応させることができる”レスポンシブデザイン”と呼ぶ制作方法をオススメします。

スマホサイトとPCサイトを別々に作ると手間がかかりますが、レスポンシブデザインは1つのURLに対して1つのHTMLで済むので、ページの運用コストを削減でき、ユーザーに対して統一したメッセージを伝えることができます。

グーグルは2012年頃からレスポンシブデザインでサイトを制作することを推奨
しています。

昨今では殆どのサイトで、PCからのアクセスよりもモバイルからのアクセス数が多くなっているため、そもそもコンテンツをPC用、スマホ用と分ける必要性がなくなりつつあります。
ユーザーがどんなデバイスでアクセスしてきても、コンテンツを見やすく提供できるようにしましょう。

ブログの始め方はこちらの記事をご覧ください。
ブログの始め方・初心者がブログで稼げるようになる方法と手順

スマホサイトとPCサイトのURLを分けるべきか

スマホ用とPC用で別々の内容を見せたい時に、URLをそれぞれ分けて作る方法もあります。

しかし、この方法はおすすめしません。

URLを分ける場合のデメリットは
・管理が大変になる
・検索エンジンの制御が複雑になる

という点です。

スマホサイトを作る時の注意点

WordPressブログの場合、WordPressテーマがレスポンシブに対応していればスマホ対応ができているはずです。

スマホ対応ができているかどうかは、Googleが示す「モバイルフレンドリー」かどうか、という判断をします。

レスポンシブで作られている=モバイルフレンドリーになっている、とは限らない場合があるので要注意です。

モバイルフレンドリーになっているか

レスポンシブデザインのテーマを使ってサイトを作ったからといって
モバイルフレンドリーになっているとは限りません

必ず、モバイルフレンドリーかどうかを確認しておきましょう。

モバイルフレンドリーテストというツールでモバイルフレンドリーになっているかを確認できます。
参考 モバイルフレンドリーテスト

テキストの量や改行が適切か

レスポンシブデザインで制作する際に、パソコンでの見え方よりもスマホでの見え方を意識する必要があります。

特に改行や段落の取り方については、PCとスマホでは見え方が異なるので、
更新する度にスマホでの見え方を確認しましょう

PCとスマホでの見え方の違い

ブログを作る場合、パソコンで作っていても実際の読者はスマホからアクセスをしていることが多いです。

そのため、スマホでの見え方を意識してページを作るのがおすすめです。

たしかにパソコンでのデザインよりもスマホを意識したサイトのデザインの方が重要ですね。

PCでスマホページを見る方法

スマホでの見え方をチェックする場合、毎回スマホで確認するのは面倒ですよね。

Googleのブラウザー「Google Chrome」を使うとPCから簡単にスマホビューを確認することができます。

ページ上で右クリックをして「検証」をクリックします。
スマホのようなアイコンが表示されるので、そのアイコンをクリックするとスマホビューに変更できます。

参考 モバイルサイトを実装する 3 つの方法developers.google.com