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

web

インターネット黎明期はPCでのみウェブサイトを閲覧されていましたが、近年はスマートフォンで閲覧される機会が増えました。 しかしPCとスマートフォン、どちらも同じようにサイトを閲覧できると言う訳ではありません。

どちらかでのみの閲覧を前提に作ったサイトでは、他方で閲覧した場合に問題が出てくることがあります。 両端末の違いは大よそ画面サイズの違いに集約され、それを考慮したサイト作りが必要となります。

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

解像度が小さい

PCのディスプレイが横幅1000pxを超えるのに対して、スマホのディスプレイはその半分に満たず、小さいものになると320px程度しかありません。 どちらかの専用サイトを他方のデバイスで見ると、コンテンツが一部しか表示されなかったり、異様に幅が狭い印象を受けたりします。

スマホでの表示時はPCとは別のレイアウトを用意する必要があります。

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

スマホは画面サイズが小さい分、表示できる情報量は少なくなります。 同じページでもPCに比べて読むのに時間がかかり、ドラッグの機会が増えます。

大画面では表示する情報を多く、小画面では表示する情報を絞る必要があります。

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

一般的にPCに比べてスマホは回線が貧弱です。 PCではストレスなく表示できるサイトでも、スマホでは表示に時間がかかる事があります。

1ページあたりのサイズは考えなければなりません。 画像よりもテキストやCSSを使用するなどして軽量化を図る必要があります。

UIの違い

PCはキーボードやマウスで操作するのに対し、スマホは指で操作するためマウスオーバーなどのイベントは処理できません。 またマウスでは難なく押せるリンクも、指では他のリンクを巻き込んで押してしまうことも多いです。

ナビゲーション間隔を広く取るなど、スマホサイトにはPCサイトとは違った考慮をする必要があります。 UIはPCサイトをスマホサイト基準にしてもそれほど問題はないので、スマホサイトに寄せるように意識すると良いでしょう。

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

サイトのデバイス対応における選択肢は、主に以下の3つです。

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

いわゆるレスポンシブウェブデザインというやつですね。 サイトを閲覧するデバイスによってCSSを切り替え、どんなディスプレイサイズでも問題ないようにサイトを作ります。 例えば十分な横幅がある場合はサイドバーとして表示されるけど、小画面の場合はフッターに移動されるなどの対応です。

最もスマートな対応であり、Googleなどの検索エンジンもこの方法を推奨しています。 特に広く閲覧される商用サイトを作る場合は、ほぼレスポンシブウェブデザイン一択となります。

欠点は作るのが面倒なこと、作り込むのがもっと面倒なことです。 通常のサイトはHTMLとCSSを一週間も勉強すれば一日で作れますが、しっかりしたレスポンシブウェブデザインのサイトを作るのは難易度が高くなります。 サイト制作の勉強を始めたばかりの人にとっては、少し敷居が高いかもしれませんね。

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

物理的にサイトを分けてPC/スマホ専用サイトにしてしまうのもアリと言えばアリです。 これならややこしいロジックは必要ないので作るのは簡単です。

しかし同じ内容のサイトを2つ持つことになるので、製作にも運用にも何かと手間がかかります。 また検索エンジンに対してもコピーサイトと判断されないように対応する必要が出てきます。

スマホがあまり普及していなかった頃はこの対応がされたことも多かったのですが、現在はあまりされません。 デザイン性が重要視されるサイトであれば選択肢になることもある…のかな?

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

不親切ではありますが、PC/スマホ専用サイトと割り切って何の対処しないのも一つの手ではあります。 うちのサイトを見たければPC/スマホで見ろと、頑固なラーメン屋のおやじみたいに言い張る訳です。

どちらかのデバイスでしか閲覧できないサイトはユーザの多くを切り捨てることに繋がり、また検索エンジンに対しても不利になります。 多くの人に見てもらいたいサイトの場合は避けた方が賢明ですが、趣味サイトや内輪サイトであればそう問題にはなりません。

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

\share/

よく読まれている記事