「ここでいい」を「ここがいい」へ。発注先探しなら比較ビズで

ウェブサイトを作る時にぜひ意識してほしいタイポグラフィについて

最終更新日:2022年03月25日
SUGI WORK
監修者
代表 杉山茂幸
ウェブサイトを作る時にぜひ意識してほしいタイポグラフィについて

ウェブサイトにはさまざまなデザインがありますが、タイポグラフィはそのなかでもテキストのデザインのことを意味します。そのデザイン次第でサイトを訪れるユーザーに興味を持ってもらえるかどうかが決まることもあるほど、タイポグラフィは重要です。そんなタイポグラフィですが、サイトを作るにあたってどんなことに気をつければよいのでしょうか?

タイポグラフィの意味をもう一度確認

冒頭でタイポグラフィとはテキストのデザインを意味すると述べました。というと、「サイトのトップページなんかにある凝ったデザインのテキストのことでしょ?」と思う方がいます。もちろん、あれもタイポグラフィの一種なのですが、それだけではありません。

タイポグラフィとは、言ってみればサイト上のすべての文字のデザインのことです。トップページに掲げるおしゃれな字体のテキストだけでなく、このような地の文に使われる文字を読みやすく配列することもタイポグラフィになります。

タイポグラフィと言う時には、その目的はおもに2つに分かれます。一つは、トップページのおしゃれなロゴのような、そのデザイン自体をアピールする目的であり、もう一つが、文字のフォントやサイズを整えて読者が読みやすいようにする目的です。

ということは、ウェブサイトのデザインのほとんどがタイポグラフィと呼べることがおわかりでしょう。文字がかかわっている部分のデザインはすべてタイポグラフィです。つまり、それだけタイポグラフィはウェブサイトのデザインの基本であり、最重要ポイントであることを意味します。

ところが、ふつうの地の文のテキストをどんなデザインにするかは、案外見落とされがちです。目立つ部分だけでなく、ふだんの文章に使うテキストも読みやすさを重視してデザインすることを忘れないようにしましょう。

ウェブサイトでのタイポグラフィの活用方法

ウェブサイトを作る時に、具体的にどのようにタイポグラフィを活用するのかを見ていきましょう。

メッセージの訴求性を高める

ウェブサイトにおいて、一つのページのなかでも、他よりもより強調したいメッセージや情報はあるものです。そういう時にタイポグラフィを考えてデザインを行います。

とはいえ、通常は誰もがそれほど意識せずともやっていることです。たとえば、見出しは地の文より大きなフォントにし、強調したい部分は太字にしたり下線を引いたりということは誰でもやっているでしょう。

タイポグラフィという言葉を知らなくても、伝えたい気持ちのより強いテキストのデザインは多くの人が工夫しているはずです。今度はぜひそれを意識しながら、デザインを考えてみてください。

効果的なヒーローヘッダーとの組み合わせ

ヒーローヘッダーはウェブサイトの看板です。訪れた人が最初に目にする部分ですので、タイポグラフィを活用してその部分のメッセージをより強調させるということは、多くのウェブサイトで行われています。

雑誌で言えば表紙のデザインのようなものです。表紙には大きく雑誌のタイトルがあり、その下に各記事のタイトルや紹介が書かれています。記事の注目度によって、そのデザインも変えられていることに気づくでしょう。

ウェブサイトでも同じことです。雑誌の表紙をデザインするような意識でタイポグラフィを考えると、見た目にわかりやすいページになります。

SEO対策として

サイトに訪れた人がそのまま留まり、内容を読んでくれるようなサイトは、読みやすいようにテキストのフォントや配列が工夫されていたり、表示がサイト全体の雰囲気と合っていたりするものです。一方、それができていないと、たとえユーザーが訪問しても「見づらい」「読みにくい」と思って、すぐに離脱してしまいます。

ユーザーがすぐ離脱するようなウェブサイトは、グーグルの評価が下がり、検索結果で表示される順位が下がることはご存じでしょう。つまり、タイポグラフィ次第でSEO対策にもなるということです。

もし現行のサイトで、ユーザーの滞在時間が短いなどの問題があるなら、タイポグラフィを見直してみることをおすすめします。それだけで問題が改善され、SEO対策になることもあるのです。

タイポグラフィの活用で参考にしたいサイト

タイポグラフィをしっかり意識してデザインしているサイトをいくつか紹介します。

株式会社メタップス

株式会社メタップスのサイトのトップページには、シンプルな白文字のテキストが表示されます。他に説明したり補足したりするテキストがないため、サイトを訪れた人に「おや?」という気を起こさせます。「この会社がいちばん伝えたいメッセージなんだな」ということが誰にでも伝わるデザインです。

テキストのデザイン自体に特に凝ったものはありませんが、テキスト以外の要素との対照を際立たせることで、テキストに自然と目が引かれる効果が出ています。凝ったデザインでテキストを飾らなくてもユーザーにアピールできるというタイポグラフィの好例です。

DEN DESIGN

こちらはファーストビューが特徴的です。シンプルにテキストだけが全面に配置され、一部の文字だけが薄いグリーンで強調されています。全体的にはモノクロームな雰囲気ですが、この部分だけが目を引く色使いなので、サイトの訪問者の心には自然にこのメッセージが刻まれるという仕掛けです。

株式会社リブセンス

株式会社リブセンスは採用サイトのタイポグラフィを工夫しています。トップページはヒーローヘッダーの動画が施され、それをバックに中央に手書きでメッセージがあり、その下にも小さく社名と一言メッセージがあります。各テキストのフォントを工夫することで、それぞれに込められたメッセージの印象も違って届くのではないでしょうか。

このように、同ページ内でテキストのフォントを使い分けるのも効果的です。ただし、あまりたくさんのフォントを混在させると雑然とした印象を与えてしまいます。このサイトは、その微妙なさじ加減がうまくいっている良い例でしょう。

タイポグラフィを考える時の注意点

タイポグラフィという言葉は知らなくても、サイトを作る人は意識的にせよ無意識的にせよ、誰もがタイポグラフィを工夫しています。それを改めて意識することで、伝えたいメッセージをより伝わりやすくすることができるのですが、あまり意識しすぎるのにも注意です。

たとえば、フォントを工夫すると印象を変えられるからといって、あまりたくさん使いすぎるのは、まさに「過ぎたるは及ばざるがごとし」です。ごちゃごちゃして見えて、ページ全体の統一感も失われてしまいます。タイポグラフィを意識することは大切ですが、あくまでユーザーの見やすさ、読みやすさを第一にデザインを考えましょう。

まとめ

文字は意味を伝達する手段ですが、イメージを伝達する手段として捉えるのがタイポグラフィの考え方です。ウェブサイトだけでなく、文字があるところすべてにタイポグラフィはありますので、ぜひ意識的に注意して周りを見てみてください。サイトに活用できるタイポグラフィが至るところに見つかるでしょう。

監修者の一言

タイポグラフィを活用することで、ビジュアル的な観点での差別化を図りやすくなるメリットが期待できます。ユーモアや遊び心などを表現しやすくなるため、デザインやクリエイティブな業種・ベンチャー企業には積極的に導入をオススメしたい手法の1つだと思います。もちろん、それ以外の業種であっても社風や温度感が合えばタイポグラフィの導入はおすすめです。

余談になりますがタイポグラフィにアニメーションを組み合わせることでより魅力的で面白いコンテンツにすることが可能になります。ページ速度を重視する場合は使用しているサーバのスペックやコーディングの手法と要相談になりますが、1つの表現方法としてはおすすめしたい方法です。

SUGI WORK
代表 杉山茂幸
監修者

山形県出身。埼玉県越谷市と山形県上山市の2拠点で活動中のフリーランス。開業5年目でSUGI WORK代表。国内・海外法人から行政案件まで経験。WEB制作をはじめ、デザイナー・エンジニア・出張撮影・ドローン空撮・取材・自社メディア運営など幅広い分野で活動中。中小企業の課題解決が得意。

ホームページ制作・デザインを一括見積もりで発注先を楽に探す
比較ビズへ掲載しませんか?

一括見積もりで発注先を探す