独学で極める “Webデザイン”の技と心

第6回 見出しの重要性/見出しデザインの練習をする方法

この記事を読むのに必要な時間:およそ 1.5 分

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

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

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

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

機能面:
  • 長い文章であっても見出しを見るだけで話題の輪郭がつかめるもの。
  • 情報量が膨大であっても,見出しをひととおり見るだけで全体像がつかめるもの。これは何もウェブサイトに限りません。例えば書籍の目次などが参考になるので例をあげると,優れた見出し(目次)であれば,すぐに目的のページへたどりつくことができる上,どのような本なのかをおよそ理解できます。
視覚デザイン面:
  • 本文との違いが理解できるもの。
  • 見出しレベルごとに強弱が理解できるもの。
  • 文書全体のイメージをつくりだし,また他の要素と調和しているもの。

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

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

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

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

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

リニューアル前のmixi

リニューアル前のmixi

リニューアル後のmixi

リニューアル後のmixi

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

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

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

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

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

著者プロフィール

山田あかね(やまだあかね;purprin)

エスカフラーチェLLC,デザイナー。名古屋出身。Web業界とまったく関係ない業種で独立して働く傍ら,Web/XHTML/CSS等技術を独学。2005年「コトノハ -○×ソーシャル」のデザインリニューアルを行ったのをきっかけに上京し転職。株式会社paperboy&co.で主にソーシャルブックマークサービス(POOKMARK Airlines)等の Webサービス開発に携わる。2007年1月,エスカフラーチェLLC の設立に参画し,デザイナーとして幅広く活躍中。

URLhttp://purpr.in/blog/

コメント

コメントの記入