あなたのホームページ、スマホ対応しているか確認していますか？

現在では、多くの方がスマートフォンからホームページを閲覧しています。

そのため、パソコンでは問題なく表示されていても、スマートフォンでは…

• 文字が小さい
• 操作しづらい

といった状態になっているホームページを見かけます。

特に古いホームページの場合、スマートフォン表示に対応していないケースもあります。

スマートフォン対応は、見やすさだけでなく、ホームページからのお問い合わせやSEO対策にも関わる重要なポイントです。

今回は、スマートフォン対応の重要性や確認方法について分かりやすくご紹介します。

なぜスマートフォン対応が重要なのか

現在のホームページ閲覧は、スマートフォンが中心となっています。

実際に、

• お店を探す
• サービス内容を確認する
• お問い合わせをする

といった行動も、スマートフォンから行われることが増えています。

そのため、スマートフォンで見づらいホームページは、ユーザーが途中で離脱してしまう原因にもなります。

見づらい、操作しづらい、と感じるホームページは、それだけで信頼感を損なってしまいます。

スマホ対応していないホームページで起こりやすい問題

スマートフォン対応されていないホームページでは、以下のような問題が起こりやすくなります。

文字が小さく読みづらい

パソコン用の表示をそのまま縮小している場合、スマートフォンでは文字が極端に小さく表示されることがあります。

逆に文字が大きすぎておかしな形で改行されて表示してしまうこともあります。

読みにくいホームページは、ユーザーのストレスにも繋がります。

横スクロールが必要になる

スマートフォン画面に収まりきらず、左右にスクロールしないと読めない状態になることもあります。

この状態は非常に見づらく、途中でページを閉じられてしまう原因にもなります。

特に表やグラフなどで左右スクロールしなければ全体が見えない、ということがあります。

ボタンやメニューが押しづらい

スマートフォンでは指で操作するため、

• ボタンが小さい
• メニューが使いづらい
• リンク同士が近すぎる

などの問題があると、操作性が悪くなります。

押したいボタンをうまく押せないことが原因で、

お問い合わせフォームまでたどり着けず、機会損失に繋がることもあります。

スマートフォン対応はSEO対策にも重要です

Googleでは、スマートフォンでの見やすさを重視しています。

そのため、スマートフォンで閲覧しづらいホームページは、検索結果にも影響する可能性があります。

また、スマートフォン対応されているホームページは、

• ユーザーが見やすい
• ページを読みやすい
• 操作しやすい

というメリットがあり、結果的に滞在時間やお問い合わせにも良い影響を与えやすくなります。

スマホ対応の具体的な対策

スマホに対応させるための具体的な対応策について解説していきます。

①　レスポンシブデザイン

パソコン・スマートフォン・タブレットといった使用する端末の画面にあわせて画面のレイアウトが自動で切り替わる技術のことです。

現在ではほぼすべてのホームページに採用されていると言っても過言ではありません。

ただ、web知識のあまりない方がゼロからレスポンシブデザインを構築させようとするとかなりハードルが高いです。

今ではwixやSTUDIO、wordpressといった無料のホームページ作成サービスが非常に充実しており、これらのホームページサービスではレスポンシブサイトがホームページのデザインに最初から組み込まれていますので改めてレスポンシブデザインを構築する必要がありません。

なので、こうした専門知識があまりない方は無料ホームページサービスをご利用するという方法を取る、またはホームページ制作会社様に制作をお願いするという方法しか選択肢がありません。

➁　ビューポートメタタグの設定

デバイスの画面サイズや解像度に合わせて、ページを最適に表示させるタグです。

これはスマホ対応の基本的な設定となります。

ビューポートメタタグの設定により、デバイスの画面幅に合わせた最適な表示が可能になります。
（メタタグとはウェブページの中に隠されている「ページの説明書」のようなもので、検索エンジンにページの内容やどんなキーワードで検索される可能性が高いかなどを伝えるためのもの）

ビューポートメタタグとはいわゆる、レスポンシブデザインをゼロから構築するための基本設定となります。

ビューポートメタタグの設定を行わない場合、そのホームページはレスポンシブサイトになりません。

とはいえ、ビューポートメタタグはホームページ構築知識のある方でなければ難しいため、ビューポートメタタグの設定を考えるくらいなら最初から無料のホームページサービスを利用しましょう。

➂　画像や動画の軽量化

スマートフォンなどのモバイル端末は、通信速度が遅い環境で使うことも多いため、画像や動画のデータはできるだけサイズを軽量化することが大切です。

データ容量が大きいとデータをダウンロードするための時間がかかりページの表示が遅くなります。

このような状況になってしまうとお客様は一般的にはページの閲覧をやめてしまい、違うホームページを探しに行ってしまいます。

必要以上に大きな画像を使わず、適切に圧縮された画像を使用します。

最近ではホームページに使用する画像をjpegといった一般的な画像拡張子ではなくwebp（ウェッピー）という拡張子の使用を推奨されています。

webpはWebサイト向けの画像に適しており、JPEGやPNGと比べても圧縮効率が高く、画質を保ったままファイルサイズを小さくすることができます。

ただ欠点としてwordpressなどの設定上の問題でwebpに対応しておらず設定ができない、ということもありますので事前に使用できるかどうかを調べ、wordpressの場合であれば表示画像をwebpに変換するというプラグインもありますのでご利用は慎重に。

④　タッチ操作に対応

スマホの場合、指先で操作するため、ボタンやリンクは大きめにし、入力フォームもスマホ用に簡単に操作できるように調整します。

この調整はレスポンシブデザインの一環ではありますがどちらかというと、デザインの考え方となりますのでホームページを構築する際に自身で設定を行う必要があります。

その他のタッチ操作の一例として、スマホで表示させた際に、画面下に表示されるタッチボタンデザイン、これを「フローティングボタン」といいますが、これもラッチ操作に対応させるデザインです。

フローティングデザインを一番見かけやすいケースはLineでしょうか。

Lineの公式アカウントではこのフローティングボタンが採用されていることが非常に多いです。

お問い合わせボタンや広告へのリンクボタンであったりと用途は様々ですが一貫してお客様がアクセスしやすいようにデザインされています。

ただ、導入にはweb知識が必須となりますので手軽に導入できることではございません。

スマホ対応の効率的な手法

こちらではレスポンシブデザインを導入するうえでよりスマートフォンに対応したホームページ作りについてご説明していきます。

①　モバイルファーストデザイン

googleのSEO対策をお調べになる時に見かけたことのある単語かもしれません。

モバイルファーストデザインとは、最初にスマホ対応のデザインを考え、それを基にしてタブレットやデスクトップ向けに拡張していくというアプローチのことを指します。

スマートフォンなどのモバイルでの使い勝手を第一に考え、次に、パソコン、タブレット用に機能を追加するというデザイン構築の考え方です。

現在googleではモバイルデザインにどれほど特化しているかという要素も検索順位に影響を与える、と言われています。

以前ではパソコン表示が前提であり、スマートフォンなどのモバイル表示はそれほど重要視されておりませんでした。

しかし、ネットを閲覧する際に使用するデバイスはスマートフォンが8割を超えていると言われている現在ではモバイルでの表示が非常に重要視されるようになりました。

ホームページを閲覧されている方がパソコンからのアクセスが多かったとしてもモバイルデザインがいまいちだと検索順位に悪影響があるため、必ずモバイルファーストデザインになるように注意しましょう。

➁　シンプルナビゲーション

これもいわゆるモバイルファーストデザインの一環となります。

スマホの小さな画面に対応するため、ナビゲーションメニューはシンプルでわかりやすくすることが重要です。

パソコン上で閲覧する際は画面の大きさもあり文字を長めに入力してもスムーズに表示されますが、それがスマートフォンなどの画面になると表示画面がパソコンの半分以下の画面表示となるため、テキストが何度も改行されてしまったり、文字が多すぎてメニュー内容がわからなくなる、といった事が起きてしまいます。

このようなことが起きないように、メニューのタイトルは短めで分かりやすい内容にするように心がけましょう。

また、ボタンの大きさもデザインを損ねない程度には大きくし、タップしやすいようにすると尚良いです。

➂　文字のサイズと間隔

スマホでの読みやすさを確保するために、文字サイズに注意し、行間や文字間も広めに設定します。

これにより、利用者はストレスなくホームページを閲覧することができます。

文字の大きさをパソコン表示で合わせてしまうとスマートフォンなどのモバイルで確認された際に思った以上に文字が大きくて、おかしなところで改行されてしまう、といったことがあります。

文字が大きければ読みやすいですがおかしな改行をされてしまうので判読が難しくなってしまうことがあります。

最適な文字の大きさになるよう必ずスマートフォンなどでの表示確認は行いましょう。

あなたのホームページがスマホ対応しているか確認する方法

現在では、多くの方がスマートフォンからホームページを閲覧しています。
そのため、「パソコンでは問題なく見える」だけでは十分とは言えません。

以下のポイントを確認することで、スマートフォン対応できているか簡単にチェックできます。

① スマートフォンで実際にホームページを開いてみる

まずはご自身のスマートフォンでホームページを開いてみましょう。

以下のような状態になっている場合は、スマホ対応が不十分な可能性があります。

• 文字が小さく読みづらい
• 横スクロールが発生する
• ボタンが押しにくい
• 画像が画面からはみ出している
• メニューが使いづらい

特に古いホームページでは、パソコン表示のまま縮小されているケースも少なくありません。

② パソコン表示とスマホ表示で内容が崩れていないか確認する

スマートフォン対応されたホームページでは、画面サイズに合わせてレイアウトが自動調整されます。

• メニューが縦表示になる
• 画像サイズが自動調整される
• 文字が読みやすい大きさになる

など、スマホでも見やすい設計になっているか確認しましょう。

③ Googleの評価にも影響する場合があります

Googleではモバイル表示を重視しており、スマートフォンで見づらいホームページは評価に影響する場合があります。

そのため、スマホ対応は「見やすさ」だけでなく、SEO対策としても重要です。

スマホ対応は、現代のウェブデザインにおいて欠かせない要素です

利用者にストレスを与えることのないホームページを提供し、SEO対策の強化、競合他社と比べ見劣りしないホームページにするための、レスポンシブデザインや画像の最適化、タッチ操作に配慮することが重要です。

これらにより、スマホからのアクセスでもストレスの無いホームページを提供でき、ビジネスの成果を向上させることにつながります。

ただ、スマホ対応の対策のほとんどはweb知識がなければ難しいことが多いです。

ホームページ制作会社に制作をお願いされる場合もスマホなどで動作確認を行い、動作確認をきちんと行いましょう。

easy PAGEではスマートフォン対応を標準対応

easy PAGEでは、ホームページ制作時にスマートフォン対応（レスポンシブ対応）を標準で行っております。

パソコン・スマートフォン・タブレットなど、様々な端末で見やすいホームページ制作が可能です。

「今のホームページが古くて見づらい」
「スマホ対応しているか不安」

という場合もお気軽にご相談ください。