logo
プレミアム記事あり

FigmaではじめるズボラUIデザイン (3)~最低限のテキストフォント~

この記事の文字数は、6,208 文字です。

Figmaの操作方法と合わせて、最小のコンポーネントであるテキスト・フォントについて考えていきます。 デザイナーでもない限り、フォントについてあまり深く考えるないかもしれません。 しかし、コンテンツを作るにあたり第一印象となるのはフォントです。 読みにくいフォントが適用されたテキストで表示されたブログは内容うんぬんより、まず読む気になりませんよね。

検索キーワード
明朝体 ゴシック体 違い
セリフ体 サンセリフ体 違い
Figma フォント 変更方法
Figma フォント 再利用

こんにちわ。ナオツです。

前回はFigmaを使った最小のコンポーネントである「カラー」の説明をしました。 詳しくはこちら

上記の手順を使って、カラーコンポーネントを3つ作成しておきました。 カラーコンポーネント化

今回は、もう1つの最小コンポーネントである「テキストフォント」の話です。

ブログ記事など文章で誰かに情報を伝える場合、読みやすさの要素のひとつが「テキストフォント」です。

でも何百種類ものフォントがこの世には存在します。

いったい何のフォントを使ったら良いか悩みますよね?

この記事はそんな悩みに答えるべく、

フォントの分類や、読みやすい代表的なフォントを紹介します。

またFigmaでUIデザインする際に、テキストフォントをいちいち設定するのは億劫です。

合わせてフォントを適用したテキストをコンポーネント化する方法をご紹介します。

フォントとは

フォントには下記の特徴があります。

  • サイズを変更できる
  • 色が変更できる
  • 様々な形状(フォント種類、font family)がある

日本語や英語のテキストに対して、上記のような特徴を与え見出しや本文などに適用することで、サイト全体の読みやすさを実現していきます。

フォント種類をざっくり分類

フォント違い

Webサイトで良く使うフォントは、日本語フォントと英語フォントで大きく区別できます。

日本語フォントで良く使うのが、

  • 明朝体
  • ゴシック体

英語フォントで良く使うのが、

  • セリフ体(Serif)
  • サンセリフ体(Sans-serif)

です。

実装する上で注意すべきことが1点あります。

日本語フォントには英語が含まれているが、英語フォントには日本語は含まれていません。

つまり、セリフ体やサンセリフ体で日本語を入力しようとすると、 文字化けするか、システムのデフォルトの日本語フォントが適用されます。 (表示方法がWindowsやMacで異なることがあります)

それでは、それぞれ詳しくご紹介します。

明朝体

横線に対して縦線が太く、横線の右端や曲り角の右肩にウロコと呼ばれる三角形の山がある書体です。

レポートや報告書などの長い文章(資料系)には、明朝体のような「細い書体」が向いています。

小説なんかも明朝体で書かれていることが多いのではないでしょうか?

長い文章をゴシック体のような太いフォントで書いてしまうと、全体的な見た目が真っ黒になってしまうので、可読性が下がると言われています。

代表的なフォント

  • MS明朝
  • 游明朝
  • ヒラギノ明朝

ゴシック体

横線と縦線の太さがほぼ同じで、前述のウロコがほどんどない書体です。

線が太いので、遠くから見てもわかる文字に採用されることが多いです。

看板や地図などの文字やプレゼン資料などで見かけるのではないでしょうか?

ちなみに、ゴシック体でも線が細いフォントであれば、長い文章でもOKです。

全体的な紙面が黒々せず、可読性は充分に高くなるでしょう。

明朝体よりモダンな印象の文章にしたいとき採用します。

このサイトは全体的にゴシック体を使用しています。

代表的なフォント

  • MSゴシック
  • 游ゴシック
  • ヒラギノ角ゴ

セリフ体

縦線が太く、ウロコのある書体で、英語版の明朝体 のような位置づけです。 使いどころも明朝体と同じように、長い文章や論文などでよく見かけます。

代表的なフォント

  • Times New Roman
  • Geogia

サンセリフ体

線の太さが一様でウロコのない書体なので、こちらは英語版ゴシック体 という位置づけですね。 こちらもスライドなどで英語表記する場合などに使うことが多いです。

そして日本語のゴシック体同様、細いゴシック体であればブログ記事などにも適用できます。

海外のブロガーさんの記事は、サンセリフ体の採用率が高い気がします。

そうすることでモダンな印象を与えることが可能です。

代表的なフォント

  • Arial
  • Helvetica
  • Calibri

フォントの利用シーン

Webサイトにおけるフォントの利用シーンは多岐にわたります。 テキストが存在するところにフォントは必ず存在します。

代表的なところでは、

  • ボタンのテキスト
  • ラベルのテキスト
  • 見出しのテキスト
  • 文章のテキスト

などで利用されます。

ダミーテキスト

コンポーネントを作る前に、フォントを確認するためのダミーテキストについて触れておきます。

よくUIデザインで使うダミーテキストには、

  • 「ああああああああああああああああああああ」
  • 「テキストテキストテキストテキストテキスト」

のようなテキストが見られますが、あまり適切ではありません。

実際に文章を書いてから、「あれ、なんかデザイン微妙じゃね?」となることが多いからです。

理想は、リアルな文章です。

具体的には「日本語」「英語」「記号」が混ざっているのが一番良いです。

しかし、そんな都合の良いテキストをゼロから考えるのは億劫ですよね?

そこで僕は下記のリンクを参考にしています。

ダミー文章の参考

ここに載っているWikipediaの数学・物理学のページを参考にするのが良いかと思います。(意味は理解できなくて良いですw) 長いので適当に区切って使います。

複素数体であれば、任意のCM-タイプの A は、実際、数体である定義体(英語版)(field of definition)を持っている。自己準同型環の可能なタイプは、対合(ロサチの対合(英語版)(Rosati involution)をもつ環として既に分類されていて、CM-タイプのアーベル多様体の分類を導き出す。

もっと詳しくWebデザインを学びたい方はこちら!↓ 未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

Figmaでフォントをコンポーネント化する手順

次にFigmaでフォントコンポーネントを作っていきましょう。

続きをお読みいただくには…

プレミアム記事 を購入する
価格:100円(税込)
ホームUIデザインFigmaFigmaではじめるズボラUIデザイン (3)~最低限のテキストフォント~

Ads

すべての記事

  • すべての記事を読む

システム開発関連の記事

  • システム開発関連すべて
  • インフラ

UIデザイン関連の記事

  • UIデザイン関連すべて
  • Figma

フロントエンド関連の記事

  • フロントエンド関連すべて
  • フロント技術全般
  • React

バックエンド関連の記事

  • バックエンド関連すべて

開発環境関連の記事

  • 開発環境関連すべて
  • Windows

生活関連の記事

  • 生活関連すべて
  • フリーランス
  • 学び