2021年03月26日facebooktweetはてブLINEPocketfeedlyおはようございます。今回は、一工夫加えるだけでぐっとおしゃれに見える「見出しデザイン」について書いてみます。制作をこなしていくうちにマンネリ化しがちな見出しのデザインですが、ちょっとの工夫でぐっとおしゃれなサイトに仕上がるのでいくつか事例も踏まえてご紹介したいと思います!もくじ見出しが全体のデザインに与える影響0.なにもしていない見出し1.見出しの下に英語を追加する2.見出しと英語にアクセントを入れる3.横並びにしてアイコンを入れる4.ギザギザで遊び心を足す5.カーブを入れる6.短くて太い線を入れる7.英語と日本語を重ねる8.手書き文字を混ぜる9.上下に破線を入れる10.縦書きにする11.英語を斜めに入れる見出しが全体のデザインに与える影響メインビジュアルやコンテンツの配置にこだわっているのに、どうしてもデザインがしっくりとこないときがあります。「フォントか画像を入れ替えてみようかな。」とPhotoshop上であれこれと操作してみても、やっぱりしっくりこない。デザインをはじめたばかりの頃は、よくこの壁にぶち当たりました。見出しのデザインを意識するようになってから、デザイン全体がぐっとまとまりのある仕上がりになったような気がします。サイトを意識して見てみるとわかるのですが、どこに見出しがあるのかわからなくて文章が羅列しているようなサイトは内容を深く読まずに離脱することが多いです。「サイトを通して何を伝えたいのか」を考えたときに、見出しのデザインはないがしろにはできません。いって、大きく目立たせれば良いわけでもなく、ページを見ていて意識しなくても伝わることが大事だと思います。そんな見出しのデザインも、サイト制作をこなしていくとマンネリ化してその部分のデザインだけで時間が取られることもあります。した工夫でぐっとおしゃれに見えて、なおかつきちんと伝わるような見出しデザインをまとめてみました。0.なにもしていない見出し見出しデザイン段階初期あるある。線を引いて中央揃えにしたものの、シンプルすぎるしこのままだと素人っぽく見えてしまいますね。1.見出しの下に英語を追加する見出しの下に英語を置いてみました。シンプルなデザインのサイトでも取り入れやすいです。コツは、見出しと英語の部分のサイズ感を大きく変えること。英語部分のサイズをちょっと勇気を出して小さめにしてみるといい感じになります。(読める範囲で)デザインによっては、英語と日本語を逆にすることもあります。2.見出しと英語にアクセントを入れる1の応用で、見出しと英語にちょっとしたアクセントを入れるのもおすすめ。ドットラインを引いてみました。このときのコツは、アクセント部分は見出しよりも薄めの色にするとメリハリが出ます◎3.横並びにしてアイコンを入れるあえて見出しと英語のフォントを変えて、横並びにしてみました。アイコンを追加することでシンプル過ぎないデザインに仕上がります。1文字目だけ大きめにするとバランス良くなります。4.ギザギザで遊び心を足す左右にギザギザを置くことでちょっと遊び心のある見出しデザインに。このときもフォントの色の方が濃くなるようにするとバランスが良いです。5.カーブを入れるやわらかめのデザインの時はカーブをかけてみるのもおすすめ◎6.短くて太い線を入れる短くて太い線を入れると文字のインパクトが増します。このときに線を細くするとシンプルになりすぎてしまうので、少し太めに。7.英語と日本語を重ねる背景に英語を入れて、重ねます。このときに英語が主張しすぎないように、薄めの色を使っています。日本語部分をあえてずらして重ねることでこなれた印象になります。8.手書き文字を混ぜる手書き文字を入れることで、メッセージ性がある見出しになります。ゴシックと合わせると相性が良いです。紙に手書きで書いて、iPhoneカメラで撮ってPhotoshopで編集しています。9.上下に破線を入れる見出しの上下に破線を入れています。破線と文字を斜めにすると、動きを感じるデザインに仕上がります。10.縦書きにするこれは写真がある時に使うのですが、文字を縦書きにすることでこなれた印象に仕上がります。11.英語を斜めに入れる英語を斜めに入れることで、見出しはシンプルでも遊び心が出ますね。この場合も英語は薄めの色を使うのがおすすめです。フロントエンドエンジニア・デザイナーの社員Aです。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。人気記事Posting....。