どんな方法がある?複数のデバイスに対応したホームページ作成手法

レスポンシブWebデザインで対応する

レスポンシブWebデザインは、デバイスの画面幅に応じてHTMLソースを変化させ、それぞれのデバイスに最適化して表示させるというものです。CSSのメディアクエリという機能を使って行います。一つのHTMLで全てのデバイスに対応させるため管理がしやすく、SEOの効果も一つのページに集約させることが可能です。モバイルデバイスでも快適に閲覧できるように、読み込むデータ量をなるべく少なくするといった工夫などが必要になります。

セパレートURLで配信する

セパレートURLとは、デバイスに応じて別々のURLのページを用意する手法です。アクセスしてきたデバイスの種類をユーザーエージェントによって判別し、リダイレクトを行うことでそれぞれのページへ誘導します。リダイレクトの設定はサーバー側で行い、HTMLなどのソースは複数用意することが必要です。また、PC用ページとモバイル用ページそれぞれのHTMLにページの関係性を記述することで、検索エンジンに重複コンテンツであると認識されるのを防ぐ対策が重要です。

動的配信でそれぞれのデバイスに対応する

アクセスしてきたデバイスに応じて、別々のHTMLを配信するのが動的配信です。セパレートURLと同じくデバイスのユーザーエージェントを判別して、デバイスごとに配信するHTMLを切り替えます。セパレートURLと違うのは、リダイレクトなどは行わずURLはどのデバイスでも同じということです。このように動的配信では同じURLで異なるHTMLを配信するので、キャッシュなどでトラブルが発生しないようにサーバー側で設定を行うことが大切です。

ホームページ制作ではHTMLを用いることになりますが、常に客観的にみて利用しやすいかを考えることが大切です。