前回の記事にも書かせていただきました通り、
短期の目標として “ カテゴリーページが作れるぐらい記事を書くこと! ”
ということですので、今回はwebデザイン情報のカテゴリーを埋めるために
tips系の記事を書くことにしました。
ちなみにこの記事は、非デザイナーさんやデザイナーになったばかりの人に
オススメかも知れません。
(デザイナーさんは言わずもがな見出しの重要性に気づいているはずなので再確認の意を込めて読んでもらえれば嬉しいです)
他にも “ jQueryのプラグインとカスタムフィールドの連携〜 ” とか
“このサイトを作った時に苦労した所〜“ とか
色々書けそうなものはあったのですが、
今回はこの“見出し” っていうのが個人的に一番気になりましたし、
このサイトを作った時にデザインの中で一番深く考えたかも知れません。
(そうは見えないかもしれないけど…)
見出しが登場する所
まず自分のブログサイトもそうですが(まさしくこのうえのやつ!)、
他の人のブログサイトもそうですし、まぁwebに限らず、雑誌や小説など
基本的に読み物全般には存在すると思います。
あと企業サイトや通販サイトにも 「新着トピックス一覧!」や 「人気商品ベスト3!」
なんて書かれて、当然本文よりも目立って表記されています。
むしろ見出しのないコンテンツは、ほぼないと思っても構わないのでしょうか。
色んなタイプの見出し
とまぁそんなところで、 あんまり文章ダラダラ書いても飽きられそうなので、
自分の独断と偏見による “見出し” の種類をタイプ別に記載していこうと思います。
文字目立たせる型
見出しデザインの中でも一番シンプルなタイプ。 本文書体より大きくしたり、目立つ色に変えたり、太くしたりと文字自体を強調します。
背景色または背景イメージ型
文字の下に背景色やテクスチャーなどの背景イメージを敷くこと。 フラットデザインが騒がれている最近ではこのタイプをよく見かけるようになったと思います。
線型
文字の上下もしくはどちらかや、 囲む形で線が敷かれているタイプです。
リスト型
リストのように文字の左側にアイコンや図形が記載されているタイプです。
自分のブログサイトはこのタイプだと思います。
[ 使い分け ]
自分のサイトにあった型の見出しを選べば良いと思いますが、
一番手軽なのは、 文字目立たせる型ではないでしょうか。
文字を本文の1.5倍〜2倍大きくして(もっと大きくしてはる人もいます)
太くして、サイトデザイン自体のインパクトが強ければ それに負けないように
目立つ色に変えてやれば、それなりのものはできると思います。
(だいたいはサイトのメインカラーを使っている人が多いと思います)
あとある程度、上下にアキを作ってやること。
こんな感じ
ちなみに自分の場合は、なるべくシンプルで空きを活かしたデザインで、 メインカラーを使用しすぎることを避けたかった(使い過ぎるとPOPになる気がしたので…)ので と考えすぎた結果になります。たぶんもっと良い感じの見出しが眠っているはずやけども
自分のボキャブラリーが、あばばばば
結局何が言いたいかって言うと
「当たり前」なんて言われたらそれまでなんですが “見出し“ってとても大切!てことを改めて自戒を込めて言いたくてこの記事を書きました。
見出しを制すものは読みやすさを制す!
っていっても過言じゃないぐらい 重要な気がします。
今回は見た目の部分のデザインのみに注目しましたが、
構成要素(見出しと小見出しの関係とか)によって
どういう変化をつけていくのか、どの部分に見出しをおくのかで、
読みやすさがグンと変わることもあります。
また今回は、初歩的な見出しのタイプだけを載せましたが、テクスチャを下地にアイコンをつけるなんて見出しもたくさんあるので、色々と試行錯誤して自分のブログなど制作物にあった見出しデザインを考えてみましょう!
ブログを書いていてなんだか、読みにくいな、なんて考えているかたは一度、
見出しの付け方を意識してみてはどうでしょうか。
最後に
見出しのデザインに役立つサイトをいくつかリンク貼っておきました。
- 見出しデザイン.com
見出しのデザインがたくさんあるギャラリーサイトです。 - Webクリエイターボックス | Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
見出し以外も大切ですよね。 - Webpark | CSSの擬似要素を使った見出しデザイン
擬似要素を使えばデザインの幅がグッと広がります。
他にも参考にしたいって人は、Google先生に「見出し デザイン」で検索してもらえば
良い感じな参考サイトがたくさんあります。
あと、見出しのデザインには全く役に立たないかもしれませんが、
今回の参考画像作成時に使ったサイトのリンク貼っておきました。
- もんじろう
方言変換サイトです。 語尾の組み合わせによるのか反応しないものもあります。
Leave a Reply