見やすいページはメリハリが決め手｜育つホームページの作り方-07
ranacoホームページ作りのヒントをお伝えするシリーズ。
これまでお伝えしてきたことはコチラ。
[/aside]
目次
文章データをコピペで流し込む
前回の記事「6. 多すぎるメニューは混乱の元」で、空っぽのページを作り、階層構造を考えて配置しました。
次はいよいよ「3. 文章を用意する」で準備した文字データを、空っぽの各ページにコピペしていきましょう。
テキストエディタ（アプリ）に保存していると思いますので、コピペしたものは文字の装飾が無いベタ打ちの文章かと思います。
もし、文字装飾をしてある場合は、テキストでコピペできる機能があればソレを使ってくださいね。
見出し機能を使う
「3. 文章を用意する」で準備した文字データには、見出しになる部分を決めていたはずです。
その部分に、見出しの機能を設定していきます。
見出しは、アメブロを使っていた人にはお馴染みの機能かと思います。
あなたの使っているホームページの編集画面に、このような見出し設定ボタンはありますか？
下の画像の例は、ワードプレス（Classic エディタ）です。
見出しを使うメリット
１．メリハリが出て見やすくなる
文字ばかりになりがちな説明ページなどは、見出しを使うことでメリハリが生まれ、見やすくなります。
２．何について書いてあるかわかる
見出しは内容の要約を表す場合がほとんどです。
「以下の内容はコレについて書きます」と伝える役割があり、読み手側にとっても内容が頭に入りやすくなります。
また、見出しの記述を工夫することで読み手の興味を引くこともできます。
３．目次を自動で設定できる
このブログのように、見出しを設定することで、（プラグインを使えば）自動的に目次を作成することが出来ます。
目次には各見出しにリンクが張られるので、例えば長い文章が並ぶ記事でも、読者が目次から読みたい項目をクリックすれば、ページ内の見出しに瞬時にジャンプすることができます。
４．SEO対策的にもおススメ
見出し１の下に見出し２、見出し２の下に見出し３、というように、見出しの順番を正しく使うことで、ページ内の構造が明確になります。例えば、見出し１の内容をわかりやすくするために、見出し２を使って内容ごとに分類しそれぞれ詳しく説明する、というような状態のことです。
ダラダラ説明されても頭に入ってこないものですが、見出しによってコンテンツの構造がわかれば読み手の理解も深まります。また、読み手だけでなく、検索エンジンにもコンテンツの構造を理解してもらうことができます。
見出しは正しい順番で使うべし
見出しの順番を正しく使わないと構造が分かりにくくなるばかりでなく、検索エンジンの評価を下げることにもなりかねません。
「この見出しのこのデザインが使いたいから」といって、見出しの構造の大小を無視して好き勝手に見出しを使うのはやめましょう。
ブツブツ改行することの良し悪し
「余白がたくさん空くと、なんだか間が抜けて見えるから」といって、文章をブツブツ改行する人がいますが、個人的にはあまりおススメしません。
インスタグラムやツイッターなどのSNSではそれで良くても、ホームページとなると話は違います。
なぜならば、見る側の環境は様々だからです。
パソコン・タブレット・スマホなど、端末によって表示領域の横幅は違いますし、スマホの場合は特に人によって見やすい文字サイズに調整している場合があります。
つまり、自分がベストだと思って改行した位置が、見る側の環境によってはズレていて、変な場所で改行されている可能性が高いのです。
中にはズレていても「気にならない」という人もいるかもしれませんが、「変な位置で改行されていることが気になって気になって内容が頭に入ってこない」という人もいます。
どんな環境でも見る側にストレス無く内容を伝えたいのであれば、ブツブツ短く改行せず、せめて「。」までの１文を続けて入力したほうが良いでしょう。
適切な場所に適切な写真を効果的なサイズで配置
文章をコピペし、見出しを設定したら、次は「4. 画像素材は妥協するな！」で用意した画像素材を配置していきます。
写真やイラストは、読み手に文章の内容を理解させるために大きな役割を担います。
文章だけで説明してもイメージしにくいような箇所に配置したり、読み手に期待感や興味を持たせたい部分で切り札としても使っていきましょう。
写真のサイズにも注意が必要です。
小さすぎると詳細がわかりにくくなり、かえって見る側をイライラさせてしまいますし、大きすぎても全体像がわかりにくくなってしまいます。
文字装飾は効果的に
過剰・多用はNG
文章内の特に強調したい部分に、太字や下線、文字サイズ・文字色の変更をして、目立たせる工夫をする人も多いかと思います。
アレもコレも大事だからと言って文字装飾を多用しすぎるのは、かえって逆効果です。
どこが大事なのかわからなくなったり、ガチャガチャしすぎて内容が頭に入ってこないなど、マイナスに働いてしまうこともあるからです。
特に注意してほしいのは、次の３つです。
太字の使い方に注意
太字の設定をした部分は、HTMLでは <strong>～</strong> と表記されます。
ストロング、つまり強調したい部分、「ここは大事ですよ」と言う意味です。
読み手に大事なポイントを伝えるだけでなく、検索エンジンにも伝えることになるので、SEO対策的にも太字での強調は、適切な使い方をしていかなければいけません。
たまに見かけるのですが、ページ全体の文字が太字になっているパターン。
文字が細くて見えにくいから太字にしているのかもしれませんが、これは大NGですからご注意を！
文字色の数に注意
１ページ内、あるいはホームページ全体を通して、文字色の数は３色までにすることをお勧めします。
３色とは、
- 本文
- 強調（注意）
- リンク
の３つです。
文字を多色使いすると落ち着かない印象を与えますし、目立たせようとして使っていたとしても色の多すぎはかえって逆効果です。
リンク文字の色は、他所で使うな
特に、リンク文字の色は１つに決めておく必要があります。
（青色の場合が多いですね）
間違っても、リンク色に決めたのと同じ色や同系色を、他の部分で使わないようにしてください。
リンク色が決まっていれば、ページ全体を通して「ここはクリックできる箇所」と読み手に伝わりやすく、クリック率も上がりますが、他の場所でリンクされていない文字に使っていると混乱を招きます。
箇条書きで簡潔に
番号無しリストや、番号付きリストを使うと、箇条書き設定が簡単にでき、内容をスッキリ簡潔に伝えることができます。
（この機能を使うと、２行目が自動的に「ぶら下げインデント」の設定になって行頭のマークから１文字下がった位置にぶら下がり、パソコン・タブレット・スマホなど端末が変わってもキレイに箇条書きになります）
表で見やすく
表の機能を使うと項目が整然と並び、内容が比較しやすくなったり、スッキリ見やすくなります。
ただし、パソコン・タブレット・スマホなどさまざまな端末で見られることを考慮して、項目が複雑で多い場合は、表にしない方がよい場合もあります。
まとめ
今は、パソコン・タブレット・スマホなど、閲覧環境が異なります。
見る側の見やすさ、読みやすさ、理解しやすさを一番に考えて、最適な方法でページを作っていくようにしましょう。
[aside type=”normal”]育つホームページの作り方
NEXT→「8. トップページは役割を考えて作る」
BACK→「6. 多すぎるメニューは混乱の元」
[/aside]
