見出しデザイン全５３種類の一覧【カラーサンプル付き】

この記事では、見出しデザイン全54種類を一覧にして紹介しています。

アコーディオンボックス内には、使用したカラーコードを記述していますので、デザインを設定する際の参考にしてみてください。

見出しデザインの設定方法はコチラです。

基本［カラーA:文字］

初期設定の見出しです。文字色のみ指定ができます。イメージは、デフォルトの文字色です。

下線

基本［カラーA：文字　B：下線］

カラーAは文字、Bは下線の色を指定。

【カラーサンプル】

	カラーA	カラーB
見出し２	デフォルトカラー	#adc2c3
見出し３		#a7baca
見出し４		#e08eb9
見出し５		#88b6ab

2本［カラーA：文字　B：下線］

カラーAは文字、Bは下線の色を指定。下線部分が2本になっているデザインです。

【カラーサンプル】

	カラーA	カラーB
見出し２	デフォルトカラー	#ed7476
見出し３		#f08972
見出し４		#8bc0b8
見出し５		#cedac6

1本点線［カラーA：文字　B：下線］

カラーAは文字、カラーBは下線の色を指定。下線部分が点線になってるデザインです。

【カラーサンプル】

	カラーA	カラーB
見出し２	#7a87b0
見出し３	#da8596
見出し４	#f08972
見出し５	#455d49

1本2色［カラーA：文字　B下線左　C：下線右］

カラーAは文字、Bは下線左、Cは下線右の色を指定。文字が乗っている下線の部分だけが「カラーB」になります。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#8682a5	#997bad	#e5e6f4
見出し３		#8682a5	#d6d3ea
見出し４		#ecb69f	#f9eada
見出し５		#f2cfd7	#e3ddd8

マーカー［カラーA：文字　B：下線］

カラーAは文字、Bは下線の色を指定。

【カラーサンプル】

	カラーA	カラーB
見出し２	#6d6d6d	#89c56d
見出し３		#6195cc
見出し４		#f3d083
見出し５		#f4cfc8

1本矢印［カラーA：文字　B：下線］

カラーAは文字、Bは下線の色を指定。

【カラーサンプル】

	カラーA	カラーB
見出し２	#0e467d	#3caab1
見出し３		#cde7ee
見出し４		#cdbb9d
見出し５		#eeb1c0

ストライプ［カラーA：文字　B：下線　C：下線］

カラーAは文字、BとCは下線の色を指定。下線は2色で構成されているので、BとCが入れ替わっても問題ありません。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#0e467d	#d7316c	#eaddc7
見出し３		#e8ba73	#f6e355
見出し４		#ffefb4	#6195cc
見出し５		#82c5ca	#0e467d

グラデ［カラーA：文字　B：下線左　C：下線右］

カラーAは文字、Bは下線左、Cは下線右の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#4f4f4f	#eb8a73	#e2b7d5
見出し３		#f6e355	#cee8d7
見出し４		#6185cc	#ffefb4
見出し５		#669b76	#fbc8b2

センター［カラーA：文字　B：下線］

カラーAは文字、Bは下線の色を指定。文字、下線ともに中央に配置されます。下線の長さは、どの見出しでも同じ長さですね。

【カラーサンプル】

	カラーA	カラーB
見出し２	#4f4f4f	#194a9e
見出し３		#f5e928
見出し４		#2db497
見出し５		#b2bee1

センター矢印［カラーA：文字　B：下線］

カラーAは文字、Bは下線の色を指定。文字と吹き出しのような矢印が中央に配置されます。

【カラーサンプル】

	カラーA	カラーB
見出し２	#4f4f4f	#194a9e
見出し３		#f5e928
見出し４		#2db497
見出し５		#b2bee1

左線

基本［カラーA：文字　B：左線］

カラーAは文字、Bは左線の色を指定。

【カラーサンプル】

	カラーA	カラーB
見出し２	#414d57	#de6042
見出し３		#2283b6
見出し４		#a5cc80
見出し５		#ecbb7c

左下線

基本［カラーA：文字　B：左線　C：下線］

カラーAは文字、Bは左線、Cは下線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#193944	#397057	#9cc9c4
見出し３		#e24b63	#f0b5bb
見出し４		#27539b	#aad7dd
見出し５		#ece93b	#e6e9b1

下点線［カラーA：文字　B：左線　C：下線］

カラーAは文字、Bは左線、Cは下線の色を指定。下線が点線になっています。濃いめの色の方が点線だとわかりやすそうですね。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#193944	#397057	#9cc9c4
見出し３		#e24b63	#27539b
見出し４		#27539b	#aad7dd
見出し５		#ece93b	#e6e9b1

左2色［カラーA：文字　B：左線上　C：左線下＆下線］

カラーAは文字、Bは左線上、Cは左線下＆下線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#3f4d77	#3f4d77	#928bac
見出し３		#5fbeb3	#f4d637
見出し４		#de5443	#e78bab
見出し５		#dd7557	#add5d8

背景

基本［カラーA：文字　B：背景］

カラーAは文字、Bは背景の色を指定。

【カラーサンプル】

	カラーA	カラーB
見出し２	#f9ddba	#0c2b60
見出し３	#c9de7e	#393332
見出し４	#393332	#e0a50d
見出し５	#b6dfec	#efa0a4

下線［カラーA：文字　B：背景　C：下線］

カラーAは文字、Bは背景、Cは下線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#ede0df	#2c3139	#b9bec2
見出し３	#eaeff4	#be877b	#ede0df
見出し４	#665543	#eaeff4	#b3a49d
見出し５	#b3a49d	#665543	#ebc0b9

左線［カラーA：文字　B：背景　C：左線］

カラーAは文字、Bは背景、Cは左線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#7f6f67	#e7e743	#92a4b0
見出し３		#b0d0dc	#e7e743
見出し４		#c5df9c	#b0d0dc
見出し５		#e0b6a9	#d3e9d0

左下線［カラーA：文字　B：背景　C：左線］

カラーAは文字、Bは背景、Cは左線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#fffeea	#ef8244	#e0d5db
見出し３	#ef8244	#fffeea	#b5b5b6
見出し４	#ffe73b	#647095	#d9d6dc
見出し５	#81787c	#bcdbec	#ffe73b

吹き出し［カラーA：文字　B：背景］

カラーAは文字、Bは背景の色を指定。

【カラーサンプル】

	カラーA	カラーB
見出し２	#e584b3	#fcebf3
見出し３	#736b6e	#b5b6b6
見出し４	#e7c2a4	#736b6e
見出し５	#e584b3	#d6e8e9

吹き出し線付［カラーA：文字　B：背景　C：線］

カラーAは文字、Bは背景、Cは線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#ffffff	#a5d5b5	#4ea380
見出し３		#f7c1c1	#dd9d91
見出し４		#7090ab	#3a79aa
見出し５		#b9ab9c	#72726e

リボン［カラーA：文字　B：背景　C：影］

カラーAは文字、Bは背景、Cは影の色を指定。影の色とは、リボンの折り返し部分のことです。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#ddc998	#72796c	#4d3534
見出し３	#4d3534	#eac1b2	#ce6f65
見出し４	#1b5b39	#ddc998	#9baf97
見出し５	#9baf97	#1b5b39	#aca575

ボックス［カラーA：文字　B：背景　C：影］

カラーAは文字、Bは背景、Cは影の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#9f938e	#493024	#724b3f
見出し３	#c49366	#64483f	#b46f4c
見出し４	#7e205d	#ce9898	#5e4d51
見出し５	#f4d3be	#3b5b84	#1d343c

ステッチ［カラーA：文字　B：背景　C：線］

カラーAは文字、Bは背景、Cは線の色を指定します。線とはステッチのこと。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#ffffff	#153c42	#8cc1b5
見出し３		#88634c	#b99277
見出し４		#115c79	#8cc1b5
見出し５		#cc9c5f	#88634c

ストライプ［カラーA：文字　B：背景　C：背景］

カラーAは文字、BとCは背景の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#0d0404	#a3edce	#d9ede5
見出し３		#88634c	#b99277
見出し４		#009966	#67988b
見出し５		#ce9aa1	#f3e7ea

線［カラーA：文字　B：背景　C：線］

カラーAは文字、Bは背景、Cは線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#e5d98e	#003778	#e5d98e
見出し３	#5867af	#cfe1d7	#5867af
見出し４	#acc9a5	#4a3b6d	#acc9a5
見出し５	#cf1727	#f3e7ea	#cf1727

点線角丸［カラーA：文字　B：背景　C：背景＆線］

カラーAは文字、Bは背景、Cは線の色を指定。

【カラーサンプル】

	カラーB	カラーA・C
見出し２	#ffffff	#254c75
見出し３		#36604d
見出し４		#a0435e
見出し５		#d4b360

括弧［カラーA：文字　B：線］

カラーAは文字、Bは線の色を指定。

【カラーサンプル】

	カラーA	カラーB
見出し２	#7076a2
見出し３	#394b56
見出し４	#4c6684
見出し５	#d0a4b0

はみ出す線［カラーA：文字　B：背景　C：背景＆線］

カラーAは文字、Bは線の色を指定。

【カラーサンプル】

	カラーA	カラーB
見出し２	#ab4079	#4fbbc4
見出し３	#7aa458	#ebca48
見出し４	#4fbbc4	#f3a172
見出し５	#211d3b	#4fbbc4

グラデーション

基本［カラーA：文字　B：背景　C：背景＆線］

カラーAは文字、Bは背景、Cは背景＆線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#ffffff	#3b7294	#7eacc4
見出し３		#b17a59	#ceb36c
見出し４		#ed7456	#f3a172
見出し５		#36604d	#7aa458

角丸［カラーA：文字　B：背景　C：背景＆線］

カラーAは文字、Bは背景、Cは背景と線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#ffffff	#a66da7	#c09eb9
見出し３		#335ebf	#4c66b4
見出し４		#f7cb3f	#fcecaf
見出し５		#cf1727	#ce6f65

ラウンド［カラーA：文字　B：背景　C：背景＆線］

カラーAは文字、Bは背景、Cは背景と線の色を指定。見出し４と５は、カラーB・Cを同色にしてみました。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#211d3b	#4fbbc4	#a1d3c9
見出し３		#7aa458	#b9d875
見出し４		#f3a172
見出し５		#a86888

シンプル［カラーA：文字　B：背景　C：背景＆線］

カラーAは文字、Bは背景、Cは背景と線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#211d3b	#e1b819	#b19b4e
見出し３		#3192b0	#a5a79a
見出し４		#e37560	#f8e7dc
見出し５		#a1c9a2	#d3cbd3

シンプル角丸［カラーA：文字　B：背景　C：背景＆線］

カラーAは文字、Bは背景、Cは背景と線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#ac7971	#fef4f4	#d3afba
見出し３		#c9d8cc	#d3c495
見出し４		#f8cdce	#ee8a97
見出し５		#bddfd8	#77a9aa

シンプルラウンド［カラーA：文字　B：背景　C：背景＆線］

カラーAは文字、Bは背景、Cは背景と線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#425b96	#fbe6d4	#d0715f
見出し３		#f4e9b5	#aec48d
見出し４		#f7f8f8	#737d97
見出し５		#ddced8	#ddb1d6

上線（文字黒）［カラーA：上線　B：背景　C：背景＆線］

カラーAは文字、Bは背景、Cは背景と線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#16395e	#a4c4e8	#78a8e8
見出し３	#8dccac	#fff6b2	#ffec00
見出し４	#6b6a70	#b6d6cc	#8dccac
見出し５	#ed6a1a	#efba33	#eda578

上線角丸（文字黒）［カラーA：上線　B：背景　C：背景＆線］

カラーAは文字、Bは背景、Cは背景と線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#d75b7c	#f6b9a5	#d75b7c
見出し３	#72c4b3	#cde5c3	#72c4b3
見出し４	#8fc9f3	#cce3f6	#8fc9f3
見出し５	#f6e43b	#fff577	#f6e43b

上線（文字白）［カラーA：上線　B：背景　C：背景＆線］

カラーAは文字、Bは背景、Cは背景と線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#8a8ca2	#5f616b	#8a8ca2
見出し３	#f6ad49	#ed6a1a	#f6ad49
見出し４	#9079ad	#493759	#9079ad
見出し５	#3e62ad	#192f60	#3e62ad

上線角丸（文字白）［カラーA：上線　B：背景　C：背景＆線］

カラーAは文字、Bは背景、Cは背景と線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#69821b	#aacf53	#69821b
見出し３	#583822	#c39143	#583822
見出し４	#a22041	#ce5242	#a22041
見出し５	#e95295	#e597b2	#e95295

ラインマーク

基本［カラーA：文字　B：マーク］

カラーAは文字、Bはマークの色を指定。

【カラーサンプル】

	カラーA	カラーB
見出し２	#e9507c	#ed7476
見出し３	#455d49	#669b76
見出し４	#997bad	#c6b3d6
見出し５	#3caab1	#82c5ca

背景角丸［カラーA：文字＆マーク　B：背景］

カラーAは文字とマーク、Bは背景の色を指定。

カラーサンプル

	カラーA	カラーB
見出し２	#6195cc	#ffefb4
見出し３		#f0b2c5
見出し４		#9bc3b0
見出し５		#d3d6db

背景線角丸［カラーA：文字＆マーク　B：背景　C：線］

カラーAは文字とマーク、Bは背景、Cは線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#eaddc7	#d7316c	#ed747b
見出し３	#eb8a73	#f6e355	#a9d8cf
見出し４	#abbaba	#407774	#a9bfa4
見出し５	#faf6b0	#194a9e	#9dd1a4

グラデ上線（文字黒）［カラーA：上線＆マーク　B：背景　C：背景＆線］

カラーAは上線とマーク、Bは背景、Cは背景と線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#e24863	#f0b5bb	#f5b48b
見出し３	#397057	#edf7f5	#f6e355
見出し４	#10589c	#edf7f5	#b3e0f2
見出し５	#ee794b	#fdefd9	#f3a465

グラデ上線（文字白）［カラーA：上線＆マーク　B：背景　C：背景＆線］

カラーAは上線とマーク、Bは背景、Cは背景と線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#f0b5bb	#e95467	#f0b5bb
見出し３	#9cc9c4	#397057	#9cc9c4
見出し４	#44617b	#0c2860	#44617b
見出し５	#949495	#455765	#949495

丸マーク

基本［カラーA：文字　B：マーク］

カラーAは文字、Bはマークの色を指定。

カラーサンプル

	カラーA	カラーB
見出し２	#393332	#c9de7e
見出し３		#efa0a4
見出し４		#e0a50d
見出し５		#9e9b95

背景角丸［カラーA：文字＆マーク　B：背景］

カラーAは文字とマーク、Bは背景の色を指定。

カラーサンプル

	カラーA	カラーB
見出し２	#393332	#c9de7e
見出し３		#efa0a4
見出し４		#e0a50d
見出し５		#9e9b95

背景線角丸［カラーA：文字＆マーク　B：背景　C：線］

カラーAは文字とマーク、Bは背景、Cは線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#7f6f67	#e7e743	#ef5bb
見出し３	#647095	#92a4b0	#d9d8ce
見出し４	#ef8244	#fffeea	#d9dbd0
見出し５	#ffe73b	#647095	#fffeea

グラデ上線（文字黒）［カラーA：上線＆マーク　B：背景　C：背景＆線］

カラーAは上線とマーク、Bは背景、Cは背景と線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#674196	#dbd0e6	#a59aca
見出し３	#316745	#a6c8b2	#3eb370
見出し４	#f08300	#f8e58c	#fbca4d
見出し５	#c9171e	#e198b4	#c97586

グラデ上線（文字白）［カラーA：上線＆マーク　B：背景　C：背景＆線］

カラーAは上線とマーク、Bは背景、Cは背景と線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#89c3eb	#2ca9e1	#89c3eb
見出し３	#5383c3	#1e50a2	#5383c3
見出し４	#aacf53	#69821b	#aacf53
見出し５	#69b076	#47885e	#69b076

先頭大

基本［カラーA：文字　B：先頭文字］

カラーAは文字、Bは先頭文字の色を指定。

【カラーサンプル】

	カラーA	カラーB
見出し２	#3d4059	#46a2a0
見出し３	#67988b	#0d0404
見出し４	#8a9a97	#cf1727
見出し５	#5b67af	#003778

先頭下線［カラーA：文字　B：先頭文字＆先頭下線］

カラーAは文字、Bは先頭文字と先頭下線の色を指定。

カラーサンプル

	カラーA	カラーB
見出し２	#474342	#f5c54d
見出し３		#425eb5
見出し４		#eb4587
見出し５		#8fc9f3

下線［カラーA：文字　B：先頭文字　C：下線］

カラーAは文字、Bは先頭文字、Cは下線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#18395e	#0363a6	#ffec00
見出し３		#e37560	#f6c4be
見出し４		#3192b0	#b19b4e
見出し５		#a84079	#ebca48

線角丸［カラーA：文字　B：先頭文字　C：線］

カラーAは文字、Bは先頭文字、Cは線の色を指定。

【カラーサンプル】

	カラーA	カラーB	カラーC
見出し２	#a84079	#511d6d	#a84079
見出し３	#7aa458	#ebca48	#a1d3c9
見出し４	#a66da7	#ad435e	#c09eb9
見出し５	#778587	#505b35	#cecd7f