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

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

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

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

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

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

「スタイル」パレット

「スタイル」パレット

※筆者の環境は Mac OSX の Word 2004 です。OSやバージョンによっては機能や表示が多少異なります

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

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

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

    見出しにしたい箇所を範囲選択

    見出しにしたい箇所を範囲選択

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

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

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

    新しいスタイルの作成

    新しいスタイルの作成

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

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

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

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

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

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

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

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

著者プロフィール

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

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

URLhttp://purpr.in/blog/

コメント

コメントの記入