HOME ＞ 必読！サイト運営[技術編]

必読！サイト運営[技術編]

■ホームページの土台ともいえる基礎技術


○テーブルタグ(TABLE)

table

■06年前半頃まで主流だったホームページ制作技術　【初心者向】

重要度★★☆☆☆☆☆☆☆☆

CSS（スタイルシート）によるhtml文書の記述が推奨される前に一般的だったホームページ制作の記述方式。ホームページを「テーブル」と呼ばれる枠で囲い込む事によってデザインを作り上げていきます。06年前半頃までは殆どのホームページがこのテーブルタグを利用したものでしたが、ホームページの作り易さ、またSEO効果の高さから06年後半より加速度的にCSS（スタイルシート）が導入されるようになり、今ではテーブルタグでホームページを制作する事は「SEO的」に見て「スタートラインに立てない」とさえ言われる程になっています。


■テーブルタグの特徴

  • レイアウト情報を直接書き込む為、ソースコードが冗長的になる
  • 複雑/冗長的なソースはクローラーに読み難くなる（SEO的評価が下がる懸念）
  • ホームページ制作の主流はCSSへと移った
  • 表示速度が遅い（デザインと内容が同じページに同居している為データ量が多い）

■ソースから見るテーブルタグのホームページ

テーブルタグは「レイアウトの情報を直接書き込む為に非常に冗長的なソースコードになる」という特徴があります。「簡潔」で「わかり易い」を求める検索エンジンのクローラーには余り評価が高くなるのも当然と言えるでしょう。また、ページ全体を「テーブルタグ」で囲むので、ソースコードには「< table>」「< td>」「< tr>」「< th>」といったタグが多いのも特徴となります。

-------------------------------------------------------------
< table width="730" border="0" cellspacing="0" cellpadding="0">
< tr>
< td width="248">< /td>
< td width="248">< /td>
< td width="248">< /td>
< td width="248">< /td>
< td width="248">< /td>
< td width="248">< /td>
< tr>
< /table>
-------------------------------------------------------------

■テーブルタグに特に拘りがなければ、CSSへの移行が望ましい

Tableタグで治療院のホームページを作成されている方は、特に拘りがない限りはCSS（スタイルシート）への内部構造のリニューアルをおススメします。「見た目に変わらない」のは我々人間が見る場合の話であって、検索エンジンのクローラーが見た場合は「子供の散らかった部屋（table)」と「整理整頓された大人の部屋（CSS）」のような違いがありますので、明らかにSEO上での評価が違います。どれだけ優れた内容であっても、雑然とした空間であればクローラーが思うように読み取ってくれないのです。優れた内容を読みやすい形式でまとめたCSSは伊達ではありません！

このページのTOPへ

○フレーム（FLAME）

flame

■使い易さ重視の旧型ホームページ制作技術　【初心者向】

重要度★★☆☆☆☆☆☆☆☆

画面を分割する事によって管理がし易くなるように工夫されたホームページの構成。SEOが騒がれる前の時代に様々なホームページで採用されていました。ですが、「フレーム未対応」のブラウザでは見ることができない。また、SEO対策としてはページの内容が分割されてしまっている為にクローラーが伝えたい情報を読み取ってくれないといったデメリットが取り沙汰され、今ではフレームでホームページを運営されている人は余り見られなくなりました。


■フレーム構造の特徴

  • 高いメンテナンス性（メニュー項目だけを別ファイルで管理できるので楽）
  • SEO的価値の懸念（indexページがつぎはぎになり、内容がなくなる。）
  • ブラウザによっては対応していない（見れない）場合がある。

■ソースから見るフレームで作ったホームページ

フレームによるソースを使っているとホームページにアクセスをすると下記のような特徴的なソースが出てきます。これを見ている限りでは確かにSEO的効果が見込めるとは余り思えないのも納得です。何故なら、「ソースコード」とは「検索エンジンのクローラー」から見たホームページ情報なので、下記のホームページに来たクローラーがこのフレームのソースを見て、「ここは○○について取り上げているホームページだな」と理解できるでしょうか？？？


-------------------------------------------------------------
< FRAMESET rows="*" cols="330,820" framespacing="1" frameborder="YES" border="1">
< FRAME src="mokuji1.html" name="mokuji" marginwidth="1" marginheight="1" noresize>
< FRAME src="top.html" name="top" marginwidth="１" marginheight="1">
< NOFRAMES>
< BODY>
このページは、フレーム機能をサポートするブラウザで表示するようデザインされています。
このテキストは、フレーム機能をサポートしないブラウザで表示されます。
< /BODY>
< /NOFRAMES>
< /FRAMESET>
-------------------------------------------------------------

■フレーム構造に特に拘りがなければ、CSSへの移行が望ましい

フレーム構造で治療院のホームページを作成されている方は、特に拘りがない限りはCSS（スタイルシート）への内部構造のリニューアルをおススメします。「見た目に変わらない」のは我々人間が見る場合の話であって、検索エンジンのクローラーが見た場合は「色合いのないガランとした部屋（フレーム）」と「整理整頓された大人の部屋（CSS）」のような違いがありますので、明らかにSEO上での評価が違います。どれだけ優れた内容であっても、内容がバラバラの空間にあればクローラーが思うように読み取ってくれないのです。優れた内容を読みやすい形式でまとめたCSSは伊達ではありません！

このページのTOPへ

○フラッシュ（FLASH）

flash
重要度★☆☆☆☆☆☆☆☆☆

■ダイナミックなアニメーションが可能　【上級者向】

ホームページに「アニメーション」を導入する！という非常に画期的な技術が正にこのフラッシュアニメーションでした。今でも映画やドラマといったホームページに、また企業ホームページ等のアクセントとしても利用されています。過去、フラッシュだけでホームページを作るといった動きも活発でしたが、やはりSEO的な観点から非常に不利な状況に置かれ、今ではCSSをベースとしたホームページにフラッシュアニメーションを埋め込む、といった方法が広く採用されています。


■メンテナンス性に欠けるのがネック

フラッシュアニメーションは見た目のインパクトは間違いなく最強です。ですが、その余りに悪いメンテナンス性が普及に歯止めをかけたという事実があります。仮に、メンテナンス性、SEO的弱点を克服する事ができた場合、再びフラッシュ旋風が巻き起こる可能性があるかもしれません。


■フラッシュの特徴

  • 他では実現できない圧倒的な表現力
  • 文字データが皆無な為、SEO的には致命傷
  • 低いメンテナンス性
  • 映像制作に近いので、非常に高コスト体質

このページのTOPへ

○スタイルシート(CSS)

CSS
重要度★★★★★★★★★★

■SEOにも強い次世代標準のホームページ制作技術　【上級者向】

テーブルタグの後を引き継いだ新世代のコード記述方式です。その最大の特徴は「文章」と「レイアウト情報」の分離によるコードの単純化/簡易化でした。従来のテーブルタグの場合、「この文章のこの部分は赤色+太文字にしよう」「あそこの段落は青色の枠線で囲んで、最後の二文字は二重線にしておこう」といった細かな設計を全てhtml文書内に書き込んでいました。


例） < font size="+1" color="#FF0000">文章文章< /font>


CSSではこの長い記述の「文字装飾」部分を切り離し別の場所に管理する事で、文章を簡潔にする事ができるのです。


例 < p id="red_b">文章文章< /p>　


「何だ、大して変わらないじゃない」と思われる方も多いかもしれませんが、ホームページ全体の量で見た場合、その差は歴然とします。全く同じ内容のホームページであっても、テーブルタグの方はソースコードが200行、一方のCSSは100行にも満たないといったような事が普通に起こり得るのです。そしてそれは検索エンジンのクローラーの目にはこう写ります。


200行の方はごちゃごちゃしているなぁ。。。でも100行の方はとてもわかり易くて良いな！


これは「内容」と「デザイン」を別々にしているCSSならではの高評価と言えます。検索エンジンのクローラーは一番最初にCSSファイルで「デザイン情報」を予習した上で「内容」を読み解いていきます。一方のテーブルの場合は「内容を読みながらその場その場でデザインを把握する」流れですので、当然頭を悩ませる事も多く出てくるという訳です。


こうした例からも何故、テーブルタグが衰退して、CSSが主流へとなっていったのかがわかるかと思います。


■CSS（スタイルシート）の特徴

  • 高いSEO的基礎評価（サイト構造が単純明快でクローラーが読み易い）
  • 高いメンテナンス性（デザイン定義が内容とは別で管理されているので修正が容易）
  • 表示速度が速い（データ量を最小限に抑えるので、表示するまで時間がかからない）

■ソースから見るフレームで作ったホームページ

CSSで記述されたソースは特徴的ですのですぐにわかります。「< div>」「< h1/2/3>」「< ul>」といったソースが至る所に見られる場合はCSS記述のホームページとお考え下さい。また、ソースを見た時に明らかに「短い」ですので、一度「Table」によるホームページと見比べてみては如何でしょうか？


-------------------------------------------------------------
< div class="mainbox">
< h1>< /h1>
< h2>< /h2>
< p>< /p>
< ul class="ul10">
< li>< /li>
< li>< /li>
< /ul>
< /div>
-------------------------------------------------------------

CSS道場へ進む

このページのTOPへ

○SEO (Search Engine Optimisation)

SEO

■自力（地力）型の検索上位表示

治療院の皆さんが最も頭を悩ませているのがこの「SEO」に関しての事だと思います。今やインターネットは「検索」から始まるのが当たり前となってしまいました。その為、「検索結果で、如何に上の方に表示されるか」がホームページ運営者にとっての死活問題となっているのです。


このSEOについてはSEO道場の方に詳しく掲載していますので、細かな解説はそちらに譲ります。ですが、治療院の皆さんには「目先の検索順位」を求める事はせず、「王道的なSEO対策」でもって同じ地域のライバル治療院さんと切磋琢磨して頂きたいと考えています。


SEO道場へ進む

このページのTOPへ

○SEM（Search Engine Marketing）

SEM

■他力型の検索上位表示

入札形式で「検索キーワードの掲載位置」を買う事ができる広告サービスです。インターネットのライフスタイルが「検索ありき」だと気付いたGoogleが先行して始めるやいなや瞬く間に爆発的な経済効果をもたらし、今ではYahooも追随して同様の広告サービスを提供するに至りました。


■課金はクリック単価、金額は競争率に比例する

現在、国内でこのSEMサービスを提供しているのは主に「Yahoo」「Google」の二社になりますが、そのいずれもが「入札制」といういわばオークション形式でのサービスを提供しています。これはつまり、特定のキーワードに置いて、より高い金額を支払った方が「上位の掲載位置」を獲得できるというものです。課金は「1クリック」当たりとなり、その課金金額は最小なら9円程度で済みますが、競争の激しいキーワードの場合、ゆうに数百円を超えるものもあります。業界ではこうした1クリック当たりの金額が高いキーワードを「ビッグワード」、金額が低いキーワードを「スモールワード」とい呼んでいます。


■物販にはとても効果的だが・・・・・

このSEMサービスは物販等の「広告勝負」のサービスには非常に効果的です。ですが、治療院さんのホームページを出す事については効果があるかどうかは微妙な所です。それは一体何故なのか。


  • 患者さんは徹底的に情報を見比べる（検索2ページ目迄の原則が通用しない）
  • 物販のような衝動買いがない（かなり詳細までホームページを読み込む）

こうした特殊な背景が代替医療/民間療法の場合はありますので、SEMで上位表示を勝ち取っても、2ページ目以降に検索結果がなっていても、結局は患者さんはやってくる確率が（他の業種に比べて）高いのです。とはいえ、SEMの広告効果は間違いなく高いですので、費用対効果との相談の中で決断をして頂ければと思います。


■代表的なSEMサービス

このページのTOPへ