今やアクセスの5割以上を占めるiPhoneやAndroidなどスマホからのアクセス。もし貴社のホームページが未だスマホに対応していないと多くのアクセスを逃してしまっているかもしれません。

ホームページをスマホ対応にするための、パソコン用からスマホ用に表示を切替えるやり方についてお伝えします。

ホームページをスマホでも文字サイズやレイアウトが見やすい表示にするためのやり方は大きく分けて2つあります。

パソコン用とスマホ用2つのウェブページを用意する

１つはパソコン用とスマホ用の2つのウェブページを用意して、アクセスユーザーのユーザーエージェントをプログラムで自動で判断し表示を切替えるという方法です。

自動で表示を切替えるためには、ウェブサーバーに.htaccessというファイルを設定する、phpかJavascriptでプログラムを用意するといった方法があります。

※ユーザーエージェントとはホームページにアクセスするときウェブサーバーに自動で伝えられる情報のひとつで、ユーザーが利用しているOSやブラウザの種類、スマートフォンの機種などの情報が伝えられます。

このやり方のメリットとしては、スマホ用専用としてパソコン用とは大きく異るデザインを採用することができるといったことがあげられます。

しかし、同じウェブページを2つづつ用意するため、制作の手間や更新や修正の手間とコスト、そして管理コストが余計にかかってしまうというデメリットもあります。

パソコン用とスマホ用と分けずに1つのウェブページで対応する

もう一つは１つのページでパソコン用スマホ用を共用して対応させ、アクセスユーザーが利用している端末の横幅をプログラムで自動で判断し表示を切替えるという方法です。

自動判定のための特別なプログラムを用意することも不要で、ホームページ制作に必須のスタイルシートへの記述で自動判定と表示切り替えの仕組み（メディアクエリ）が用意されています。

このような対応のしかたをレスポンシブデザインとよび、多くのウェブサイトがこの方式をとられています。

参考になれば幸いです。