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

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

最終更新日:2018.1.7 Update!!
ウェブサイトのデザインをやっていて、ページ内で使うデザイン素材などのアイデアに困ることってありませんか?特に数や種類が多い場合はいろいろと考えないといけないので大変ですよね。特に見出しやテーブル、リストなどはある程度のバリエーションが必要となります。   そこで、サイト制作時に困らないように汎用的に使えるようなデザインを集めてみました。第一回目の今回は見出しのデザインをテーマに種類別にまとめてみました。  
線で構成された見出しデザイン
ボーダーなどの線を使って構成された見出しデザインです。全体的にシンプルなものが多く、サイトに馴染みやすくとても使いやすいデザインが多いです。   1.太めの左ボーダー   いろいろなウェブサイトで使える汎用的な見出しデザイン集     2.上下に太さの異なる二重線   いろいろなウェブサイトで使える汎用的な見出しデザイン集     3.中央に水平線   いろいろなウェブサイトで使える汎用的な見出しデザイン集     4.点線の下ボーダー   いろいろなウェブサイトで使える汎用的な見出しデザイン集     5.二重線の左ボーダーと細い下ボーダー   いろいろなウェブサイトで使える汎用的な見出しデザイン集     6.細い枠線   いろいろなウェブサイトで使える汎用的な見出しデザイン集     7.色の異なる太めの下ボーダー   いろいろなウェブサイトで使える汎用的な見出しデザイン集  
矩形や帯がベースの見出しデザイン
背景色がついた矩形や帯を使ったデザインです。インパクトがあるので目立たせたい時に使えます。またセクションごとの区切りもしっかりとつけることができます。主張が強くなるのでサイトデザインにしっかりと合わせていく必要があります。   8.角丸の枠線・背景色付きの帯   いろいろなウェブサイトで使える汎用的な見出しデザイン集     9.左ボーダーに背景色付きの帯   いろいろなウェブサイトで使える汎用的な見出しデザイン集     10.背景色付きの帯に折り返し(リボン風)   いろいろなウェブサイトで使える汎用的な見出しデザイン集     11.背景色付きの帯に上下の点線と上部インナーシャドウ   いろいろなウェブサイトで使える汎用的な見出しデザイン集     12.上ボーダーにグラデーション背景の帯   いろいろなウェブサイトで使える汎用的な見出しデザイン集     13.一部に背景色がついた帯(マーカー風)   いろいろなウェブサイトで使える汎用的な見出しデザイン集     14.矢印付きの吹き出し型   いろいろなウェブサイトで使える汎用的な見出しデザイン集    
ワンポイントのアイコンが付いた見出しデザイン
見出し文字の先頭にアイコンが付くタイプになります。デザインとしてのアクセントや見出し文字に関連する意味をつけることができます。ボーダーと合わせることでバリエーションに変化をつけることができます。   15.先頭にマークと下ボーダー   いろいろなウェブサイトで使える汎用的な見出しデザイン集     16.先頭にマーク   いろいろなウェブサイトで使える汎用的な見出しデザイン集     17.ナンバリングのマークに下点線   いろいろなウェブサイトで使える汎用的な見出しデザイン集     18.チェックマークが付いたリスト風   いろいろなウェブサイトで使える汎用的な見出しデザイン集     いかがでしょうか?普段からよく目にする見出しですが、あげてみると以外と多くのデザインバリエーションがありますね。デザインによって与える印象も異なるので、サイト全体とのバランスと合わせて選択することが大事なのではないでしょうか。   ちなみにですが、今回紹介した見出しデザインはすべてCSSで再現することが出来ます。サンプルは【こちら】をご覧下さい。   また、過去にもCSSを使った見出しデザイン例を上げていますので、こちらも参考にどうぞ。   参考記事:「CSSで作る見出しデザイン」  
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram