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

関連記事

  1. Web関連

    テレワークとは?導入への一歩を踏み切るために

    「テレワーク」という言葉が世の中に急激に浸透し始めましたね。昔から知っ…

  2. Web関連

    あなたは自社サイトや情報を活用できていますか?DMPを利用したデータ活用とは

    DMP元年といわれた2013年から早二年が経ちました。ビッグデータやD…

  3. SNS関連

    上手く活用できていますか?企業としてのTwitter活用術

    SNSというものが流行り始めてから随分たち、私達の生活には欠かせないも…

  4. Web関連

    巷で聞く CCPMってなんだろう?

    皆さんはCCPM(クリティカルチェーン・プロジェクトマネジメント)のこ…

  5. Web関連

    なぜ失敗する?プロジェクトマネジメントで抑えておきたい3つの対策

    みなさまは、仕事上でプロジェクト管理する際に失敗したことはありませんか…

  6. Web関連

    【Webマーケッター必見】Webサイトへの流入数が増えるとお問い合わせ数が減った?

    #目次___- Webサイトへの流入数が増えるとお問い合わせ数…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    【必見!】円滑にコミュニケーションをとるための話し方、「PREP法(プレップ法)…
  2. Web関連

    免疫力を上げる!?インフルエンザから体を守る方法
  3. Web関連

    最近よく聞くセルフサービスBIについて調べてみた
  4. Web関連

    効率的!マーケティングオートメーションって?
  5. AI関連

    【人工知能(AI)×ヘアサロン】サロン予約から接客までを人工知能が対応
PAGE TOP