スマートフォンからWebサイトを閲覧する人が年々増え、ホームページのスマホ対応は今や必須となりました。
さまざまな調査から、スマートフォンでインターネットを利用する人の割合は全体の90%以上で、そのうち50%以上の人がスマートフォンしか使っていないと考えられています。
スマホ対応がされていないホームページは、「文字が小さくて読めない」「ボタンが押しにくい」などユーザーにストレスを与え、閲覧を諦められてしまう原因になります。さらにGoogleもスマホ対応か否かを検索順位に反映しており、モバイルフレンドリーでないホームページはSEO面でも不利になりかねません。
そこで本記事では、スマホ対応ホームページの作成方法を初心者にも分かりやすく解説します。ロリポップの独自視点も交え、低コストかつ簡単に実現するポイントをご紹介します。
ロリポップの便利さ・価格の安さ・導入の手軽さ・サポート充実度も取り上げますので、これからホームページを作成する方はぜひ参考にしてください。
スマホ対応がなぜ重要？ ～その理由と背景～
まずはなぜスマホ対応が必要なのか、背景にある理由を押さえましょう。
- スマートフォンユーザーの急増
スマートフォンの普及によって、多くのユーザーがWeb閲覧の主な手段をPCからスマートフォンに移行しています。
実際、総務省のデータでもスマートフォンの世帯保有率は年々上昇し、2017年以降PCを追い越し90%以上となっています。
スマートフォンからのアクセスが一般的になった現在、自社ホームページがスマートフォンで快適に見られないと、それだけで半数以上の潜在顧客を逃す恐れがあります。 - ユーザビリティ（使いやすさ）の問題
スマホ画面は小さく操作も指で行うため、PC向けのままでは「見にくい・使いにくい」状態になりがちです。
具体的には、文字や画像が小さすぎて拡大しないと読みづらい、リンクやボタンが小さく間隔も詰まっていてタップしづらい、横スクロールが必要になるといった問題が生じます。
こうした閲覧のしにくさはユーザーの離脱につながり、結果として機会損失となってしまいます。 - SEO（検索順位）への影響
Googleなど検索エンジンはモバイルフレンドリーなホームページを高く評価する方針を取っています。2019年にはGoogleが「モバイルファーストインデックス」を導入し、スマホ版サイトを基準にページの評価を行うようになりました。
そのため、スマホ対応していないページは検索結果で不利になりやすく、せっかく良いコンテンツでもユーザーに見つけてもらえない可能性があります。
集客やアクセス向上の面からも、ホームページのスマートフォン最適化は避けて通れないのです。
こうした理由から、ホームページをスマホ対応にすることは「今ややって当たり前」の必須課題と言えます。
では具体的に、どのように対応すればよいのか手順と方法を見ていきましょう。
スマホ対応の主な方法
スマホ対応を実現する方法いくつかありますが、ここではレスポンシブデザインで作成する方法とWordPressでスマホ対応ホームページを作る方法について説明します。
レスポンシブデザインでスマホ対応ホームページを作成する
レスポンシブデザインとは、1つのホームページでPC・タブレット・スマートフォンなどさまざまな画面サイズにレイアウトを自動調整する手法です。
HTMLファイルは共通で、デバイスに応じてCSSで表示スタイルを変えることで、ウィンドウ幅に合わせた最適な見え方を提供します。
例えば、ページのカラム数や画像サイズを画面幅に応じて可変にし、スマートフォンでは縦一列レイアウトにする、といった実装です。
- メリット
ページが一つで済むため更新・管理が楽で、PC版とスマホ版の内容不整合も起きません。
またSEOに有利とされています。
Googleは同一URLでコンテンツが統一されている方がページを正しく評価しやすく、重複を嫌うためです。
さらにデバイス判別のリダイレクトが不要なので、表示速度が速くなる傾向もあります。
実際、現在スマホ対応されているホームページのほとんどはレスポンシブ対応になっています。 - デメリット
初期構築に専門知識が多少必要な点です。
既存のPC向けホームページをレスポンシブ化するにはレイアウトの見直しやCSSの改修が必要になります。
また、各デバイス向けの最適化を1つのページで行うため、デザインの自由度に制約が出る場合があります。もっとも近年はCSSフレームワークやCMSの普及で、大半のケースはカバーすることができます。
ワンポイント: 手動でレスポンシブ対応ページをつくる場合、<meta name="viewport" content="width=device-width, initial-scale=1"> の設定と、画面幅に応じたCSSメディアクエリの記述が必要です。初心者の方は後述するCMSの利用を検討すると良いでしょう。
WordPressでスマホ対応ホームページを作成する
WordPressでは、スマホ対応ホームページを簡単に作成できます。
基本的にはレスポンシブデザインに対応したテーマを使用し、必要に応じて追加のカスタマイズを行うことで、PC・タブレット・スマートフォンなどさまざまなデバイスに最適化された表示を実現できます。
- メリット
WordPressのテーマの多くはレスポンシブデザイン対応のため、特別な知識がなくてもスマホ対応ホームページを作成できます。
また、プラグインを活用することで、モバイル専用の設定を簡単に追加できる点も利点です。
SEOの面でも有利であり、Googleはモバイルフレンドリーなホームページを評価するため、検索結果の順位向上につながる可能性があります。
さらに、テーマやプラグインの更新により、継続的に最新のスマホ対応技術を取り入れられる点も魅力です。
- デメリット
デザインの自由度はテーマに依存するため、細かいカスタマイズを行うにはCSSやPHPの知識が必要になる場合があります。
また、既存のPC向けWordPressサイトをスマホ対応にする際には、テーマの変更やカスタマイズが求められることがあり、レイアウトの見直しが必要になることもあります。
ただし、近年はカスタマイズ性の高いテーマなどの普及により、専門知識がなくても対応できるケースが増えています。
変換ツールを使う方法も
既存のPCホームページがあり大幅な改修は難しい場合、スマホ表示に自動変換してくれるサービス（有料）を利用する手もあります。
有料のツールやサービスは、専門知識がなくても既存ホームページをスマホ対応にできます。
この方法ならホームページを一から作り直す必要はありません。
ただし月額費用が発生する点と、変換による細かなズレは発生し得る点に注意が必要です。
また、どうしても自力での対応が難しい場合は制作会社に外注する方法もあります。
費用はかかりますが確実に対応してもらえるでしょう。
では、具体的に初心者がスマホ対応のホームページを作成する手順を見ていきましょう。
スマホ対応ホームページ作成の手順【初心者OK】
スマホ対応ホームページを自分でつくると聞くと難しく感じるかもしれませんが、最近はWordPress（ワードプレス）など初心者向けの仕組みを使えば驚くほど簡単です。
ここでは、初心者でも取り組みやすいレンタルサーバー「ロリポップ！」を利用した手順の一例をご紹介します。
ロリポップは初心者に優しいサービスで、WordPressもワンクリックで導入することができます。
しかも月額数百円からと低価格なのでスマホ対応ホームページ作成にぴったりです。
ステップ1：レンタルサーバーとドメインを準備する
まずはホームページを公開するためのレンタルサーバーと独自ドメインを用意します。
ロリポップなら公式サイトから数分で申し込みすることができ、10日間の無料お試し期間もあります。
プランは趣味用途から本格ホームページまで選べますが、WordPressを使う場合はデータベースが利用できるライトプラン（月額約300円）以上を選択すると良いでしょう。
独自ドメイン（「○○.com」など自分だけの住所）は後から取得して設定できますが、ロリポップの申し込み時に一緒に登録することもできます。
ロリポップでは無料の独自ドメイン取得特典（※プランにより異なる）や、独自SSL証明書の無料提供もあります。
SSL化されたホームページはセキュリティ面だけでなくGoogle評価の面でも有利なので、導入しておきましょう。
ステップ2：サーバーにWordPressをインストールする
レンタルサーバーの契約ができたら、次はホームページ作成ツールの導入です。
ここでは代表的なCMSであるWordPressを使います。
ロリポップの管理画面から「簡単インストール」を選べば、データベースの設定など難しい作業なしにワンクリックでWordPressを設置できます。
インストールが完了すると、早速自分のホームページ用WordPressにログインできるようになります。
もしWordPress以外のホームページ作成ソフトを使いたい場合も、ロリポップは幅広く対応しています。例えば、HTML/CSSで自作する場合でもFTPやファイルマネージャーでファイルをアップロードすればホームページを公開することができます。
初心者の方にはやはりWordPressが多数のデザインテーマもありおすすめです。
ステップ3：スマホ対応のデザインテーマを選ぶ
WordPressを導入したら、ホームページのデザインテーマ（テンプレート）を選びます。
WordPress公式テーマや市販のテーマにはほとんどすべてレスポンシブ対応のデザインが採用されています。
管理画面の「外観」→「テーマ」から好みのデザインを有効化しましょう。
初心者には、シンプルで機能充実の日本語テーマ「Cocoon（コクーン）」などがおすすめです。
Cocoonなど最新テーマであれば、特別な設定をしなくても最初からスマートフォンで見やすいレイアウトになっています。
選んだテーマによっては細かな調整項目もありますが、まずはデフォルトの状態でホームページを表示し、スマートフォンでの見え方を確認してみましょう（後述のステップ6で確認方法を説明します）。
選んだテーマがレスポンシブ非対応だった場合でもご安心ください。
WordPressにはスマホ用の表示に切り替えるプラグイン（例：「WPtouch」プラグイン）も存在します。
プラグインを有効化すれば、自動でスマホ向け簡易デザインに変換してくれます。
ただし最近はテーマ側で対応済みのことがほとんどなので、基本は不要です。
ステップ4：コンテンツを作成する（スマホ表示を意識）
デザインが決まったら、いよいよページの内容を作成していきます。
ここで文章や画像などコンテンツを入れていくわけですが、スマートフォンで見やすい構成を意識することが大切です。
- レイアウトはシンプルに
欲張って要素を詰め込みすぎず、スマートフォンの小さな画面でも情報を追いやすいように心がけます。
例えば長大な表や横並びの画像ギャラリーなどはレイアウト崩れやスクロールの負担につながるので避けましょう。
必要な情報はセクションごとにまとめ、折りたたみ（アコーディオン）なども活用するとコンパクトにできます。 - テキストは短く区切る
段落はできるだけ簡潔にし、一文もできるだけ短めにします。
改行や箇条書きを適宜入れて、スマートフォンでもブロックごとにスッと読めるレイアウトにします（この記事も1段落はなるべく短くしています）。見出し（H2, H3など）を活用し、小見出しごとに内容を整理すると読者もスクロールしながら内容を追いやすくなります。 - タップしやすいUI
ボタンやリンクは指でタップしやすいサイズ・間隔に配置します。
目安として、タップできる要素は少なくとも縦横48px以上の大きさを確保し、隣接するリンク同士は8px以上離すことが推奨されています。
これはGoogle開発の自動分析ツール「Lighthouse」に基づく基準値で、これ未満だとモバイルでの操作性が低いと判断されてしまいます。
テーマ既定のボタンサイズが小さい場合はCSSで調整するか、テキストリンクをボタン化するプラグインなどを検討しましょう。 - 画像・動画の使い方
画像はスマートフォンでは画面幅いっぱいに縮小表示されますが、高解像度すぎる画像はデータ容量が大きく読み込みを遅くします。
アップロード前に適切なサイズにリサイズし、圧縮ツールでファイルサイズを軽量化しましょう。WordPressなら「EWWW Image Optimizer」等のプラグインで自動圧縮できます。
動画を埋め込む場合もできれば短めにするか、必要なページのみに限定するなどして、モバイルユーザーの通信負荷を考慮します。 - 表示速度の最適化
スマホユーザーは通信環境が不安定な場合も多いため、ページ表示速度はよりシビアに配慮しましょう。
画像以外にも不要なプラグインやスクリプトを減らす、ブラウザキャッシュを活用する、などで軽量化を図ります。
ロリポップのサーバーはWordPress最適化がされており、高速化機能（コンテンツキャッシュやPHP高速設定等）が管理画面から簡単に有効化できるので、ぜひ活用してください。
ステップ5：スマートフォンでの表示確認＆微調整
コンテンツがある程度できたら、スマートフォンでの見え方をテストします。
PCのブラウザ上でもデベロッパーツールを使えばスマホ表示を再現できます。
Google Chromeの場合、画面上で右クリックし「検証」を選ぶか、キーボードでCtrl+Shift+iを押すとデベロッパーツールが開きます。
ツールバーにスマートフォンとタブレットのアイコンがあるのでそれをクリックすると、画面サイズをスマホ用に切り替えて表示を確認できます。
この状態で自分のホームページを表示し、文字や画像の崩れ、改行のおかしな箇所がないかをチェックしましょう。問題があれば、再度WordPressの管理画面で修正します。
可能なら実際にスマートフォンの実機でも確認しましょう。
PC上では正常でも、実機では思わぬズレが見つかる場合があります。
複数の端末やブラウザでテストできるとなお良いです。
ロリポップでホームページを公開しながら、家族や友人にもスマートフォンで見てもらい使い勝手のフィードバックをもらうと、自分では気づかなかった改善点が見えてきます。
ステップ6：ホームページ公開＆さらなる改善
問題が解消したら、いよいよホームページを正式公開します。
独自ドメインの設定がまだの場合は適用し、ロリポップの管理画面から「公開サイトURL」に独自ドメインを紐付けて運用を開始しましょう。
公開後も、Googleが提供するモバイルフレンドリーテストやPageSpeed Insightsなどのツールで定期的にチェックし、スコアが低い項目があれば改善を行ってください。
例えば「文字が小さすぎる」と指摘されたらCSSでフォントサイズを拡大する、「表示に時間がかかっている」と出れば画像やCSS/JSの圧縮を見直す、といった具合です。
また、Googleサーチコンソールにホームページを登録しておくと「モバイルユーザビリティ」というレポートでスマホ表示上の問題を検出できます。
それらも活用しつつ、常にユーザー目線で使いやすさを追求しましょう。
ホームページは公開して終わりではなく、改善を重ねていくことで成果を生み出します。
ロリポップならではの便利さ・強みを活かそう
以上のようにスマホ対応ホームページを作成する際、ロリポップのサービスを使うことでさらにスムーズかつ安心して進められます。その強みをあらためて整理してみましょう。
- 導入が簡単
ロリポップは初心者向けに設計されており、難しいサーバー知識がなくても直感的に操作できます。
WordPress簡単インストール機能や、独自ドメイン設定のガイド、無料SSL設定のワンクリック化など、初めてでもつまずきにくい工夫が盛り込まれています。
実際「メールを送る程度のパソコンスキル」で驚くほど簡単にホームページを作成できるとの評価もあります。 - 低価格でコスパ抜群
月額料金は安価なプランで~わずか100円台から利用することができます（※HTMLホームページ向けエコノミープランの場合）。
WordPressが使えるライトプランでも月額300円前後と、他社と比べても非常にリーズナブルです。初期費用も無料なので、思い立ったらすぐ始められます。
制作会社に外注すれば数十万円かかるところを、この価格で自作できるのは大きな魅力です。 - 手厚いサポート
ロリポップはサポート体制が充実していることでも知られます。
365日対応のメールサポートは原則24時間以内に回答が得られ、平日昼間はチャットによるオペレーター対応も行っています。
さらにAIチャットボットが24時間質問に答えてくれる仕組みもあり、困った時にすぐ解決策が見つかりやすい環境です。
公式のマニュアルやヘルプも充実しているため、初心者の疑問は大抵調べて解決できます。
「なにかわからないことがあってもサポートがあるから安心」というのは大きな利点でしょう。 - 高速＆安心
ロリポップは最新の高速サーバー環境を提供しており、特にWordPressの表示速度に定評があります。
スマホ対応ホームページでは表示スピードが重要と述べましたが、サーバー側の高速化技術（SSDストレージ、高速モジュール設定など）がその点を強力に支えてくれます。
また無料の独自SSLやWAF（ファイアウォール）標準対応、常時バックアップなどセキュリティ面・安定性も万全です。
「せっかく作ったホームページがトラブルで表示できない」という事態を避けるためにも、信頼できるサーバーを選ぶことは重要です。
このように、ロリポップを活用すれば「安い・簡単・安心」の三拍子でスマホ対応ホームページを構築できます。
他のレンタルサーバーの記事ではあまり触れられていない部分ですが、自社メディアだからこそお伝えできる強みです。
スマホ対応ホームページ作成のポイントまとめ
最後に、本記事の要点をまとめます。
- スマホ対応は必須
スマホユーザーの占有率は非常に高く、対応していないとユーザー離れや検索順位低下に直結します。
今や「対応していて当たり前」の時代なので、ホームページ開設時には最初からモバイル対応を前提に計画しましょう。 - 方法はレスポンシブが基本
スマホ対応の実装方法にはレスポンシブデザインと別サイト方式がありますが、通常はメリットの多いレスポンシブ対応がおすすめです。
1つのホームページで完結するので管理が楽でSEO効果も高いです。
特殊な事情がない限り、まずレスポンシブで実現できないか検討しましょう。 - WordPress＋ロリポップで簡単構築
レスポンシブ対応ホームページはWordPressなどのCMSを使えばコーディング不要で作成できます。
特にロリポップの簡単インストールと高速環境を使えば、初心者でも短期間でスマホ対応のホームページを公開することができます。
無料お試し期間も活用し、まずは気軽に始めてみると良いでしょう。 - スマートフォンで見やすいデザインに配慮
コンテンツ作成時はスマホ視点でレイアウトや文字量を調整します。
指での操作性を意識し、ボタンのサイズ・間隔にも注意しましょう。
目安として、タップ可能エリアは48px ☓ 48px以上、要素間隔は8px以上を参考にされると良いでしょう。
また画像の軽量化など表示速度の最適化も重要です。 - テストと改善を忘れずに
作成後は必ず実機やエミュレーターでスマホ表示を確認し、不具合を潰しましょう。
公開後もGoogleの各種ツールでモニタリングしながら改善を続けてください。
ユーザーのフィードバックを集め、より良いUXを追求する姿勢が大切です。
スマホ対応のホームページ作りは、最初は学ぶこともありますが、ロリポップのような初心者に優しいサービスを利用すれば決して難しくありません。
低コストで始められるので、ぜひチャレンジしてみてください。自分でホームページを作成・運営する経験は、今後のビジネスや発信活動において大きな財産となるでしょう。
皆さんも本記事を参考に、スマートフォンでも見やすい素敵なホームページを作成してみてください！
ロリポップではあなたのホームページ作りを全力でサポートします。
まずは気軽に公式サイトをチェックして、夢のホームページ作り第一歩を踏み出しましょう。
