こんにちは。根本齒科室の根本です。

さいきん、スマホからWebを見る機会も増えました。
ところが、うちのHPはPC用に作ってあるので、ピンチアウト(拡大)しないと、顆粒のような文字は全く読めません。
(まぁ、歯医者のHPなんてそんなもんだろう)

ある時、戯れに「根本歯科室」で検索してみました。
なんと、当院公式HPが全然ないではありませんか！
上位表示がIndeed、そうあの斎藤工と泉里香のCMの奴、ばかりなのです。
その他の検索サイトや街紹介サイトみたいなのがそれに続き、なんと公式が10位以下という体たらく。

「…えっ」

愕然として、今度は「根本齒科室」でも検索してみましたが、同じことでした。

ヤバい！何とかしないと

いろいろ上位表示とか順位とか検索して、ひとつ気がついたのは、このところGoogleのほうでモバイルファーストに方針を切り替えた(大分前からかもしれませんが)ようだということでした。

スマホで見やすいページのほうが、順位が上に行くようなのです。

嫌だけど、スマホで「龍ケ崎　歯科」で検索してみました。
いくつか出てきます。
当院と開業日が同じである「さとる歯科」さんも見てみました。
(おっ、見やすい)
とたんに恥ずかしい気持ちでいっぱいになってしまいました。
気持ちを切り替えて、県南の医療管理委員会でお世話になっている先生方のHPをチェックすることに。
「守谷タウン歯科」さん、「てらだ歯科」さん他…

(しまった！見やすい)

どうしよう。
自分がボーっとしている間に、時代が先に行ってしまいました。

(でも、スマホ用の原稿なんか面倒だ…)
以前、ガラケー用の原稿を書こうとして挫折したことがある私は、暗澹たる気持ちでした。

でも、もう少し調べてみると、phpとか出てきてさらに心が萎れてしまったのですが、「レスポンシブWeb」という、スタイルシートだけいじればスマホの見やすさも何とかなる方法もあり、現在はこれが主流とのことでした。

当院のサーバーであるアルファメールライト(大塚商会)は安いだけあって .htaccess とか便利なことがなかなかできません。でもこれならなんとか行けそうです。

レスポンシブデザインのキモは、画面の大きさが○○ピクセル以上になると、レイアウトやデザインがスマホ用からPC用に変わる、という点です。
その○○ピクセルを「ブレイクポイント」と呼ぶそうです。

ブレイクポイントをどこにもっていくか。
いろいろ調べてみましたが、767px以下をメインとして、768px以上を例外(PC)扱いとすることにしました。

iPadとかもあるっちゃありますが、あれは私には、小学生が親に同期してもらって、Wi-Fiがある所でゲームをしたりつべったりするものという認識で、大の大人が日常ブラウジングに使用するという発想には大きな飛躍を感じます

たぶん大人はiPhoneとかが多く、いちいちピンチアウトしてPCサイトを覗くほど暇じゃないと思います。

このままではじり貧だし、業者に金を出すのも嫌だ。HTML原稿をPC用とスマホ用に2本書くのも同じくらい嫌だ。秒で却下。
じゃ、レスポンシブデザインをするしかない。。

で、まずは本を買ってきました。
一冊はHTML5とCSS3をまとめた本で、もう一冊は「レスポンシブ」という名前がついた本です。

10年くらい前に初めてHPを作った時もそうでしたが、実際に作業をやり出すと細かい所はブラウザでそのままネットで検索して調べて作っていく場面が増えていきます。
しかし、最初の基礎部分は本があった方が断然いいです。

ともかく、いろいろなHPをまず見てみました。
見ながらブラウザの幅を狭めてみたら、いきなり2カラム構成のページが「じゃんっ!!」て一列に変更になって、右上にハンバーガーメニュー([≡]こんな奴)が出てきたのにはびっくりしました！

しかも、個人のページなどでそういうのが非常に多かったです。
(そうか、さいきんのHPはこうなってるんかい？)

いつも見てるYahooやMSN、食べログ、2ちゃんまとめサイトなどはそのようになっておらず、今回ブラウザの幅で表示やレイアウトが変わるということを初めて知って、ほんとうにビックリしました。
そりゃ大資本は原稿を2種類書くくらい朝飯前だから今まで気がつかなかったのかもしれませんが、本当に幅の大きさで変わるんだ。。。

【今回のまとめ】

時代遅れの根本、ブラウザ幅で表示を変えると検索上位表示に有利と初めて知る