Web制作

WEBサイトをスマホに対応させる方法

  • このエントリーをはてなブックマークに追加

「パソコンから見たサイトとスマホから見たサイトで表示が違う」という経験があると思いますが、今日はその仕組みについて簡単に説明したいと思います。

あ~なるほど~。ってなると思うので、ホームページ制作とかよくわかんないって人も読んで頂けると嬉しいです。

早速本題に入りますが、表示させるサイトをスマホに対応させる方法は大きく分けて3つあります。

  • PC用のサイトとスマホ用のサイトを別々に用意する
  • 画面の幅に変えてレイアウトや文字の大きさを変える
  • プログラムを組んでデバイスによって表示するhtmlを変える

それぞれ簡単に説明します。

PC用のサイトとスマホ用のサイトを別々に用意する

例えばexample.comというサイトがあるとします。
そのサブドメインとしてm.example.comを作り、

  • example.comはPC用サイト
  • m.example.comはスマホ用サイト

として2つのサイトをそれぞれ制作します。

これだけではただ2つのサイトがあるだけになってしますので、下記の図のようにプログラムを組んであげれば完成となります。

リダイレクトの図

この方法を「モバイルURL」と言います。

画面の幅に変えてレイアウトや文字の大きさを変える

これはLABEのサイト(labe.jp)でも採用している方法ですが、画面幅でスマホ最適化をする方法です。
画像を見てもらうと早いです。

■画面が幅広い
ブラウザの幅が広い時の画像

■画面幅が狭い
ブラウザの幅が狭い時の画像

これはどちらもパソコンから見たサイトですが、幅を変えることで表示が変わっていることが分かると思います。
これを「レスポンシブWebデザイン」と言います。

プログラムを組んでデバイスによって表示するhtmlを変える

この方法はかなりテクニカルな方法ですが、「異なるデバイスのユーザーに異なるコンテンツ(HTML)を提供する」方法となります。
カラーミーショップなんかはそうなっていますね。URLに変化はありませんが、デバイスを変えると中身(HTML)が書き換えられています。

プログラムで「スマホのアクセスはこっちのHTML、パソコンのアクセスはこっちのHTML」と命令する方法です。
これを「ダイナミックサービング」と言います。

まとめ

実装方法URL表示コンテンツ
モバイルURLパソコンとスマホで異なる全く異なる可能性がある
レスポンシブWebデザインパソコンとスマホは同じ基本的に同じ
ダイナミックサービングパソコンとスマホは同じ異なるコンテンツ

これらの方法は、サイトの規模やデザインによってその工数が変わってきますし、それぞれにメリット・デメリットがあります。

それぞれの実装方法やメリット・デメリットについてはまた次回以降書かせて頂きますので、少々お待ちを。
みなさんが見ているサイトも「こんな風になってるんだー」と思って頂けたら幸いです(笑)

  • このエントリーをはてなブックマークに追加

  関連記事

コメントを残す

*

CAPTCHA