ご存知の通り最近は、必ずしもPCだけでウェブサイトを見るといった前提ではなくなってまいりました。
その背景にはタブレット端末やスマートフォンの普及があり、それによっていわゆる「レスポンシブサイト」という体裁のwebサイトが増加傾向にあります。
このレスポンシブサイト、独特な癖がありホームぺージ制作時はよく理解する必要があります。今回はレスポンシブサイトがどのような仕組みで出来上がっているのか？についてを分かりやすくご紹介いたします！
そもそもレスポンシブサイト/レスポンシブデザインとは？
レスポンシブサイトとはどのようなものか？をご存知でない方へざっくりとご説明しますと、「状況に応じレイアウトが自動的に変化するwebサイト」といったものがこちらにあたります。
企業サイトなどで、URLは一緒なのにPCで見た時とスマートフォン端末で見た時のレイアウトが全く異なるものを見たことはないでしょうか？こういったwebサイトが、レスポンシブサイトです。
「レスポンシブ」の綴りは「Responsive」で、「Response」の形容詞形にあたり、意味は「反応する」というニュアンスを持ちます。閲覧環境に反応し適切なレイアウトを成形することから、こちらのネーミングがついています。
どうやって端末環境を判別しているのか？
ユーザーエージェントで処理を分岐する
各端末のブラウザには「ユーザーエージェント」と呼ばれる情報が含まれています。
ここにはブラウザ名やOS名やそのバージョンなどが記載されています。そのため、こちらの部分を読み取ることで、相手（ユーザー）がどのような端末でページを見ているか？を判別することができます。
こちらの方法は、大掛かりなプログラムなどを利用する際に各端末でできることが微妙に異なるため、出来ない命令を出しエラーを起こさないように処理を振り分ける用途で使うことが多いです。
画面サイズで描画内容を変更
各端末の画面サイズは、プログラムなどを利用することで情報として取得することが可能です。こちらの場合、受け取った画面サイズを基準としてページレイアウトを成形することになります。
一般的なレスポンシブサイトでは取得した画面サイズをもとに利用するCSSを決定し、レイアウトを組み直します。
また画面サイズの取得はリアルタイムで行われます。PCでブラウザのウィンドウサイズを切り替えたり、端末の画面を回転させたりすると、その都度適切なCSSを読み直すのです。優れものですね！
では従来のスマートフォンサイトとどちらが良いのか？
こちらについては「一長一短」あります。
レスポンシブサイトは前述の通り、同じURLの記事を状況に応じて違うレイアウトとして見せる形式を取ります。そのため、SEO対策の観点ではどの端末で見ても同一の評価が期待できます。
ただし、難点もあります。スマートフォンサイトと違い、一度記事を更新すれば全端末に対し更新が反映されるため便利なように見えますが、そのページの記事自体が膨大な場合、当然スマートフォンで見たときも膨大な記事をそのまま読み込むことになります。
また記事の中に動画や大きな画像が含まれていると、それを読み込むために端末の受信容量が跳ね上がってしまいます。その他の問題として、スマートフォンで見た時だけ簡略な記事にしたいと考えても、同一記事を違うレイアウトで見せているだけなので容易に実現できません。
スマートフォンサイトを作成した場合は同じ記事でもURLが異なりますため、「同じ話題で少し簡略化したもの」や「スマートフォンで見た時だけ電話番号をタップすると電話できる」といった内容で作成をするのが簡単です。
その一方、URLが異なるため何を更新しても常に二倍近くの作業時間がかかります。
意図せずPC向けのサイトをスマートフォンで見られてしまう可能性も勿論あります。
どちらかが決定的に有利、あるいは不利ということは現状で言うことはできません。運用方法とターゲットに合わせて、適切な方法を選択することが現状ではベターと言えます。（SEO上の優位性の問題はありますが）
レスポンシブサイトの個人作成は敷居が高い！
レスポンシブサイトは、見た目の良さや柔軟性から採用される機会が増えてきました。また端末自体の性能の向上もそれに一役買っている面もあります。
ただ、レスポンシブサイトを適切に作成するには様々なハードルをクリアする必要があります。
具体的には、ブラウザごとのCSSの対応や確認用のAndroid・iPhone・iPadの実機調達、特定端末で知られている独特なバグとその回避方法などがそれにあたります。
なかなかこういった細かな話題を一般の方が独自に確認するのは難しく、実機がなければ書いたコードが正しく表示されているかどうかも運任せとなってしまいます。
しかもAndroidやiOSはそれなりに早いペースでバージョンが上がっていきます。バージョンが上がるということは、これまでなかった問題が出てくる可能性もあります。
このような理由でレスポンシブサイトはどうしても、個人で対応することに限界がある選択となっているのが現状です。
このような理由でレスポンシブサイトはどうしても、個人で対応することに限界がある選択となっているのが現状です。
エグゼクティブクリエイションでは「ホームぺージ制作の本職」として、このような移り変わるweb環境にも対応できますよう、経験豊富な専門スタッフがサイト制作を行っています。制作に手詰まりを感じ始めたら、ぜひ一度ご相談いただければと思います！
【今回の記事の執筆者】
株式会社エグゼクティブクリエイション
取締役 兼 WEB制作部責任者
WEBデザイナー/マークアップエンジニア：太田
「どんな事でも絶対に役に立たないことはない」が持論のデザイナー兼コーダー。1980年6月生まれ。東京在住だがソウルは名古屋民。
学生時代から旺盛な好奇心で、人一倍様々な技術や知識に触れる。それによって人一倍の挫折と人一倍の立ち直りを繰り返す。その結果、積み上げ続けた横方向に広い知識と経験で、ホームページ制作（デザイン/コーディング/ライティング/SEO）と印刷関連の知識を併せ持つ、制作部最強の何でも屋として君臨。web制作のプロフェッショナル。ある意味努力の人。弱点は頑張ってる割に伸びが悪い画力。
とにかくどんなくだらない事でも、目や耳に入ったものは極力覚えておこうとする情報社会の大食いチャレンジャー。「それ何の役に立つの？」と聞かれても、「さあ？でも知ってないと絶対に役に立たないよ」と返すのが基本スタンス。
得意なこと：ルーチンワークの効率化
嫌いなこと：ルーチンワーク（だから効率化にうるさい）
一言：知らないことは機会を逃すことと同じ
嫌いなこと：ルーチンワーク（だから効率化にうるさい）
一言：知らないことは機会を逃すことと同じ
---------------------------------------------------------------
ホームぺージ制作を行うなら
エグゼクティブクリエイション！
------------------------------------------------
---------------------------------------------------------------
◇web作成/保守管理に関する
ご連絡は下記まで
TEL: 03-5839-2512
FAX： 03-5839-2513
------------------------------------------------
≫ホームページ制作 東京 エグゼクティブクリエイション
