スマホ対応ホームページの作り方｜モバイルフレンドリーとは？
この記事は2017年3月8日に公開、2023年6月18日に更新しています。
インターネットへのアクセスの半分以上がモバイル機器からという今の時代、モバイルフレンドリーなホームページを作成することが必要不可欠となりました。そこで今回は、モバイルフレンドリーなサイトを作成するための基礎知識と 7 つのポイントを徹底的に紹介します。
ホームページの作り方を知りたい人やサイトのリニューアルを検討している人は、スマホ対応のホームページが作成できる Wix をぜひお試しください。
＼必要な機能が揃った本格ホームページ作成ツール／
目次
モバイルフレンドリーテスト 使いやすいスマホサイトを作成するための7つのコツ
その３：重要な情報の理解性向上 その４：画像サイズをモバイル用に調整する その５：読みやすさに気を配る
ホームーページをスマホ対応させる必要性
Simmlarweb によると 2023 年 7 月の日本では、モバイル端末からのトラフィックが全体の 75.41％ を占めていることがわかりました。
このデータからわかるとおり、ほとんどのサイト訪問者はモバイル版のホームページを主に閲覧しています。スマホ画面で見たときに、デザインが崩れているサイトや、読みづらいホームページは、サイトのパフォーマンスを悪化させるだけでなく、ホームページの信頼性を損ないます。作成したホームページをスマホ対応させることは、現在避けられない重要な要素です。
モバイルフレンドリーとは
過去 10 年に渡り、モバイル端末の普及とともに、モバイルからのトラフィックは増え続けています。Google は 2015 年 4 月に 「モバイルフレンドリーアップデート」と呼ばれるをアルゴリズムアップデートを全世界で実装しました。 このアップデート以降、Google はスマートフォンでの閲覧に適しているページを評価し、検索結果に優遇するようになりました。
2018 年には「モバイルファーストインデックス」を導入し、サイトのインデックスと、検索結果ランキングのアルゴリズムにおいて、スマホサイトを優先的に使用するようになりました。
したがって Web サイトをモバイルフレンドリーに対応させることは、SEO 対策としても必要不可欠で非常に重要な施策です。
ホームページをスマホ対応させる2つの方法
ホームページをスマホ表示に対応させるためには、ユーザーが利用している端末ごと最適化されたページを表示する必要があります。 しかし、デスクトップ版とスマホ版のページ内容は同じであることが推奨されています。表示方法は変わっても、表示されている内容は必ず統一するようにしましょう。
ホームページをスマホ表示対応させる主な方法は、レスポンシブデザイン、またはアダプティブデザイン（スマホ対応表示）の導入です。どちらも、スマホ表示に最適化する方法ですが、それぞれメリットとデメリットがあります。
01. レスポンシブデザイン
ユーザーのデバイスの種類（パソコン、タブレット、モバイル、非視覚系ブラウザなど）に関係なく、画面サイズに応じてコンテンツの表示方法を変更します。
メリット
一つのデザインで全デバイスに対応。
基本的に、一つのCSSファイルで管理するため、更新や変更が用意。
デメリット
ページの読み込み速度に影響することがある。
デスクトップで表示される全ての要素が、スマホ版でも表示される。
Google はレスポンシブデザインを採用することを推奨していますが、デザインが複雑になるため、外注する際にはデザイン費が割高になったり、個人で作成するには手間と時間がかかる場合があります。 そんなとき、ノーコードでレスポンシブデザイン対応のホームページが作成できる Velo by Wix なら、効率的にレスポンシブホームページが開発できます。
02. アダプティブデザイン
特定のブレークポイントごとにデザインを作成し、検知されたデバイスのサイズに応じて異なるバージョンを表示します。アダプティブデザインなら、ピンポイントでそれぞれのデバイスごとに表示方法を設定できるため、レイアウトの崩れを抑えることができます。 主な 6 種類の標準的な画面幅は以下の通りです。
320
480
760
960
1200
1600
メリット
必要なファイルのみを表示に利用するため、表示スピードが速い。
レスポンシブデザインほど構成が複雑ではない。
デメリット
手動で更新する場合は、それぞれのデザインファイルを更新する必要があるため、工程が増える。
一般的な幅ではないデバイスからのアクセスでは、デザインが見切れる可能性がある。
通常の Wix エディタで作成されたサイトは、自動的にアダプティブデザイン方式のスマホサイトが作成されます。PC 版のホームページデザインをカスタマイズした場合には、スマホ版デザインも更新されるようになっています。アダプティブデザインでありながら、それぞれのデザインファイルを更新する手間を自動化されているため、サイトデザインの更新も簡単です。
アダプティブデザインは、レスポンシブより表示スピードが早く、エラーの発生をある程度抑えることができ、ユーザー体験を損なう可能性を抑えることができます。今後、認知が広がり主流なスマホ対応デザインの手法となっていくでしょう。
このほかにも、古いテクニックとして、独立したモバイルサイトとパソコン向けホームページを 2 つ作成するといった方法がありましたが、現在は推奨されていません。URL が別になってしまい、SEO にネガティブに影響するほか、制作や管理に必要な作業が倍になり手間がかかるからです。 もし、モバイル用とパソコン向けホームページ両方を運営している場合は、リダイレクトやサイトリニューアルをすることで、一つのサイトとして統合しましょう。
＼必要な機能が揃った本格ホームページ作成ツール／
モバイルフレンドリーのチェック方法
まずはホームページをモバイルフレンドリーに対応させるために、現在の状態をチェックしましょう。ツールを使えば、簡単にモバイルフレンドリーかどうかチェックすることができます。
モバイルフレンドリーテスト
チェックするページが少ない場合は Google が提供する「モバイルフレンドリーテスト」を利用しましょう。ツールに URL を入力するだけで、テスト結果から問題点や改善すべきポイントが明確になります。
モバイルフレンドリーテストで確認できるポイントは以下の通りです。
テキストのサイズが小さすぎないか
クリック可能な要素同士が近すぎないか
ビューポート（表示領域）が設定されているか
コンテンツの幅が画面サイズと一致しているか
スマホ表示に互換性のないプラグイン（Flashなど）を使用していないか
Google サーチコンソール
調べたいページが複数あり、その Web サイトを所持している場合には、Google サーチコンソールのモバイルユーザービリティレポートからチェックすることができます。問題があれば、エラーとして表示され、理由が確認できます。
モバイルフレンドリーの確認方法がわかったら、次はモバイル端末からでも使いやすいホームページにするコツを詳しく紹介します。
＼必要な機能が揃った本格ホームページ作成ツール／
モバイルフレンドリーに対応する方法がわかったら、次はユーザーが使いやすいと感じる高品質なスマホサイトを作成するためのコツを併せて紹介します。
使いやすいスマホサイトを作成するためのコツ
その 1：モバイル画面のサイズを考慮
PC 版サイトとモバイル版サイトの大きな違いは当然ながら画面サイズです。スマホサイトを見る人は、電車に乗っていることや、外出中にサイトを見ていることも多いので、サイトを流し読みすることが多い傾向にあります。小さな画面にいろいろとコンテンツを詰め込んでも、読みにくかったり、レイアウトが崩れたりするため、モバイルフレンドリーであるとは言えません。
しかし、Wix のモバイルエディタを使えば、PC 版のサイトコンテンツをモバイル向けに自動変換してくれます。コンテンツの見え方を確認しながら調整しましょう。大切なのは、一番伝えたいメッセージを目立たせること、そして訪問者が探している情報をすぐに得られるようにすることです。
その 2：シンプルなナビゲーション
いつどこにいても、知りたいときに知りたい情報が手に入るのが、スマホの最大のメリットです。実店舗に向かっている途中で、お店の住所や電話番号をスマホで検索したことはありませんか？情報探しに時間がかかるホームページでは離脱率が高くなってしまいます。
ホームページを見ている人が、簡単に基本情報にアクセスできるような工夫が必要です。また、モバイル対応の地図も問い合せページに追加し、オフィスやお店を発見しやすくしましょう。
その３：重要な情報の理解性向上
特にスマホでは、限られた時間内に必要な情報を見つけたいものです。縦長のスクロールページやページ間の移動が多すぎると、訪問者をイライラさせるだけでなく、最も大切な情報にたどり着く前に諦めてしまうことも。
スマホ版サイトでは、長々としたテキストや無駄なコンテンツは省き、簡潔にまとめることが PC 版サイトよりも重要になります。
その４：画像サイズをスマホ用に調整する
サイトを作る際は、さまざまな機種のスクリーンで表示し、各デバイスでサイトがどのように見えるかを確認しましょう。よく見るのが、画像サイズが大きすぎたり小さすぎたりするデザインです。
また、ボタンが小さすぎることも問題です。モバイルサイトで、間違って隣のボタンをクリックしてしまったという経験はありませんか？指先だけで簡単に操作できるよう、ページ上のボタンやリンクは大きく分かりやすいデザインにすることが、モバイルサイトで成功する基本です。
その５：読みやすさに気を配る
フォントの種類やサイズに気を配る必要がありますが、読みやすさはフォントだけの問題ではありません。ホームページの配色や、文章量とスペースのバランスも読みやすさに大きく影響します。まずはデザインの基本を大切にしましょう。
背景と文字の色にコントラストをつける
明度が近い色の組み合わせは避ける
多くの色を使いすぎない
文字間や段落間のスペースはしっかり取る
その６：検索バーを追加
前述のとおり、スマホからの閲覧者は必要な情報を素早く簡単に見つけたがっています。極力少ない手順で情報を得られるようにするには、サイト内に検索機能を追加しましょう。「サイト検索」アプリを加えれば、訪問者は最小限のステップで知りたい情報を発見できます。
その７：必要な機能が入っているか確認
デスクトップ同様に、顧客がオンラインで予約やイベントへの参加申し込み、ネットショップでの買い物などを楽しめるよう、必要な機能がスマートフォンでもきちんと機能するかチェックしましょう。Wix App Market には、スマホ対応のアプリや機能が数多く用意されています。
また、スマホではパソコンに比べて文字入力にも時間がかかります。たとえば、アンケートフォームをサイトに設置する場合、アンケートの回答はタイプ形式ではなく選択できる形にしたり、絵文字で回答できる形にするなどの工夫が必要です。
まとめ
本記事では、モバイルフレンドリーとは何かについて解説し、モバイルフレンドリーなサイトを作成するためのポイントを紹介しました。モバイルフレンドリーなデザインの採用、シンプルなナビゲーションと操作性の向上、重要な情報の理解性向上など、これらのポイントを意識してサイトを作成しましょう。
＼必要な機能が揃った本格ホームページ作成ツール／
編集者：Miyuki Shimose
ブログ コンテンツライター
