PCサイトとスマホサイトの違い

web

スマートフォンが普及し、多くの人がスマートフォンでウェブサイトを閲覧するようになりました。 しかしPCとスマートフォン、どちらも同じようにサイトを閲覧できると言う訳ではありません。 PCで閲覧する事を前提に作ったサイトでは、スマホで閲覧した場合に色々問題が出てくることがあります。

デバイス差異に起因する問題点

解像度が小さい

ほとんどのPCが横1000pxを超えるのに対して、スマホは小さいものなら320px程度しかありません。 PCサイトをスマホで表示すると、スマホのブラウザ解像度に合わせて表示されるため、コンテンツが一部しか表示されません。 スマホでの表示時はPCとは別のレイアウトを用意する必要があります。

画面に表示できる情報量が少ない

画面サイズが小さい分、表示できる情報量は少なくなります。 同じページでもPCに比べて読むのに時間がかかり、ドラッグの機会が増えます。 ページ遷移やリンクに辿りつくのにも沢山の操作が必要です。 表示する情報を絞る必要があります。

重いサイトの読み込みに時間がかかる

一般的にPCに比べてスマホは回線が貧弱です。 PCではストレスなく表示できるサイトでも、スマホでは表示に時間がかかる事があります。 1ページあたりのサイズは考えなければなりません。 また画像の容量自体にも制限があります。 ナビゲーションやヘッダーはテキストの使用も検討しましょう。

UIの違い

PCはキーボードやマウスで操作するのに対し、スマホは指で操作します。 マウスオーバーなどのイベントは処理できません。 またマウスでは難なく押せるリンクも、指では他のリンクを巻き込んで押してしまうかもしれません。 間隔を広く取ったり、スマホには専用のUIを用意してやる必要があります。

PCとスマホの両サイト制作を考慮する際の選択肢

スマホ対応に際して取れる選択肢は、主に3つです。

  1. PC閲覧用サイトとスマホ閲覧用サイトを別々に製作する
  2. PCとスマホどちらで閲覧しても問題ないように製作する
  3. PC・スマホいずれかの専用サイトと割り切り、他方については考慮しない

PC閲覧用サイトとスマホ閲覧用サイトを別々に製作する

物理的にサイトを分け専用サイトにしてしまうのが最も効果的な方法ではあります。 しかしながら同じ内容でサイトを2つ持つことになるので、製作にも運用にも倍の手間がかかります。 折衝案としてスマホ用サイトはトップページのみ作りこみ、コンテンツはPC用サイトからリンクして取得する方法も取られます。

PCとスマホどちらで閲覧しても問題ないように製作する

いわゆるレスポンシブウェブデザインというやつです。 PC用サイトを基準としつつも、スマホの低解像度画面でもある程度見られるようにします。 コンテンツはあらかじめスマホ閲覧を意識した内容にする、サイドバーを下に送るなどで横幅を確保するなどします。 専用サイトには劣りますが、2つ作るよりは制作・運用コストを低く抑える事ができます。

PC・スマホいずれかの専用サイトと割り切り、他方については考慮しない

何も対処しないのも一つの対処方法ではあります。 PCあるいはスマホの専用サイトである事を明記し、ユーザーにはそちらでアクセスしてもらいます。 趣味のブログや内輪のサイトであれば全く問題ありません。

ただモバイル機器にレイアウトが対応していないサイトは検索エンジンの評価が下がります。 またユーザー獲得の機会損失となる事は言うまでもありません。

ウェブサイトの性質・用途に合わせて対応を行いましょう。

アマルウェブ HOME