ちょっとの工夫でおしゃれに見える見出しデザイン11選

おはようございます。社員Aです👩

今回は、一工夫加えるだけでぐっとおしゃれに見える「見出しデザイン」について書いてみます。

制作をこなしていくうちにマンネリ化しがちな見出しのデザインですが、

ちょっとの工夫でぐっとおしゃれなサイトに仕上がるので

いくつか事例も踏まえてご紹介したいと思います！

見出しが全体のデザインに与える影響

メインビジュアルやコンテンツの配置にこだわっているのに、どうしてもデザインがしっくりとこないときがあります。

「フォントか画像を入れ替えてみようかな。」とPhotoshop上であれこれと操作してみても、やっぱりしっくりこない。

デザインをはじめたばかりの頃は、よくこの壁にぶち当たりました。

見出しのデザインを意識するようになってから、デザイン全体がぐっとまとまりのある仕上がりになったような気がします。

サイトを意識して見てみるとわかるのですが、

どこに見出しがあるのかわからなくて文章が羅列しているようなサイトは内容を深く読まずに離脱することが多いです。

「サイトを通して何を伝えたいのか」を考えたときに、見出しのデザインはないがしろにはできません。

だからといって、大きく目立たせれば良いわけでもなく、ページを見ていて意識しなくても伝わることが大事だと思います。

そんな見出しのデザインも、サイト制作をこなしていくとマンネリ化してその部分のデザインだけで時間が取られることもあります。

ちょっとした工夫でぐっとおしゃれに見えて、なおかつきちんと伝わるような見出しデザインをまとめてみました。

0.なにもしていない見出し

見出しデザイン段階初期あるある。

とりあえず線を引いて中央揃えにしたものの、シンプルすぎるしこのままだと素人っぽく見えてしまいますね。

1.見出しの下に英語を追加する

見出しの下に英語を置いてみました。

シンプルなデザインのサイトでも取り入れやすいです。

コツは、見出しと英語の部分のサイズ感を大きく変えること。

英語部分のサイズをちょっと勇気を出して小さめにしてみるといい感じになります。（読める範囲で）

デザインによっては、英語と日本語を逆にすることもあります。

2.見出しと英語にアクセントを入れる

①の応用で、見出しと英語にちょっとしたアクセントを入れるのもおすすめ。

ドットラインを引いてみました。

このときのコツは、アクセント部分は見出しよりも薄めの色にするとメリハリが出ます◎

3.横並びにしてアイコンを入れる

あえて見出しと英語のフォントを変えて、横並びにしてみました。

アイコンを追加することでシンプル過ぎないデザインに仕上がります。

1文字目だけ大きめにするとバランス良くなります。

4.ギザギザで遊び心を足す

左右にギザギザを置くことでちょっと遊び心のある見出しデザインに。

このときもフォントの色の方が濃くなるようにするとバランスが良いです。

5.カーブを入れる

やわらかめのデザインの時はカーブをかけてみるのもおすすめ◎

6.短くて太い線を入れる

短くて太い線を入れると文字のインパクトが増します。

このときに線を細くするとシンプルになりすぎてしまうので、少し太めに。

7.英語と日本語を重ねる

背景に英語を入れて、重ねます。

このときに英語が主張しすぎないように、薄めの色を使っています。

日本語部分をあえてずらして重ねることでこなれた印象になります。

8.手書き文字を混ぜる

手書き文字を入れることで、メッセージ性がある見出しになります。

ゴシックと合わせると相性が良いです。

紙に手書きで書いて、iPhoneカメラで撮ってPhotoshopで編集しています。

9.上下に破線を入れる

見出しの上下に破線を入れています。

破線と文字を斜めにすると、動きを感じるデザインに仕上がります。

10.縦書きにする

これは写真がある時に使うのですが、文字を縦書きにすることで

こなれた印象に仕上がります。

11.英語を斜めに入れる

英語を斜めに入れることで、見出しはシンプルでも遊び心が出ますね。

この場合も英語は薄めの色を使うのがおすすめです。