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関連

    インターネットでのマイナンバーを取扱いについて

    マイナンバーを利用してインターネットからも個人の情報を閲覧できるように…

  2. Web関連

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

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

  3. Web関連

    Webサイトに動画導入は、あり?なし?

    昨今、Webサイトの背景に動画を使用しているサイトをよく見かけますよね…

  4. Web関連

    Webデザイナーだからこそ、一味違うものを送りたい!オリジナル年賀状作成の3ステップ

    みなさん、年末年始の楽しみはなんでしょうか?私は、日ごろお世話にな…

  5. Web関連

    リッチスニペットでSEO対策!重要な2つのポイント

    みなさんリッチスニペットってご存知ですか?実はGoogleの検索結果一…

  6. AI関連

    デジタルシフトするアフターコロナの新しい時代のビジネスモデル「DX」とは?

    デジタルトランスフォーメーション(DX)とは「デジタルトランスフォ…

おすすめ記事

最近の記事

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

アーカイブ

  1. SNS関連

    マーケティングツールとしてSNSを使いたい
  2. Web関連

    日本の美徳を活かしたインバウンド接客をとりいれよう!
  3. Web関連

    どこでも学べるオンライン学習 5選!
  4. Web関連

    機械学習で進化した将棋界
  5. Web関連

    気を付けて!常時SSL移行に失敗しないための4つのチェック項目
PAGE TOP