第1章 Lesson 6 ／読了約12分

スマホファーストへの理解 — パソコンよりもスマホの方が優先される時代

この記事でわかること

スマホ対応で大事なこと
スマホ表示の確認方法
「スマホファースト」は正解か

スマホが登場して 20 年以上が経過し、今では PC よりもスマホを持っていることの方が当たり前になってきています。そのため Web の閲覧の常識も変化し、Web サイトの多くはスマホで見られるようになりました。本 Lesson では、Web とスマホの関係について触れていきます。

1. 「スマホ対応」は必然

パソコンよりもスマホの時代

昨今では、若年層でもスマホを持っている人が多く、シニア層でもパソコンよりスマホを持っている人が多いというのが実情です。さらに、それ以外の層でも、自宅にパソコンを持たず、会社のパソコン以外は持たないという人も少なくありません。今や、パソコンよりもスマホの方が普及していると言えます。これに伴って Web サイトの閲覧もパソコンよりスマホの方が高まっている、という意識は Web担当者として非常に重要なことです。

スマホファーストという考え方

このようにスマホが一般化し、利用率が高まる中、Web サイトを作るときも、パソコンで見ることを前提とするのではなく、スマホで見られることを前提として、スマホで見る Web サイトを優先して設計・デザインしていくという流れがあります。このスマホを優先した作り方を 「スマホファースト」 と言います。

スマホ対応は SEO にも影響する

業種にもよりますが、Web サイトのスマホ閲覧比率は 50〜80% 程度に到達しています。 BtoC では 80% 近く、BtoB でも 50% を切ることは稀です。 Google は、ユーザーがスマホでの閲覧を一般的としているなら、スマホに最適化された Web サイトを提供することはユーザーにとって必要なことだと判断し、モバイル版を主軸に検索順位を決める仕組み(モバイルファーストインデックス) を採用しており、検索順位にも影響することを明言しています。

2. スマホ対応の種類

一般的に、スマホ対応の方式は 3 種類あります。多くの場合が「レスポンシブ(レスポンシブ Web デザイン)」という手法を利用しますが、その企業や Web サイトの性質によって別の方法が取られることもあるので、この 3 パターンを覚えておきましょう。

レスポンシブ

正確にはレスポンシブ Web デザインと言いますが、レスポンシブやレスポンシブデザインと呼ばれることもあります。 1 つの HTML を用意し、画面の幅に応じて CSS が見た目を切り替える方式です。現在の主流で、スマホ対応と言えば基本的にはレスポンシブと捉えるのが常識となっています。

別 URL 方式

PC 用とスマホ用で別の HTML を作り、別の URL で表示させる手法です。非常にシンプルで、PC 用に作ったサイトには PC でアクセスし、スマホ用に作ったページにはスマホでアクセスするというだけです。 HTML を 2 つ作る必要があるので、ページに変更を加えるたびに 2 ページとも更新しなければならず、労力も 2 倍になります。さらに、2 つのページに手を加えるため、どちらかの更新をし忘れるといったヒューマンエラーも発生しやすく、現状ではあまり採用されにくい手法となっています。

アダプティブ

アダプティブデザインとも呼ばれ、アクセスしてきた端末が PC なのかスマホなのかをサーバで判別して、PC だった場合は PC 向けに作った HTML を、スマホだった場合はスマホ用の HTML を表示するという方式です。作る HTML は 2 つであるものの、別 URL 方式とは異なり、サーバ側で表示を出し分けているだけなので、アクセスする URL は同じになります。ただし、別 URL 方式と同様に HTML を 2 つ作るため、同様の負荷とリスクがあり、採用されるケースは稀です。

レスポンシブ以外が採用される主な理由

レスポンシブ以外のスマホ対応が使われているサイトは、2000 年以前から存在する大規模サイトに見られがちです。これは、かつて存在したガラケー向けサイトが要因として挙げられます。ガラケーの Web サイトは表示できる容量に制限があったため、PC とは別にページを用意するしかなかった時代がありました。そこにスマホが普及したとき、スマホも別のページとして用意したというのが、当時発生しがちな制作手法でした。多くの Web サイトは、レスポンシブの効率の良さから、どこかのタイミングでレスポンシブに切り替えたのですが、大規模サイトになると、レスポンシブへの切り替えが大きなコストになったり、レスポンシブに切り替えられない Web システムが動いていて移行できない、という状況に陥っていることが多いです。もちろん、あえて別 URL 方式やアダプティブを選んでいるケースもあるので、一概には言えません。

3. レスポンシブで起こしやすい表示不具合

レスポンシブ対応で Web サイトを作るということは、HTML が PC とスマホで共通の情報を使うことから、スマホ上で最適な表示を実現できていない、というミスを残しやすくなります。ここでは、起こしやすい表示不具合をご紹介します。

画像が画面からはみ出している

PC 用の画像が、横幅を固定指定したまま入っているケースです。スマホで見ると画面の幅を超えて、横スクロールが出るか、レイアウトが破綻します。特に過去に PC 専用で作られたサイトの一部を流用したときに起きがちです。

表の横幅が狭くて読みにくい

料金表や比較表など、表組み(テーブル)はスマホでの崩れの定番です。 PC で 5 列ある表をそのままスマホに出すと、横スクロールしないと全列が見られません。縦並びに変換するか、要約版を別途用意するか、いずれかの工夫が必要です。

文字が小さすぎる / 大きすぎる

スマホの本文文字サイズは 16px 以上 が基本ラインです。これより小さいとズームしないと読めず、即離脱の原因になります。逆に、デザイン重視で 22px などにしてしまうと、行数が増えてスクロールが多くなり、読み手の負担が上がります。本文 16px〜18px、見出しはそれより一段大きく、という範囲が無難です。

ボタンが押しにくい

指で押せるボタンサイズは、最低 44 × 44px 必要、というのが業界の目安です。これを下回ると、押し間違いが多発します。また、ボタンが近接しすぎていると、隣のボタンを誤タップする原因にもなります。第4章 Lesson 4 で詳しく扱いますが、「ボタンを大きくしすぎる」のも別の問題を生むので、適切な範囲を狙う必要があります。

表示されなくて良い PC 向けの要素が表示される

PC では表示し、スマホでは非表示にする想定だった要素が、設定漏れによってスマホでもそのまま表示されてしまうケースです。例えば、PC 用に作り込んだ横長のナビゲーションや装飾、PC 前提のバナーなどがスマホでも出てしまい、レイアウトが窮屈になったり、不要な情報で画面が埋まったりします。レスポンシブでは「どの要素を、どの画面幅で出す/隠す」を CSS で制御します。スマホで不要な要素が確実に非表示になっているか、実機やシミュレータで確認しておきましょう。

おかしな位置でテキスト改行されてしまう

これは、気持ちのよい位置で改行されていない、という意味ではなく、中途半端な文字が段落ちしてしまう状態を指します。例えば PC 向けに「これは Web 担当者ラ」で改行を入れていると、スマホでは続きの「インです。」だけが次の行に落ちて、不自然に見えてしまう、といった具合です。 PC での見た目に合わせてちょうど良い改行を入れたことで、画面幅の狭いスマホ側で中途半端な改行が発生してしまうのです。本文では、段落や意味の区切り以外の「見た目のためだけの改行」を避けましょう。キャッチコピーなど見た目が重要なテキストは、PC 向けとスマホ向けの改行がそれぞれ機能するよう CSS で調整すると解消できます。

「見えているのに使えない」サイトは、対応していないのとほぼ同じです。レスポンシブ対応の有無で安心せず、上の 6 つに目を通しておくと安心です。

4. スマホ表示の確認方法

スマホ表示の確認方法は、大きくは 2 つあります。可能であれば、2 パターンとも表示を検証して不具合がないか確認できると安全です。

方法1：シミュレーターで確認

PC からスマホ環境を確認しようとするときに、ウィンドウの幅をスマホくらいまで縮めて確認していないでしょうか? それでは、横幅も挙動もあまりにも曖昧なものになってしまいます。 PC でスマホ時の閲覧状態を確認するには、Google Chrome の機能を活用してください。 PC の Chrome ブラウザで対象のページを開いて F12 を押すと、開発者ツール(Chrome DevTools)が起動します。左上のアイコン(Toggle device toolbar)を選ぶと、画面が指定サイズのスマホとして表示されます。 iPhone、Pixel、iPad など、複数の端末を瞬時に切り替えられるので、簡易的な確認ならこれだけでも十分です。スマホビューでの確認として利用するようにしましょう。

方法2：実機で確認

実際のスマホは、シミュレーターでは再現できないことがあります。シミュレーターで確認したときは問題なかったのに、実機で見てみたら同じではなかった、ということもしばしばあります。しかも、iPhone では問題なかったのに Android では不具合があったり、その逆だったりするケースもあります。さらに、Android も iPhone も、バージョンやメーカーによって見え方や発生する不具合が違うことがあるため、実機の検証はかなり難しいのですが、可能であれば iPhone 1 台、Android 2 台くらいで確認できるのが理想です。

なお、テスト環境(ステージング)に IP 制限がかかっていると、実機のモバイル回線からはアクセスできず、実機での確認ができなくなります。その場合、実機で確認したいときは、対象端末を許可済みの IP アドレスの Wi-Fi につないで確認する、という方法が一般的です。

誰が何で確認をしているのか明確に

このように、各種端末での確認はハードルが高いので、Web担当者としては、シミュレーターでスマホ環境を確認し、可能であれば手持ちの実機で確認する程度にしておくくらいでよいかと思います。その分、制作業者側で、各種端末に加えて PC 環境でも Chrome だけでなく Edge などでも確認を行うように、検証ルールとして明文化 しておくとよいでしょう。明文化しておくと、忘れずに対応できると同時に、世の中の変化で確認すべき端末が変わっても、その資料をアップデートしていくことができます。

5. 「スマホファースト」の落とし穴

ここまで、スマホファーストの話をしてきましたが、実は、必ずしもスマホファーストというわけでもない、という 2 つの落とし穴もあります。この 2 つの落とし穴を理解し、事前に回避できるようにしておきましょう。

落とし穴1：PC 閲覧の方が多いサイト

Web サイトの業界やサービス内容などによって、ユーザーの利用シーンとしては PC の方が多い、という場合があります。

例えば、

BtoB 向けのサービス：仕事中に探すのでデスクの前で探していることが多く、PC からの閲覧率が高まりやすくなります。
PC 向けのサービス：そもそも対象が PC 向けなので、必然的に PC から閲覧するユーザーが高まります。
高単価製品：数百万円の買い物などは、最初はスマホで情報を探す場合もありますが、決済の際にはスマホよりも PC でしっかり対応したいというニーズが高まりやすくなります。

利用シーンとして必然的に PC な場合もあれば、心理的な影響で PC な場合もあります。後者は徐々に薄れる可能性はありますが、前者は必然なので、これからも PC での閲覧が重要になります。

落とし穴2：成果は PC の方が高まるサイト

これは、上述の「高単価製品」と同様のケースもあります。閲覧率としてはスマホの方が圧倒的に高いのに、「購入」や「お問い合わせ」といった成果に関しては PC の方が高い、というケースです。例えば、製品やサービス自体は手軽にスマホで調べたい場合でも、いざ購入やお問い合わせの際に登録すべき情報が多いと、閲覧率はスマホが高くても、成果率は PC の方が高まることがあります。もちろん、スマホで購入・問い合わせしやすい環境を作れればよいのですが、申込データの添付が必要など、スマホからだと面倒な作業になる場合は、PC からの成果が上がりやすくなります。

それでもやっぱりスマホ

前述のケースのように、スマホファーストではないケースがあるからといって、スマホ対応を適当に済ませてしまうのは悪手です。

PC の割合がそれなりにあろうと、やはり、スマホでの閲覧率を無視することはできません。逆に、このようなサイトの場合は、PC もスマホもしっかりと仕上げてある必要があります。

Web担当者として、自社のサービスがスマホファーストに振り切れるのか、PC・スマホ両軸を高い精度で作る必要があるのか、しっかり自社の閲覧状況を確認し、検討できるようにしておきましょう。

6. タブレット対応は?

タブレットは、スマホより少し小さいものから、PC とほぼ同サイズのものまであり、その差から、サイズでタブレットを定義するのは難しくなります。

しかも、タブレットの利用率は、計測経験上のざっくりとした感覚にはなりますが、BtoC で 1〜3% 程度、BtoB で 2〜6% 程度 と少なめの閲覧率であることが多く、対応にコストをかけすぎるとバランスが悪くなります。

そのため、多くの企業や制作現場では、タブレットを横向きで見たときは概ね PC ビューを、縦向きで見たときはスマホビューを表示する(大きなタブレットの場合は PC ビューを表示する)、とするケースが多いと思います。

もちろん、サービスによっては、タブレットで見てもらうことが前提となるものもあるので、そのようなケースでは、タブレットに最適化した見せ方を検討する必要があります。

第 1 章では、Web に対する全体的な基本を捉えてきました。暗記する必要はありません。「そんなことを言っていた気がするなぁ」というくらいで構いません。必要なときに本ガイドブックを開けるようにしておいてもらえれば、あなたは立派な Web担当者になれるはずです。