ウエブページにアクセスする端末の多くは、スマホである。一方で、ウエブページを制作するのにはパソコンの方が早い。そのためにスマホで使いにくいウエブページになりがちだ。そうならないためのポイント。
レスポンシブ・デザインにする
WordPressなどのCMSでウエブページを制作し、テーマにレスポンシブデザイン対応のを選ぶ。画面サイズに合わせて表示が自動的に調整されるようになる。
画像サイズを2xにする
Retinaディスプレイのような300dpi前後の高精細ディスプレイに合わせて、画像のピクセル数を想定される表示サイズの２倍程度にする。あまり大きくするとダウンロードに時間が掛かり、見づらくなる。
Amazonアソシエイトのバナーに注意
iframeタグで埋め込まれる要素の場合、サイズが固定されてレスポンシブ・デザイン非対応のことがある。レスポンシブ・デザイン・モード（次項）で確認して小さい画面サイズに合わせる。レスポンシブ・デザインに暫定的に対応させる方法はあるようだ。
- Amazonアソシエイトのバナー
- Googleカレンダー
Safariのレスポンシブ・デザイン・モードで確認する
レスポンシブ・デザイン・モードを使うと、いろいろな画面サイズでの見え方をMac上で確認できる。
- Safariの設定で、詳細を選び、「メニューバーに“開発”メニューを表示」にチェック
- 開発メニューで「レスポンシブ・デザイン・モードにする」を選択
- 画面サイズのアイコンをクリックして表示を確認。複数回クリックすると、縦横や画面分割も切り替わる