無料ツールお役立ちリンク参考書籍お知らせこのサイトは2010年頃の更新をもって活動を終了しております。閉鎖してしまうには惜しい記事も多いことから、公開に問題の無いものだけをアーカイブ的に掲載し続けていますが、今となっては古い情報が多いです。そのことを十分にご承知の上、何かにご参考いただければ幸いです。>メリハリをつけよう見た目にもわかる違いが、意味の違いをハッキリさせます。内容に合わせて、見た目のメリハリをつけましょう。意味の違いは見た目にも分けよう人は、見栄えの違うものに意味の違いを感じます。そのため、話の中で情報の意味合いが異なる部分は、色や形などの見た目を他の部分と分けておくことで、違いをよりハッキリさせることができます。箇条書きや表はデータをわかりやすく表現するものですが、そこだけ形が変わっているために、データの領域であることがよりハッキリするという効果も併せ持っているわけです。文章の見た目にメリハリをつけてみましょう。HTMLで正しくタグ付けされた文章なら、CSSなどのスタイルシートを用いて自由にデザインを変えることができます。次に3つほど、基本的なポイントについて説明します。見出しの文字サイズにメリハリをつけよう新聞を読んだとき、大きな文字で書かれた見出しほど注目してしまうものです。このように見出しのサイズをその重要性に合わせて大きく見せることで、「どこに・何がある」のかがよりわかりやすくなります。見出しの文字サイズが大きい文章1番目と2番目では、2番目の方が「どこに・何がある」のかがわかりやすくなっています。見出しがより目立つようになったため、本文の内容を示す目印としての機能がうまく働くようになったからです。文字サイズが本文よりも大きい見出しほどよく目立つわけです。本文の内容によっては、2番目の方は少々しつこさを感じさせるかも知れません。落ち着いた印象を持たせたい場合には1番目の方が適切と言えます。見出しの文字サイズが小さいほど落ち着いてみえるわけです。以上のような見出しなどの文字サイズと本文の文字サイズの比率を、デザイン用語では「ジャンプ率」と呼びます。ジャンプ率の違いは、次のような働きをします。ジャンプ率が高いほど、文章にメリハリがつき、活気ある印象になる。高すぎると、見出しと本文が分離した印象になって、かえって読みづらいジャンプ率が低いほど、落ち着いて格調高い印象を与える。低すぎると、見出しが見出しとしての機能を果たさなくなり、読みづらくなる見出しの適切な大きさは、伝えたい印象や、基本となる文字の大きさ、余白や行間とのバランス、見出しのレベルによっても変わってきます。いろいろな大きさを試して、あなたの文章に合ったものを考えてみましょう。ちなみに、一般的なウェブブラウザ上で表示される標準状態での見出しの大きさは、大半の人が「しつこさ」を感じるようです。CSSでは文字の大きさをfont-sizeプロパティで指定します。見出しと本文の行間を近づけよう人は、見た目がまとまっているものに、意味のまとまりを感じます。話の中で意味のまとまりがあるブロックは、見た目にもまとめておきましょう。文章の中で1番大きな意味の固まりは見出しのレベルなので、まずは見出しとその本文との行間を近づけてみましょう。見出しを本文に近づけた文章1番目よりも2番目の方が、どこで何を説明しているのかわかりやすくなりました。このように、見出しとその本文が表示される距離を縮めておけば「同じブロック」だということがわかりやすくなります。逆に、情報のブロックとブロックが離れているほど、意味としても離れた印象を出すことができます。段落と段落の間は単なる改行より行間隔が広いため、意味として違う部分だとわかるわけです。見出しにしても、段落にしても、情報のブロックをあまり離しすぎると文章としてのまとまりが無くなります。いろいろな間隔を試して、あなたの文章に合ったものを考えてみましょう。CSSではmarginプロパティを使うことで、特定の情報ブロックに対して上下左右のマージンを指定することができます。重要な部分は他と色を変えてみよう人は、他よりも色合いの強いものに目が向きます。この商品をお使いになる前に、取扱説明書を必ずお読みくださいこの商品をお使いになる前に、取扱説明書を必ずお読みくださいこの例のように、強調している部分を目立つ色に変えることで、より重要性が感じられるようになります。この例のような強調があちこちで見られると、インパクトが薄れて効果が無くなるので注意しましょう。CSSでは文字色の指定をcolorプロパティで指定します。上の例では、強い強調(strong要素)を赤100%、緑5%、青5%の色にしています。逆引きハンドブック』のべ数百の文章テクニックを、困ったときに使いやすい逆引き形式で整理。