Smartphone スマホ

 
スマホ

スマホでPCサイトを表示させた場合の問題点

formain0818

「スマホサイトを作らなくても、スマホでPCサイト見れるからとりあえずいいんじゃない」なんて考えていませんよね…という記事が以前モバイルラボでもアップされましたが、制作現場でもそういう声を聞くことが結構あります。

アクセス数はモバイル比率がどんどん高くなってきているにも関わらず、「既存のユーザーは現状でもスマホでアクセスしてくれているのに、スマホ用サイトを作成したら、逆に嫌がられるかもしれない」と、悩んでいるクライアントもいらっしゃいます。

確かに「PCサイトしかなくても、見たい人は見る」という考えは間違いではないかもしれませんが、見づらいサイトを無理やり拡大して見てくれている、ということは事実。自分なら対応しているサイトとそうでないサイト、どちらに頻繁にアクセスするだろうか? ということを考えてほしいと思います。

ではここで、スマホ実機でPCサイトを閲覧してみた際に、私が感じた見づらい理由をまとめてみました。

PCサイトをスマホで見るとかなり見づらい

PCサイトがスマホで閲覧しづらい理由①

画面サイズの違い
mobilelabtop0818

ここ数年の主流なPCサイトの横幅は、980px~1200pxなのに対し、スマホはiphoneで320pxと1/3以下。サイズが小さくなればなるほど、当然1ページ内に表示できる情報量は変わってきます。

PCはファーストビューが1番見られ、かつ次のアクションに繋がる行動(CA:クリックアクション)が多い領域だと言われており、PCサイトは出来る限りこの領域の中に情報を詰め込んでしまいがち。ヘッダー、グローバルナビゲーション、サイドメニュー、メインコンテンツ…2カラムや3カラムの構造のサイトが多いのはこういった理由からではないでしょうか。

そんなギュウギュウに作られたPCサイトをスマホで見ると、文字サイズや画像が1/5くらいの大きさになってしまうため、見たい部分をピンチして拡大しなければなりません。経験のある方は多いと思いますが、これって結構面倒です。

スマホユーザーは、縦スクロールで下に移動することはさほどストレスに感じないそうです。横幅はスマホに合わせ、縦に長いレイアウトに構成し直すことで、スマホでもユーザーがストレスを感じることなく閲覧することが可能です。スマホはスマホユーザー目線のUI設計を行いましょう!

少し話がずれますが、スマホ最適化されていない入力フォームもかなりの頻度で見かけます。

20140827_1

レスポンシブデザインでスマホ用に横幅を変えているフォームもあるにはあるのですが…入力項目をタップすると、その項目だけ拡大されることが多いです。

スマホでwebサイトを閲覧するタイミングって、「ながら」が多いので、(TVを観ながら、移動しながら…)「あれ、今何の質問に答えてるところだったっけ?」となり、そうなるとまた縮小し確認しなくてはならず、それが続くとかなりストレス。

実際に「これ何とかして」という要望をクライアントから受けたことがあります。

ちなみにこちらの対処方法は、メタ要素のviewpointを工夫するだけ。「user-scalable=no」と設定すると回避されます。ピンチ拡大はできなくなるのでご注意を。

PCサイトがスマホで閲覧しづらい理由②

どこが押せるか分かりづらい上に押しにくい

PCサイトは、基本的にマウスで操作します。最近のサイトは、リンクがある部分(テキストや画像)にマウスオンをすると色が変わったり、動いたり(!)する工夫がされていることも多くなりました。スマホでは大抵が指での操作となるわけですが、PCとは違いマウスオンという概念がないため、感覚的にどこが押せるかが分かりづらいです。

さらに、画像が密集していたりフォントサイズが小さいため、意図しない部分を押してしまう、なんてことも。これはイライラしますね。

PCサイトがスマホで閲覧しづらい理由③

表示スピードの違い

回線速度

PCサイトを見るときの環境で一番多いのは、光回線という高速なネット接続です。
動画をひたすら埋め込んだり、FlashやJavaScriptでガリガリ・ゴリゴリの作りにしない限り、大抵スムーズに閲覧することができます。

対してスマホは、「3G回線」という携帯電話向けの回線でインターネットに接続します。近頃は「4G」や「LTE」という、3Gよりは比較的速い回線がありますが、光回線には遠く及びません。

webサイトの土台となる、htmlファイルは約50KB(キロバイト)前後と軽く、携帯電話向け回線でも閲覧に問題はありませんが、画像は1つあたり数100KB、大きいものではMB(メガバイト)を超えるものも。

そのため、画像を多く使っているサイトをスマホで見ると、画像の読み込みに時間がかかり、webページ自体の表示がとても遅くなってしまうのです。

ユーザーがストレスなく閲覧できるページ読み込み時間は「3秒」程度と言われています。4秒以上かかってしまうと、「このサイト重い」と、離脱されてしまうことも。スマホサイトは「軽く作る!」に限りますね。

以上が、PCサイトでスマホを表示させると見づらいこと間違いなしの3大理由です。
その他にも様々な理由が挙げられますが、上記の3つは実際にPCサイトをスマホで閲覧した際に実感しやすいものになっていますので、ぜひご自分のスマホで確認してみてください。

PCオンリーのwebサイトがこの世からなくなることを切に願いながら…
今回の記事はここまでとさせていただきます。

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事