Webデザインに限らず、紙媒体、紙文書のデザインやプレゼンテーションのデザインに至るまで、見出し＋本文という組み合わせは非常に多く使います。

見出しは、文章のまとまりに対して要約した説明を示す役割があります（長い文章を全て読まなくても、本文におよそ何が書かれているのか判断するのを助けてくれる重要なものです⁠）⁠。

それではあらためて優れた見出しがどのようなものなのかを機能面・視覚デザイン面から再確認してみます。

私が考える「優れた見出し」とは

機能面：

• 長い文章であっても見出しを見るだけで話題の輪郭がつかめるもの。
• 情報量が膨大であっても、見出しをひととおり見るだけで全体像がつかめるもの。これは何もウェブサイトに限りません。例えば書籍の目次などが参考になるので例をあげると、優れた見出し（目次）であれば、すぐに目的のページへたどりつくことができる上、どのような本なのかをおよそ理解できます。

視覚デザイン面：

• 本文との違いが理解できるもの。
• 見出しレベルごとに強弱が理解できるもの。
• 文書全体のイメージをつくりだし、また他の要素と調和しているもの。

このようなものだと考えています。

機能面では特に、見出しが見出したる目的を果たしているもの／視覚デザインの面ではその目的を果たすようにデザインされているものは優れている見出しだと感じます。

このように見出しについて考えてみましたが、見出しの印象ひとつで文書やサイトの印象は大きく変化します。

見出しの変化によって変わる、見る人に与える印象の変化
～mixiのリニューアル事例より～

最近リニューアルされた大手SNSサイト mixi（ミクシィ）を例にとると、見出しのデザインにも大きな変更が加わりました。

もちろんmixiの例は、見出しだけでなく文字ピッチや行間も大きく変わっていますし、中央カラムの枠もなくなっているところなども印象を大きく変える要因になっていますが、見出しだけにフォーカスしても随分以前の印象とは異なります。

私の主観で申し上げるならば、以前のデザインで感じていたポップで親しみやすい印象は薄まり、どちらかというとクールで、見出しと本文とのコントラストが弱くなった印象です。

このように、見出しが与える効果はとても大きいと言えます。

それでは、これからWebデザインをはじめる方がよりよい見出しをデザインするにはどうすればよいでしょうか。

こればかりはサイト制作の経験を積むのが一番なのですが、まだサイト制作の経験がなくても、簡単に見出しデザインの練習をおこなう方法があります。

簡単に見出しデザインの練習を行う方法

グラフィックソフトがあったり、グラフィックソフトの扱いに慣れている場合は、それらのツールを使いながらサンプルの見出しや文章を打ち込み、デザインしていくのが最もポピュラーな方法ではないかと思いますが、グラフィックソフトがなくても、Wordのようなワープロソフトでも練習はできるのです。

Wordには、書式の見栄えを整える「スタイル」という機能があります。

1. まず、スタイル機能を使う前にWordにサンプルの文章を作ってみます。

   （⁠サンプルの文章は極力現実に使いそうなものにするとよいでしょう。よく「ダミーテキストです」というような文言の羅列をサンプルに使う方も見受けられますが、実際にありそうな文章のほうが出来上がりイメージがしやすいものです）

2. サンプル文章を打ち込んだら、見出しとしたい場所を範囲選択します。 （⁠見出しレベルも大きいものから小さいものまで色々ありますが、大きいものから始めます）

   

3. 範囲選択したところを、見出しらしいスタイルに書式を変更します。

   見出しにふさわしいフォントに変更したり、色を変更したりなど、あらかじめ決めたカラースキームに沿ってでも良いですし、練習ですから好きな色で試してみましょう。

4. 書式を変更したら、次にスタイルを登録します。

   

   スタイル機能を使う出番です。今、大見出しのフォントを変更して色をつけました。

   この文書で使う大見出しを共通して同じフォントやサイズ・色を繰り返し使えるようにするのです。範囲選択された状態で新しいスタイルを作成するボタンを押し、名称・基準スタイルなどを設定して登録します。さらに文字ピッチや行間を設定するオプションもあるのであわせて設定します。すると適用スタイルの選択一覧に、今設定したスタイルが選べるようになります。このスタイルを、見出しが出現するごとにあてていけばよいわけです。

HTMLやCSSを少しでも触ったことがある方ならピンときた方もいらっしゃると思います。まさにWordのスタイル機能は、Webページに対してCSSでやっていることと似たような働きをGUI化しているとも言えます。

同じような要領で、中見出し、小見出し、本文…というように書式を変更しながら、見やすくて訴求力のある見出しを備えた文書を作成していきます。

Wordでは色やフォントの他に、見出しやリストに画像を挿入することもできますので画像と色彩と文字ピッチと行間を意識しながらデザインの練習ができます。

なぜWordをとりあげたかと申しますと、この作業実は、見た目のデザインだけでなくHTMLのマークアップの基礎を覚えることに繋がるからです。

マークアップとは本来文書の構造や意味のしるしをつけていく作業であるため、プレーンな文書からどこが重要でどこが見出しであるのかを判断することが大切になります。

但しWordでは、ピクセル単位にこだわったデザインを行うのには向いていませんので、ある程度コツがつかめてきたらグラフィックソフトで細部までこだわってみましょう。Wordでできなかったことまで気をまわさなければならない分難易度は上がりますが、より美しく仕上げられることも確かですので楽しく練習できると思います。