スマートフォン最適化対応について理解を深めよう!

この記事では、スマートフォン最適化対応とは?といった基本的なことから、スマホ対応できていないと何がダメなのか、BtoBのサイトでもスマホ対応は必要?など、ホームページをスマホ対応するうえで事前に知っておきたい基礎的な内容をまとめました。

スマートフォン最適化対応とは

スマホ対応=スマートフォン最適化対応とは、その名の通りホームページをパソコンだけでなく、スマホからの閲覧にも最適化させるための対応です。

スマホ対応と言うと、「画面の小さいスマートフォンでも見やすくきれいに表示できること」だと思っている方は多いと思います。もちろんその解釈で正解なのですが、「画面の小さいスマートフォンでも見やすくきれいに表示できること」だけがスマホ対応ではありません。
パソコンとスマートフォンでは大きく異なる点が3つあります。
それが、「画面の大きさが違う」「操作方法が違う」「通信環境が違う」の3つです。

画面の大きさが違う

パソコンに比べてスマートフォンは画面が小さいです。
しかも、いろんな種類のサイズがあります。様々な種類のスマートフォンの、様々な大きさの画面サイズを考慮して、「どんな画面サイズのスマートフォンでも見やすくきれいに表示できること」が1つ目のスマホ対応です。

操作方法が違う

パソコンの場合はマウス(ノートパソコンの場合はタッチパッドやトラックパッド)を使った「カーソルの移動」と「クリック」が主な操作方法になりますが、スマホの場合はカーソルが存在せず、指での「タップ」と「スワイプ」によって画面の操作を行います。
スワイプ操作への対応や、2本指での拡大縮小、意図しないリンクをタップしてしまわないようにボタンとボタンの間隔を充分に空けるなどの配慮、また、電話番号をタップすることで電話を掛けられるようにするなど、スマホの操作方法に合わせた細かな対応が必要になります。

通信環境が違う

時代が進むにつれてスマホの通信速度も向上しているため、最近ではほとんど気にならないレベルになっていますが、WiFi環境が十分に整った空間でない限り、直接LANケーブルを挿しているパソコンよりもスマホの通信の方が遅いです。
特に電波の悪いエリアではストレスを感じる程に通信の遅さが目立ちます。
そのような状況でもできる限りストレス無くホームページにアクセスできるよう、スマホ表示の際に読み込むファイルを軽くするなどの対応も必要になります。

スマホ対応ができていないホームページがダメな理由

スマホ対応が出来ていないと、一体どんな弊害やデメリットがあるのでしょうか。
一つ目の理由は『スマホでアクセスした際に情報が見にくい・操作がしにくい』という点。そのまんまですね。

もう一つの理由が『SEOに悪影響を与える』という点です。

スマホでアクセスした際に情報が見にくい・操作がしにくい

「スマホ対応しないとスマホからはアクセス(閲覧)出来ないの?」というご質問を時々いただくのですが、スマホ対応できていないサイトでも、スマホからアクセスし閲覧すること自体は可能です。
ただし、スマホ対応出来てないサイトにスマホからアクセスした場合、見にくい・操作がしにくいサイトになってしまいます。

  • 拡大しないと文字が小さくて読めない

通常、横長の大きなモニターで閲覧するパソコン用として作られたサイトにスマホでアクセスすると、そのデザインやレイアウトがそのまんま、縦長で小さいスマホの画面に収まるよう縮小されて表示されるため、画面を拡大しないと文字が小さすぎて読みにくい、あるいはほぼ読めないといった状況が生まれます。

  • タップしたいリンクやボタンをうまくタップ出来ない

同様に、パソコン用のデザインやレイアウトがそのまんま縮小表示されていると、複数のリンクやボタンがとても近い位置に隣接することになります。指でタップしようとすると間違えて隣のリンクに触れてしまうなど、タップしたいボタンを正確にタップできないといった非常に使いづらいサイトになります。

  • 横にスクロールしないと文章を読み進められない

文章が1行1行が画面の枠内に収まらず右にはみ出してしまうと、文章を読むには横にスクロールしなくてはいけなくなります。縦に読み進める中で発生する横スクロールは閲覧者にとってストレス意外の何者でもありません。

このように、スマホからアクセスした場合に見にくい・操作がしにくいサイトでは、せっかくアクセスしてきてくれたユーザーに様々なストレスを与えることになり、結果的にほとんど内容を見てもらえずにサイトを離れていってしまいます。
それだけならまだしも、スマホからホームページにアクセスしてきた取引先や見込み顧客からの信頼度を下げるような事態にもなりかねません。

SEOに悪影響を与える

Googleは「スマホ対応できているかどうか」が検索順位を決めるランキング要素の1つであると明言しています。
SEOの専門用語として「モバイルファーストインデックス」「モバイルフレンドリー」などが語られるようになって既に数年が経ちますが、つまりGoogleは検索順位を決めるにあたって、パソコン版のサイトよりもスマホ版のサイトを優先的に評価しているということです。

スマホ対応を先延ばしにすればするほど、検索結果で不利な状況が続き、SEOにおいても競合他社に遅れを取る結果になってしまいます。

自社のホームページがスマホ対応できているかどうか調べる方法

「うちのホームページは知り合いの誰々さんに去年スマホ対応してもらったから大丈夫」
「うちのホームページはスマホからでも問題なく見れてるから大丈夫」
と思っているあなた、そのスマホ対応、本当に大丈夫でしょうか?

Googleが定義する「スマホ対応」にはいくつかクリアしなければならない条件があります。
例えば、誤って意図しないリンクをタップしてしまわないように、ボタンとボタンの位置は最低何ピクセル以上は離しなさい。文字サイズは可読性を損なわないように何ピクセルより大きくしなさい。などです。
一見スマホ対応できているように見えても、それらの条件をクリアしていなければGoogleからはスマホ対応に問題有りと判断されます。

そこで、自社のホームページがきちんとスマホ対応できているかどうかを調べる方法をご紹介します。
Googleが提供している「モバイルフレンドリーテスト」というツールを利用します。
以下のボタンよりアクセスし、スマホ対応が出来ているかどうかを調べたいサイトのURLを入力してください。

いかがだったでしょうか?
あなたのサイトはスマホ対応できていましたか?

BtoB企業のホームページもスマホ対応は必要?

「うちの事業はBtoBだから、スマホで見に来る人なんてほとんど居ないし、取引先はみんなパソコンでアクセスするからスマホ対応は必要ないです。」
よくお聞きする意見としてこんなものがあります。

果たして本当にBtoBの企業にスマホ対応は必要ないのでしょうか?

BtoBの企業の場合、ターゲットとなる相手は企業です。しかし、実際にサイトにアクセスし閲覧しているのは企業ではなく、その企業に属するどこかの部署の誰か、つまり人です。
オフィスでの業務時間中であればパソコンからアクセスしてくることが多いと思いますが、外出先や移動中、休憩時間や通勤時間にスマホからアクセスしてくる可能性は当然考えられます。
実際にとあるBtoB企業のホームページをアクセス解析した結果、実は半数以上がスマホからのアクセスだった…というような事例があります。それも1つや2つではなく、当たり前にそのようなケースが増えてきています。

考えられるケースはそれだけではありません。BtoB企業のホームページの場合であっても、採用に力を入れる場合、その対象は個人です。
転職を考えている人や求職者はほとんどがスマホで求人を検索します。若い人材であれば特にです。

このように、BtoB企業であってもスマホに対応できていないことのデメリットは多く、スマホの普及やテクノロジーが進むにつれてその影響はより大きくなっていきます。
BtoB企業であっても、適切なスマホ対応が必要不可欠な時代です。同業他社に遅れをとらないうちに検討されることをおすすめします。

スマホ対応ってどうやって行うの?具体的な対応方法

スマートフォンへの技術的な対応方法として、大きく分けて3種類のやり方があります。
それが「レスポンシブデザイン」「動的な出し分け」「個別に作成」の3つです。

レスポンシブデザイン

スマホ対応方法の1つ目が「レスポンシブデザイン」です。聞いたことがある方も多いのではないでしょうか。
レスポンシブデザインは、アクセスした画面のサイズによって流動的に横幅やレイアウトが可変するコーディング技術です。
パソコンでもタブレットでもスマホでも、基本的に読み込むデータは全く同じであるにもかかわらず、画面幅によってデザインが柔軟に切り替わるように設計され、原則としてどんな画面サイズの端末からでも最適な表示ができるように構築するウェブデザインの手法です。
言葉で説明してもわかりにくいと思うので、今このサイトをパソコンでご覧になられている方は、一度以下を試してみてください。

1.ブラウザのウインドウサイズを最大化している場合は最大化を解除してください。
2.ブラウザの右端にマウスカーソルを合わせると左右に向いた矢印のアイコンになるので、その状態で画面をドラッグしてブラウザの幅を狭くしたり広くしたりしてください。

どうでしょう?画面の横幅に応じてコンテンツ幅やレイアウトが流動的に切り替わっていくのがおわかりいただけましたでしょうか。

動的な出し分け

こちらはPC版とスマホ版をそれぞれ別個に作成する手法です。
動的な出し分けとはどういうことかと言うと、まずサーバーにパソコン用のファイルとスマホ用のファイルをそれぞれ用意しておいて、アクセスしてきた端末に応じて、パソコンからのアクセスだったらパソコン用のファイル、スマホからのアクセスだったらスマホ用のファイルをサーバーが自動で判定して表示させます。

個別に作成

3つ目がパソコン用サイトとスマホ用サイトをそれぞれ個別に作成する方法です。
とあるサイトにアクセスしたら『スマホ版サイトに移動しますか?移動する/移動しない』のようなウインドウが現れた経験は無いでしょうか?
パソコン用とスマホ用を個別に作っているサイトの場合は、こういったウインドウを表示してそれぞれの端末に適したサイトにユーザーを誘導することでスマホ対応を行っています。

上記の3種類の中で、当社がスマホ対応を行うにあたって採用している方法がレスポンシブデザインです。画面サイズが多様化するスマホ業界の進歩にも柔軟に対応していきやすいことや、更新のコストを抑えられることなど、他の手法には無いメリットが多い他、Googleもスマホ対応の手段としてレスポンシブデザインを推奨しているため、今からスマホ対応を行うのであればレスポンシブデザイン一択でしょう。

スマホ対応したいだけなのに、リニューアルする必要ある??

当社にスマホ対応のご相談をいただいた際、スマホ対応と一緒にリニューアルのご提案をさせていただくケースがよくあります。

「え?スマホ対応の相談をしたのに、何でリニューアルの話が出るの?」
「スマホで見れるようにしたいだけで、別にリニューアルしたいわけじゃないんだけど…」
「上手く口車に乗せて、金額の高いリニューアルに持っていきたいんでしょ?」

こんな心の声が聞こえてきそうですが、、実はそうではないんです。

既に持っているホームページをスマホ対応させるだけの方が、全面リニューアルするよりも断然安く済みそうですよね。
しかし実際には、既存のホームページをスマホ対応させるのと、全面リニューアルするのとで、お見積もり金額はほぼ同じ、場合によってはリニューアルの方が安くなるケースもあるんです。
いったいどうしてかと言うと、スマホ対応出来ていない既存ホームページの多くは、ホームページを構成するHTMLやCSSなどプログラムの作り方が古い場合が多く、そのような古いプログラムのままではスマホ対応を行うのがすごく大変だからです。
それだけではなく、古いプログラムを多少強引にスマホ対応させると、思わぬバグや納品後のトラブルに繋がりやすいといった理由もあります。
いっそ作り直した方が少ない工数で対応できる場合が多いのです。

もちろん、全部が全部そうではありません。今お持ちのホームページの作られ方によっては、リニューアルする必要もなくそのままスムーズにスマホ対応できる場合もあります。
いずれにせよ、まずは現在のホームページがどう作られているのかを技術的な視点から確認する必要があるので、まずはお気軽にご相談いただければ幸いです。

まとめ

いかがでしたでしょうか?
本記事では以下のような内容をお伝えしてきました。

  • スマホ対応=スマートフォン最適化対応とは、その名の通りホームページをパソコンだけでなく、スマホからの閲覧にも最適化させるための対応
  • スマホ対応が出来ていないと、スマホで見にくい・使いにくい、だけでなく、SEOにも悪影響を与える
  • BtoB企業であっても、適切なスマホ対応が必要不可欠
  • 今からスマホ対応を行うのであればレスポンシブデザイン一択
  • 既存のホームページをスマホ対応させるよりも、リニューアルする方が安くなるケースもある

スマホ対応をご検討いただく際の参考になれば幸いです。

ウェブサイト制作サービス一覧へ戻る