今すぐ始めたい、モバイルフレンドリー化指南

～スマートフォンに対応した、Webサイト構築のポイント～

●見やすくて、操作しやすいWebサイトとは

実際にWebサイトをモバイルフレンドリー化する際、どんな点に注意すればよいのでしょうか。知っておいてほしい基本的な内容を以下に示しました。画面サイズだけでなく、端末の機能性や操作性の違いにも注意が必要です。

【１】テキストや画像の大きさが合っているか？

フォントサイズが小さすぎて読みにくいと、モバイルユーザーはピンチ操作でテキストを拡大し、閲覧しなければなりません。同時に、画像の大きさにも配慮する必要があります。

【２】ビューポートが設定されているか？

ビューポート（表示領域）の設定がないと、スマートフォンでは、パソコン画面をそのまま縮小した形で表示されます。

【３】タップしやすい画面になっているか？

ボタンやナビゲーションリンクなどのタップ要素同士が近すぎると、指で画面操作するモバイルユーザーはミスタッチしやすく、目的の要素を容易にタップできません。

●Googleが勧める「レスポンシブWebデザイン」

モバイルフレンドリーへの対応策と、Googleが推奨する「レスポンシブWebデザイン」は、同じようなコンセプトに基づいています。具体的には、パソコンで閲覧する単一のホームページデザインではなく、アクセスする機器（端末等）の横幅サイズに応じて、ページのレイアウトデザインを自動で調整して表示する手法です。スマートフォン専用、タブレット端末専用のホームページを新たに制作する必要がなく、もちろん、機器ごとの更新作業も必要ありません。

●モバイルフレンドリーを確認するツール

では、自社のWebサイトがモバイルフレンドリーであるかどうか、どのように調べればよいのでしょうか。Googleはモバイルフレンドリーを確認する方法として、「モバイルフレンドリーテスト」という専用ツールを提供しています。

【１】モバイルフレンドリーテストの活用法

自社のWebサイトのURLを、Webサイト上の「モバイルフレンドリーテスト」のテキストボックスに入力または貼り付けるだけで、スマートフォンで適切に表示できるよう最適化されているかなど、モバイルフレンドリーに対応しているか否かを簡単に測定できます。テスト結果に応じてステータスが表示され、また、ユーザビリティエラーが出た場合はその解決策を具体的に示してくれます。以下に挙げた主なエラー表示例は、冒頭で紹介した、見やすくて操作しやすいWebサイトの条件とほぼ一致しています。

■エラー表示の例

• 互換性のないプラグインを使用しています。
• ビューポートが設定されていません。
• ビューポートが「デバイスの幅」に収まるよう設定されていません。
• コンテンツの幅が画面の幅を超えています。
• テキストが小さすぎて読めません。
• クリックできる要素同士が近すぎます。

以上のツールは無料で提供されていますので、これを活用して自社のWebサイトのモバイルフレンドリー状況を診断してみてください。