名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

TEL.0120-038-517 CONTACT

NEWS & COLUMN

お知らせ・コラム

SCROLL

DESIGN

ホームページの見出しに使えるデザイン12選

2022
.01.11

ホームページの見出しに使えるデザイン12選

ホームページをデザインする際に必要不可欠な要素の一つとして、見出しが挙げられます。
一口に見出しと言っても様々なデザインがあり、まだ引き出しが少ないWEBデザイナーの頭を悩ませる要素でもあります。
そこで今回は、ホームページをデザインする上で活用できる見出しのデザインをご紹介します。

英語と日本語を用いた見出しデザイン


はじめにご紹介する見出しは、英語と日本語を用いたデザインです。
日本語を目立たせた左上(01)の見出しは、初心者のWEBデザイナーでも扱いやすい基本的なデザインです。ホームページのターゲットの年齢層が高齢ではない場合は、右上(02)のように英語を目立たせたデザインでも良いでしょう。
デザインに慣れてきた頃には、左下(03)や右下(04)のようにあしらいを加えたデザインや、筆記体を装飾のように背景に透かせたデザインにも是非チャレンジください。

テキストとラインを用いた見出しデザイン


次にご紹介する見出しは、テキストとラインを用いたデザインです。
左上(01)や右上(02)の見出しには両方とも下線を用いたデザインですが、ただ下線を用いるだけでなく、英語を加えたり太さが異なるラインを用いることで、様々なパターンが挙げられます。
他にも、左側にラインを引いた左下(03)のデザインや、左右にラインを引いた右下(04)のデザインも使い勝手が良く、様々な場面で活用することができます。

テキストと装飾を用いた見出しデザイン


最後にご紹介する見出しは、テキストと装飾を用いたデザインです。
左上(01)の付箋風のデザインを用いた見出しや、右上(02)のラインで囲った見出しは、パッと目に入りやすく、コンテンツ間の境目もよく分かるデザインです。
左下(03)のようなカッコを用いた見出しはシンプルなホームページに取り入れやすく、女性や子供向けのホームページには、右下(04)のようなリボンを用いた見出しも良いでしょう。
例には挙げていませんが、他にもアイコンを用いた見出しや、吹き出し風の見出しなど、様々なデザインが挙げられます。

今回のまとめ

見出しのデザインには、日本語と英語を組み合わせた見出しや、日本語と英語にラインを用いた見出しなど、組み合わせ次第では数多くのアイディアが存在します。
日本語だけ、英語だけの見出しから脱却し、より良いデザインを生み出しましょう。
また、今回ご紹介した見出しのデザインは、ホームページ以外に、パワーポイントの資料作成や社内の資料作成にもご活用いただけます。
WEBデザイナーだけでなく、企業で資料作成を行っている方も、今までより垢抜けたデザインにするために是非ご活用ください。

AUTHOR

著者情報

執行役員 デザイナー

N.H.

大学を卒業後、新卒で株式会社オンカに入社し、WEBデザイナーとしてコーポレートサイトやポータルサイト、採用サイト、ECサイト、LPなど様々な種類かつ多種多様な業種のホームページ制作にオールマイティに対応。現在は、取締役・デザイナーチームのマネージャーとしてWEBデザインのさらなる品質向上に尽力している。

  • カラーコーディネーター AD
  • フードコーディネーター 3級
  • WEBデザイナー検定エキスパート

PAGE TOP