スマホ対応サイトにするポイントをおさえよう
スマホは時と場所を問わず、その場で情報を探すことができますが、画面が小さくて一度に表示する情報が限られています。小さな画面でもモバイルフレンドリーになるためのポイントをおさえておきましょう。
はじめに
メインサイト www.wanichan.com は、もともとスマホ対応ではありませんでした。このサイトもしかりです。旧式のWebデザインからスマホ対応のレスポンシブWebデザインに移行するにあたり、コンテンツの量が多ければ多いほど、かなりハードな作業となりました。当初はスマホ専用サイトを作って、スマホからのアクセスはスマホ用サイトにリダイレクト処理をかけていましたが、更新する手間が2倍となったため、レスポンシブWebデザインに移行することにしました。
修正する必要がある部分はどこ？
デスクトップ画面の解像度がどんどん上がってきたため、より複雑なWebデザインレイアウトを駆使することが可能でした。とにかくモノをわかりやすく伝えるための手段はたくさんあったのです。
しかし、スマホは残念ながら画面が小さいです。キーボードとかマウスがあるわけではなく、すべて指のタッチ操作でページを見ていきます。
スマホ対応のサイトにするためにコンテンツを修正したポイントは以下の通りです。
- 複雑なテーブル（表）は画像にするか、リスト形式（箇条書きや定義リスト）に変更する
- 指でタップしやすいようにリンクエリアの幅を広げるか、間隔をあける
- とにかく軽いサイトにするために、画像を圧縮する
スマホ対応にするには、テーブルレイアウトは使ってはいけない、と思った方がいいです。横にスクロールしないといけないとかでとても見づらいです。
また、指でタップしやすいように、それぞれのリンクの間隔を十分あける必要も出てきます。
画像の圧縮は、画像を縮小してもいいですが、同じ色はすべてマージして画像ファイルサイズを圧縮してくれるWebサービスを利用するのがいいですね。私個人的に使っているのは、TinyPNG です。PNGファイルやJPEGファイルを一度に20ファイルまでドラッグ&ドロップすると、次々とサイズを小さくしてくれます。そのあと、圧縮されたファイルをダウンロードすればOKです。
