今や、スマートフォンを使っていない年代はいないのではないかと思うほど、スマートフォン保有率は年々増加しています。
そんな世の中で、ホームページをスマートフォン対応にしないのは、勿体ないと思いませんか！？
そこで今回は、ホームページをスマホ対応にする方法を伝授します。
まだしていない場合は、ぜひこれを見てすぐに行動に移しましょう！
スマホ対応とはどんなもの？
ホームページのスマホ対応とは、スマートフォンやタブレットなどの小さく縦型の画面でも、快適にホームページを閲覧できるように見え方を最適化することです。
【スマホ対応版の特徴】
- デバイスのサイズ内に内容が収まっている
- 指でもタップしやすいボタン
- そのままでも見やすい文字
- 横にスクロールする必要がない
- 表示速度が速い
勘違いしないでほしいのは、「スマートフォンで閲覧できる＝スマホ対応できている」ということではないという点です。
スマートフォンの画面や操作方法に合った表示ができているかという部分が非常に重要です。
ホームページはなぜスマホ対応が必要なの？
ホームページのスマホ対応が必要な理由は、以下のものになります。
- スマホ利用者が多いから
- Googleからの評価に関わるから
- 問い合わせや購入の機会を逃すから
それぞれ見ていきましょう。
スマホ利用者が多いから
総務省の令和6年の通信利用動向調査によると、インターネット利用者の約9割がスマホを経由しているそうです。
この割合は年々増加しており、ほとんどのユーザーがスマホ経由で情報収集や買い物、問い合わせをしていることが分かります。
そのくらい浸透している媒体のため、スマホ対応でないサイトは、見にくいという理由ですぐに離脱されてしまいます。
せっかくいい商品・サービスを売っていてもそこまでたどり着かないので、大きな機会損失につながるのです。
Googleからの評価に関わるから
Googleは、モバイルファーストインデックスを採用し、モバイル対応しているかどうかも評価材料に追加して、検索枠での表示順位を決めています。
スマホ対応になっていないと、Googleからの評価が下がり、表示順位やサイト全体の評価が下がってしまいます。
表示回数が下がると見つけてもらう可能性も低くなるため、機会損失につながります。
企業のイメージを悪くする
ここまでスマホが普及している世の中で、未だにスマホ対応でないと、企業のイメージが悪くなる可能性があります。
取引先や求職者から不信感を抱かれ、企業の信用やイメージに悪影響を与える恐れがあります。
このような理由から、ホームページのスマホ対応はやっておいた方がいいのです。
逆に言えば、スマホ対応にするだけでこの危険を回避し、Googleからの評価や問い合わせの機会を増やすことができます。
ぜひ、スマホ対応を良いものとして捉え、この機会に変える準備をしていきましょう！
要チェック！自社サイトはスマホ対応か確認してみよう
自社サイトがスマートフォンに対応しているかどうか分からない方もいるのではないでしょうか。
ここでは、スマホ対応になっているかどうかを確認する方法を伝授するので、ぜひチェックしてみてください。
スマホ対応を確認するには、Chromeの拡張機能である「Lighthouse」を使います。
【Lighthouseを利用する手順】
➀ Lighthouse をChromeに追加する
②新規タブを開き、右上の「︙」をクリックし「拡張機能」→「拡張機能を管理」
③拡張機能の中から「Lighthouse」を探し、「詳細」→「ツールバーに固定する」をオンにする
④そうすることで、タブの右上部分に常に出るようになる
⑤スマホ対応を確認したいサイトページを開き、Lighthouseのマークを押す
⑥「Generate report」をクリック
⑦別タブでPageSpeed Insightsが開いて、ページを調査してくれる
⑧スマホ対応については、「SEO」の項目に表示されるので確認
スマホ対応にする2つの方法
ホームページをスマホ対応にする方法は大きく2つあります。
- レスポンシブデザイン
- それぞれ専用のページを作る
一つずつ見ていきましょう。
レスポンシブデザイン
レスポンシブデザインとは、HTMLやCSSで、パソコンやスマホなど各媒体の画面サイズに応じたレイアウトに自動的に切り替えてくれる技術のことです。
レスポンシブデザインのメリット・デメリットは以下のものがあります。
【メリット】
- ページURLが一つで済むため、サイト管理が楽
- 更新作業が一回で済むため、手間がかからない
- 画像サイズに応じてレイアウトが変わるため、どの媒体にも適用
- Googleがレスポンシブデザインを推奨しているため、評価されやすい
- 一度設計すれば拡張性が高い
【デメリット】
- 初期設計の難易度が高い
- 複雑な設計が必要なため、技術者が必要
- 表示回数が遅くなることがある
サイトのリニューアルを検討している会社、または新しくサイトを構築予定の会社におすすめです。
それぞれ専用のページを作る
パソコン用とは別に、スマートフォン用のサイトをもう一つ作る方法もあります。
【メリット】
- スマートフォンに特化したデザインや機能が使える
- スマホ用の画像などを用いて表示速度を軽くできる
【デメリット】
- 同じ内容のものを一から作成しなければいけない
- 管理が二倍になる
- コンテンツの重複などで、SEO的に不利になる
- タブレットなどのサイズには対応できない
レスポンシブデザインがおすすめ♪
今後も新しい媒体が増える可能性や、管理の煩雑性を考えると、圧倒的にレスポンシブデザインがおすすめです。
Googleも評価しているのでSEO対策にもつながりますし、今からスマホ対応にするなら、レスポンシブデザイン一択です。
では、次の項目でレスポンシブデザインの作り方を見ていきましょう。
レスポンシブデザインの作り方
では、ホームページをレスポンシブデザインにする方法を紹介します。
ぜひ参考にしてください。
自分でやるならワードプレスがおすすめ
ワードプレスは、最初からスマホ対応になっているテーマが用意されているので、そのテーマを使ってサイトを作れば、レスポンシブデザインの設計をしなくても簡単にスマホ対応のサイトができます。
【おすすめのテーマ】
- Cocoon(無料)：標準仕様で文字装飾ができ、速度も有料版と一緒
- Lighting(無料)：拡張性が高い
- SANGO(有料)：落ち着いた色味のサイトが作れる。高速化機能が充実。
ただし、スマホ対応自動化機能は完璧ではないため、実際には手動確認が必要です。
サイトを公開した後に、スマホでレイアウト崩れや文字サイズが読みやすいかなど、確認する必要があります。
クオリティを上げるなら外注がおすすめ
ちゃんとレスポンシブデザインの設計をしてサイト管理をしてくれる安心感を考えると、やはり外注した方がトータルコストは安く済むと思います。
デザインもプロが考えてくれるので他社と差別化できますし、スマホ対応だけでなく今後追加される新しい要素などにも瞬時に対応できます。
- 「会社の看板となるサイトが作りたい！」
- 「問い合わせや購入率を上げるためのサイトが作りたい」
そんな要望がある場合は、プロにサイト制作を任せるのがおすすめです。
なんと、オフィ助でもサイト制作を承っています！
社内にwebデザイナーがいるので、デザインや仕様を相談しやすいのがメリットです。
少しでも気になったら、以下の制作実績を確認してみてください♪
↓↓お問い合わせはこちらから↓↓
外注する際にかかる費用
既存ページのスマホ対応を業者に依頼する際、相場は以下のようになります。
| １ページあたり | 2～３万円 |
| 画像調整(画像の最適化) | 2000～6000円 |
「ページ数」「コンテンツの量」「デザインの質」によって価格が変動するので、既存のサイトをスマホ対応にする場合はサイトの中身を確認してみないと総額が分かりません。
なお、スマホ対応の新規サイトを制作する場合、1ページあたり3～6万円ほどと、既存サイトの1.5～2倍ほどの費用がかかります。
タイパ重視なら、新規で作るのがおすすめ！
新規で作った方がレイアウトなど一から作れるので、シンプルなものであればあまり手間をかけず短時間で制作できます。
一方、既存サイトはデザインやレイアウトを崩さないようにレスポンシブデザインにする必要があるため、デザインが複雑な場合は対応させるまでに時間がかかる可能性があります。
既存サイトをスマホ対応にする場合は、事前に自社サイトの納期を確認しておきましょう。
スマホ対応に関するよくある質問
その他、ホームページのスマホ対応に関する質問を紹介します。
こちらもぜひ参考にしてください。
既存のPC版サイトをそのままスマホ対応できますか？
はい。既存のサイトであっても、レスポンシブデザインにすることが可能です。
サイトの構造や使っているCMSによって、作業量や費用が異なります。
費用に関しては、上の項目を参照してください。
スマホ対応したあとは何を確認すればいい？テスト方法は？
スマホ対応にした後は、実際にスマホでホームページを確認してみましょう。
- レイアウトの崩れがないか
- 文字の大きさは適切か
- ボタンは正常に押せるか
- ハンバーガーメニュー（≡）が正しく開閉できるか
- ページへの移動速度は適切か
これらを全てのページで確認することで、スマホ対応が完了しているか把握できます。
スマホ対応しても表示が遅い・崩れる時はどうする？
表示が遅い場合とレイアウトが崩れる場合は、それぞれに原因があります。
原因を特定して、改善施策を行いましょう。
【表示が遅い場合の対処法】
- 画像を軽くする
- 不要なスクリプトを止める
- キャッシュを削除、圧縮する
レイアウトが崩れる場合は、サイトのコードを編集する必要があります。
自分でやる場合は生成AIを使ってコード生成してみましょう。
業者に依頼している場合は、レイアウトが崩れていることを業者に連絡すれば、直してくれるはずです。
レイアウト崩れの可能性を考えると、自分で作るよりも業者に頼んだ方が、トラブル時の安心感が大きいです。
他社と差別化できるオリジナルのサイトを作るなら、業者に依頼するのが圧倒的におすすめです。
ホームページのスマホ対応なら、「D-WEB」で。
オフィ助では、自社のwebデザイナーによるホームページ制作も行っています！
シンプルなテンプレートデザインから、唯一無二のオリジナルサイトまで、お客様の要望に合わせて作成できます。
もちろん、スマホ対応のサイトなので、安心してお任せください♪
ディレクターがしっかり取材をしてから作り始めるので、相談しながら作ることができます。
まずはD-WEBの紹介ページをご覧いただき、どんなサイトを作成しているのか、どんなサービスなのか確認してみてください♪
LINEで気軽に問い合わせられるので、ぜひお気軽にお問い合わせくださいね！
コメント