ウェブサイトのデザインをやっていて、ページ内で使うデザイン素材などのアイデアに困ることってありませんか？特に数や種類が多い場合はいろいろと考えないといけないので大変ですよね。特に見出しやテーブル、リストなどはある程度のバリエーションが必要となります。   そこで、サイト制作時に困らないように汎用的に使えるようなデザインを集めてみました。第一回目の今回は見出しのデザインをテーマに種類別にまとめてみました。  

線で構成された見出しデザイン

ボーダーなどの線を使って構成された見出しデザインです。全体的にシンプルなものが多く、サイトに馴染みやすくとても使いやすいデザインが多いです。   1.太めの左ボーダー       2.上下に太さの異なる二重線       3.中央に水平線       4.点線の下ボーダー       5.二重線の左ボーダーと細い下ボーダー       6.細い枠線       7.色の異なる太めの下ボーダー    

矩形や帯がベースの見出しデザイン

背景色がついた矩形や帯を使ったデザインです。インパクトがあるので目立たせたい時に使えます。またセクションごとの区切りもしっかりとつけることができます。主張が強くなるのでサイトデザインにしっかりと合わせていく必要があります。   8.角丸の枠線・背景色付きの帯       9.左ボーダーに背景色付きの帯       10.背景色付きの帯に折り返し（リボン風）       11.背景色付きの帯に上下の点線と上部インナーシャドウ       12.上ボーダーにグラデーション背景の帯       13.一部に背景色がついた帯（マーカー風）       14.矢印付きの吹き出し型      

ワンポイントのアイコンが付いた見出しデザイン

見出し文字の先頭にアイコンが付くタイプになります。デザインとしてのアクセントや見出し文字に関連する意味をつけることができます。ボーダーと合わせることでバリエーションに変化をつけることができます。   15.先頭にマークと下ボーダー       16.先頭にマーク       17.ナンバリングのマークに下点線       18.チェックマークが付いたリスト風       いかがでしょうか？普段からよく目にする見出しですが、あげてみると以外と多くのデザインバリエーションがありますね。デザインによって与える印象も異なるので、サイト全体とのバランスと合わせて選択することが大事なのではないでしょうか。   ちなみにですが、今回紹介した見出しデザインはすべてCSSで再現することが出来ます。サンプルは【こちら】をご覧下さい。   また、過去にもCSSを使った見出しデザイン例を上げていますので、こちらも参考にどうぞ。   参考記事：「CSSで作る見出しデザイン」