難易度別、見出しデザインアイディア 7選【保存版・サンプルデータ付】

Webサイト制作には切り離すことのできない見出し。

今回はホームページ作成サービス「BiNDup」を使って、見出しの基本的な使い方からデザインのカスタマイズまで実例を交えてご紹介したいと思います。BiNDupのCSS機能「Dress」でできるデザインアイディアを難易度別に初級編〜上級編で用意してみました。サンプルデータをダウンロードしてぜひ利用してみてください。

見出しデザイン
サンプルを見る

見出しデザイン・初級編

背景色やボーダーを使った見た目・設定ともにシンプルな見出し。
簡単ではありますが角を丸くしたり、二重線にしたり、グラデーションにしたりと少しアクセントを加えるだけでも十分に扱えます。
こちらはDressの基本的な使い方だけでできますので、詳しい設定は割愛させていただきます。

カスタマイズ初級編のサンプル

見出しカスタマイズ初級編のサンプル

サンプル3つ目の「文字数の幅だけデザイン」では一部高度な設定で「表示形式」を「インラインブロック」にしています。
こうすることで、本来横幅いっぱいに広がる見出しですが、インラインブロックにすることで文字数の幅で表現したカスタマイズができます。

見出しの文字数に合わせて背景色や下線が適用される

見出しの文字数に合わせて背景色や下線が適用される

見出しデザイン・中級編

ここからは「高度な設定」を積極的に使用していきます。
短調な初級編とは違い少し複雑な形になったかと思います。

見出しカスタマイズ中級編のサンプル

見出しカスタマイズ中級編のサンプル

これらは高度な設定の「before要素」「after要素」を利用しており、これらの基本的な使い方は下記の記事を参考にしてみてください。
https://bindup.jp/camp/bind/29739

ポイント

中級編以降のポイントとしては、見出し全体に配置方法「相対位置」を設定します。
相対位置に設定しておくと、後に解説するbefore要素をコントロールするための基準を作ることができます。

見出しに「相対位置」を設定する

見出しに「相対位置」を設定する

before要素

中級編サンプルの「2色の下線を引いた見出し」では、見出しにアンダーラインを引きつつ、before要素で別色のラインパーツを作り、見出しのラインに重ねることで2色のアンダーラインを表現しています。

2色目のアンダーラインをbefore要素で作成

2色目のアンダーラインをbefore要素で作成

before要素で作成したラインパーツは、高度な設定「位置」で重ねる位置を調整します。

見出しの領域内で上から100%、左0%の位置にパーツを配置

見出しの領域内で上から100%、左0%の位置にパーツを配置

解説

その他のサンプルもbefore要素でパーツを作り、見出しに重ねることで表現しています。

斜め背景

before要素を変形し斜め背景を表現

before要素を変形し斜め背景を表現

吹き出し

before要素の枠線で吹き出しの先を作成

before要素の枠線で吹き出しの先を作成

見出しデザイン・上級編

中級編ではbefore要素のみでしたが、こちらからは「after要素」も取り入れていきます。
基本的は中級編とあまり変わりませんが、単純にbefore要素とafter要素で2つの装飾パーツが使えるのでより複雑な表現が可能です。

見出しカスタマイズ上級編のサンプル

見出しカスタマイズ上級編のサンプル

セリフ風

before要素・after要素は位置調整以外は同じ設定

before要素・after要素は位置調整以外は同じ設定

アイコン付き

こちらはbefore要素だけですが、アイコンの表示がちょっと特殊です。
本来Dress上で普段ブロックエディタで挿入できるアイコンフォントは使用できませんが、フォントを「bindicon」にし、内容をアイコンフォントのコードにすることでDressでもアイコンフォントを使用することができます。
今回のチェックマークでだと内容は「'\ea10'」になります。

ブロックエディタのアイコンをDressで利用

ブロックエディタのアイコンをDressで利用

アイコンフォント コード例
\ea10
\e91a
\e986
\e9b0
\ea03
\e946
\e971
\e96c
\e9d2
\e9cc

いかがでしたか?
読んでいるだけだと難しくて理解できない、と言う方は以下よりサイトデータをダウンロードして設定を確認してみてくださいね。
また、各見出しはブロックDressにしてありますのでお手元のサイトデータにもそのまま利用できるかと思いますのでお試しください。

この記事はBiND CAMP PASSメンバー専用記事です。続きを読むには対象商品を購入する必要があります。

BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

新規登録をして資料をダウンロード
  • POINT

  • 角丸や二重線などシンプルな見出しデザインなら初心者でも簡単
  • ワンポイントのデザインを加えたい場合は、見出し全体に配置方法「相対位置」を設定しよう
  • Dressを学びたいときはサンプルデータで設定箇所をチェックするとおすすめ

RECOMMEND ARTICLE