ホームページをスマホ対応で制作するメリットと方法
ドアログ編集部
※ディレクターチーム監修
近年のホームページ制作では、パソコンからだけでなく、スマホからの閲覧にも対応しなければなりません。パソコンから快適に閲覧できたとしても、スマホでアクセスした際に文字が小さくて読めない、レイアウトが崩れているような状態は避ける必要があります。
ホームページを作ったからといって、自動でパソコンにもスマホにも対応できるわけではないので注意しましょう。
ですが「そもそもスマホに対応させる必要性はある？」「どうすればスマホ対応になるのかわからない」と困っている方もいるでしょう。そこで、スマホ対応の必要性や、やり方を解説します。この記事を読むことによってスマホ対応とは何なのか、何に注意して行っていけば良いのかなどがわかるので、参考にしてみてください。
ホームページのスマホ対応とは
ホームページのスマホ対応とは、スマートフォンからでも快適に閲覧できるサイトを作ることをいいます。これは「スマホから閲覧できる」とは別の話です。
スマホで閲覧できるサイトならスマホ対応できているわけではないので、注意しておきましょう。スマホ対応のポイントは以下の2つです。
レスポンシブデザイン
レスポンシブデザインとは、ユーザーが閲覧している端末の画面サイズに合わせて、ページのレイアウトが最適化されるデザインのことをいいます。
もともと、インターネットでコンテンツを閲覧する際にはパソコンを使うことが多くありました。ですが、近年はパソコンだけでなく、スマホやタブレットなどさまざまな選択肢があります。それぞれ表示できる画面サイズが異なるのですが、それぞれの画面サイズに対応できるのが、レスポンシブデザインです。
アダプティブデザイン
アダプティブデザインとは、ユーザーがホームページを閲覧している環境に合わせて、最適な形でページを表示できるデザインです。先述したレスポンシブデザインは、パソコン、スマートフォン、タブレットと、3つのレイアウトしか選択肢がありません。
例えば、一口にスマートフォンといっても機種によってはデザインが崩れてしまい、ページを閲覧しづらくなってしまう状況が考えられます。
レスポンシブデザインと異なり、アダプティブデザインでは、それぞれのユーザーの閲覧環境に合わせた表示が可能です。そのため、より効果的にスマホ対応させたいと考えた場合に適しています。
なぜホームページはスマホ対応させる必要があるのか
ホームページをスマホ対応させるべき大きな理由として、以下のようなことが挙げられます。いずれも注目したいポイントです。
スマホでホームページを閲覧する人が非常に多い
ホームページをスマホ対応させる最大の理由は、近年、スマホを使ってインターネットを閲覧している方が急激に増えているからです。
ドイツの企業「SISTRIX（シストリックス）」がパソコン検索とモバイル検索の比率について発表したデータがあります。そのデータによると、パソコンで検索する割合はわずか約24.9％、モバイル検索は約75％でした。
いかにモバイル・スマホからのアクセスが多いのかがわかります。
もし、スマホ対応していない場合、スマホから閲覧している多くの方に不便さを感じさせてしまう可能性があります。
「このサイトは見づらいから、他のサイトを参考にしよう」と思われてしまうこともあるでしょう。ユーザーに快適に閲覧してもらうためにも、スマホ対応は必須です。
参考：SISTRIX：The proportion of mobile searches is more than you think – What you need to know
スマホ対応しているホームページのほうが有利
スマホ対応しているホームページはただ単に見やすいだけではありません。検索サイトは、スマホ対応のホームページから優先的に表示される仕様になっています。
実際にGoogleでは、スマホ対応のサイトのほうがモバイル検索において優遇されやすくなると公表しています。そのため、SEOについて考えた際にもスマホ対応させておくのが理想的です。
参考：Google 検索セントラル ブログ：検索結果をもっとモバイル フレンドリーに
スマホ対応させないとデメリットが多い
ご紹介したように、スマホ対応が遅れてしまった場合、表示が崩れてユーザーが離れてしまう、SEOの観点でも不利になるなどのデメリットがあります。
スマホの利用率が急速に伸びていることを考えると、今後はこの傾向がさらに強くなる可能性が大きいです。デメリットのことを考えると、やはりホームページをスマホ対応させておいたほうが良いでしょう。
ホームページをスマホ対応させる方法
ホームページをスマホ対応させるには、いくつかの選択肢があります。中でも代表的な方法について4つご紹介します。
スマホ対応ホームページをゼロから作る
これからホームページ制作に取りかかろうと考えているのであれば、初めからスマホ対応のホームページ制作を検討したほうが良いです。スマホ対応について何も考えず、パソコン用のホームページを作ってからスマホ対応しようと考えると二度手間になってしまいます。
これは、ホームページ制作を専門業者にお願いする場合も同じです。
WordPressプラグインでスマホ対応ホームページを作る
無料のソフトウェア「WordPress」でサイト作成やブログ作成を行っている場合、プラグインを利用することによって手軽にスマホ対応が可能です。
プラグイン「WPtouch」をインストールすれば、スマホに対応していないWordPressのテーマでもスマホに対応させられます。細かいカスタマイズも可能なのが魅力です。
ただし、WordPressでプラグインのインストールに失敗したり、予想していなかったエラーが発生したりしてしまう可能性もゼロではありません。予期せぬエラーが発生する可能性を考えると、テスト環境を用意しておく必要があります。心配な場合は、専門業者に依頼したほうが良いでしょう。
レスポンシブデザインでスマホ対応ホームページを作る
新たにホームページ制作をする場合、パソコン用とスマホ用で別々のデザインにすると、費用も時間もかかってしまいます。ですが、レスポンシブデザインにすれば同一のデザインで費用と手間を抑えてホームページ制作が可能です。
レスポンシブデザインの基本的な作り方は、headタグの中にメタタグ「viewport」の設定が必要です。この設定の中で横幅や倍率、ズームの許可などを設定していきます。
続いてパソコンとスマホ、タブレットのcssを用意し、それぞれ調整が必要です。cssについては、パソコン用に作成したものをスマホ用、タブレット用に修正していく方法があります。
完了後は必ずデザインをチェックし、きちんと対応できているか確認しましょう。
自動変換ツールでスマホ対応ホームページを作る
すでに作成したページがある場合、スマホ対応を支援する目的で作られた変換ツールを活用した方法があります。ツールによっては変換時にいろいろなデザインから選択が可能です。
無料で利用できるものもありますが、ホームページによっては有料のものを選択しなければ対応できない事も多いです。気になる自動変換ツールがあれば利用してみてはいかがでしょうか。海外製のサービスなどもあるので、不安な場合は自社で行うよりも専門業者に依頼したほうが安心です。
ホームページをスマホ対応させるための料金相場
スマホ対応のホームページを作る場合の費用相場は、既存サイトをスマホ対応させるのか、新しくスマホ対応のページを作るのかによって変わります。
既存ページをレスポンシブデザインにしてスマホ対応させる場合、1ページあたりの相場は2～3万円程度です。これに画像を調整するための費用がかかることになります。つまり、画像数の多いホームページほど調整費用が高額になりやすいです。
画像がそのままだとパソコンとスマホ画面の縦横比が違う関係で表示が崩れてしまうことがあるため、画像の調整が必要になります。
続いて新規にスマホ対応のページを作る場合、一般的な相場はパソコン用ページの1.5～2倍の金額です。このように、パソコン用ページの金額をもとにして計算することが多いのですが、計算方法や費用は制作会社によって異なります。
ホームページをスマホ対応にする時の注意点
ホームページをスマホ対応させる際には、スマホから快適に閲覧できるか十分考慮したデザインにしなければなりません。
例えば、ブラウザ横幅の広いスマホもありますが、最小は320ピクセルです。そのため、横幅は320ピクセルのスマホで見た際にも快適に閲覧できるよう考えなければなりません。ただし、横幅を320ピクセルで固定するとそれよりも横幅が広い端末で閲覧した際に表示が崩れてしまいます。
横幅を固定しないリキッドレイアウトで作成しましょう。
また、きちんとスマホ対応できていない場合、ただ単にパソコン用の画面が縮小されて表示されてしまいます。この自動縮小機能を防ぐため、HTMLソース内に縮小を禁止するmeta要素を追加しておくのもポイントです。
それから、スマホはパソコンとは異なりポップアップウインドウを使用するのに向いていません。新規タブが開くと閉じるのをめんどうに感じてしまう方も多いので、ポップアップウインドウは使わないほうが良いです。
同じように、メニューにマウスポインタを乗せた際にサブメニューが開閉するデザインはスマホでは使えません。ただ単にスマホのサイズに合わせてページをつければ良いわけではないので注意してください。
ホームページがスマホ対応できているか調べる方法
スマホ対応できているか確認するためには、Googleによって提供されている「モバイルフレンドリーテスト」が便利です。調べたいURLを入力すれば、問題のある箇所がわかります。
例えば、テキストが小さいなどを指定された場合は、それを改善できるように修正していきましょう。
自社のホームページの中でスマホ対応できていないポイントがわかるので、ぜひ活用してみてください。
参考：Google Search Console：モバイルフレンドリーテスト
今後のホームページ制作でスマホ対応は必須
いかがだったでしょうか。ホームページ制作にあたり考えておきたいスマホ対応についてご紹介しました。スマホ対応の必要性などをご理解いただけたのではないでしょうか。
スマホでインターネットを閲覧する方は非常に増えており、今後はスマホ対応が必須といえる状況になりそうです。クリエイティブネットドアではホームページ制作段階でのスマホ対応にも対応しています。
東京や札幌でホームページ制作を検討している方は是非お問い合わせください。
※全国対応しております
