日本ではインターネットの利用率が高まり、情報収集にスマホが活用される時代となりました。

そこで注目されているのが、ホームページのスマホ対応です。

しかし、ホームページを持っているけど、スマホへの対応は何をしたらいいかわからないという方もいらっしゃるのではないでしょうか。

そもそも、ホームページをスマホに対応させるとはどういうことなのでしょうか？

今回は、その方法とあわせてスマホサイトの基礎知識をご紹介します。

ホームページのスマホ対応は必要？

スマホが活用されるようになったことで、なぜホームページをスマホ対応させる必要があるのでしょうか？

スマホ対応の方法をご紹介する前に、なぜスマホ対応をする必要があるのか、詳しく説明します。

なぜスマホ対応をするべきなのか

ホームページを閲覧するユーザーは、ほとんどがインターネットを利用してホームページを閲覧しています。

パソコンを使っている人ももちろんいますが、インターネットを利用する人の68%以上がスマホからの利用です。

出典：総務省令和4年版 情報通信白書 データ集第3章第8節

https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r04/html/nf308000.html#d0308040

そのため、ホームページもスマホを利用して閲覧する人が多くなります。

スマホ対応をしていない場合、ホームページをスマホで閲覧したユーザーは、必要な情報が見つけられずに帰ってしまうかもしれません。

また、2020年9月にはGoogleの検索結果が、スマホで閲覧した場合の情報を元にした評価制度に対応しました。

これにより、Googleの検索はスマホで快適に閲覧することができるホームページが評価される仕組みとなっています。

ホームページを閲覧するユーザーのためにも、Google検索からの評価を受けるためにも、スマホ対応を行うことが重要になっています。

スマホ対応をしないとどうなるか

それでは、スマホ対応をしない場合、具体的にはどのようなことが起きるのでしょうか？

スマホ対応をしていないホームページで、資料請求をしようと思ったユーザーが、スマホから閲覧した場合を想定して具体的な問題点を考えてみます。

まず、スマホで閲覧をすると文字が小さくなり、文章が読めない可能性があります。

画像も必要以上に大きく表示されてしまい、他の内容や文章は横へスクロールしないと読むことができないかもしれません。

スマホではマウス操作がないため、マウスのカーソルをあわせるとわかりやすくなるリンクは見つけられませんし、資料請求のボタンが小さいと、誤った場所をタップしてしまう場合もあります。

これでは、ユーザーはホームページを十分に見て回ることができず、資料請求までたどり着けません。

資料請求を諦めて、帰ってしまうかもしれません。

ユーザーがお客様になってくれるかもしれない機会を、スマホ対応を行っていないことにより逃してしまいます。

ホームページをスマホ対応させるにはどうすればいいのか

スマホから閲覧するユーザーが見やすいホームページは、いったいどのようなことがホームページなのでしょうか？

スマホ対応といっても、何をしたらスマホで閲覧しやすくなるのかわからないという方もいらっしゃるかもしれません。

そこで、ホームページをスマホ対応させるために必要なこと、スマホからの閲覧をしやすくする方法を、5つご紹介します。

スマホから閲覧できない表現を利用しない

パソコンとスマホでは、使っている機能や技術が異なります。

そのため、パソコンでは表示することができても、スマホでは表示できないコンテンツが一部存在しています。

例えば、Flashのアニメーションを使っている場合です。

Flashアニメーションは2020年に廃止されているため、スマホでも表示できるHTML5などで対応するようにしましょう。

スマホの画面サイズに合わせたコンテンツ配置にする

パソコンとスマホは機能だけでなく、画面のサイズも違います。

パソコンで閲覧することを想定した場合、文章と画像のコンテンツを横並びで表示させても問題ありません。

しかし、スマホの場合は画面が縦に長いため、横並びではなく縦並びのコンテンツ表示が望ましいです。

それだけでなく、スマホは、機種やバージョンによって画面サイズが異なるため、それぞれの画面ですべての内容が見えるようなコンテンツ配置をする必要があります。

意図しない横スクロールを作らない

パソコンとスマホの画面サイズに触れましたが、スマホでは横スクロールを取り入れることで横長のコンテンツも表示できます。

表やグラフなどは縦に長いより横に長いほうが見やすいコンテンツです。

そのため、スマホで表示するときも、場合によっては横スクロールが使われます。

しかし、画像が大きすぎたり、改行の位置が不適切であったりという理由で発生する横スクロールは、ユーザーにとっては負担です。

このようなユーザーへの負担を減らすため、必要ではない横スクロールは使わないようにする必要があります。

文字を読みやすいサイズにする

スマホは画面サイズが小さいため、パソコンと同じ文字サイズ表示だと小さく読みづらいことがあります。

スマホ対応をする場合は、小さな画面でもはっきりと読み取れる文字サイズを意識して設定をしましょう。

文字サイズだけでなく、行間や改行なども場合によっては調整が必要です。

ユーザーが負担なく読み進められる、読みやすい行間に調整しましょう。

ボタンやリンクはタップしやすい配置にする

パソコンでは、接触面の狭いマウスを使って操作をするため、リンクなどが小さくても問題なくクリックができます。

しかし、スマホは基本操作が指で行われるため、マウスと比べて接触面が広く細かい操作ができません。

テキストやボタンのリンク同士が近く配置されていると、どちらをタップしているかわからなくなってしまいます。

誤ったリンクをタップしてしまい意図しないページへ飛ばされてしまうと、ユーザーにとっては不便です。

目的のリンクがタップしやすいように、リンクは適度なサイズと間隔で配置するようにします。

ホームページのスマホ対応方法

スマホ対応したホームページを作成する方法は、主に2つあります。

それぞれに特徴があるため、ご自身のホームページではどちらが最適なのか、ぜひ確認をしてみてください。

スマホ用ホームページを作成する

1つ目の方法は、パソコンで閲覧するホームページとは別に、スマホで閲覧する専用のホームページを作成する方法です。

この方法では、パソコン用とスマホ用で別のファイルを用意し、閲覧する際に適切なファイルを表示させます。

別のファイルを利用するため、パソコンとスマホで表示する内容を分けて管理したい場合や、デザインを変更したい場合に適した方法です。

ただし、更新する際はそれぞれのファイルで同じ変更をする必要があり、更新頻度が高い場合は管理に手間がかかります。

ページが多いホームページでも、同じ内容のファイルを複数用意する必要があるため、作成に時間がかかる方法です。

レスポンシブにする

2つ目の方法は、コンテンツ自体は同じものを使い、デザインのみをパソコンとスマホで切り替えて表示させる方法です。

この方法を使ったデザインを「レスポンシブウェブデザイン」といい、現在多くのホームページで活用されています。

スマホ用のホームページを作る場合と違いファイルは1つのため、作成の手間も少なく更新も1度で行うことができます。

しかし、レスポンシブウェブデザインに対応したコーディングをする必要があり、専門的な知識が必要です。

また、同じコンテンツを使う以上表現できるデザインも限られるため、ホームページの内容によってはスマホでの表示にうまく対応できない可能性もあります。

まとめ

スマホからのインターネット利用者が増えた今、ホームページもスマホ対応が求められるようになりました。

ユーザーが負担なく快適にホームページを閲覧するためには、文字サイズや表示方法などをスマホにあわせて設計する必要があります。

今回は、どういった表示をすればスマホ対応ができるのか、そのためにはどのような方法があるのかをご紹介しました。

ご自身のホームページではスマホ対応ができているでしょうか。

また、スマホ対応をする場合はどのような方法が適しているでしょうか。

ぜひ一度ご自身のホームページで確認をし、スマホ対応を行ってみてください。