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

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

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

PCとスマホの差から見る、サイトに考慮すべきこと

PCのディスプレイが横幅1000pxを超えるのに対して、スマホのディスプレイはその半分以下で、小さいものになると320px程度しかありません。

どちらかの専用サイトを他方のデバイスで見ると、コンテンツが一部しか表示されなかったり、異様に幅が狭い印象を受けたりします。

閲覧デバイスによってサイトレイアウトを切り替える必要があります。

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

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

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

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

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

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

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

閲覧デバイスの解像度ごとにレイアウトを切り替える設定を行い、どんな端末からでも閲覧に耐えるサイトを作ります。いわゆるレスポンシブウェブデザインというやつで、現在主流の対応です。

代表的なの例がナビゲーションの表示位置変更ですね。十分な横幅がある場合はサイドバーとして表示し、小画面の場合はフッターに移動します。

端末差異によってユーザーを取りこぼすことのない、最もスマートな対応といえます。広く閲覧して欲しいサイトを作る場合は、ほぼレスポンシブウェブデザイン一択となります。

欠点は作るのが面倒なこと、作り込むのがもっと面倒なことです。サイト制作の勉強を始めたばかりの人にとっては、少し敷居が高いかもしれませんね。

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

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

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

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

どちらかのデバイスでしか閲覧できないサイトは、閲覧できるユーザーが限られ検索エンジンに対しても不利になります。しかし趣味サイトや内輪サイトであればそう問題にはなりません。

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