CMS、SEO、ホスティング情報など｜Drupalブック

見やすく、読みやすく、解りやすいページつくりは、ユーザビリティの面からも重要です。

人が読む事を常に意識する

検索エンジン向けの対策を施しても、アクセス者にとって読みにくいページならすぐに変えられてしまいます。本文は読みやすく、配色は見やすく、ナビゲーションは解りやすく作っておく事で、直帰率は下げられます。SEOテクニックだけを駆使するのではなく、最終的にページを読むのは「人」だという点を忘れず、「読みやすさ」も考える必要があります。

読みやすい本文にする

本文を読みやすくするため、特に文章が長くなる場合には、次の点に注意すると良いでしょう。

1. 小見出しを加える
   長文でも細かい塊に分割すれば読み約すなります。
2. 行間を広めにする
   行間が狭いと、文字の塊が目立って読みにくくなります。
3. 画像を加える
   文字だけよりも画像があるほうが、より内容を把握しやすくなります。
4. 文字サイズを固定してたり画像にしたりしない
   読みやすい文字サイズは閲覧者によって異なるため、自由に変区おできるようにしておきましょう。

小見出しを加える

文章中には適時「小見出し」を加えましょう。小見出しを加える事で、文章を小さなブロックに分割する事ができ、内容が把握しやすくなります。HTMLには「見出し」を表現する要素（タグ）が用意されていmス。それらを活用して小見出しを作りましょう。小見出しを構成する文字に、最適化したいキーワードも含んでおけば、SEO面でも有効です。

行間を広めにする

代表的なブラウザでは、標準で0.2?0.25文字程度の行間が確保されます。この行間は、長文を読むには余り十分ではありません。長文を読みやすくするためにスタイルシートを使えば、行間を広く確保する事ができます。0.3?0.4文字分程度の行間があると望ましいでしょう。

画像を加える

画像を加えて説明できる箇所にはできるだけ画像を含めておきましょう。文章ばかりが続くよりも、画像があるほうがわかりやすく読みやすくなります。

文字サイズを固定してたり画像にしたりしない

文字サイズは閲覧者が自由に変更できるよう、サイズを固定したり画像化したりしないようにしましょう。文字を画像化してしまうと、閲覧者がサイズを変更できなくなりますし、検索にもかからなくなります。テキストよりも画像のほうが修正が容易でないため、メンテナンス製も低下してしまいます。画像化にはデメリットばかりで特に良い事はありません。

適切な文字サイズは閲覧者によって異なりますから、文字サイズは固定しないようにしましょう。スタイルシートを使って文字サイズを指定する場合に、単位として「pt」や「px」を使うと、一部のブラウザでは文字サイズの変更ができなくなってしまいます。文字サイズを指定したい場合は、基準となるサイズから相対的なサイズを指定できる単位（「％」や「em」など）を使うと良いでしょう。

見やすいレイアウトにする

ページのレイアウトには、横幅のサイズを固定しない「リキッドレイアウト」を採用しましょう。横幅のサイズを固定してしまうと、閲覧者のWindow幅によっては横スクロールが必要になったり、無駄な空白部分ができてしまったりします。リキッドレイアウトであれば、Window幅に合わせた表示になるため、読みにくくなたリ空間を無駄にしたりすることがありません。

Window幅を想定よりも狭めたり広げたりしたとき、読みにくくならず、空間を有効に活用できるのは「リキッドレイアウト」です。作成者が想定したWindowは場で閲覧する限り、固定幅でもリキッドレイアウトでも見え方に差はありません。しかし、閲覧者のWindow幅は様々ですから、作成者と異なる場合のほうが多いことを忘れないようにしましょう。

段組を使っている場合で全体を固定幅で作成していると、閲覧者がスクロールしない限り、未日は市の段が見えない場合があります。また、左右の段の横幅だけを固定し、中断を河畔は場にしているとき、Window幅が狭いと、非常に縦長になってしまう事があります。前者の場合は、重要なナビゲーションは、右側よりも左側に配置するほうが良いでしょう。後者の場合は、できるだけ固定幅の段の横幅を大きくとらないようにしましょう。3段以上の場合は、段数をもっと減らせないかについても検討する必要があります。

見やすい配色にする

文字色と背景色とのコントラストを確保するようにします。背景色を明るくした場合は文字色を暗く、閉経職が暗い場合は文字色を明るくしましょう。カラフルに色をつけた場合、コントラスト費が低くなってしまっている事があります。カラーコントラストをチェックできるツールなどでページの配色をチェックすると、気付かないうちに見えにくい組み合わせを使っていないかを簡単に確認できます。