モバイル対応改善１０のポイント　その２

前回、スマホサイトをより見やすくするための１０のポイントの１～５をお伝えしました。

今回は６～１０をお伝えします。

││画像“点数”がレンダリングに影響

1ページの表示速度に大きく影響するのがページの容量です。

特に注意するべきなのが、画像の容量ですが、単純に画像の容量だけでなく、1ページの画像数が多いと画像のリクエスト数が増え、ブラウザスペックによっては、表示が非常に遅くなることがあるので、画像を多く使うときは、サービスの対象端末での実機確認をこまめに行い、表示速度を実感しておくことが重要です。

施工事例などのページはどうしても画像が増えてしまいますが、それは下層ページに表示するようにして、トップページで表示する画像の点数は極力減らした方が、スピードアップにつながります。

││屋外での閲覧を考慮してコントラストに注意

晴れた日の日中、屋外でサイトを閲覧すると、ほとんど文字が見えなくなることがあります。

ページを作成する時は、室内環境だけでなく、屋外でも閲覧されること前提に、テキストと背景色のコントラストに注意して色を選択する気遣いも必要となります。

││明度が高く薄い色に注意

明度が高く薄い色は、端末の液晶スペックによって、視認できない場合があります。

背景色と文字色はユーザビリティを左右する重要な要素ですので、明暗の差、コントラストを十分に取るようにしなければなりません。

次のポイントでも同じことが言えますが、いつでもどこでも、という携帯端末の特性に対応するために、室内環境だけでなく、さまざまな環境下で携帯端末の表示をテストすることも肝心です。

││フォントサイズの大小を考慮

テキストレイアウトについては、フォントサイズの大小にかかわらず、3キャリアでの実機確認を必ず行い、レイアウトの崩れや、スペースの大小を確認しなければなりません。

││センテンスごとの改行による可読性の向上

携帯端末のテキストは行間が狭いので、比較的長い文章については、段落の終わりに改行スペースを入れたり、文中の区切りに改行を入れたりするなど、文章が読みやすくなるような工夫が必要です。

モバイルユーザビリティのお問い合わせは、

「無料ホームページ診断」から

Tweet