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

関連記事

  1. SNS関連

    便利なSNSの陰には危険がいっぱい!?

    こんにちは!SNS初心者のデザイナーY.Kです。みなさんはSN…

  2. Web関連

    WEB制作 システム開発とセキュリティについて

    こんにちはサーバーエンジニアの橋本です。だいぶ暖かくなりました…

  3. Web関連

    アレが欲しい!ときに使いたいファッション通販サイト紹介(第1弾)

    こんにちは。デザイナーのイゲタです。洋服が欲しくなったとき、みなさん…

  4. Web関連

    ESGとSDGsの関係がやっとわかった ~知っているようで答えられない用語 その1~

    ネットや新聞、テレビなど、様々なメディアに出てくる略語。なんとなくわか…

  5. Web関連

    知らなきゃ危険!!webに動画を掲載する前に著作権を知っておこう

    現在簡単に動画を閲覧、掲載できる時代になりました。普段何気なく目に…

  6. SNS関連

    SNSボタンがよく押される場所はどこ?

    SNSボタン、サイトによって配置がかなり違いますよね。今回、SNS…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    ついに来たか!Web制作者”だけ”が歓喜するお話し
  2. Web関連

    花粉症の味方サイトとアプリを探してきました!
  3. Web関連

    スマホアプリとネット注文で追加オーダーをGET!
  4. Web関連

    デスクワーク・冷え性・猫舌の人に!寒い冬場は、サーモス(THERMOS)の保温マ…
  5. AI関連

    大手企業も注目するMaaS(Mobility as a Service)とは何か…
PAGE TOP