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

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

smartphone01

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

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

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

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

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

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

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

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

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

1:離脱率が下がる

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

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

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

3:お客様(ユーザー)が嬉しい

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

ユーザー満足度が上がるから、1と2が実現できるということですね!

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

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

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

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デザインの仕組みについては下記で詳しく説明しています。

動的な配信

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

二つのURLを設置する

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

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

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

Googleガイドライン 二つのURL

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

料金の相場は

2018年3月27日にGoogle ウェブマスター向け公式ブログにおいて、正式にモバイルファーストインデックスの開始が発表。されたことにより、スマホ対応がいよいよ避けては通れないものとなってきました。

それを見込んでか、ホームページ制作にあたり、スマホ対応することを最初から組み込んでいる制作会社も多くなってきました。その他では、どんな方法でスマホ対応するかという違いもありますが、設定としては従来のコーディング費用の「1.5〜2.0倍 」とするところが多いようです。

ビータイズでは、レスポンシブWebデザインは、デフォルトで盛り込まれており、複雑なレイアウトでない限り、従来と同じコーディング料金で対応しております。

ユーザーに優しいUIが実現できること、そして運用側にも優しさが残る方法を見つけましょう。

 

まとめ

いかがでしたでしょうか。

一口にスマホ対応と言っても、実質的な使いやすさへの対応もあれば、ユーザーには知られることのない必須作業があることがわかりました。端末の特性を理解し、専門的に対策することで、より使い勝手の良いサイトが実現します。

この先も進化していく、端末の機能やネットワーク通信の価値。それらにあわせたサービスの提供ができるように、変化に敏感でいたいと思います。

関連記事

 

 

きたみ

Btiesのフロントエンド担当です。

3歳の娘を子育て中…夢のあるノマド母になりたい。


PAGE TOP