ホームページ Category

歯の定期メンテナンスで歯科クリニックに通っているのですが、そこの先生がホームページで集患をしたいとのことで最近は相談を受けています。

その先生はご年配というわけではないのですが、高齢といえば高齢のため、パソコンやネット関連には疎いらしく、ネットでの集患方法についていろいろと説明することになりました。

まずご提案したのは、「地名 歯科」で検索された際に1位に表示されるようになれば、患者さんがたくさんやってきますよというものです。いわゆるローカルSEOというものになりますが、Googleマイビジネスなどで地図も設置して地域での露出度を増やせばよいとお伝えしました。

ただ、言うは易く行うは難しで、現状のホームページの作りを見る限り、短期間でのSEO上位表示はちょっと難しいのではないかと感じています。そのクリニックは無料の某CMSサービスでサイトを作成していたのですが、そのCMSで作っているサイトが検索結果でヒットしていることは見たことがありません。

そのため、SEOでの上位表示は難しいだろうと感じました。

そこで、次にご提案したのは「リスティング広告」で広告を出せば、SEO関係なく、今すぐ患者さんを集客できますよというものです。医療施設の場合は医療法による広告規制もあり、ホームページ自体も広告と見なされるため、リーガルチェックのようなプロセスも必要にはなりますが、ガイドラインに沿った形なら看板的な形で広告を出稿することができます。

ただ、高額な費用をかけて広告を出しても、ホームページの作りが悪ければ、やはり訪問者の反応は悪いものです。広告費用ばかりがかさんで成果がないという結果になってしまうため、最終的にはホームページにメスを入れるしかありません。

ホームページについては、私が作れば簡単ではあるのですが、レンタルサーバーに移転してしまうと、それ以降に先生の方で更新することができなくなってしまう懸念があります。

そのため、ホームページの作り方自体を先生の方でも習得してもらい、ご自分でも更新できるようにしてもらうのが一番いいと思います。正直、医師の頭脳であれば、HTMLやCSSなどの習得は余裕でしょうし、数か月程度でマスターできるものと思います。もしくは、WordPressのようなCMSを利用して更新する方法を取るのがベストかもしれません。

ただ、実際にホームページからクリニックに訪問されてからのCVRなどもありますし、そのあたりを総合的に高めていかないと、ホームページのみでは成果には結びつかないのではないかなと感じています。

h1やh2の見出しタグの場合、marginを何も指定していないとブラウザが自動で間隔を取ってしまうため、少し間の抜けた印象が出てきてしまいます。

デフォルトCSSではh1で2emなので、仮に1emを16pxとすると32px程度かと思いますが、この場合ですとmarginの値が0.67emとなるため、上下に約21.44pxになるのかもしれません。

一方、h2の場合は1.5emなので、24px程度かと思います。

ただ、不思議なことに、h2の場合のmarginは0.67emではなく、0.83emとなるため、約19.22pxになるかと思いますが、h1の場合と割合が一致しないようです。

h1 → 2em、marginは0.67em
h2 → 1.5em、marginは0.83em

仮に、1emを16pxとしますと以下のようになります。

h1 → 32px、marginは約21.44px
h2 → 24px、marginは約19.22px

h1の場合は文字の大きさに対して「67%」であるのに対し、h2の場合は「83%」となるため、小さい文字の方が間隔を取る割合が増えることになってしまいます。

おそらく、h1で83%もmarginをとってしまうと間の抜けた印象が出てくるためと思いますが、感覚的にはマージンの割合を同じにするよりもサイト全体のバランスがよいのかもしれません。

概ね、h1もh2もmarginは上下に「20px」程度が最適かと思いますが、h1については気持ち広めで21.5px程度、h2については19px程度にすれば、違和感がなくなるものと思います。

以前までGoogleのサイト内検索を利用していたのですが、新しくリニューアルされたためか表示がおかしくなっていたので、自分でカスタマイズしてみました。

カスタムサーチのデザインを変更する際、HTMLフォームを利用してカスタマイズする方法が一般的かと思いますが、今回はJavascriptタイプのサイト内検索をCSSでカスタマイズしています。

このカスタマイズ方法についてですが、Chromeのデベロッパーツールなどでカスタム検索のID要素などを調べ、サイトのCSSで表示を調整するという方法です。

ただ、カスタム検索のデフォルトのスタイルがHTMLタグに直で記述されているため、サイトのCSSに記載するだけでは上書きされません。スタイル適用の優先度はHTMLタグに直接記載したstyle属性の方が高いため、CSSに記述した内容は適用されないからです。

そのため、わたくしはCSSに「!important」を多用して強制的に上書きしてみましたが、この方法でうまくいきました。

あくまで参考までになりますが、CSSを以下のようにカスタマイズしてみました。

検索結果をサイト内で表示するか、それともGoogleにするかで1行目などのコードが違いますが、おおむね、以下のような感じでカスタマイズしていけばよいと思います。

.gsc-control-cse {padding: 0 !important;}
table.gsc-search-box {border-left: none !important;border-top: none !important;}
table#gs_id50 {border-left: none !important;border-top: none !important;}
table.gsc-search-box td {border-right: none !important;border-bottom: none !important;}
.gsc-search-button-v2 {border-color: #ccc !important;background-color: #666 !important;}

わたしがやったのは、ボーダーをなくし、検索ボタンを白黒にしてシンプルな形で表示しましたが、ほかにもボーダーを丸くしたりするとよいかもしれません。

新しいタイプのサイト内検索の方がGoogleのブランドロゴがかっこいいため、最新のものを使用してカスタマイズした方が良いかと思います。ちなみに、ブランドロゴは必ず表示しなければならないため、デフォルトの「ENHANCED BY Google」の表示を消すのはNGになります。

また、アドセンスのサイト内検索で収益化している場合、カスタマイズによって規約違反になってしまうのかは不明ですので、通常の一般的なカスタム検索を利用されることをおすすめします。

自サイトではレスポンシブウェブデザインやHTTPSには対応しているものの、新しい技術である「AMP化」や「構造化データ」には対応していないため、今年はこの二つに対応しようと取り組んでいます。

そこで、ざっくりテストしてみたのですが、AMP化についてはルーチン化された単純作業が多いため、比較的取り掛かりやすいのですが、構造化データはページごとに個別の対応が必要になるため、かなり時間がかかる印象を感じました。

そのため、まずはサイトをAMPに対応しつつ、AMPへの対応が終わったら構造化データ化に着手するのが最善と思います。

そもそも、このAMPと構造化データの違いについてですが、AMPについてはモバイル環境での高速化のための技術であり、一方の構造化データについてはセマンティックウェブの仕組みであるため、根本的には全く違う技術になります。

AMPはGoogleのサーバーを使用することに加え、ランディングページをキャッシュで表示させるため、モバイル環境でも高速なウェブ表示が可能になる技術です。

一方、構造化データについては、セマンティックにコンテンツの意味を伝えるものになります。

例えば、チーズケーキの記事を公開した際、それがチーズケーキのレシピを意味するものなのか、喫茶店でのメニューを意味するものか、あるいはお取り寄せグルメの商品を意味するものか、検索エンジンが判断できないわけではないとは思いますが、判断がしにくいです。

その際、「レシピ」の構造化データを取り入れると、明確に一義的に「レシピ」のコンテンツであることを訪問者に伝えることができるメリットがあります。

どちらかといえば、AMPよりも構造化データの方が重要度が高い気もしますが、最近ではどちらもマストSEOの必須の要素であるため、両方に対応しておくとよいでしょう。

また、実際に書く際の順序はどちらが先かについてですが、某大手サイトのHTMLソースを確認してみると、「構造化データのjson」→「amp-customのCSS」→「styleのボイラープレート」→「ampの定型文」の順序になっていました。

そのため、構造化データについてはAMPよりも前に記載しておくことをおすすめします。

レスポンシブウェブデザインが登場し始めた頃、当初はPCサイトが主体でモバイルは副次的な扱いでした。そのため、まずはPCサイト用のCSSを先に記述し、その後ろの方でメディアクエリを使ってモバイル専用のCSSを記述する書き方だったと思います。

その後、モバイルユーザーが急増し、今やネットにアクセスする割合の半分程度がモバイル経由になってきています。

そのため、Googleでのインデックスもモバイルファーストとなり、現在ではモバイル版のページが主体になりました。これに伴い、CSSの記述についても、PC版を先に書くのではなく、モバイル版のCSSから書き始めるのがよいと考えています。

このCSSを書き変えるコツについてですが、まずはスマホ用の最小の「モバイル版のCSSのみ」を単体で完成してしまうことをおすすめします。

その次に「PC用のCSS」も単体で完成してしまうことをおすすめします。おそらく、このPC用については現在のCSSがそのまま使えるはずです。

次に、この二つを合体させて両方を併用して記載しておけばよいでしょう。

個人的にはスマホ用の記述を上書きするような書き方はしたくないため、それぞれを独立させた形で記載することにしています。

例えば、以下のように記述していたとします。

h1 {font-size:18px;}
@media screen and (min-width:481px) {h1 {font-size:28px;}}

この場合、スマホでアクセスした場合にはフォントサイズの18pxが適用され、PCからアクセスした場合には18pxが上書きされて28pxが適用されます。

個人的にはこのような上書きはしたくないため、以下のようにそれぞれを独立して書くことにしています。

@media screen and (max-width:480px) {h1 {font-size:18px;}}
@media screen and (min-width:481px) {h1 {font-size:28px;}}

もともとブラウザのデフォルトのCSSがあるため、どのみち上書きされることに変わりはありませんが、あまりコロコロ変わるようだとスマートではありません。

CSSの記述が多少長くなるよりも、ブラウザ側で再計算する必要がないように書く配慮が必要かと思います。おそらくは最終的に計算された結果、レンダリングが開始されるはずなので、そう大した違いはないかと思いますが、できるだけシンプルに記述することをおすすめします。