Web関連

Webデザインの95%はフォントで決まる?!Webデザイナーなら知っておきたい3つのポイント

0

Webデザインの95%はフォントで決まる?!Webデザイナーなら知っておきたい3つのポイント

昨今、Webフォントが多用される様になってきました。
また、レスポンシブなどシンプルなデザインが流行ってきており、フォントによってデザインのテイストがガラリと変わります。
そのため、Webデザインにおける文字の重要性は結構高いのではないでしょうか?

今回はwebタイポグラフィに関して考えていきたいと思います。

タイポグラフィとは

タイポグラフィとは簡単に言うと「文字のデザイン」の事です。
情報伝達に適した書体や大きさ、字間により注目度や可読性、美しさ等への配慮が重要となってきます。
タイポグラフィというと、紙媒体での活用を考えられる方が多いと思いますが、実は、webデザインにおいても求められてきているのです。

webタイポグラフィの役割とは

タイポグラフィによる情報の伝達方法は大きく分けて2つあります。
文字を「魅せる」ことと、「読ませる」事です。

先ず、「文字を魅せる」という事を考えてみたいと思います。
「魅せる文字」はキャッチコピーやロゴなどに良く用いられます。
例え同じ文言だったとしても書体やウェイトなどのデザイン次第で情報の伝わり方は変わってきます。ブランドイメージを正しく伝え、企業イメージを向上させるためにもタイポグラフィは重要な役割を担っているのです。

一方、「読ませる文字」は本文等の文章に用いられます。
「魅せる文字」とは少々異なり、正しい情報内容を伝える事が求められているため、見易さと読み易さを重視ししなければなりません。
webフォントが良く用いられ、「魅せる文字」の様に細かな調整が難しいですが、CSSで簡単な指定をするだけでも、大幅に見え方は変わってきます。
この「読ませる文字」を意識したデザインはユーザビリティに配慮したデザインという事もできます。

「魅せる文字」にせよ、「読ませる文字」にせよ、より良く見せる事はデザイナーにとって大事なスキルです。
基本的な知識を身に付けてストレスの無いWebデザインをしたいものです。

webタイポグラフィの3つの捉え方

ちょっとした配慮で情報の受け取り易さやイメージの伝わり方が変わってきます。
ここでは、幾つかある中の基本的な3つのポイントをご紹介致します。

字間を調整する

 

ただ単に文字を打っただけでは左右の余白が異なって見える事があり、粗雑な印象を与えてしまいます。
そのため、文字詰め(カーニング)を行い字間の調整をする必要があります。

大きさを変える

webfont95_15030202.jpg

同じ書体で同じサイズ指定をしていても見た目の大きさは異なる事があります。
特にアルファベットと平仮名・カタカナを用いる際には大きさがバラバラになってしまいます。
文字に合わせて大きさのバランスを整えていきます。

これとは逆に、敢えて大きさを不揃いにして文字に動きを出す事があります。
それにより、特定の情報を強調させる事が出来ます。

デザインするものに合わせて調整を行いましょう。

行間と行長を調整する

webfont95_15030203.jpg

複数行にわたる文章に関しては行間と行長が読みやすさに大きく影響を与えいます。
書体やサイズなどの条件によって異なってくるのですが、行間は150~190%、行長は最長で30~40文字、最短で13~15文字程度が一般的に読み易いとされています。

最後に

今は優良なデザインをまとめたサイトもあるので、その様なサイトを活用しながら様々なwebサイトを見比べてみてください。
文字の見せ方・表現方法によって伝わり方の違いを実感できるはずです。

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

UI/UXデザイン

0

ホームページ制作費用の落し穴前のページ

【Web制作会社が教える】SEO対策で文章作成に困ったときに使える3つのポイント次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. 新しい販売形態であるDtoCについて考えてみる
  3. AIに求められているものは、実は意外な物だった
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    デジタルコミュニケーションの可能性

    デジタルコミュニケーションとは、インターネットを使って、情報を収集・配…

  2. Web関連

    「早い!安い!うまい!?」Twitter広告のあれこれ

     皆さんこんにちは。日頃から情報収集を欠かせないWeb業界ですが、ふ…

  3. Web関連

    初心者Webデザイナーおすすめ!Webデザインのコツ

    今回は、初心者Webデザイナーの方々に向けて、Webデザインのコツをご…

  4. Web関連

    スマホサイトを作るときに気を付けるべきこと

    皆さんはどんな時にスマホでWebを閲覧しますか?「通勤・営業で電車…

  5. SNS関連

    WebサービスInstagram(インスタグラム)の恐るべき経済効果!

    しまむらパトロール(しまパト)という言葉をご存知ですか?私がこの言…

  6. Web関連

    初心者WEBデザイナー必見!アイデアを引き出すための秘訣3選

    WEBデザイナーの皆さん、アイデアが出ずに困ったことありませんか?アイ…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. AI関連

    ECサイトの差別化・利便化にもAIが貢献
  2. AIさくらさん

    商業施設のインフォメーションをAIさくらさんが担う!
  3. Web関連

    ECサイトの売上を向上させたい 第3回目
  4. Web関連

    ホームページ制作の大きな失敗原因と解決方法はこれだ!
  5. Web関連

    進化する電子マネー
PAGE TOP