Figmaで日本語フォントを使う方法：選び方と追加・共有の手順

Figmaでは日本語フォントを使えます。日本語の文字を表示するためだけに、翻訳プラグインを入れる必要はありません。選んだ書体が日本語の文字を含んでいるか、使いたいフォントをFigmaから利用できるかを分けて確認しましょう。

メニューを日本語にすることと、キャンバスで日本語フォントを使うことは別の設定です。この違いはPixsoで日本語のUIをデザインする場合も同じです。画面の表示言語だけでなく、書体、太さ、チーム全員が使える環境までそろえると、共有後の文字崩れを減らせます。

1. Figmaで日本語フォントを使う

1.1 日本語UIと日本語フォントを区別する

UIの言語設定は、メニューや設定項目の表示に関わります。一方、フォントはテキストレイヤーの文字の形を決めます。日本語のメニューで操作していても、英字だけを含むフォントを選ぶと、漢字や仮名まで同じ書体にはなりません。

まずテキストレイヤーを選び、日本語を含む書体を指定します。たとえばNoto Sans JPとNoto Serif JPは、サンセリフ系とセリフ系を比べるときの候補です。書体名が似ていても、JP・KR・SC・TCなどの地域別の書体では字形が異なることがあります。

FigmaのCJKテキストの公式ヘルプ（英語）でも、必要な言語に対応するフォントの選択が案内されています。英字は表示できるのに一部の漢字だけ違って見える場合、文字入力ではなく、選択中の書体と文字の対応範囲を確認します。

1.2 候補を実際の日本語UIで比較する

フォント名の一覧だけでは、画面で読みやすいかは分かりません。候補を同じサイズで並べ、見出し、本文、ボタン、数字を含む短い画面を作ります。特に漢字だけの見本では、ひらがなや英数字との見え方の差を見落としやすくなります。

たとえば予約確認の画面なら、見出しは「ご予約内容の確認」、本文は「11月12日 14:00から、30分のオンライン相談です。」、ボタンは「この内容で予約する」にします。テキストをこの三つにそろえ、フォントだけを変えると、違いを比べやすくなります。

長いサービス名やメールアドレスも一度入れてみます。短いダミー文字では収まっていた欄が折り返されるなら、フォントだけを責めず、コンポーネントの幅と高さも確認します。書体の候補を絞ってから画面全体へ適用すると、手戻りを抑えられます。

1.3 パソコンに入れたローカルフォントを使う

ローカルフォントは、自分のパソコンにインストールして使うフォントです。Figmaが対応するTTF・OTF形式のファイルを用意し、OSへインストールします。ファイル名を変えたり、画像をキャンバスへ置いたりしても、フォントとして使えるようにはなりません。

1. フォントの配布元で、必要なファミリーとウェイト、利用条件を確認します。
2. TTFまたはOTFのフォントをパソコンへインストールします。
3. ブラウザ版ではFigmaのフォントインストーラーを用意します。デスクトップアプリでは、この機能がアプリに含まれています。
4. デザインファイルを再読み込みし、テキストレイヤーで書体と太さを選びます。
5. 日本語の例文と数字を入れ、意図した字形と折り返しになるかを確かめます。

手順の詳細はFigmaの日本語公式ヘルプで確認できます。同僚がローカルフォントを使った文字を編集する場合、その人の環境でも必要なフォントを利用できることが重要です。

共有後に一部だけ文字が変わったら、まずファミリー名と太さを照合します。「RegularはあるがMediumはない」という違いを、別の書体へ一括置換して隠さないようにします。ライセンス上フォントファイルを配布できない場合は、各メンバーが正規に利用できる方法を選ぶか、チームで使える書体へ変更します。

2. Pixsoで日本語の文字を組み、チームと共有する

Pixsoでもテキストの書体や太さを選び、画面の中で文字の見え方を比較できます。Figmaと同様、UIが日本語であることと、特定のフォントを全員が利用できることは分けて考えます。書体の名前だけでなく、使用するウェイトまで決めておきましょう。

2.1 明朝体とゴシック体を、使う場所で比べる

明朝体は縦横の線の太さや先端に特徴があり、ゴシック体は線の太さが比較的そろっています。ただし「見出しは明朝、UIはゴシック」と固定する必要はありません。予約の注意事項なら、本文サイズで細い線まで読み取れるかが判断の中心になります。

「ヒラギノ」は書体群の名前であり、明朝体・ゴシック体のような分類名とは異なります。特定のヒラギノ書体がどのパソコンでも標準搭載されていると考えず、実際に選択できる書体とライセンスを確認します。

2.2 画面内のテキストで候補を試す

上の予約確認画面を二つ並べ、見出しと本文に同じ候補を適用します。一方は細め、もう一方は標準の太さにして比較すれば、印象だけでなく小さな文字の読みやすさも判断できます。プレビューで良く見える書体でも、長いボタンや補足文では別の問題が出ることがあります。

選んだ本文・見出し・補足の設定を文字スタイルとして整理しておくと、同じファイル内の画面で再利用しやすくなります。コメントで「この書体が好み」と伝えるだけでなく、「補足文の漢字がこのサイズでは読みにくい」のように対象と理由を残しましょう。

2.3 ローカルフォントを使う環境をそろえる

Pixsoのブラウザ版でパソコンにインストールしたフォントを使う場合は、Font Assistantを接続します。日本語のダウンロードページにローカルフォントアシスタントが用意されています。デザインファイルのインポートメニューは、フォントをインストールする操作ではありません。

チームで利用する前に、同じ書体・同じウェイトで予約画面を開き、見出しの折り返し、ボタンの幅、入力欄の高さを比べます。片方の環境だけで表示が違うなら、すぐにレイアウトを直すのではなく、フォントの利用状態から確認します。

無料で配布されているフォントでも、商用利用、再配布、Webフォントとしての利用条件は個別に確認します。編集画面で使用できることは、公開するWebサイトへの組み込みや、他のメンバーへのファイル配布が許されることと同じではありません。

日本語の実文で選び、共有する条件まで決める

日本語フォント選びは、書体名を一つ決めれば終わりではありません。実際の見出し・本文・操作ラベルを置き、使う太さと表示サイズを決め、チームの環境でも同じように扱えることを確かめます。まずは予約確認のような小さな一画面で、見え方と使い方をそろえてみましょう。

Pixsoで日本語の画面を作る