大学、短大、専門学校、小中高の学校広報担当者のための目からウロコの入試広報研究メディア入試広報ラボ

1,560view

ホームページ

学校のレスポンシブWebデザインはこう作る

武蔵野音楽大学、芦屋大学、くらしき作陽大学 作陽音楽短期大学、慶應義塾大学 湘南藤沢キャンパス、国際トータルファッション専門学校、京都医療福祉専門学校

  • このエントリーをはてなブックマークに追加

20140704_7
スマートフォンに対応したWebサイトを作る際、現在多く用いられている制作手法が「レスポンシブWebデザイン」です。
画面の横幅に合わせて何段階かのレイアウトを用意しておくことで、スマートフォンだけではなくタブレットなど、多種多様な画面解像度のデバイスに対応できることもメリットの一つです。
今回は学校のサイトでレスポンシブWebデザインを用いたサイトをご紹介します。

武蔵野音楽大学

20140704_1

芦屋大学

20140704_2

くらしき作陽大学 作陽音楽短期大学

20140704_3

慶應義塾大学 湘南藤沢キャンパス

20140704_4

国際トータルファッション専門学校

20140704_5

京都医療福祉専門学校

20140704_6

まとめ

レスポンシブWebデザインに対応する際のメリット、デメリットをまとめてみます。

メリット

  • 画面の幅に応じて表示のレイアウトを変えることができる(マルチデバイスに対応)
  • PC、タブレット、スマホを1つのソースで管理できる(運営の負担を軽減)
  • 全ての端末でURLを共有できる
  • Googleが公式に推奨している(SEOに有利?)

デメリット

  • 専用ページに比べてレイアウトやデザインの自由度が低い
  • 構築時に綿密な設計やテストが必要
  • スマホでもPC用の容量の大きいデータを読み込むため、表示が遅くなる

最初の構築時に知識と時間がかかるため、慎重に依頼する必要がありますが、公開後はCMS等と組み合わせると、非常にメンテナンス性が高く、SEO的にもGoogleが推奨していることから、安心できるます。

今後のWeb制作のスタンダードになっていくと思われますが、PCサイトを使い慣れたユーザーなどは、「スマホでもパソコン向けの表示デザインを確認できるようにしたい」という声も多いようです。

東北大学のWebサイトでは、レスポンシブを採用しつつも、「パソコン」と「スマホ」の切り替えボタンを付け、ユーザーの声に応えています。

年寄りを困らせる「レスポンシブWebデザイン」

マルチデバイス時代のWebサイトの最適解になりつつあるレスポンシブwebデザインですが、常にユーザーの声にしっかり耳を傾けて、使いやすい形を模索していく必要があります。

京都のホームページ制作会社 株式会社クロスウィッシュ

入試広報ラボ 週間ベスト5