モバイルフレンドリー対応はもうやった？スマホサイトの制作ポイント5つ

ポイント1.読みやすいフォントサイズを選択する

デスクトップ用のWebサイトをスマートフォンで表示した際、文字が小さすぎて読めないことがあります。Googleの推奨するフォントサイズは16 CSSピクセルです。読みやすいフォントサイズ・行間を意識して、フォントを選択しましょう。ちなみに、Webデザイナーが普段何げなく使っている「ピクセル」という言葉は、CSSピクセルを指しています。

ポイント2.viewport（ビューポート）を設定する

ユーザーはデスクトップPCやタブレット、スマートフォンなど、さまざまな端末からWebサイトにアクセスします。viewport（ビューポート）とは、端末の表示領域のことです。viewportが設定されていない場合、Webサイトは一般的なデスクトップによる表示を想定した画面幅に合わせてレンダリングされます。スマホ対応する際は、viewport設定を行いスマートフォンでの視認性を向上させることが不可欠です。

ポイント3.viewportを固定幅に設定しない

「ポイント2」でも触れたように、端末により画面の大きさと表示領域は異なります。そのため、viewportが固定幅に設定されたWebサイトは、端末によっては大きすぎてコンテンツを1画面で表示できなかったり、小さすぎて空白が生じたりすることがあります。

viewportは固定幅に設定せず、どのような端末にも対応できる設定にすることが重要です。

ポイント4.リンクやボタン同士の距離を取る

スマートフォンを使用しているとき、Webサイトのリンク同士が近すぎるために、リンクをクリックしづらいと思った経験がある方も多いのではないでしょうか。タッチパネルを指で操作するスマートフォンは、リンクやボタン同士が近すぎると正しくタップすることが難しくなります。

ポイント5.インタースティシャル広告を利用しない

インタースティシャル広告（Interstitial advertising）とは、画像表示時やページ遷移時にフルスクリーンで表示されるWeb広告です。アプリダウンロードの誘導やキャンペーン告知など画面いっぱいに表示される広告を見たことがある方も多いのではないでしょうか。

画面サイズの小さいモバイル端末の場合、ページコンテンツがインタースティシャル広告の後ろに隠れてしまいます。この広告は、ユーザーの利便性を大きく低下させるため、使用は避けた方が無難です。

おわりに

今回はモバイルフレンドリー対応時の制作ポイントについてご紹介しました。Webサイトを見る人の半分以上がスマートフォンである現在、Webサイトへのアクセスを維持、さらに増加させるために、Webサイトのスマートフォン対応をきちんと行うことが大切になります。
なお、Webサイトがモバイルフレンドリー対応であるかどうかは、Googleが提供する「モバイルフレンドリーテスト」により確認することができますので、ぜひご活用ください。