Webデザインにも役立つタイポグラフィの基本ルールとは

Webデザインにも役立つタイポグラフィの基本ルールとは

同じ文章でも、タイポグラフィ(文字の書体や配置などの構成や表現)の違いによって、読み手に与える印象や視認性が大きく変わってきます。例えば、この記事のフォントサイズがすべて同じ場合、読みにくいと感じるのではないでしょうか。DTPはもちろんWebデザインの制 作においても、タイポグラフィに関する知識は役立ちます。情報アーキテクチャの先駆者として世界的に有名なInformation Architectsは「Webデザインの95%はタイポグラフィである」と述べています。今回は、Webデザインにも役立つタイポグラフィの基本ルールについてご紹介します。

IT業界まるわかりガイドは、日本初Web専門スクールのインターネット・アカデミーが運営する業界情報メディアです。最新の業界情報を、初心者にも分かりやすくご紹介しています。

目次

タイポグラフィの基本

タイポグラフィの基本

フォントを文章として読ませたいのか、それともグラフィックとして見せたいのか、目的に合わせて適切なタイポグラフィを考えましょう。地の文には可読性の高いフォントが適していますが、キャッチコピーにはイメージ想起を優先させた、読み手を引きつけるフォントを選ぶことがおすすめです。

タイポグラフィの基本とWebデザイン

読み手に強いイメージを残す画像の重要性は言うまでもありませんが、Webの情報のほとんどは文字で構成されています。そのため、タイポグラフィもイメージ作りに不可欠な要素の1つです。従って、読み手を常に意識してタイポグラフィを考える必要があります。

フォントサイズや色、ウェイトで受け手の印象は変化する

フォントサイズや色、ウェイトで受け手の印象は変化する

一般的に、ゴシック体は力強く明朝体はやわらかな印象を与えます。さらに、同じフォントでもウェイト(文字の太さ)や色を変えることにより、与えるイメージを変えることができます。例えば、力強さや堅牢性を表現したい場合はコントラストのはっきりした色の太字ゴシック体を使用したり、繊細さや柔軟性を表現したい場合はコントラストを抑えた色の細字明朝体を使用したりすると良いでしょう。

フォントファミリーやフォントサイズの種類を絞る

あまりに多くのフォントやフォントサイズを使用することは、読み手に散漫な印象を与えます。1つのドキュメントの中で、フォントやサイズを3種類程度の使用に抑えるとすっきりと見せることができます。フォントファミリーとは、ウェイトや文字幅が異なるフォントのまとまりのことです。Webデザインをすっきり見せるためには、フォントの種類は増やさずフォントファミリーを有効活用しましょう。

リズム感を持たせることで、視線誘導やイメージを付加する

リズム感を持たせることで、視線誘導やイメージを付加する

フォントサイズや色に緩急をつけることにより、伝えたい情報に優先度をつけることが可能です。キャッチコピーと地の文が同じフォントの場合、閲覧者はどこを見れば良いか迷ってしまうことがあります。フォントサイズやレイアウトを考える際には、どの情報を見てほしいか優先順位をつけることにより、意味のあるデザインを作れます

例えば、書籍のページ数を表現する際は、数字を大きくして単位を小さめに表現してみましょう。リズム感を持たせることにより、文章が見やすくなるだけでなく、必ず見てほしい重要度の高い情報を提示することができます。

視線移動を意識してレイアウトする

行間を詰めすぎた場合、1行目から2行目へ読み進める際に、1行目の行頭に視線が移動してしまうことがあります。また、1行目を読んでいる際に2行目の文字が視界に入って気が散ることもあるかもしれません。

読みやすい文章にするためには、視線移動を意識してレイアウトしましょう。一般的に、横書き文章の行間は150~190%程度行長は15~40文字程度にすると読みやすいと言われています。

[PR] 「このまま仕事続けていていいのかな...」そんな不安をマンガで解決!『マンガでわかる! インターネット・アカデミー』

おわりに

Webデザインではグラフィック面に目が行きがちですが、タイポグラフィについても十分に注意を払うことにより、ワンランク上のデザインにブラッシュアッ プできます。Webサイト閲覧者にどのようなイメージを与えたいのか、どの情報を見てほしいかを考えれば、デザインの完成イメージが浮かぶはずです。また、さまざまな優れたデザインのWebサイトをスクラップして、アイデアの引き出しを広げましょう。

Web業界への就転職・キャリアアップを成功させたいと考えている方へ
日本初そして日本唯一のWeb専門スクールインターネット・アカデミー

自分にぴったりのコースが見つかる

インターネット・アカデミーでは、Web業界を目指すあらゆる方にお応えすべく、多彩なコースをご用意しています。

Webデザインを学びたい方

プログラミングを学びたい方

自分のペースとスタイルで学べる

毎回好きな受講形式を選んで学習することができるので、働きながらじっくり通いたい方も短期間での就職を目指す方も自分の都合に合わせて、スケジュールを組むことができます。

  • ライブ授業

    現役のプロインストラクター
    と仲間と学ぶメリット

    ライブ授業
  • マンツーマン授業

    インストラクターと
    1対1という贅沢

    マンツーマン授業
  • オンデマンド授業

    いつでも学びたいことを
    学べる

    オンデマンド授業

自分に適した学習方法を探す

インターネット・アカデミーでは、無料体験レッスンを毎日開催しています。デザインやプログラミングの体験ができるのはもちろん、実際の授業に参加したり、就職や転職のご相談、通学スケジュールのご相談なども承っております。

  • ご要望をお伺い

    ご要望をお伺い

    まずはお客様のご要望をお伺いし、お一人おひとりの目的や悩みに最適な内容にカスタマイズ。お客様専用の内容で当日ご案内いたします。

  • カウンセリング

    カウンセリング

    就職や転職、在宅で働きたいなど、お客様の希望を叶えるために専任のスタッフが最適な学習プランをご提案。現在の仕事のご相談なども承ります。

  • 体験レッスン

    体験レッスン

    「自分に向いている分野は?」「自分にできる?」そんな疑問を解決するレッスンを無料で体験。デザインもプログラミングもお試しいただけます。

無料体験レッスン・個別相談のご予約

当日ご希望の方やお急ぎの方は、フリーダイヤルにてご予約いただけます。

0120-746-555 フリーダイヤル受付時間(平日・土日) 10時-21時 オンライン予約

IT研修・人材育成のご相談を無料で承っております
法人専用社員研修、内定者・新人研修のご予約

インターネット・アカデミーでは、
あらゆるニーズに合わせた研修カリキュラムを取り揃えています。

「自社に最適な研修プランを相談したい」「研修費用の相談をしたい」「助成金を申請したい」など、お電話またはお問い合わせフォームよりお気軽にご連絡ください。

03-3341-3781 受付時間(平日・土日) 10時-21時 法人専用 お問い合わせフォーム