背景画像
キービジュアル画像 キービジュアル画像

column

コラム

レスポンシブWebデザインとはなに?

集患・採用強化に取り組んでいる病院や
これから取り組みを始める医療機関の皆様へ

まずはお気軽にダウンロードしてください

ダウンロードアイコン資料ダウンロード

資料ダウンロード

ダウンロードアイコン

皆さんこんにちは!

病院事業部ディレクターの山本です。

 

皆さんは今、このコラムをなにを使ってみていますか?

パソコンでしょうか? スマートフォンでしょうか?

 

多くの方が、スマートフォンを使ってこのコラムをみているのではないでしょうか。

 

ホームページを見る端末がパソコンからスマートフォンに変わり、今までパソコンのデザインだけでよかったホームページもスマートフォンにも対応したデザインが必要になりました。

 

最近では、パソコンのデザインよりもスマートフォン時のデザインに力を入れてほしいと

お客様に言われるほど、スマートフォン時のホームページの見せ方が重要視されています。

 

ホームページのスマホ対応には、PCサイトと別でスマートフォンサイトを制作したり、PC・スマートフォン・タブレットなど多くの種類の端末に対応したマルチデバイスで制作したりと様々な方法があります。

 

今回は、後者のマルチデバイスに対応させる「レスポンシブWEBデザイン」についてご紹介したいと思います。

目次

1.レスポンシブWebデザインとは

レスポンシブWebデザインとは、どんな大きさの端末でも見やすく、使いやすくするため

大きさが可変しても大丈夫なホームページデザイン・コーディング手法のことです。

 

従来のホームページは、パソコンとスマートフォンで別々のデザインやHTMLを使用し、ホームページを制作していました。

 

その制作方法では、画面サイズが大きいタブレットなどでホームページを閲覧したときに、デザインが崩れたり、文字サイズが小さいから見えないなどの問題が起きがちでした。

 

しかし、レスポンシブWebデザインでは、パソコンとスマートフォンで同じデザインやHTMLを使用しているので、デバイスごとの表示をデザインで変更するわけではなく、システム内で変更しています。

 

そうすることでサイズに合った綺麗な状態のホームページを制作することができます。

 

つまり、従来のようにパソコンとスマートフォン別々でデザインなどを作るよりも、レスポンシブWebデザインで作ったホームページのほうが見やすく、端末サイズに様々な種類がある今の時代に合った制作ということです。

2.メリット

1.ホームページの更新が楽にできる

ホームページに乗せている情報を修正するときにパソコンとスマホでデザインを分けていると、2サイト分同じ修正を行う必要があります。

 

ですが、レスポンシブWebデザインは、パソコン・スマホで同じデザイン、同じ作り方なので、1回で修正することができます

2.Googleに評価される

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

3.デメリット

1.自由にデザインができない

従来は、パソコンとスマートフォンのデザインを別々に作成をしていたので、自由にパソコン・スマートフォン関係なくデザインすることができました。

しかし、レスポンシブWebデザインでは、様々な端末のサイズに対応するため、基本的に同じ見出しやあしらいを統一したデザインを使用する必要があります。

 

 

2.スマホ閲覧時のサイトの読み込みに時間がかかる

パソコンとスマートフォンで一つのデザイン・コーディングで制作しているので、スマートフォンで閲覧する場合もパソコンで使用している画像やファイルを読み込むため、ホームページが表示されるスピードが遅くなってしまいます。

まとめ

 

今回は、「レスポンシブWebデザイン」についてご紹介しました。

病院のホームページを制作するにあたって、様々なホームページを参考にするのですが、その際にレスポンシブWebデザインはもちろんのこと、スマートフォンに対応していない病院ホームページが多くあることに驚きました。

 

スマートフォンが多く普及している今、スマートフォンに対応していないのは病院を受診される方にとって良くないことです。

 

しっかりと病院の情報を伝えることが老若男女に伝わるようなホームページにするにはスマートフォン対応は必須です。

 

まだ、スマートフォン対応されていない病院はスマートフォン対応を一度ご検討していただければと思います。

  • コラム
    病院ホームページ制作時に役立つ素材サイトのまとめ

    病院ホームページ制作時に役立つ素材サイトのまとめ

  • お知らせ
    夏季休業のお知らせ

    夏季休業のお知らせ

  • お知らせ

    mirahosサイトをプレオープンしました。(8月中にグ...

  • コラム
    病院でLINEを活用!?公式アカウント運用例3選

    病院でLINEを活用!?公式アカウント運用例3選

  • コラム
    お役立ちシリーズ第3弾!制作時に使用するツールまとめ

    お役立ちシリーズ第3弾!制作時に使用するツールまとめ

背景画像 背景画像

CONTACT

電話アイコンお電話でのお問い合わせ

(平日9時~18時)

  • メールアイコン

    お問い合わせ・見積依頼

    ミラホスについてのご質問は、こちらから気軽にお問い合わせください。

    矢印アイコン矢印アイコン
  • ノートアイコン

    簡単見積り

    必要な項目を入力するだけ、概算費用を確認することができます。

    矢印アイコン矢印アイコン
  • メルマガアイコン

    メルマガ登録

    日々の運用やWebサイトに役立つ情報を月1回配信しています。メルマガ限定情報の配信もあります。

    矢印アイコン矢印アイコン
  • ダウンロードアイコン

    資料ダウンロード

    ミラホスに関する情報や制作実績などを纏めた無料資料をご紹介しています。

    矢印アイコン矢印アイコン
medigle medigle
アイコン
矢印アイコン

地域医療連携システム

medigle(メディグル)

¥0から取り組む大病院の地域連携強化
大病院の地域医療連携を強化し
紹介患者の増加を支援するサービス