YONESYS Blog

スマホ対応への方法

2015年09月8日

ホームページをスマートフォン対応させるための方法は、大きく分けて２通りの方法があります。

一つ目はスマホ版のサイトを別に作成する方法です。
パソコン版とは別にスマートフォン版のホームページを作成して、アクセスしてきた端末がスマホならスマートフォン版を、パソコンならパソコン版の情報を返します。ホームページのデータが置いてあるサーバーで、どんな端末からアクセスしてきたかを判別して、端末に適した情報を返します。
これにはスマートフォン版用のサイトへ転送するタイプのものと、その都度毎に判別して適した情報を返すタイプのものがあります。後者は管理が複雑になるため、レンタルサーバーのホームページサービス等、パッケージ化されたサービス以外ではあまり見なくなりました。転送するタイプのものは比較的容易に対応できることもあって、よく用いられる手法です。
この方法でスマホ版のホームページを作成した場合、パソコンとは別に更新を行う必要が出てきます。コンテンツ自体もパソコン版にはあるがスマホ版には無かったり、スマホ版は更新したけれどパソコン版は古いままというようなことが起こります

もう一つのスマホ対応は、レスポンシブデザインという方法でホームページを作る方法です。
これはパソコン版とスマホ版を「同じデータで作成する」というものです。サーバー側でどの端末からのアクセスなのか判別することはありません。すべての端末に対して同じデータを返します。
そして受け取った端末がパソコンでもスマートフォンでも、その画面サイズに「最適化」させて表示することができるというものです。

分かりやすい例として、今ご覧になっているこのホームページをパソコンで見ている方はブラウザの横幅を狭めてみてください。スマートフォンくらいの幅にすると、全体のレイアウトが変わってスマホ版になります。
これがレスポンシブデザインです。

↓画面サイズに合わせて画像の配列とサイズが変わります。