ブログ
4.82024
見出しのデザインについて
こんにちは、リアライズのウェブデザイナーのKです。暫く更新が滞っておりました。年度末、新年度に合わせて企業のホームページも刷新が続きます。ひたすら、お客様のサイトの更新作業に追われていました。
さて、今回は見出しのデザインについて考えてみたいと思います。
見出しをデザインするにあたってはCSSという、サイトを装飾するウェブ技術を使ってデザイン致します。ここではCSSについては詳しく述べません。強いて言えば店舗につける看板を創造してくだされば分かりやすいと思います。極端な話、ホームセンターから板を買ってきて、ペンキで「〇〇商店」と書いたとします。ここまでは骨組みに相当する部分です。これは聞いたことがあると思いますが、HTMLというものを使って「〇〇商店」と書いた看板を作ります。
しかしながら、HTMLは骨組みは出来ますが、その看板をデザインすることはできません。そこでデザインするために「〇〇商店」の文字を太くしたり、フォントを選んだり、看板の板の色をベースの白(HTMLの背景色は白色です)を目立つように黄色にしたり、赤色にしたりすると思います。夜間でも目立つよう電飾を施したりもするでしょう。こういうサイトに必要な装飾技術をCSSといいます。
これは見出しのデザインです
これは見出しのデザインです
これは見出しのデザインです
これは見出しのデザインです
これは見出しのデザインです
試しに即興で見出しを作ってみました。
頑張れば以下のようなアニメーション搭載の見出しも作れてしまいます。
では、実際にこういった見出しを作るかといえば最近は殆ど作りません。
見出しのデザインが凝った作りになり始めたのは2012年頃からです。それまでのCSSでは表現できなかったアニメーションやグラデーションなどのダイナミックな動きが2011年に策定されたCSS3から使えるようになったからです。我々、WEB制作業界の人間もこぞってこのCSS3を取り入れ、動きのあるサイトの制作をPRしてきましたが、暫くするとこの動きのあるサイトは下火になり始めます。
下火になった理由の一つが端的にいって、消費者であるサイト閲覧者がそもそも見出しにそういったダイナミックさを求めていないことが挙げられます。企業や団体、或いは個人のホームページやブログ、SNSが爆発的に増えるにつれ、言葉は悪いですが、イチイチ一つのものに立ち止まっていられなくなったことが大きいと思います。
わざわざ一つのサイトに留まらなくても指一本分動かせばサイトはいくらでも表示されます。身も蓋もない言い方になりますが、洗練された見出しのデザインなど消費者にはどうでもいいことです。見出しは見出しの意味を為せばよく、そこに見る人はデザイン性の善し悪しなど求めてはいないのです。ましてや、イチイチ動く見出しなど正直うざったくて仕方がありません。
見出しを辞書で調べてみると、
1.新聞・雑誌の記事の標題など、それを一目見てそこの内容が分かるようにしたもの。
2.(検索のため)項目として示したもの。
とあります。当然ながらデザイン性などはどこにも書いてありません。
もちろん、パッと見て、コンテンツの内容がよく分かる項目であるのは言うまでもありません。つまり、シンプルなもので見出しはいいのではないかと私は考えているのです。
実際、Appleやソニー、リクルートなど大手企業はどこもといっていいぐらいシンプルな見出しでサイトが制作されています。
これはリクルート見出しをまねたデザインです
株式会社リクルートのサイトを真似て見出しを作ってみました。
https://www.recruit.co.jp/blog/service/20240321_4522.html
こちらのページを参考にしました。
縦線にリクルートカラーともいうべきグラデーションを使い、縦線の角を丸くした以外は至ってシンプルな見出しです。
最近はこういったシンプルな見出しでよいのではないかと私も思うのです。
結局のところ、誰かにサイトをまんべんなく見せるということは見やすいことが大前提であるのは言うのでもありません。今の時代、指一本分、カーソルを動かすだけで似たようなサイトはいくらでもあります、ごちゃごちゃして見づらいサイトに長居をする理由がありません。
余談ですが、トップページに設置するスライドショーも同じです。初めてホームページを制作する方あるあるですが、スライドショーに多くの画像を入れたがりますが、逆にお尋ねします、最近、四枚目や五枚目に表示されるスライドを見られましたか?私の知る限り、ほぼ100%の人が見ていない、すぐに下に移動してしまったといいます。そう、見出しもスライドも楽しむ余裕がそもそもないのです。
であれば、シンプルに分かりやすい見出しにして、見やすいサイトにした方がよいと思うのですがいかがでしょうか。
もっともこれは自分自身にもいえます。いつ当ホームページをリニューアルするかは分かりませんが、次にリニューアルするときは見出しをとにかくシンプルなものにしたいと思います。
なお、見出しのデザイン自体は検索順位に影響はしませんが、見出しの文言は検索順位に強く影響しますので見出しそのものを軽視するという話ではありません。見出しに入れる文章はしっかり考えてサイトを制作するのはSEO対策の観点からもとても重要です。一部勘違いしている方もいますが、見出しの装飾を凝ったものにしてもそれ自体は良くも悪くもSEO対策にはまったく関係がありません。デザインを凝ったものにすれば上位表示されるのであればこんなに楽な話もありません。
見出しを制作する際はなるべくシンプルなものにして、装飾方法ではなく、見出しの文言にこだわりたいものです。
関連記事
-
2023.11.14
WordPressと従来型のHTMLサイト、どちらがいい?
-
2023.12.19
ウェブサイトのドメイン所有権 – 制作会社の視点から
-
2024.3.4
WordPressとMovable Typeの比較について
-
2023.11.22
ホームページの問い合わせを増やすためのコンテンツ戦略