こんにちは、編集長のカワウソです！
「スマホ対応」や「スマホ最適化」という言葉を聞いたことがありますか？
最近では多くの人がパソコンではなく、スマホでネットを利用するため、スマホ向けにホームページを作る必要があります。
そこで今回は、スマホ対応したホームぺージの作り方を解説します。
カワウソ
この記事は次のような人におすすめ！
- はじめてホームぺージを作る人
- スマホでも閲覧しやすいホームページを作りたい人
- 「スマホ対応」や「スマホ最適化」の方法を知りたい人
この記事では、実際にホームぺージで使えるテンプレートも紹介しているので、すぐにホームぺージ制作に取り掛かれます。
それではどうぞ！
目次
ホームページのスマホ対応とは
スマホ対応とは、簡単にいうとスマホ用に最適化されたホームページを用意することです。
スマホ対応ができていないと、ユーザーがスマホでホームページを閲覧した際に、パソコン向けのホームページが表示されます。たとえば、以下のような問題が生じます。
- レイアウト（画像や文字の位置など）が崩れる
- 文字や画像が小さく、もしくは大きくなる
- 設置した「問い合わせ」ボタンがなくなる
- クリックしても別のページに移動しない など
このようなホームページでは、ユーザーは「見にくい（読みにくい）」「使いづらい」と感じ、早々に離脱してしまいます。
ユーザーの離脱を避けるためには、スマホでも見やすいホームページを事前に作る必要があります。
これが「スマホ対応」もしくは「スマホ最適化」です。
- 不本意な理由で離脱されない
- 届けたい情報が正しく伝わる
- 問い合わせボタンがクリックされる
結果、ブランドが正しく認知されたり、問い合わせを獲得できたりと、ホームぺージの目標達成に貢献してくれるでしょう。
スマホ対応が求められる理由
スマホ対応が必要な理由について、もう少し深く掘り下げます。スマホ対応の必要性をすでに理解している方は読み飛ばしていただいてかまいません。
スマホによるネット利用者の急激な増加
スマホによるネット利用者の割合は年々上昇しています。以前はパソコンによるネット利用が主流でしたが、いまやスマホでのネットユーザーが大半です。
LINE株式会社が2021年に実施した、日常的な（※）インターネット利用環境に関する調査によると、スマホでネットを利用すると回答した人の割合は全体の94％にものぼります。※週1回以上の利用（職場や学校での利用む含む）
一方で、パソコンでのネット利用者の割合は43％です。
このように、ネットはパソコンではなく、スマホで利用するものに変わりつつあります。
ホームぺージをスマホに最適化させれば、この94％の人々に「見やすい情報」や「使いやすいサービス」を提供できます。スマホ対応の重要性は年々高まっているのです。
画像の参照元：〈調査報告〉インターネットの利用環境 定点調査（2021年上期）
SEOに大きく影響
スマホ対応は、SEO（エス・イー・オー）に大きな影響を与えます。
SEOは「検索エンジン最適化（Search Engine Optimization）」のことで、わかりやすくいうと、自社のホームぺージが検索結果で上位表示されるための対策です。
検索結果で自社のホームぺージが上位表示されれば、ユーザーに見つけてもらいやすくなるため、結果アクセスが増えます。
上位表示を狙うには、適切なSEOを行い、Googleから高い評価を受けなければなりません。評価項目はさまざまなものがありますが、その一つが「スマホ対応」です。
Googleは、ホームページのスマホ対応の有無をモバイル検索時のランキング要因として使用すると発表しています。
スマホ対応は、もはやSEO対策には「必須」といえるでしょう。
ホームページをスマホ対応させる2つの方法
今回は、ホームページをスマホ対応させる方法として、「レスポンシブデザイン」を利用する方法と「ホームページを2つ作る」方法の2つを紹介します。
ホームぺージ初心者の方であれば、難度と作業量を減らすためにもレスポンシブデザインの利用がおすすめです。
以下要点をまとめた比較表です。さらに詳しく知りたい方は下記の詳細もお読みください。
| レスポンシブデザイン | ホームページを2つ作る | |
| 概要 | 1つのホームページをパソコン向けとスマホ向けのどちらにも対応させる方法 | パソコン向けのホームページとスマホ向けのホームページを別々に作る方法 |
| 仕組み | アクセスしたデバイスに合わせて最適化されたページを表示する（サイズ可変） | アクセスしたデバイスに合わせて表示するページを振り分ける（サイズ固定） |
| メリット |
|
|
| デメリット |
|
|
レスポンシブデザイン
レスポンシブデザインとは、ユーザーのデバイスに応じ、ホームページの表示サイズを自動で変えるデザインです。
レスポンシブデザイン対応のホームぺージは、パソコン・スマホ・タブレットなど、ありとあらゆるデバイスに最適化したぺージを表示できます。
作るホームページは1つだけのため、制作コスト（費用・時間）を削減できることもメリットです。
Googleはスマホ対応に関して、以前からレスポンシブデザインを推奨しています。
特別な理由がなければ、レスポンシブデザインを利用するようにしましょう。
レスポンシブデザインを導入するには、ある程度のWeb制作に関する知識（Webデザインやコーディングなど）が必要です。
しかしながら、あとで紹介するWordPressであれば、初心者であっても簡単にレスポンシブデザインのホームページが作れます。
ホームページを2つ作る（パソコン・スマホ）
ホームページを2つ作り、アクセスがあったデバイスに合わせてページを表示させる方法もあります。
パソコン・スマホそれぞれに合うデザインを追求できるため、より見やすく、使いやすいホームページを作れることが大きなメリットです。
しかし一方で、「ホームページ制作・更新に2倍の時間がかかる」「対応していないサイズのデバイスでは最適化されない」といったデメリットがあります。
また、パソコンとスマホではそれぞれ別のURLになるため、管理も複雑になります。
仕組みさえ理解すれば、制作自体は難しくはないものの、初心者にはあまりおすすめできません。
スマホ対応したホームページの作り方
WordPressを用いれば、初心者の方でも簡単にレスポンシブデザインのホームぺージを作れます。
ここでは具体的な方法を紹介します。
初心者にはWordPressがおすすめ
WordPress（ワードプレス）はCMS（シー・エム・エス）の一種で、わかりやすくいうと、ホームページ制作・更新の管理ツールです。
Web制作スキルがない初心者の方であっても、WordPressを使えば、ホームページの制作・更新が容易にできます。スマホ対応も簡単なため、おすすめです。
なぜ？WordPressが会社のホームページ制作に適している理由
レスポンシブデザイン対応のテーマを用いる
WordPressでスマホ対応のホームぺージを作るには、レスポンシブデザイン対応のテーマを用いるだけです。
WordPressでは、希望のテーマをインストールすると、ホームぺージ全体を構成するデザインが反映されます。
この際に、レスポンシブデザインに対応したテーマを選びましょう。設定画面から簡単に編集でき、すぐにオリジナルのホームぺージが完成します。
WordPressのテーマは日々増えており、公式のテーマだけでも8,000を超えます。
テーマは慎重に選ぶ必要がありますが、以下のテーマであればレスポンシブデザインが採用されており、かつ初心者でも扱いやすいため、おすすめです。
Lightning
「Lightning」は、株式会社ベクトルが提供している無料のテーマです。ビジネス向けホームページを簡単に作れるため、Web制作が初めての方におすすめです。
- 6万以上のインストール実績
- 初心者にもわかりやすいシンプル設計
- Lightningに関する書籍が出版されている
- 設定どおりに作ればスマホ対応も完了
- 商業利用にも対応
- 無料で利用できる
TCD
お金を払ってでも手軽に良質なホームページを作成したい人には「TCD」がおすすめです。
株式会社デザインプラスが提供するTCDは、累計で10万以上の利用者を獲得している人気の有料テーマです。
病院、レストラン、エンターテイメントなど、ビジネスジャンルに特化した複数のテーマが用意されており、最適なものを選べばそれだけでクオリティの高いホームページが完成します。
機能が多いため、使いこなすのが難しいという声もありますが、「せっかくなら細かい部分までこだわって、他と差をつけたい」と考える方におすすめです。
- ビジネス用ホームページでよく利用されている
- デザイン、機能、レスポンシブ対応などすべてがハイレベル
- ビジネスジャンルに合ったテーマを選択できる
- 新規の機能追加が簡単なため応用力が高い
Twenty-Twelve
よりレスポンシブデザインに強いホームページを作りたい方には、WordPress社が提供する無料テーマ「Twenty-Twelve」がおすすめです。
2012年にリリースされた少し古いテーマですが、毎年アップデートを行われているため、現在でも十分利用可能なクオリティです。
他のテーマを試してもうまくいかなかった方は、こちらのテーマを利用してみるのもよいでしょう。
- WordPress社が公式に提供している無料のテーマ
- レスポンシブデザインに特化した性能
- 毎年アップデートが実施される
- デザインのカスタマイズ性が高い
- 初心者でも使いやすい
スマホ対応プラグインを用いる
WordPressにスマホ対応のプラグインをインストールする方法もあります。
プラグインとは、WordPressに機能を追加するパッケージのようなものです。プラグインをWordPressにインストールすることで、新たな機能を利用できます。
スマホ対応のプラグインをインストールすれば、複雑なレスポンシブ設定も自動で実施してくれます。
スマホ対応に適したプラグインには、以下があります。
- WPtouch
- MobilePress
- WordPress Mobile Pack
ただし、スマホ対応プラグインは以下のデメリットが生じる場合があります。
- スマホ対応機能がうまく働かない
- ページ設定が複雑になり、ページ表示までに時間がかかる
- うまく機能しないときの設定変更が難しい
そのため、どうしても使いたいテーマがあり、そのテーマがレスポンシブデザインに対応していない場合を除き、利用はおすすめしません。
初心者の方であれば、まずはレスポンシブデザイン対応のテーマを用いるのがよいでしょう。
レスポンシブデザインの注意点
レスポンシブデザインを取り入れる際には、以下のポイントに注意しましょう。
ターゲットを意識する
通常、レスポンシブデザインは、パソコンとスマホのどちらにも対応しています。
しかし、テーマによっては「パソコンが得意」「スマホが得意」のように偏りが見られる場合があります。
そのため、自社が設定するターゲットによって、パソコンに強いテーマか、スマホに強いテーマかを選択するとよいでしょう。
たとえばBtoBでは、「パソコン経由でのアクセス数が多い」「問い合わせにつながるのはパソコンからが多い」などの特徴が見られるケースが多いです。
そこで、パソコンでの閲覧・操作がしやすいテーマを選べば、売上アップにつながる可能性が高まります。
ナビゲーションが見えていたほうが情報を探しやすい
ホームページ制作が初めての場合、実際の分析データをもとに検討するのは難しいです。
しかし、同業他社のホームページを参考にしたり、ネットで情報を得たりすれば、ある程度見通しを立てられます。
どちらがよいかわからない場合には、パソコン・スマホどちらも閲覧・操作しやすいテーマを選びましょう。
高解像度ディスプレイへの対応
最近では、高解像度ディスプレイを搭載したスマホが多いです。
高解像度ディスプレイでは、解像度が通常画面の倍以上のものもあり、いつも通りに画像をアップするとぼやけて見え、ホームページの見栄えが悪くなってしまう可能性もあります。
対応策としては、表示させたい画像サイズの2倍程度で画像を制作することです。そうすることで、高解像度ディスプレイでもきれいに表示されます。
ホームぺージに掲載する写真が多い方にとっては重要なポイントですので、覚えておきましょう。
画像を圧縮する
スマホやデジカメで撮影した画像をそのままホームページで使ってしまうと、ページを開いた際になかなか画像が読み込まれないことがあります。
表示が遅いと、ユーザーはストレスを感じ、離脱しやすくなります。ブランド力を落とすことにもなりかねないため、避けたいところです。
画像を圧縮すれば、撮影データの容量が減り、ぺージ表示の遅延問題を解決できます。
手軽さを重視するなら世界で利用者の多い「I love IMG」、細かい設定が必要な場合はGoogleが提供する「Squoosh」がおすすめです。
レスポンシブデザイン制作時に役立つツール
ホームページの制作中にレスポンシブデザインが正しく機能しているかを確認する必要があります。そこで役立つのが開発者によく利用される「デベロッパーツール」です。
デベロッパーツールでは、ページがどのように構成されているかを見たり、デバイスのサイズによってホームページがどのように表示されるかを確認したりできます。レスポンシブデザインで特に必要になるのは後者です。
制作中のデータが格納されているテストサーバーに、スマホからアクセスしなくても、パソコンから確認できます。ここで正しく表示されていれば、同サイズのデバイスでも同じように表示されます。
逆に、表示がおかしくなっていた場合には修正が必要です。
ちなみに、「デベロッパーツール」はChromeでの呼び名です。EdgeやIEでは「開発者ツール」、Firefoxなら「レスポンシブデザインビュー」と呼ばれます。
以下の方法で呼び出すことができるため、使ってみるとよいでしょう。
- Chromeの「デベロッパーツール」 … Ctrl＋Shift＋i
- Edge・IEの「開発者ツール」 … F12
- Firefoxの「レスポンシブデザインビュー」 … Ctrl＋Shift＋m
ホームページのスマホ対応に関するFAQ
最後に、ホームページのスマホ対応に関するFAQを紹介します。同じような悩みを抱えている場合は、参考にしてください。
ワイド画面のスマホにも対応しますか？
WordPressでレスポンシブデザインを採用しているテーマを利用した場合には、ワイド画面（通常のデバイスと比べ横幅が広い画面）のスマホにも対応していることが多いです。
ただし、選択したテーマにもよるため、上記で紹介したデベロッパーツールを用いて、指定幅の際にどのように表示されるかを確認しておくとよいでしょう。
一方で、スマホ用ホームページを別途作った場合には、ワイド画面や標準外の画面ではうまく表示されない場合があります。
スマホ用ホームページは、指定したデバイス幅では正しく表示される一方、指定以外のデバイス幅には最適化されないためです。注意してください。
自分でスマホ対応させることも可能ですか？
スマホ対応されていないホームページを自身で調整することも、もちろん可能です。その場合には、レスポンシブ対応させるためのコードを組み込んだり、プラグインを導入したりして対応します。
しかしながら、ある程度の専門知識が必要なため、初心者にはおすすめしません。
初めてのホームページ制作であれば、まずはWordPressのレスポンシブに対応したテーマでの制作をおすすめします。
レスポンシブデザインのテーマを選んだが設定が崩れてしまいました。
レスポンシブデザインのテーマでは、初期設定ではレスポンシブ設定になっています。しかし設定を変更したり、新規で何かを追加したりした際には、レスポンシブデザインが適応されない、もしくは設定が壊れてしまう場合があります。
いったん崩れてしまったテーマを修正するのは簡単ではないため、まずは元の形を崩さないようにホームページ設計することが重要です。
レイアウトが崩れてしまった場合には、直前に実施した内容を元に戻してみてください。また、何かあったときのために、バックアップを取っておく、修正を加える場合にはコピーを作成しておくなどの安全策も図るとよいでしょう。
まとめ
この記事では、初心者がスマホ対応したホームページを作るための方法を紹介しました。
- スマホ対応とは、スマホでも閲覧しやすいホームページを用意すること
- スマホ対応には「レスポンシブデザイン」と「ホームページを2つ作る」方法がある
- レスポンシブデザインが簡単に実現できる「WordPress」がおすすめ
- レスポンシブデザイン導入の際はターゲットを意識することが重要
初心者の方でも、WordPressを利用すれば、スマホに最適化されたホームページが作れます。
それでは、素敵なホームページの完成を祈っております。
以上、最後まで読んでいただき、ありがとうございました。
ホームページの開設を検討している方へ
エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1のレンタルサーバーであり、15万社の導入実績があります。
7月21日18時まで初期費用0円&月額料金20%OFFキャンペーン開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にホームページ開設をご検討ください！
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
【超初心者向け】会社ホームページの作り方
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
