スマホ対応のホームページを制作する時のポイントと料金

公開日：2018年06月07日更新日：2018年10月03日デザインに関する情報・ノウハウ

smartphone01

そもそもスマホ対応とは何か

かつて私達がガラケー（ガラパゴスケータイ）を携帯していた時代、ホームページはPCで閲覧するものでした。
しかし2010年頃からスマホ（スマートフォン）が急速に普及し、アンチスマホ（スマホ持たない主義）と言っている人もどんどん減少し、今ではライフラインとして欠かせない存在に。

そして、当然のようにスマホでホームページを見る人が増えました。

そう、スマホでもPCで見るみたいにホームページが見られるなんてすごい！という時代はとっくのとうに終わり、スマホで開いてみると、スマホの小さな画面でもストレスなくホームページを閲覧できるようになっています！いつの間にか！

スマホが優秀すぎて、勝手にやってくれているわけではありません。スマホでホームページを快適に見せるため、そこにはもちろん、対策を行う人の手が入っています。

PCとスマホでは画面の大きさだけでなく、操作方法も大きく異なります。

文字の大きさや画面の使い方など、スマホに適した表示ができるホームページを作成することを、スマホ対応と言います。

スマホ対応のメリットとは

メリットは大きく分けて3つです。

1：離脱率が下がる

ユーザーにとって、スマホでの操作が快適になることが大前提なので、文章や画像が読みやすくなり、会員登録や注文までがスムーズになります。
よりストレスなくゴールにたどり着いてもらえることが可能になるので、長くページにとどまってもらえることになるのです。

2：SEO対策に効果が期待できる

モバイルフレンドリーであることが評価されて、GoogleやYahoo!からの評価が上がります。
検索エンジンからの評価が上がるということは、検索結果が上位になる可能性が高まることになるので、結果的にSEO対策に効果が期待できると言えます。

3：お客様（ユーザー）が嬉しい

1と2は、どちらかというと運営側に直接返ってくるメリットですが、何よりもユーザー満足度が上がります。使いやすいホームページほど、潜在的な満足度は高まり、お客様の印象が良くなります。それによりSNSなどで拡散してもらえる可能性が増えていきます。

ユーザー満足度が上がるから、１と２が実現できるということですね！

何をしたらいいの？気にしておきたいポイント

さて、では何をするべきなのか。

よりよくスマホ対応するために、注意しておきたいポイントを紹介します。

UI（ユーザーインターフェース）が肝心かなめです！
「見やすさ・操作のしやすさ・スマホの機能を活かす」を意識しましょう。

見やすさ

「見やすさ」当たり前のことですが、最適なフォントサイズと行間は、PCのそれとは、また違ったものになります。

Googleの定義する「読みやすいフォントサイズ」は16px、行間は1.2em

となっております。一般的な文章でこのくらいという設定で、ホームページのターゲット年齢や、使い所によって変わってくると思いますが、参考まで。

また、PCでは中央揃えでうまくデザインしていた文章も、スマホの画面だと改行されてしまうので、表示崩れのようになってしまう可能性があります。
スマホ専用に改行タグを入れたり、工夫しましょう。

操作のしやすさ

スマホは基本、指で操作します。そのため、デザインによっては誤操作を招くこともあります。メニューやボタンなどは押しやすい＝タップしやすいサイズを設定します。また、文字をそのままリンクさせる場合も上下左右の余白に注意して、誤操作防止に気を配りましょう。
ボタンサイズについては、

GoogleやAppleの定義する「タップエリアの最小サイズ」は44px以上

をとなっています。

※ 画像でボタンなどを作る場合、iPhoneなどのRetinaディスプレイ（解像度が高い）に対応した画像を使用する場合は「使用する画像を2倍角で作成し、ブラウザ上で1/2サイズに縮小する」ことが必要となります。44pxで見せたい画像は、88pxなどで作成するということです。

また、PCによくある、マウスオーバーなどによる操作にも注意が必要です。スマホではうまく機能しない可能性が高いので、よりわかりやすいデザインを考えることが必要です。

スマホならではの利便性を活かす

電話はタップでかけられると優しい。

大手グルメサイトなどがそうであるように、スマホユーザーなら電話をタップすると発信画面が立ち上がる機能を利用したことがあると思います。

これだけ当たり前になってくると、コピペして電話する手間は結構嫌がられたりするものです。
予約や問い合わせなどが電話に直結しそうなホームページは、直接電話できるボタンを実装しましょう。集客率アップに繋がるかもしれません。

知っておくと便利。スマホ対応の種類

次に、Googleが提唱する『モバイルフレンドリーにする方法』を紹介します。
つまり、以下のやり方であれば、モバイルフレンドリーではない、とは言われないはずで、さらに見た目もよくなる近道です。

Googleガイドライン　モバイル向けウェブサイト

レスポンシブWebデザイン

現在Googleでも「Googleでは、デザインパターンとしてレスポンシブデザインをおすすめします。」と明言されており、現在主流になっているスマホ対応の方法が『レスポンシブWebデザイン』です。

レスポンシブWebデザインとは、1つのソースでスマートフォン、タブレット、PCなどあらゆるデバイスで閲覧できるようにデザインされたものです。

レスポンシブWebデザインの仕組みについては下記で詳しく説明しています。

新宿のWeb制作会社Btiesが教える！ホームペー...

【これで解決！】レスポンシブWebデザインの仕組みと料金について

https://bties.co.jp/homepagenopro/cost/responsivecost.html

動的な配信

PCとスマホ（モバイル）で同じURLを使用し、サーバがユーザーがどんな端末から見にきているかを判別して、その端末に合ったHTMLを配信させる方法です。最低でも2種類のソースが必要になります。

二つのURLを設置する

PCとスマホ（モバイル）で別々のURLを使用し、お互いのURLの繋がりを指定し、端末によって最適なURLにリダイレクトさせる方法です。

Googleでは以下のように説明されています。

たとえば、パソコンユーザーに配信される www.example.com 上のページに対応するページとして、m.example.com のページをモバイルユーザーに配信するのが一般的です。Google では、すべての Googlebot ユーザーエージェントがすべてのページにアクセス可能である限り、特定の URL 形式が優先されることはありません。

Googleガイドライン　二つのURL

こちらはどちらかというと下火になりつつある方法です。