Web関連

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

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

タイポグラフィについて

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

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

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

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

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

フォント選びは慎重に

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

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

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

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

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

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

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

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

行間は適切に

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

カーニングは丁寧に

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

可読性を大切に

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

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

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

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

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

余白は広めに

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

まとめ

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

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

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    デザイナーが押さえておきたいweb配色パターン

    誰もが一度はぶつかるwebデザインの配色。これを知っているだけで損…

  2. Web関連

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

    駆逐してやる...どこかで聞いたようなこの言葉を、何度となく心で思…

  3. Web関連

    リモートワークで働く際に知っておきたい6個のポイント

    気が付けばあんなに綺麗だった薄紅ももう新緑に...。季節が移ろうのは早…

  4. Web関連

    レスポンシブWebデザインの是非!

    花粉症の季節が終わり、ホッとしている須澤です!体重は現状維持で…

  5. Web関連

    キャッシュレスの時代に備えて、キャッシュレス決済について知ろう!

     お買い物をするときの会計は、現金派ですか?それともキャッシュ…

  6. Web関連

    リフレッシュするなら観光に行こう!

    みなさんのリフレッシュ方法はなんですか?カ…

おすすめ記事

最近の記事

  1. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  2. 約1年間のウィズコロナ生活で大きく変わったもの
  3. スマートストアにより、小売業は激変する
  4. 【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
  5. AI技術の普及により移動も安全に

アーカイブ

  1. Web関連

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

    Google「Picasa」を「Google フォト」に統合
  3. AI関連

    「人工知能」や「AI」に夢を見ているあなたへ。
  4. Web関連

    コンバージョンアップのための3ステップ!
  5. Web関連

    採用希望者数を増加させたい
PAGE TOP