Figma で日本語テキストの見た目をよしなにする


Figma はUIデザインだけでなく、ある程度のグラフィックのデザインもできます。
テキストのある簡単なバナーなどの画像をつくる場合は、日本語のテキスもうまく扱いたいところです。
Figma で日本語テキストを扱う場合の文字間や調整について、簡単に何ができるかまとめてみます。

文字間: Letter Spacing

タイポグラフィのパネルの Letter Spacing で、文字間を調整ができます。

文字のサイズをベースにしたパーセントとピクセルでの指定ができます。数値をマイナスにして詰めることもできます。

日本語テキストの微妙なところに対応する

Photoshopでは「メトリクス」でよしなにするという方法もありますが、Figma ではオプション設定をする箇所が違います。タイポグラフィのオプションはちょっと潜った位置にあるので気づきにくいかもしれません。
 Alternate half widths や Proportional Alternative Widths を使うことで、 Photoshop や Illustrator のような文字の調整も可能になります。

Alternate half widths

オプション Alternate half widths にチェックすると、いわゆる「約物半角」ができます。
 「」『』・()、。 など、約物が混ざる際に、その文字に対して Alternate half widths のチェックを入れると「約物半角」の扱いになります。

Proportional Alternative Widths

OpenTypeのプロポーショナルフォントを使用する場合、オプション Proportional Alternative Widths にチェックを入れるとプロポーショナルメトリクスが適用されます。

まとめ

「約物半角」や「プロポーショナルメトリクス」の対応は Figma でも可能です。
Letter Spacing 、Alternate half widths や Proportional Alternative Widths を組み合わせて、文字間や約物の扱いも含めた文字の調整ができます。

組み合わせについては Letter Spacing と Alternate half widths 、Letter Spacing と Proportional Alternative Widths になるでしょう。

Alternate half widths と Proportional Alternative Widths を同時に使うことはあまりないと思います。Proportional Alternative Widths で約物も調整されているので Alternate half widths も併用すると文字間が詰まりすぎたり表示がマイナスになることもあります。

Proportional Alternative Widths が使えると、ざっとテキストの並びの基本をそろえて、Letter Spacing で細かな調整をする、というようなことができますね。

このような多少細かな日本語テキストの可能なので、簡単なテキストを含むグラフィックも Figma でできてしまえるかもしれないですね。
ご参考になれば幸いです。

Gaji-Laboでは、UIデザイナーを募集しています

弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

求人応募してみる!

投稿者 Imanishi Emi

UIデザイングループリード。
制作会社でプロモーションサイトや広告のデザイン制作、受託開発会社にてサービスのUIデザインを経験し、Gaji-Laboに参加。ユーザーが使いやすいインターフェースデザインづくりと、フロントエンドで実現するUIデザインの橋渡しについて考えます。
実際にインターフェースを試したりフィクションの世界のUIにヒントをもらいながら、心地よく使えるデザインを考えるのが好き。