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

公式HPに重大な危機が迫りつつあります。
スマホ対応を急がないと、これではWeb経由の集患は望めない。

尻に火がついた私がすがったワラが「レスポンシブデザイン」でした。大枚をはたいて買った本。ｿｼﾑの奴です。ふざけんなよ2600円もしやがってｗ

いちばん最初のページに書いてあったのは「ボックスを作る」でした。

HPにはご案内のように、ヘッダー(HTMLのタグのではありません)、コンテンツ、メニュー、フッター(コピーライツ記載)のようにわかれています。

で大体、コンテンツが右でメニューが左のことが多いですよね。
それぞれにbox1とかbox2とか命名していきます。
最後に全体のくくりをboxAとすることにしました。

これがスマホの場合は

左右に2カラムなんて絶対なりませんよね。
通常メニューはトップにあるか下にあるか、ですが、一番多かったのは右上にハンバーガーメニュー([≡]こんな奴)が出てくる奴です。

でもどうも私はこの [≡] に共感を持てませんでした。

スマホの場合は指を下から上に勢いよくスライドすると、そのまま画面が慣性の法則に従って?!上に流れて(＝下に移動して)いきます。ですからスマホの場合は上下的な移動はPCほど苦になりません。

PCの場合はマウスホイールでしょうが、あれはスマホと違って画面が慣性の法則に従わないのでスクロールは時間がかかります。またマウスポインタをスクロールバーの列に持っていくのもちょっぴり神経を使います。

[≡] は、下がスクロールできるとかできないとか、jQueryがどうのとか、面倒だし、重要な内容にアクセスしたいときに1回叩いて、探してもう1回叩く、という2度手間になってしまいます。

インプラントだ矯正だ審美だなどの細かい治療等の内容はまあ別ですが、いくつかの優先的にアクセスしてほしいメニューについてはもっと簡単にアクセスできるようにしたい。

悩んだ末、 [≡] は使用しないで、重要ないくつかのメニューだけヘッダーとコンテンツの間に横に並べて、他のメニューはコンテンツの下に押しやることにしました。

大きな決断でした。
これで大きな構成は決まりました。

box1 頭にヘッダー(スマホ用は小さく)
box2 その下にトップナビ(4~5つ)
box3 コンテンツ(PCは右)
box4 メニュー(PCは左、スマホは下)
box5 フッター(コピーライツ記載)

トップナビは4~5項目しか載せられません。
内容を厳選・吟味する必要があります。何にしようか…
「院内新聞」は絶対に載せたい。今や当院の隠れ名物です。
「メールフォームの問い合わせ」も絶対に載せたい。
「院長挨拶」は載せたい。
もちろん「コラム集(ジャンクステージ)」も載せたい。
だいたいその辺で埋まってしまいます。

もう後は、下のメニューに飛ばすくらいしか残っていません。

これで、スマホなら縦一列、PCならbox3とbox4は2カラムとスタイルを振り分ける。
HTMLタグ原稿は1つで使い回せます。

◆

たまたまですが、そのころ患者様でWebデザイナーをやっているＴ様という方が、詰め物が取れたと言って見えました。

すかさず質問してみました。

根「さいきん急に検索順位が下がって、Indeedに負けてるんですよ」
Ｔ「そうそう根本さんのところはいつも気になっていたんですけど、トップページから、アクセスまでの距離が長すぎて、見る方が飽きてしまうんですよ。これでは電話したり場所を探す前に中断されてしまいます」

結構強くそう言われました。

ああ、そういえばそうだった。
昔はHPを患者指導のアリバイようにしか思ってなかった。
根「○○に気をつけてください。HPにも書いてありますよ」
みたいな使い方しか考え付きませんでした。

まずは
　すぐに電話できる
　すぐ予定が分かる
　すぐアクセスが分かる
が最優先です。

今まではPCページで、アクセスはトップページ(index.html)とは別のページに書いてありましたが、当然それをやめてGoogleマップごとトップページに直接書くことにしました。

そのかわり、PCページのトップページも、今までのような通販っぽいランディングページのようなものはやめて、 index.html も2カラムになりました。

フリーダイヤルのリンクは、スタイルシートを使って、

　.電話リンク{
　display:block;　←(まず何でも表示→スマホ「も」PC「も」)
　}
あっとﾒﾃﾞｨｱｽｸﾘｰﾝｱﾝﾄﾞ(ﾐﾝｳｨﾄﾞｩｽは768ﾋﾟｸｾﾙ){
　.電話リンク{
　display:none;　←(例外として非表示→PC)
　}
}/*赤枠{}内はPCのみに例外的に作用*/

と分けると、PCでは表示されず、スマホだけで表示されるようになります。

スタイルシートは後出しじゃんけんなので、最強は本文中のタグの中に仕込む奴ですが、それでは反則過ぎるし汚いので嫌いです。
そこで、まあこんな感じの順番にします。

marginだのpaddingだのdisplayだの:hover {何とか:かんとか;}とか、懐かしさをかみしめながら本に目を通していきます。

Tさんからはその他にいろいろなことを教わりました。

やはりレスポンシブスタイルにしたほうが上位表示には有利とのこと。

また、HP作りにWordPressが良いと言われたのには驚きでした。
10年前に個人でおふざけで自前のブログを作ったことがあり、そのときにWordPressをいじったのが最初です。
ですからジャンクステージは当初からやりやすかったんです。

話では最近は、WordPressでブログではなく普通のHTMLを吐き出すこともできるとのことで、たぶんずっとそれに馴染んでいたら、そっちの方が簡単に感じていたかもしれませんね。

◆

あと、やっぱりというか、jQueryの名前は出てきました。HPに動きを出すのにはよいとかだそうです。
今はあんまりHP上の動きとか遊び心には興味はないし、その辺のご宣託は右から左に抜けてしまいましたが、あとでjQueryでひとつ押さえておきたいところがあります。

Ajaxのもっとも簡単な関数のひとつですが、 load() です。

メニューとかフッターとかの共通部分は、一括管理をしたいですよね。
たとえば20ページとか30ページのホームページがあって、メニューのためにコピペを30回とか、秒で鬱です。

だからそこで朗戸()です。

なんでも、「本編.html」にはもう、メニューもフッターも書かなくていいんです。ただIDタグを勝手にdivり、「ここに読み込む」ということにするだけです。

別に「メニュー.html」を作成します。＜html＞も＜body＞もなにもなく、いきなり＜div　○○＞に始まり＜/div＞に終わる、本当にたんなる中間部分、パーツです。

ですがすごいのは、これ「メニュー.html」ひとつ修正すると、すべての「本編.html」ページのメニューに反映されることです。

そのために、本文の方では＜/head＞のぎりぎり直前に

　＜script src=”jquery-3.3.1.min.js”＞＜/script＞
　＜script type=”text/javascript”＞
　メニューパーツの読み込み命令
　＜/script＞

だけ押し込めておきます。

まるで夢のような話です。
おじさんはびっくりです。

◆

ページをあれこれ増やすのは後にして、今の所一番読んでほしいのは、このコラムと、院内新聞です。
しかし、今までの院内新聞は、画像をすべてサムネイル化して読み込ませてから、いったん表示を閉じたりしていたので、読み込みに時間がかかるのかからないのって、ちょっとした苦行のような感じでした。

そのためにどこかからかコピペして持ってきたjavascriptは、今見て自分でもまったく意味が分かりません。

これ、無駄です。
サムネイルは一切廃止して、単なるリンクだけにしました。
そのかわり、リンクを四角く罫線で囲むことで、見た目がとてもスッキリしましたし、読み込みも一気に爆速になりました。

これはｿｼﾑの奴の187-188ページを参考にしました。

後はload()だけ です。

【今回のまとめ】省力化・簡素化の中に答えがある