0%

Designデザインワークショップ

Posted:2016.06.30

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

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

 

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

 

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

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

 

1.太めの左ボーダー

 

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

 

 

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

 

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

 

 

3.中央に水平線

 

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

 

 

4.点線の下ボーダー

 

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

 

 

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

 

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

 

 

6.細い枠線

 

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

 

 

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

 

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

 

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

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

 

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

 

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

 

 

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

 

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

 

 

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

 

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

 

 

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

 

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

 

 

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

 

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

 

 

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

 

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

 

 

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

 

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

 

 

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

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

 

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

 

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

 

 

16.先頭にマーク

 

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

 

 

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

 

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

 

 

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

 

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

 

 

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

 

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

 

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

 

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

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】