Ownedmedia ウェブ制作に役立つコンテンツを発信中!

デザイン 2016.06.30

いろいろなウェブサイトで使える汎用的な見出しデザイン集

Tags: ,,,
最終更新日:Update

ウェブサイトのデザインをやっていて、ページ内で使うデザイン素材などのアイデアに困ることってありませんか?特に数や種類が多い場合はいろいろと考えないといけないので大変ですよね。特に見出しやテーブル、リストなどはある程度のバリエーションが必要となります。

 

そこで、サイト制作時に困らないように汎用的に使えるようなデザインを集めてみました。第一回目の今回は見出しのデザインをテーマに種類別にまとめてみました。

 

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

ボーダーなどの線を使って構成された見出しデザインです。全体的にシンプルなものが多く、サイトに馴染みやすくとても使いやすいデザインが多いです。

 

1.太めの左ボーダー

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

2.上下に太さの異なる二重線

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

3.中央に水平線

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

4.点線の下ボーダー

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

5.二重線の左ボーダーと細い下ボーダー

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

6.細い枠線

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

7.色の異なる太めの下ボーダー

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

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

背景色がついた矩形や帯を使ったデザインです。インパクトがあるので目立たせたい時に使えます。またセクションごとの区切りもしっかりとつけることができます。主張が強くなるのでサイトデザインにしっかりと合わせていく必要があります。

 

8.角丸の枠線・背景色付きの帯

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

9.左ボーダーに背景色付きの帯

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

10.背景色付きの帯に折り返し(リボン風)

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

11.背景色付きの帯に上下の点線と上部インナーシャドウ

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

12.上ボーダーにグラデーション背景の帯

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

13.一部に背景色がついた帯(マーカー風)

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

14.矢印付きの吹き出し型

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

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

見出し文字の先頭にアイコンが付くタイプになります。デザインとしてのアクセントや見出し文字に関連する意味をつけることができます。ボーダーと合わせることでバリエーションに変化をつけることができます。

 

15.先頭にマークと下ボーダー

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

16.先頭にマーク

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

17.ナンバリングのマークに下点線

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

18.チェックマークが付いたリスト風

 

いろいろなウェブサイトで使える汎用的な見出しデザイン集

 

 

いかがでしょうか?普段からよく目にする見出しですが、あげてみると以外と多くのデザインバリエーションがありますね。デザインによって与える印象も異なるので、サイト全体とのバランスと合わせて選択することが大事なのではないでしょうか。

 

ちなみにですが、今回紹介した見出しデザインはすべてCSSで再現することが出来ます。サンプルは【こちら】をご覧下さい。

 

また、過去にもCSSを使った見出しデザイン例を上げていますので、こちらも参考にどうぞ。

 

参考記事:「CSSで作る見出しデザイン」

 

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?