結局、今のホームページはレスポンシブウェブデザインで作れば良いの？

新しくホームページを作る場合やリニューアルをする場合に、制作会社に相談すると「PCサイトのみなのか」「スマホ対応をするのか」「スマホ対応が可能なレスポンシブウェブデザインで良いか」といった話が出てきます。しかし、どういったものなのかを分かっていないと判断できません。今回はレスポンシブウェブデザインとはなにか、そのメリット・デメリットをご紹介します。

レスポンシブウェブデザインとは

レスポンシブウェザインは、異なるサイズのブラウザ・端末に対して1つのHTMLファイルをCSSで制御して、それぞれに適切な表示に調整するデザインです。

PCやタブレット、スマートフォンなど端末によって、画面サイズが異なります。かつては、各端末に合わせたHTMLファイルとCSSを用意して表示する方法が主流でした。そもそも、タブレットやスマートフォンではなく携帯電話が主流だった時代では、通信速度や端末の性能から異なるHTMLファイルとCSSファイルを用意しないと、ストレスなくユーザーが表示できるページを作成できませんでした。しかし、現在では通信環境や技術の進歩により、1つのHTMLファイルに対してCSSで異なるサイズのブラウザ・端末を制御するレスポンシブ・ウェブデザインのホームページが増えています。

HTMLとCSSの役割

レスポンシブウェブデザインのメリット・デメリットについて詳しく紹介する前に、HTMLとCSSの役割について簡単に説明します。

HTMLは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、ホームページを構成するうえでの言語で、HTMLファイルは文書のようなものです。ルールに従って、どこが見出しなのか、どこが段落なのか、どこが1つのかたまりなのかといった構造およびコンテンツを記述します。

この文書に対して装飾を行うのがCSS（Cascading Style Sheets、カスケーディング・スタイル・シート）です。レスポンシブウェブデザインでは、1つのHTMLファイルに対して、CSSでデザインを指定して画面幅にあわせデザインを制御します。

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

さまざまな幅のブラウザ・端末に対応できる

レスポンシブウェブデザインの最も大きなメリットは、さまざまな幅のブラウザ・端末に対応できることです。スマートフォンといっても、さまざまな種類のものがあり、画面幅は様々です。Apple の iPhone では、画面幅は何パターンかに限られますが、Androidの端末はさまざまな企業が提供しており、どのような画面幅があるのかを把握しきることはほぼ不可能です。さらに、タブレットも含めると何にあわせてページを作るべきかを決めるのは困難です。

レスポンシブウェブデザインでは、何パターンかの画面幅に対して柔軟性を持たせてデザインの制御を行います。例えば768pxまでがスマートフォン、769pxから1024pxまでがタブレット、それより大きいサイズががPCといった形で定義して、それぞれに対して見やすいようにします。

コンテンツの更新がしやすい

PCとスマートフォンでそれぞれHTMLファイルを用意している場合では、コンテンツの変更を2箇所行う必要がありますが、レスポンシブウェブデザインでは、1つのHTMLファイルで管理するためテキストの変更などコンテンツの更新が容易です。また、一方は更新されているが一方は更新されていないといったミスを防ぐことが可能です。

端末に差がなく同じ情報・体験が提供できる

レスポンシブウェブデザインでは、ホームページ全体の設計をするうえで、コンテンツとしては同じものを配置することになるので、端末に差がなく同じ情報・体験を提供できます。特に、もともとPCサイトがあり、後にスマートフォンサイトを作るといった対応をした場合には、それぞれで異なるコンテンツや動線設計となっている場合があります。レスポンシブ・ウェブデザインでは、共通のHTMLファイルを作ることになるので、必然的に同じ情報・体験を提供する形になります。

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

最初に作るときにコストがかかる

1つのHTMLファイルに対してCSSでデザインを制御することになるため、コンテンツの整理やHTMLの設計をしっかりと行う必要があります。そのため、どうしても初期の設計にコストがかかります。

モバイルを中心としてPCに対してデザインする、モバイルファーストでの設計を行うことが増えています。

端末ごとの改善がしづらい

HTMLが共通であることから、それぞれの端末に対して大きく構造を変えて改善を行うことがしづらいです。ただし、そもそも大きく構造を変えることが最適化への近道とは限らず、同じ情報・体験を提供することをGoogleが推奨していることからも大きなデメリットとはならないでしょう。

一方で、複雑なUI・UXが求められるwebサービスでは、問題となる場合もあるので大規模なサイトやwebサービスの場合は慎重に検討しましょう。

さいごに

レスポンシブウェブデザインとはなにかについて、理解できたでしょうか？会社やお店のホームページを作る上では、基本的にレスポンシブウェブデザインを選択する形で問題ないと言えるかと思います。