表示が遅くて余計なものがたくさん表示されているページは読まずに閉じてしまう

コンテンツと無関係な部分の表示に時間がかかってしまうようなデザインは避けましょう。

余計な表示に時間がかかるページはアクセス者を逃す

コンテンツと無関係な部分で表示に時間がかかるようなページデザインは避けましょう。

最近は高速な回線が普及してきたため、多少重たいページでもそれほどストレス無く表示されるようになってきています。

しかし、それでも早く表示されるに越した事はありません。

また、伝送されるパケット量に応じて課金される携帯端末などの接続形態もあります。

余計なものの表示はできるだけ減らすほうが良いでしょう。

Webサイトの閲覧に慣れたアクセス者であればあるほど、ほんの少しの待ち時間にもストレスを感じがちです。

何か情報を差がいている最中のアクセス者で、検索結果に表示されたたくさんのページを同時に閲覧している場合、表示が遅くて余計なものがたくさん表示されているページは読まずに閉じてしまうかもしれません。

余程他にはないユニークな情報があるのでない限り、アクセス者は辛抱強く待ってはくれないでしょう。

一瞬で表示されるためには、極力無駄を省いた軽いページである必要があります。

Webページを軽くする方法は一つではない

ページを軽くして表示速度を速めるには以下のような方法があります。

• 大きな画像や動画を活きない掲載しない
• テキストでもかまわない文字列を画像にしない
• デザイン目的だけにJavaアプレットやFlashを使わない
• 外部に独立できるソースは独立させる

また、データ量は軽くならないものの、早く表示されるように感じる（体感速度が向上する）ものとして、以下の方法があります。

• 段組構成は、上部で一旦区切る
• 上部にコンテンツと関係ない文章を掲載しない
• 面積の大きな画像は下部に表示させるか、本文を回り込ませる

大きな画像や動画を活きない掲載しない

アクセス者が予期しない場所で、いきなりサイズの大きな画像や動画を表示するのは避けましょう。

読み込みに時間がかかるような大きな画像や動画は、まずはサムネイルなどを表示させておき、それをクリックすることで表示できるような構成にします。

そうする事で、それらを見たいと思わないアクセス者には余計なデータをダウンロードさせずに済みます。

画像の場合は、表示面積を小さくする（縮小する）事でデータサイズを減らせるほか、画質や色数を下げる事でもデータサイズを減らせます。

どうしても大きな面積を使って掲載する必要がある場合は、画質や色数を落とせないか検討してみましょう。

写真で一般的に使われるJPEG形式では、画質（圧縮率）を自由に指定できます。

たいていの場合、最高画質が必要になる事はありませんから、実施に確認して許せるレベルまで下げましょう。

テキストでもかまわない文字列を画像にしない

普通のテキストで掲載しても問題のない文字列をわざわざ画像化して掲載しないようにしましょう。

文字列を画像化すると、閲覧者が文字サイズを変更できない、検索にぎっとしない、読み込みに時間がかかる、テキストをコピーできない・・・などの様々なデメリットがあります。

携帯端末のような、表示面積が限られている環境やアクセス速度が比較的遅い環境では、テキストでもかまわない文字列が画像になっているページは嫌われます。

わざわざ画像にしなくても、スタイルシートを使えば大きさを細かう調整できますし、フォントの指定や色の指定も可能です。画像にする必要性の無い文字列は、できるだけテキストで表示するようにしましょう。

画像化しないほうが修正も容易になるためメンテナンス製も高くなります。

デザイン目的だけにJavaアプレットやFlashを使わない

Web歳途上の機能やコンテンツとして必要なものではなく、例えばデザイン目的だけに使われるアプレットやFlashなどは使わないでおきましょう。

Javaアプレットを使うと、Javaの起動やアプレットの読み込みに時間がかかります。

本当に必要ならともかく、ただ凝ったタイトルロゴを表示するためなどにアプレットを使うと、アクセス者に大きなストレスを感じさせてしまうでしょう。

外部に独立できるソースは独立させる

スタイルシートやスクリプトは、独立したファイルに分離させておきましょう。

多くのブラウザは、一度読み込んだファイルをローカルにキャッシュしておき、何度もサーバから読み込むような事はしません。

スタイルシートやスクリプトのように、複数のページで共通して利用する可能性の高いファイルは、外部に独立させておくほうがWebサイト全体でのアクセス速度は向上します。

また、HTMLソース内にたくさんそれらを書き込むと、メンテナンスが行いにくくなるデメリットもあります。

たとえ、その1ページからしか読まれない事が解っているスクリプトやスタイルシートであっても、将来的に他のページで使うことになるかも知れませんから独立させておくほうが望ましいでしょう。

段組構成は、上部で一旦区切る

段組レイアウトを使っている場合、買う壇が縦に長いと、上部の表示に時間がかかる可能性があります。

なぜなら、段組構成は、上から順番に表示されるわけではなく、1段ずつ順番に表示される事になるからです。

長い段組構成によって表示が遅く感じられるのを避けるには、ページ上部で段組構成を一旦区切るのが有効です。

そうすると、ページ上部の段組構成だけが速く表示されるようになります。

上部にコンテンツと関係ない文章を掲載しない

各ページに共通の文章や、著作権表記、使用上の注意、面積事項など、そのページコンテンツと無関係な内容は、上部には配置せず下部に移動させましょう。

全体のデータ量は変化しなくても、体感表示速度が変わります。

ページにアクセスしたとき、最初に余計な文章が表示されている場合と、最初から本文が見えている場合とでは、校舎のほうが速く表示されているように感じられます。

面積の大きな画像は下部に表示させるか、本文を回り込ませる

ページ上部に巨大な画像を配置すると、その画像の表示が完了するまで何も表示されていないように感じられてしまう可能性があります。

その場合は、その画像の表示にかかる時間がそのままページの待ち時間になってしまいます。

大きな画像を表示する必要があるページでは、本文を先に配置して画像を下部に表示させたり、画像の横に本文を回り込ませて配置したりするなど、文字列を上部に配置するようにしましょう。

そうすると、画像が表示されていない段階でも本文を読み始める事ができるため、待ち時間が長く感じられません。

ページを軽くする事は検索エンジンに対しても有効

余計なものを排除してページを軽くする事には、SEO目でのメリットもあります。

余計な記述を省く事でデータサイズを小さくできた場合、検索エンジンに対しても本当に必要な点だけを読ませられる事になるからです。

それによって、話題が特定されやすくなったり、重要なキーワードの出現頻度の低下を防いだりできます。

リンク切れを放置するとメンテナンス不足で情報が古いと思われるかもしれません

ツールでチェックしましょう。

リンク切れは必ずチェックする

「リンク切れ」とは、リンクしている先のページが存在しない事です。

リンク切れは放置せず、発見し次第修正するようにしましょう。

リンク切れがあると、リンク先を読もうと思ってクリックしたアクセス者の期待を裏切る事になります。

また、メンテナンスを怠っているサイトだとも考えられ、検索エンジンからも良くは評価されません。

特に、ディレクトリ方検索サイトへの登録審査では、リンク切れは大きなマイナス要因になってしまいます。

極力リンク切れは放置しないようにし、新たにリンクを作った場合は必ず正しく移動できる事を確認しましょう。

特にリンク先が自分のWebサイト内のページの場合、のリンク切れは放置しないようにしましょう。

自分のWebサイト内のページへのリンクでリンク切れがあると、全くメンテナンスされておらず、情報が古いような印象を与えてしまいます。

そのような印象を与えると、実際が同であってもい、更新頻度も低いように感じられてしまいます。

そうすると、リピーターの獲得も難しくなるでしょう。

リンク切れは必ずなくしておくようにしましょう。

外部サイトへのリンクも、発見しだいリンクを削除するなり、別のページへのリンクに修正するなりしておきましょう。

トップページではないページへ著癖うチン苦していた場合は、リンク先のページが削除されただけかもしれないので、トップページへアクセスしてみて移動したのか削除されたのか確認してみましょう。

トップページも消えてしまっている場合は、Webサイトが移転されたのかもしれません。

検索サイトからWebサイト名などで検索して、移転先を探しましょう。

Webサイト内の全てのリンクを常にチェックし続けるのは大変です。リンク切れを確認できるサービスやツールを活用して定期的にチェックするようにすると、楽にメンテナンスができます。

弊社がインストールしたDrupal-CMS環境では、ページタイトルが自動的にページURLと対応します。
ページタイトルを変更した場合は、ハイパーリンクの対応も、自動的に新しいタイトルに対応します。
従って、パイパーリンクがエラーで残ってしまう事はありません。

リンク切れを効率用句チェックする方法

Googleが提供している「Googleウェブマスターツール」を使うと、リンク先がNot Foundだった数とそのリンク先を教えてくれます。

このサービスを活用する事で、Googleの区ローラーがアクセスできなかったページを知る事ができます。

また、ローカルのHTMLファイルを順次読んで、リンク切れを自動的にチェックしてくれるソフトウェアを活用する方法もあります。

検索エンジンの区ローラーがアクセスしようとしなかった部分も含めて、全てのリンクをチェックできます。

直帰率を調べる

どれくらいのアクセス者が1ページだけの閲覧で帰ってしまっているのかを示す「直帰率」は、Webサーバのアクセスログを会席すればわかります。

利用しているWebサーバーのアクセスログファイルが入手できるなら、それを解析ソフトなどに読み込ませて調べてみましょう。

もしアクセスログが入手できないなら、GoogleAnalyticsのようなアクセス解析サービスを利用すると良いでしょう。

Google Analyticsは、無料で利用できるアクセス解析サービスです。

解析したい対象の全てのページに指定のHTMLを埋め込まなければ利用できませんが、それさえできればグラフィカルで詳しいアクセス解析結果を閲覧する事ができます。

直帰率や、ユーザの移動経路、閲覧時間など様々な情報をグラフと数値で見ることができます。

ページ内リンクがあれば、より便利にリンクできるように

各見出しの位置に直接リンクできるようHTMLを記述しておくと、よりリンクしやすくなります。

ページの途中に対してもリンク可能にする

1ページが長くなる場合は、ページ内リンクを設けておくことで、外部サイトからでもページの途中に直接リンクできるようになります。

ページ中の特定の箇所へのリンクが可能になると、言及したい箇所にピンポイントでリンクできるようになるため、リンクされやすくなります。

縦に非常に長いページでページ内リンクがない場合は、そのページにリンクしても、読者に参照してほしい場所を特定する事が難しくなってしまいます。

ページ内リンクがあれば、より便利にリンクできるようになりますから、作っておきましょう。

ページ内リンクの作り方

ページ内リンクを作る（作れるようにする）には、HTML内で「リンク先ポイント」にしたい要素にid属性の記述を加えます。

このid属性の吹かされた位置を直接指し示す事ができます。

a要素のname属性を使う方法も

見出しなどをリンク先にする場合、a要素のname属性を用いてもページ内リンク意のリンク先に指定可能です。

「見出し」の中に最適化したいキーワードを含める

書かれている話題を判断するために「見出し」要素は重要です。見出しのレベルに合わせて正しく活用しましょう。

見出しの内容は検索エンジンに重視される

検索エンジンは、本文中の「見出し」に書かれた文字列を、そのページで扱われている内容の判断に利用します。

「見出し」には、続く段落の内容を端的に表現した文字列が含まれていると考えられるため、「見出し」の中に最適化したいキーワードを含めるようにすれば、検索エンジンに対してページの話題をより的確に伝えられるようになります。

HTMLには、「見出し」を表現する要素が6種類用意されていますので、これらを旨く活用しましょう。

その6種類は、重要度によって分かれており、「h1」が最も重要な見出しで、「h2」、「h3」・・・と続き「h6」まであります。

段落の内容に合わせて、これらの見出しを「h1」から順に活用します。

見出しにキーワードを旨く含める

見出しには、そのページで最適化したいキーワードを含んでおくようにします。

例えば、最適化キーワードを「検索エンジン」とし、検索エンジンの「概要」・「歴史」・「将来」を話題にしているページを考えます。以下のような見出しでは大にレベルの見出し（h2要素を使った見出し）にキーワードが含まれていないため、SEO効果がありません。

以下のように、キーワードを含めておく事で、重要なキーワードを検索エンジンに伝える事ができ、SEO効果が得られます。

尚、見出しの中に大量の単語を含めても意味がありません。

一つの見出しの中に、たくさんの単語を含めれば含めるほぢ、1単語辺りの価値（重要度）が相対的に下がってしまいます。

また、同じ単語を何度も繰り返し記述すると、検索エンジンスパムと判断されかねません。

見出しには、最適化キーワードを1階ずつ含む、短い文字列を書いておきましょう。

文章構造に合わせて見出しを使い分ける

サイト名やコーナー名など最も重要な見出しには、h1要素を使います。そこから見出しのレベル順に応じて、h2/h3・・・のように順番に使い分けます。

同じレベルの見出しはページ中に何度出てきてもかまいませんが、論理的におかしな構造にならないようにしましょう。

例えば、未だ1度もh2要素が登場していないのに、h3要素が登場する事は構造上おかしいです。

ただ文字サイズを大きくするだけでは「見出し」にはならない

文字のサイズを大きくして「見出しのように見せる」だけでは、見出しとしては不十分です。

ブラウザの閲覧者向けにはそれだけでも通用しますが、検索エンジンは「見出し」だとは認識できません。

「見出し」だと認識されるためには、「見出しをあらわす用語」を使う必要があります。

画像を見出しにする場合でも使える

見出しを画像にする場合でも、見出しを表現する要素内に画像を入れておけば、検索エンジンなどは、その画像の大が絵文字（alt）を見出しとして解釈します。

例えば、画像をつるimg要素をh1要素に含めます。

これで、imgタグにalt属性で指定した文字（大が絵文字）が、「見出し」として解釈されます。

装飾はスタイルシートで

代表的なブラウザでは、見出しの重要度に応じて表示される文字のサイズが変わります。

h1は最も大きな亜文字で、h2/h3・・・と段階を経る誤とに小さくなってゆきます。

装飾が気に入らない場合でも、表示させたい文字サイズを基準にして見出しのレベルを選んではいけません。

文字サイズはスタイルシートを使って自由に変更できるので、文章構造に沿って要素を使いましょう。