お役立ち情報

2016年1月27日投稿

歯科のスマホサイトの作り方は２種類あるの？

前回は、スマホサイトの重要性を記載いたしました。

「さあ！スマホサイトをつくろう！」と思われた歯科医院の先生、スマホサイトの作り方には「レスポンシブウェブデザイン(以下ではレスポンシブと省略)」と「スマホ専用サイト」の２つの作成方法があります。
それぞれどんなサイト作成方法なのでしょうか。

まずはレスポンシブウェブデザインのご紹介

レスポンシブとは、PC用とスマホ用の両方に自動対応するHPを１つ作る手法です。どの画面の大きさのデバイス(＝スマホやタブレット)で見ても、画面の大きさに合わせて自動的にレイアウト変更されます。

ちなみに、今先生がご覧になっているこのサイトもレスポンシブです。
PCでご覧になっている方は、google等のブラウザの横幅を縮めてみてください。レイアウトが自動的に変わっていきます。

マニアックな話になってしまいますが、より詳しくご説明すると、レスポンシブでは、CSS（文書スタイルをつける言語。Wordの書式設定や段落設定のようなもの。）をPCとスマホのそれぞれの画面幅に合わせて設定します。

CSSは別個に設定しますが、ページ自体は同じ内容を表示しているため、「aaa.com」というHPがあった場合、PCで見てもスマホで見ても「aaa.com」の同じTOPページを表示します。

管理・運用が比較的楽
変更や追加の時は一箇所を直せばPC・スマホのどちらでも変更が反映されますし、変更忘れもほとんどありません
将来、主流のモニターサイズより大きいスマホが出た際でも柔軟に対応できる
固定サイズで作らないため（△△px以上は～、以下は～でレイアウトを設定します）、iPhone 6 Plusなど、従来より大型のものが出た時なども表示が崩れることはほとんどありません
SEOに有利
単一URL（同じアドレス）しかないので、FacebookにURLを載せる時も一つ載せればどのデバイス（PC・スマホ・タブレット）からでも最適なデザインで見ることができます

凝ったデザインにしづらい
ページの情報自体はPC・スマホとも同じものを表示する為、あまり凝ったデザインにしたり、文章（コンテンツ）の順番を大きく入れ替えるということが難しくなります
既に完成したPCサイトは、レスポンシブウェブデザインにはしづらい
場合によってはゼロから作ったほうが早いです
スマホでの表示速度を考えると、画像を多く使うことができない
画像が多いと表示が遅くなり（重くなる）、不安定な電波状況でもアクセスするスマホには不向きです
文字の多く入った画像は多用できない
PCでは読める文字でもスマホの画面に合わせて縮小されるとつぶれてしまうことがあります

表題の通り、PC向けのサイトとスマホ向けのサイトをそれぞれ別に作る方法です。スマホやタブレットの画面の大きさを想定し、複数のサイトを作成する必要があります。

PCでのアクセス時には「aaa.com」というPC向けサイトを表示させ、スマホでのアクセス時には「aaa.com/sp」というスマホ向けサイトを表示させます。

管理・運用がやや大変
PCとスマホで別々にページを持っているため、変更や追加の時にそれぞれのページを直す必要があります
将来、大きなモニタサイズのスマホが出た際、表示が厳しくなることも
予めモニタサイズを決めて作るため、想定より大きいモニタのスマホで見ると画像がぼやけたり、表示がおかしくなることがあります

どちらの方法がいいかは、「今持っている歯科HPの状態」「更新頻度」「画像の数」「スマホとPCのアクセス比率」などによって変わるため、一概にはいえません。先生の運用方針に合わせて判断する必要があります。

当事務所では制作費の面だけでなく、後々サイトを維持するのにかかるコストや更新の手間なども考慮し、最適な方法をアドバイスさせていただきます。

スマホサイトの制作をお考えでしたら、お気軽にご相談ください。

< 前の記事次の記事 >