注目キーワード
  1. Photoshop
  2. Python
  3. Raspberry Pi
  4. Arduino

UIデザイン フォント選びと使い方をまとめてみた

UIデザインのフォント選びとその使い方について個人的にまとめて紹介します。

この記事では主に

taku

・UIデザインでどのようなフォントを使えば良いのか?

・フォントを使いこなすためには何を意識すればよいのか?

といった疑問を解決できます。

 

なので

UIデザインでフォントを使いこなしたい!

という方はこの機会に是非一読してみてください。

 

気になる箇所がありましたら、目次からジャンプしてもらうと効率的かと思います。

それでは始めていきましょうか。

ビジネスシーンで使うフォント

ビジネスの現場では読みやすい・見やすいフォントが良く使用され

明朝体 / ゴシック体 / メイリオ

が一般的です。

 

明朝体、ゴシック体は字が固く見えるため、書類や提出物作成時などあらゆる場面で活躍されています

メイリオフォントは丸みがあり、柔らかいイメージを与えることができるので、こちらはカジュアルなイメージを与えることができます。

 

効果音フォントというサイトなどで見かけるフォントを使用すると、文章の内容よりもフォントに気を取られてしまうためです。

一方、上記のフォントには様々な太さがあり、使用できるシーンも多数あります。

要は、万人受けするフォントということです。

こういた理由から、ビジネスシーンでは「明朝体 / ゴシック体 / メイリオ」が良く使われるのです。

 

高級ブランドのおすすめフォント一覧

ビジネスシーンで使うフォントは何気なく使っている方も多いと思います。

ですが、メイリオ、ゴシックといったフォントだけではその他効果を与えることも難しいため、状況に応じてフォントを使い分けられると 便利かと思います。

なので今回は高級感を与える有名なフォントを紹介します。

 

Trajan(トレイジャン)フォント

TrajanPro

引用:Download Free Fonts ShareFonts.net

チョコレートの王道、「GODIVA」の代表的なフォントです。

GODIVAのフォントは以前「Times Roman(タイムズローマン)」を使用していましたが、その後「Trajan(トレイジャン)」に変更されています。

文字間隔を少し開けることでより高級感を引き出しています。

 

TrajanProフリーフォント

 

Futura PTフォント

Futura PT

引用:Adobe Fonts

ルイ・ヴィトンのロゴフォントである「Futura(フツラ)」は先端がシャープでスラッとした特徴があり、Macに標準搭載されているフォントです。

ヴィトンのロゴはGODIBAのロゴと同様に、字と字の間に少し距離を取ることでより、高級感を出しています。

 

Windows10には標準搭載されていないので、Adobe Fontsの「Futura PT」を使用するのが良いかと思います。

Futura PTをDLすると22種類のウェイトを使い分けれるようになるため、非常に使い勝手が良いのが利点です。

 

Futura PT

 

Didot(ディド)フォント

Theano Didot

引用:Font Meme

ファッション雑誌「VOGUE」のフォントであり、標準的なフォントのような形をしているが、フォントの強弱が大きいのが特徴です。

 

Theano Didotフォント ダウンロード

 

Horatio LT Std フォント

horatioltstdbold

 

引用:Download Free Fonts ShareFonts.net

「dyson(ダイソン)」ロゴ文字のデザインに近いフォントである「Horatio」は有料から無料までDLサイトが多数存在します。

特徴としては所々に丸みがあり、柔らかなフォントになっているところでしょう。

ダイソンのロゴ以外の部分では「Futura(フツラ)」というフォントを使用しており、パッケージや取扱説明書も「Futura(フツラ)」のフォントを使用しています。

 

Horatio LT Std

 

フォントのウェイトを使い分ける

フォントのウェイトという言葉を聞いたことがあるでしょうか?!

ウェイト(weight)とはフォントの太さのバリュエーションのことを言います。

普段使用されるフォントのウェイトは「Regular」と呼ばれ、この基準から太いフォントは「Bold」、細いフォントは「Light」や「Thin」と呼ばれます。

 

このウェイトの違いを使い分けることで、読みやすさを上げることができます。

良く使用されるフォントであれば、Regular、Bold、Lightなど様々なフォントパターンが揃っています。

ウェイトを使いこなすということをUIデザインの原理原則として覚えておくと良いかと思います。

 

フォントの種類を増やすと内容が頭に入らなくなる

ここで少し余談ですが、フォントのウェイトは太い、細いという変化のため違和感を最小限に抑えつつ、重要な点に強弱をつけることができます。

しかしフォントの種類を増やすと、フォントの違いに注目が集まってしまい、伝えたい内容が伝えきれないということが起きます。

 

たとえ話にすると

プリンを食べた後に、味の良さではなくスプーンの形状を思い出してしまったら、スプーンの形状に問題がある

ということです。

 

むやみやたらに、スプーンの形状までこだわってしまうと、「味」という伝えたいことも記憶に残りづらくなります。

なので、フォントの種類も多ければ良いというわけではありません。

内容が伝わることが最重要なので、このさじ加減を間違えないようにフォントを決めるようにすると良いかと思います。

 

~さいごに~

フォントはデフォルトで入っているものだけでも十分ですが、伝えたい内容に沿ったフォントを使うことでよりイメージを伝えやすくなります。

そういった場合はフォントをDLして試してみると良いかと思います。

 

お疲れ様でした。

UIdesign-Font
学びに関する情報をチェック!