about

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

その昔。「ホームページを見るためにパソコン買いました」なんて話が出たりしていたものですが、現在ではお手元のスマホでも自由にホームページを見ることが出来るようになりました。

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

と、言うわけで出てきたのがタイトルにもなっている「レスポンシブデザイン」と言う仕組みです。最近ホームページ制作でよく聞くこのデザインの仕組みについて、さらっとご説明したいと思います。

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

レスポンシブデザインは、かんたんに説明すると「ホームページを見る機器の画面の大きさに合わせて表示方法を切り替えることが出来る仕組み」です。

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

この目安となるピクセル数はブレイクポイントと呼び、レスポンシブデザインでレイアウトを切り替える時の目安となります。そのあたりを踏まえて、ホームページの横幅に合わせ、内容を表示させるレイアウトを変えていくのがレスポンシブデザインになります。 パタパタワークスでは画面の表示とレイアウトに合わせてある程度自由にレイアウトが変わるような作り方をいたしますので、よくあるブレイクポイントを1つ追加する毎に追加料金が発生するなどという作り方はしていません。

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

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

1つで済むと言うことは、作るのも1つ、管理するのも1つ、更新するのも1つだけで済むということですので、端末ごとに専用ページを用意するよりも制作するページ数が減り、最終的にコストを削減する事ができます。

また、1つで全て管理できるということは、「パソコンで更新したのにスマホのページは更新されていなかった」なんて言う事も無くなり、更新をチェックするのも楽になります。

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

最後に

レスポンシブデザインは上手く使えばコストを抑えて使いやすいホームページを作成することが可能でが、こればかりでは目的のサイトにならないこともあります。やはり、どのようなホームページを作るかをしっかりと決めて、どのような手順で進めるのが良いかを考えていくことが重要だと思います。 パタパタワークスでは、このようなホームページ制作での色々なご相談を承っております。何か質問やご依頼がありましたら、お気軽にお問い合わせ下さい。