レスポンシブWebデザインとはなに?
皆さんこんにちは!
病院事業部ディレクターの山本です。
皆さんは今、このコラムをなにを使ってみていますか?
パソコンでしょうか? スマートフォンでしょうか?
多くの方が、スマートフォンを使ってこのコラムをみているのではないでしょうか。
ホームページを見る端末がパソコンからスマートフォンに変わり、今までパソコンのデザインだけでよかったホームページもスマートフォンにも対応したデザインが必要になりました。
最近では、パソコンのデザインよりもスマートフォン時のデザインに力を入れてほしいと
お客様に言われるほど、スマートフォン時のホームページの見せ方が重要視されています。
ホームページのスマホ対応には、PCサイトと別でスマートフォンサイトを制作したり、PC・スマートフォン・タブレットなど多くの種類の端末に対応したマルチデバイスで制作したりと様々な方法があります。
今回は、後者のマルチデバイスに対応させる「レスポンシブWEBデザイン」についてご紹介したいと思います。
目次
1.レスポンシブWebデザインとは

レスポンシブWebデザインとは、どんな大きさの端末でも見やすく、使いやすくするために
大きさが可変しても大丈夫なホームページデザイン・コーディング手法のことです。
従来のホームページは、パソコンとスマートフォンで別々のデザインやHTMLを使用し、ホームページを制作していました。
その制作方法では、画面サイズが大きいタブレットなどでホームページを閲覧したときに、デザインが崩れたり、文字サイズが小さいから見えないなどの問題が起きがちでした。
しかし、レスポンシブWebデザインでは、パソコンとスマートフォンで同じデザインやHTMLを使用しているので、デバイスごとの表示をデザインで変更するわけではなく、システム内で変更しています。
そうすることでサイズに合った綺麗な状態のホームページを制作することができます。
つまり、従来のようにパソコンとスマートフォン別々でデザインなどを作るよりも、レスポンシブWebデザインで作ったホームページのほうが見やすく、端末サイズに様々な種類がある今の時代に合った制作ということです。
2.メリット
ホームページに乗せている情報を修正するときにパソコンとスマホでデザインを分けていると、2サイト分同じ修正を行う必要があります。
ですが、レスポンシブWebデザインは、パソコン・スマホで同じデザイン、同じ作り方なので、1回で修正することができます。

GoogleはレスポンシブWebデザインに対応したホームページを評価し、Googleの検索結果などで上位になるようにしています。

3.デメリット
従来は、パソコンとスマートフォンのデザインを別々に作成をしていたので、自由にパソコン・スマートフォン関係なくデザインすることができました。
しかし、レスポンシブWebデザインでは、様々な端末のサイズに対応するため、基本的に同じ見出しやあしらいを統一したデザインを使用する必要があります。
2.スマホ閲覧時のサイトの読み込みに時間がかかる
パソコンとスマートフォンで一つのデザイン・コーディングで制作しているので、スマートフォンで閲覧する場合もパソコンで使用している画像やファイルを読み込むため、ホームページが表示されるスピードが遅くなってしまいます。
まとめ
今回は、「レスポンシブWebデザイン」についてご紹介しました。
病院のホームページを制作するにあたって、様々なホームページを参考にするのですが、その際にレスポンシブWebデザインはもちろんのこと、スマートフォンに対応していない病院ホームページが多くあることに驚きました。
スマートフォンが多く普及している今、スマートフォンに対応していないのは病院を受診される方にとって良くないことです。
しっかりと病院の情報を伝えることが老若男女に伝わるようなホームページにするにはスマートフォン対応は必須です。
まだ、スマートフォン対応されていない病院はスマートフォン対応を一度ご検討していただければと思います。