毎回デザインに悩む！見出しデザインについて改めて考えてみる。
h1～h6までの見出しのデザイン。経験のない間は色々と悩むことが多かったので、そのことを踏まえて、今回は見出しデザインについて考えて見たいと思います。
見出しとは
まず見出しとはなにか。
記事の内容が一目で分かるように付けられた題名。 後に続く内容を端的に表したものもあれば、読者の目を引くことだけを目的にした内容と関係の薄いものも存在する。 （見出しとは - はてなキーワードより引用）
このままでも分かりますが、さら簡単に言うとしたら、
この文書の内容にはこういうことが書いてありますよ！
一言で言うならば、◯◯です！
この、◯◯の部分が見出しになります。
そもそもなぜ見出しが必要なのか
ではなぜそもそも見出しが必要なのか。
見出しにはどのような効果があるのか考えてみた。
・目を引く ・内容が一目でわかる
見出しには大きくこの２つの効果があると考える。
そのサイトを見る人にとって見出しとは、その内容が
「すぐに、わかりやすく理解することができるモノ」
になる。
また、SEO的にも、より検索エンジンが見つけやすくなる為、わかりやすく、簡潔なキーワードを見出しとして付けることが好ましいでしょう。
見出しデザインの仕方
ここで、やっとデザインが出てくる。
見出しをわかりやすく簡潔にするためには、他の文章との差別化が必要になる。
差別化の方法をまとめてみた。
1.文字の大きさ。
その他の文章よりもサイズを大きくすることでユーザーの目を引き、見出しだとわかりやすく伝えるとができます。
2.文字の色
色が他と違えば、必然的に他の文書との差別化が図られ、そこに目線が行きます。
3.フォントを変える
フォントが違えば、文字の線の太さや細さが他の文字と比べた時に目立ちます。
4.サイト内で統一されたアイコンが入っている
統一されたアイコンが入っていれば、そこは他のところと同じく見出しであるということがユーザーに伝わり、インプットされたその情報は次に同じアイコンを見た時に、これは見出しであるということがすぐにわかります。
見出しの組み合わせ
上記で説明した４つを組み合わせることで色々な見出しができると思います。
いくつか例を挙げたいと思います。
1.文字の大きさとフォント
2.文字の大きさと色
3.文字の大きさとアイコン
4.色とフォント
5.色とアイコン
6.フォントとアイコン
応用
1.文字の色とアイコンとフォントを組み合わせてみる。
2.文字の大きさとフォントとアイコンを組み合わせてみる。
このように組み合わせることで色々な見出しができる事がわかります。
他にも色々な組み合わせや方法があると思います。
この記事についてのまとめ
この記事が見出しを作るときの参考や、見出デザインを学ぶ上でのちょっとした注目する点として意識してもらえれば幸いです。
オススメの見出し記事
見出しのデザインを調べたりするときには、このサイトがおすすめです。
CSSだけでできる見出しはこちらのサイトがおすすめです。
見出しデザインの参考にしたい CSSで作るhタグのサンプル集
CSS 見出し要素をシンプルなHTMLで美しくスタイルするテクニックのまとめ
