Web関連

タイポグラフィによるクオリティアップ

0

デザイナーの藤原です。
昨今、「レスポンシブデザイン」や「フラットデザイン」「グリッドデザイン」など、非常に多くのデザイン手法が利用されています。そんな中で、少しでもクオリティを上げるためには、タイポグラフィは必要不可欠です。
タイポグラフィでクオリティ部分の差別化も可能になりますので、デザイナーの方々は是非取り入れていただければと思います。
f-fujiwara_20160408.jpg

タイポグラフィについて

まずはじめに、タイポグラフィについて理解をしておきましょう。

❛❛タイポグラフィ(英: typography)は、活字を用いる印刷技術および活字書体のデザインやその選択・配列などのデザイン表現全般を意味する。 ❜❜

元々は、活版印刷術のことを意味し印刷関連の言葉でした。
しかし、デジタル化が進み現在では書体のデザイン・配列を意味する言葉になりました。

タイポグラフィで魅せる時のポイント

「それでは、早速作っていきましょう!」と言いたいところですが、タイポグラフィとかっこいい名前をしてはいますが、元をたどれば、「文字」です。文字は、読まれることで初めて文字としての意味を持ちます。
なので、「かっこいいから」「なんとなくいい感じ」など意味のないデザインはやめましょう。
タイポグラフィを魅せる時のポイントや気をつけなければならないことをまとめてご紹介します。

フォント選びは慎重に

フォントによって、ユーザーが受け取るイメージは大きく変わります。
なので、フォントの特徴をよく理解しユーザーの目線でフォント選びをしてください。

基本的なことでいうと、明朝体とゴシック体では全く違います。明朝体では、「高級感」や「誠実さ」ですが、ゴシック体では、「親近感」や「柔らかさ」など反対の意味を持つので気をつけましょう。

フォントの種類は少なめに

多くのフォントを使いたいがために、よくミスする方が多いのですが、基本的に使用フォントは3つほどで十分です。
フォントが多いと、とても読みづらくまとまりのない文章に見えてしまいますので気をつけてください。
文字でデザインするはずが、文字でデザインの邪魔になりかねません。

意味のないアライメントのズレは無くすように

アライメントとは文字寄せのことです。
タイポグラフィ以前の問題かと思いますが、意識しないとズレていることもあるので気をつけましょう。
また、読みやすいように基本的に左寄せで記載することも重要です。

文字は適度に強調するように

文字の大きさ・太さなどがすべて同じときの場合、ユーザーはそこに書かれている情報を全く理解してくれません。
見出しや小見出し、本文のフォントに適度の変化を持たせることで、効果的に読ませることが可能です。

行間は適切に

基本的に160~190%ぐらいが読みやすい行間となっています。
行間が狭すぎると、とても読みづらくなりますのでゆとりをもって調整するといいと思います。
ただ、内容次第で変わると思いますので、適切に判断をしてください。

カーニングは丁寧に

すべての文字が、それぞれ異なる余白を持っています。
ただ単にテキストを記入しただけでは、カーニング(文字間)はバラバラでまとまりのない状態です。
特に、カタカナの「ト」や「ッ」などは調整が必要です。

可読性を大切に

背景に画像が敷いてあり、その上に文字が記載されているパターンがよくありますが、可読性をもたせるようにしましょう。
せっかく、かっこ良くデザインできたとしても、可読性が悪く文字が読めなければ何の意味もありません。
f-fujiwara_201604083.jpg

類似フォントの使用は控えるように

類似のフォントを見出しと本文に使ってしまうと、メリハリが無くなってしまいます。
お気に入りのフォントをたくさん使いたい気持ちはよくわかりますが、スタイルが全く違うフォントを組み合わるようにしましょう。

文字の比率変更はしないように

大きさが足りないから、狭いからなどの理由で比率を考えず文字を引き延ばしたりしないようにしてください。
画像の比率を変えないようにデザインを作るのと同じで、フォントも一つのデザインとして扱ってください。

余白は広めに

通常、デザインをする際に全体の要素のバランスなどを考え、きちんとした余白を取ると思いますが、それと同様に、段落など文字と文字の境目は適度に余白を確保してください。
メリハリなど見た目にも関係しますが、文字の読みやすさにも関わってきます。

まとめ

デザインもパターン化してきており、細かい部分でクオリティ面の差が大きくついてくるようになりました。
タイポグラフィもデザインなので、ぜひ文字の魅せ方に注意して作成するとより良いデザインになるのではないでしょうか。
ただ、あくまでもタイポグラフィは「文字」なので読みやすさを大前提に作成をするようにしてください。

Web制作でお困りの方はWeb制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

0

あなたのInternet Explorerは”最新版”ですか?前のページ

死ぬまでに絶対やっておきたい!-終活データ整理編次のページ

ピックアップ記事

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

関連記事

  1. Web関連

    Web制作会社における「スマートオフィス」

    ITを活用 してつくる環境配慮型省力化オフィス「スマートオフィス」。…

  2. Web関連

    Web業界だけじゃない。KPIの使い方

    気が付いたらもう3月。1年の6分の1が終わってしまいました。時…

  3. Web関連

    動眼(どうがん)でアーティスト気分に浸りたい!

    こんにちは!ティファナコラム編集部 担当の秋田です。今回のテーマは「…

  4. Web関連

    UX改善は業績アップの近道らしい!?

    突然ではありますが、みなさんは、ごひいきにしているお店や日用品はどのく…

  5. Web関連

    e-sportsから考える「スポーツ」

    スポーツ --熱き魂のぶつかり合い--熱き魂がフィ…

  6. AIさくらさん

    デジタル接客+AIで非接触を推進する

    コロナ禍にみまわれる前までは、ビジネスの場において商品やサービスを紹介…

おすすめ記事

最近の記事

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

アーカイブ

  1. AIさくらさん

    【人工知能(AI)×マスコミ】お問い合わせやクレーム対応を人工知能が自動サポート…
  2. Web関連

    ただ面白いだけではない…ゲーミフィケーションを活用したアプリ
  3. サービス・新技術

    今後広まるキャッシュレス決済のメリット
  4. Web関連

    パスワードレス認証がテレワーク社会の標準に!SSO(シングルサインオン)やFID…
  5. Web関連

    初心者でもわかる!グーグルアナリティクスについて
PAGE TOP