レスポンシブデザインって何？

その昔。「ホームページを見るためにパソコン買いました」なんて話が出たりしていたものですが、現在ではお手元のスマホでも自由にホームページを見ることが出来るようになりました。とっても便利になったのですが、その反面、ホームページを表示させる方法が大変になりました。

パソコンとスマホの大きさが違うため、それぞれの端末でホームページをしっかりと見せたい場合はそれぞれの端末用のホームページを用意しなくてはいけなくなったのです。同じ内容なのに別途ホームページを作らなきゃならないなんて事になると面倒ですよね。作るだけではなくて更新するのも大変です。なにせ端末別にホームページを用意した場合、ちょっとした変更でも端末分仕事が倍増してしまうのです。PCサイトを更新して、タブレット用のサイトを更新して、最後にスマホサイトを更新して出来上がり…めんどくさいですね。

と、言う面倒な作業を「レスポンシブデザイン」と言う仕組みで解決することが出来ます。最近ホームページ制作でよく聞くこのデザインの仕組みについて、さらっとご説明したいと思います。

レスポンシブデザインの仕組み

レスポンシブデザインは、かんたんに説明すると「ホームページを見る機器の画面の大きさに合わせて表示方法を切り替えることが出来る仕組み」です。主に画面の横幅で切り替える事になります。
画面の横幅以外では縦長の画面か横長の画面か、もしくはもっと具体的にスマートフォンで見ているかPCで見ているか等、切り替える方法が色々あります。それらを選択したり、もしくは複数使ったりすることで、画面に応じた表示の変更を行っていきます。

横幅で切り替えるってそんな単純な仕組みで大丈夫なの？と思われると思いますが、スマートフォンの横幅の設定は大体320ピクセル～480ピクセル、タブレットですと640ピクセル～980ピクセル、パソコンで見る場合はそれ以上大きさを想定して作ってる事が多いです。(画面の小さいノートパソコンとデスクトップPCとの境界線としては1280～1440ピクセル辺りが目安になることが多いです)

この目安となるピクセル数はブレイクポイントと呼び、レスポンシブデザインでレイアウトを切り替える時の目安となります。そのあたりを踏まえて、ホームページの横幅に合わせ、内容を表示させるレイアウトを変えていくのがレスポンシブデザインになります。
最近では、このブレイクポイントの考え方ももっと柔軟になって行き、見る画面によってより細かい配置の調整が行われるような仕組みも増えています。

パタパタワークスでは画面の表示とレイアウトに合わせてある程度自由にレイアウトが変わるような作り方をいたしますので、よくあるブレイクポイントを1つ追加する毎に追加料金が発生するなどという作り方はしていません。

レスポンシブデザインのメリット・デメリット

レスポンシブデザイン最大のメリットは、どの端末でも１つのファイルで表示することになります。

１つで済むと言うことは、作るのも１つ、管理するのも１つ、更新するのも１つだけで済むということですので、端末ごとに専用ページを用意するよりも制作するページ数が減り、最終的にコストを削減する事ができます。また、1つで全て管理できるということは、「パソコンで更新したのにスマホのページは更新されていなかった」なんて言う事も無くなり、更新をチェックするのも楽になります。

しかし、デメリットもあります。表示されるものは全て同じ内容ですので、PCとスマホで内容が変わるようなサイトでは利用できません。また、1つですむ反面、そのファイルの単価は普通の単価より高くなってしまいます。パソコン版だけのレイアウトで十分な場合ですと割高なものになってしまいます。その場合はレスポンシブデザインではなく、端末ごとに専用のホームページを作成することになります。

また、全ての端末に合わせる事により、それぞれをばらばらに作成するよりページに対するファイルサイズが大きくなってしまいます。これはレイアウトの変更や、画像の利用が多くなればなるほど差が出てきます。

最後に

レスポンシブデザインは上手く使えばコストを抑えて使いやすいホームページを作成することが可能でが、こればかりでは目的のサイトにならないこともあります。やはり、どのようなホームページを作るかをしっかりと決めて、どのような手順で進めるのが良いかを考えていくことが重要だと思います。

---

パタパタワークスでは、このようなホームページ制作での色々なご相談を承っております。何か質問やご依頼がありましたら、お気軽にお問い合わせ下さい。