あなたのホームページ、スマートフォンに対応していますか？

数年前まで、ウェブサイト（ホームページ）はパソコンで見ることを前提に作られていました。

しかし、現在、スマホートフォンやタブレットの普及により、ネットを閲覧する際に使用するデバイスはスマートフォンが8割を超えています。

そのため、ホームページ作成の際にはパソコンだけでなくスマートフォンなど、どのようなデバイスからの閲覧にも対応できるレスポンシブデザインが主流となっています。
（レスポンシブデザインとはユーザーが使用しているデバイスの画面サイズに合わせてサイズを最適表示するデザインのことです）

なぜホームページをスマホ対応にしなくてはいけないのか？

Webサイトは8割を超える人達がをスマートフォンやタブレットで見ていること、パソコン以外のデバイスで閲覧した際、Webサイトのデザインが崩れる、文字が小さくなるなどの不都合が起こりますので、この原因を取り除くことはもちろん、スマホを指先一つで操作し快適にWebページなどを視聴するためです。

また、スマホ対応していないホームページは検索に対して悪影響を与えてしまいます。

スマートフォンの利用者が増える中、自社のホームページがスマホ対応しているかどうかは、お客様に快適な環境で自社のホームページを見てもらうことができるかどうかになりますので、ひいてはビジネスの成功にも多大な影響をもたらすことにもなります。

今回は、ホームページ作成におけるスマホ対応の重要性、行うべき対策、効率的な手法についてご紹介していきます。

1. スマホ対応の重要性

①　利用者の増加

調査によるとスマートフォンの普及によりホームページを閲覧する際、利用者の多くはスマホからアクセスしています。

そのため、スマホ対応しておらず、見にくいホームページは、利用者がすぐページから離れてしまい、せっかく作ったホームページを見てもらえず、商品購入、資料請求に繋がらない可能性があります。

➁　SEO対策のため

Googleは閲覧デバイスに左右されず、利用者の選択肢が広がるホームページを高評価し、そのホームページを上位表示させますので、スマホ対応していないと検索エンジンにより、自社のホームページが下位表示されてしまいます。

検索されなければアクセスが減少し、契約数も減少する可能性があります。

➂　競争力

パソコンだけでなくスマートフォンからでも見やすく操作しやすいホームページは利用者に支持されます。

競合他社より見やすいホームページを提供することは、自社のホームページをより多くの方に閲覧していただくことが可能になりビジネス上もメリットとなります。

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

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

①　レスポンシブデザイン

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

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

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

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

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

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

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

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

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

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

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

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

➂　画像や動画の軽量化

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

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

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

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

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

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

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

④　タッチ操作に対応

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

➂　文字のサイズと間隔

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

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

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

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

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

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

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

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

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

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

格安ホームページ制作サービスeasy PAGEでは22,000円からスマホに対応したホームページ制作を行っております。

しかもなんと！余計なコストも発生せず、あくまで発生するのは制作費のみ！

ホームページ初心者であっても親切丁寧にご案内させていただきます。

格安ホームページ制作サービスeasy PAGEにご興味がございましたら下記ボタンからアクセスしてください！