figma-text-vertical-alternates
公開日: 2021.06.04  | 更新日: 2021.06.04

Figmaでテキストを縦書きに対応する方法

今回はFigmaでテキストを縦書きに対応する方法を紹介します。和風のWebサイトや広告バナー・フライヤーなどをデザインする際に、縦書きのテキストを配置したりできるようになるので、制作の幅も広がると思います。

実のところ、Figmaはテキストの縦書きには対応していません(2021年5月現在)。しかし、擬似的に縦書きに対応する裏技がありますので紹介します。ちなみにプラグインは使用しません。

この記事のターゲット

  • Figmaの初心者〜中級者

  • Figmaでテキストで縦書きする方法が知りたい方

  • 縦書きのレイアウト・デザインを試したい方


1. テキストオブジェクトに、縦書きにしたい文章を入力する

figma-text-sample

テキストオブジェクトを追加して、縦書きにしたい文章を入力します。

このとき、テキストのフォントは日本語フォントを選択してください。

具体的には、Macなら「Hiragino Kaku Gothic Pro(ヒラギノ 角ゴシック Pro)」「Hiragino Mincho Pro(ヒラギノ 明朝 Pro)」「Hiragino Sans」などのOS標準のフォントで構いません。その他、「Noto Sans JP」などオープンソースのフォントでも使用可能です。

今回は「Hiragino Mincho Pro(ヒラギノ 明朝 Pro)」にしてみます。

2. テキストオブジェクトの幅(Width)と行間(Line height)を、フォントサイズと同じ大きさにする

figma-textarea-size-change

テキストオブジェクトの幅と行間(Line height)の値をフォントサイズと同じ値にします。

上の図のように、フォントサイズが「32」の場合、両方とも値を「32」にします。

これで、1行だけの縦書きの文章になります。

ただ、この状態だと長音符(ー)や句点・句読点(、。)が横書きの方向になってしまっているので、とても違和感がありますね。

3. Textのオプションで「Vertical alternates」を「有効」にする

figma-vertical-alternates

この設定が今回のキモです。

「Vertical alternates」を「有効」にする手順は次の通りです。

  1. 1行になったテキストオブジェクトを選択する

  2. 右プロパティの「…」をクリックしてフォントの詳細設定のポップアップを開く

  3. ポップアップ内の「Letterforms」に「Vertical alternates」があるので、スイッチボタンの「✅ 」をクリックして有効化する

「Vertical alternates」を有効化すると、長音符(ー)や句点・句読点(、。)などの横書きの方向になってしまっている文字が、縦書きの方向に切り替わります

これで、1行だけですが縦書きで表現できるようになりました。

figma-vertical-autolayout-text

テキストを行ごとに分割して、Auto Layoutを使うことで擬似的に段組みを作ることもできます

ただし、読み物など長文を組む場合は、従来通りAdobe Illustratorなどで文字を組んでアウトラインを書き出して、ベクターデータとしてFigmaにインポートすることをおすすめします。


おまけ

縦書きの方法がわかったところで、制作物を作ってみたいけどどうやって作るのかわからないとお悩みの方は、以下の記事でベーシックなバナーを作る方法をレクチャーしていますので、興味があれば参考にしてください。

Figmaで簡単にコンテンツマーケティング用のバナー画像を作ってみよう

今回は、商品紹介やイベントの告知など、顧客にリーチするためのコンテンツマーケティングで利用するベーシックなバナー画像(ヘッダー画像)を、Figmaを使って作ってみようという試みになります。 ... 続きを読む

figma-basic-banner-design

また、Figmaの操作の中で困ったことやわからないことがあれば、以下の記事で基本的な操作方法を紹介していますので、あわせてご覧ください。

Figma初心者が使い方に困った時に試してほしいTips

今回は、納品されたり引き継いだFigmaのデザインデータを、修正・変更して再利用しようとした時によく発生するトラブルと、その対応方法をいくつか紹介したいと思います。 ... 続きを読む

figma-beginners-tips

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告