アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » WEB+DESIGN STAGE » 連載 » 独学で極める “Webデザイン”の技と心 » 第6回 見出しの重要性/見出しデザインの練習をする方法

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

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

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/

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

読むウェブ ~本とインタラクション

ディスプレイで読む活字とそのインタラクション(interaction:相互作用)について,最新Webを紹介しながら読み解いていく。

いま,見ておきたいウェブサイト

この連載では,国内外の最新のウェブサイトを隔週更新で取り上げ,これら最新サイトの特徴や素晴らしい部分を,さまざまな角度から解説していきます。

Windows phoneアプリケーション開発入門

Windows Marcketplace for Mobileがサービス開始され,作成したアプリケーションを個人でも世界をターゲットに公開できる環境が整ってきました。これを機にWindows phoneアプリケーションの開発をしてみませんか?

ここは知っておくべき!Windows Server 2008技術TIPS

5年ぶりのサーバOSとなったWindows Server 2008が出荷されて早2年。2009年にはR2が出荷され,再び注目を集めています。発売前から実施したトレーニングによって感じた,インフラエンジニアの方々に知っておいていただきたい機能を中心にご紹介します。

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス