Figmaでデザイン作業中、「よし、ここに縦書きのキャッチコピーを入れたい！」と思った瞬間、手が止まってしまった経験はありませんか？
私も最初はかなり戸惑いました。長音符（ー）や句読点が横を向いてしまったり、そもそも縦書きにする設定がどこにも見当たらなかったり…。
実は、Figmaには標準でテキストを縦書きにする機能がありません。でも、安心してください！いくつかのテクニックを使えば、ちゃんと美しい縦書きを表現できるんです。
私が現場で実際に使っている、Figmaでの縦書きテクニックを基本から応用まで全部お見せします！
そもそもなぜFigmaは縦書きに標準対応していないの？
Figmaが縦書きに標準対応していない一番の理由は、このツールがもともとWebサイトやアプリのUIデザインといった「横書き文化」をベースに開発されたからです。
Webの世界では、文章は基本的に左から右へ（LTR: Left-to-Right）流れます。Figmaのテキスト機能も、この原則に沿って作られているんですね。縦書きは日本語など一部の言語で使われる特徴的なレイアウトなので、世界的なツールであるFigmaでは標準機能としての優先順位が高くなかった、というわけです。
もう悩まない！Figmaで縦書きを実現する5つの方法
標準機能がないからといって、諦める必要はまったくありません！現場のデザイナーたちが編み出した、賢い方法がいくつもあります。
ご自身の作りたいデザインや作業スピードに合わせて、最適な方法を選んでみてくださいね。
方法1：【基本】テキストボックスとOpenType機能で疑似的に再現する
まず試してほしいのが、Figmaの標準機能だけで完結する最も基本的な方法。これは、テキストボックスの幅を意図的に1文字分まで狭くして、OpenTypeフォントが持つ縦書き用の文字情報を呼び出すというテクニックです！
まずはいつも通り、縦書きにしたいテキストを入力します。
テキストボックスの右端をドラッグして、幅を1文字分くらいにグッと狭めてみましょう。この時点で、文字が縦に並び始めるはずです。
テキストを選択した状態で、右側のデザインパネルにある「Text」セクションの三点リーダー「…」（Type settings）をクリックしてください。
表示されたパネルの「Details」タブを開き、下の方にある「Vertical alternates」という項目を探してON（有効）にしましょう！
方法2：プラグイン「Vertja」を導入して一発変換！
「もっと手軽に、サクッと縦書きにしたい！」という方には、プラグインの導入が断然おすすめです。特に「Vertja」というプラグインは、日本語の縦書きに特化していて本当に優秀なんです！
インストールさえしてしまえば、縦書きにしたいテキストを選択してプラグインを実行するだけ。一瞬でキレイな縦書きテキストに変換してくれます。約物（句読点や括弧）の処理も賢いので、作業がめちゃくちゃ捗りますよ。
-
ワンクリック変換でとにかく作業がスピーディー
-
長音符や句読点を自動で縦書き用に直してくれる
-
複数のテキストオブジェクトも一括で変換可能
方法3：Auto Layoutを駆使して複数行の縦書きを制御する
複数行にわたる縦書きの文章や、他の要素と組み合わせたレイアウトを作るなら、Auto Layoutとの組み合わせが最強の選択肢になります。後からの修正やマージン調整が、驚くほどラクになりますからね！
やり方はいくつかありますが、簡単なのは改行したい箇所でテキストオブジェクトを分割し、それらをまとめて選択してAuto Layoutを適用（`Shift + A`）する方法です。
Auto Layoutを使えば、テキストの追加や削除、順番の入れ替えもドラッグ＆ドロップで直感的に行えます！
縦書きにしたいテキストを、改行したい位置で複数のテキストオブジェクトに分割する。
分割したすべてのテキストオブジェクトを選択する。
ショートカットキー `Shift + A` でAuto Layoutを適用。
Auto Layoutパネルで、方向を「→」（水平）に設定する。
オブジェクト間の間隔（Spacing between items）を調整して、好みの行間に整える。
日本語特有の「文字崩れ」も怖くない！微調整テクニック
縦書きで地味に悩ましいのが、小さい「っ」や「ゃゅょ」（拗促音）の位置が、なんだか中央からズレて見える問題です。
「Vertical alternates」を有効にすれば大半は解決しますが、フォントによってはそれでもズレが気になることも。そんな時は、ズレが気になる文字だけを別のテキストオブジェクトに切り分け、手動で位置を微調整するのが確実な解決策。少し手間はかかりますが、このひと手間でデザインのクオリティがぐっと上がりますよ！
方法4：【最終手段】Illustratorで作成してSVGで読み込む
長文の縦書きや、カーニング（文字詰め）などを厳密に行いたい、デザイン性が重要な場面では、無理にFigmaで完結させる必要はありません。
そんな時は、グラフィックデザインのプロであるIllustratorで完璧な縦書きテキストを作成し、アウトライン化してSVG形式で書き出し、それをFigmaに読み込むのが最も確実で美しい仕上がりになります。
FigmaとIllustratorの使い分け目安
- Figmaで完結させるケース：Webサイトのキャッチコピー、短い見出し、ボタン内のテキストなど、比較的短く、修正が頻繁に発生する可能性のあるもの。
- Illustratorで作成するケース：ポスターやチラシのような作り込みが必要なもの、長文の縦書き、デザイン性の高いロゴタイプなど、品質を最優先したいもの。
IllustratorはAdobeのグラフィックデザインのソフトとして有名ですが、Figmaは使っているけどIllustratorは持っていない、という方も多いと思います。作りこみの必要なビジュアルを作りたいときは、やはりFigmaよりIllustratorでの作業がおススメです。
- Figmaも契約しているし、Adobeは高いから買えないよ…
という方も、ご安心ください。
Illustratorを一番安く手に入れる方法について、以下記事で解説しています。気になる方はチェックしてみてくださいね！
方法5：【原始的だけど確実】テキストを1文字ずつ分割する
これは本当に最後の手段ですが、紹介しておきます。それは、縦書きにしたい文字を1文字ずつ個別のテキストオブジェクトとして作成し、手動で並べていくという、非常にパワフルな方法です。
当然、とてつもなく手間がかかりますし、後からのテキスト修正も大変。ただ、どんなフォントでも、どんな特殊なレイアウトでも、自分の意図通りに配置できるという点では最も自由度の高い方法と言えるかもしれません。使う場面は限られますが、覚えておいて損はないでしょう。
知っておきたい！Figma縦書きの注意点とベストプラクティス
Figmaで作成した縦書きを、実際のWebサイトや印刷物で使う際には、いくつか知っておくべき注意点があります。後で「こんなはずじゃなかった…」と慌てないように、しっかり押さえておきましょう。
Webサイトに実装する場合
Figmaで作成した縦書きデザインは、そのままHTML/CSSで再現されるわけではないので注意が必要です。基本的には、画像（PNGやSVG）として書き出してimgタグで配置するのが一般的。
もし、CSSの`writing-mode: vertical-rl;`を使ってテキストとして実装してほしい場合は、Figmaのデザインはあくまで「見た目の完成形イメージ」としてコーダーに共有しましょう。その際、フォントファミリーや文字サイズ、色などの情報を正確に伝えてあげるのが親切です。
印刷物で使う場合
Figmaはあくまで画面デザイン用のツールなので、印刷用の厳密なカラー管理（CMYK）や組版には対応していません。今回紹介した方法はすべて「疑似的な」縦書きなので、本格的なDTP（印刷物デザイン）には不向きです。
クライアントから印刷物の制作を依頼された場合は、迷わずIllustratorやInDesignといったプロ用のDTPソフトを使いましょう。完成物の品質と安全性がまったく違います！
IllustratorやInDesignはまだ持っていない、という方は以下の記事で解説しているAdobe系ソフトを一番安く買う方法も参考にしてみてください！
まとめ：Figmaの縦書きは「工夫次第」で攻略可能！
Figmaで「できない」と思われがちな縦書きを、美しく実現するための具体的な方法を5つご紹介しました。
どの方法を選ぶかは、作りたいデザインの「目的」によって変わってきます。最後に、目的別の最適な方法をもう一度おさらいしておきましょう！
- 手軽さ・速さ重視なら：プラグイン「Vertja」か、OpenTypeの「Vertical alternates」を活用する。
- レイアウトの柔軟性・修正のしやすさ重視なら：テキストを分割して「Auto Layout」で制御する。
- 品質・デザイン性最優先の長文なら：無理せず「Illustrator」で作成し、SVGで読み込む。
Figmaは横書きが基本のツールですが、これらのテクニックを身につければ、デザインの表現力が格段にアップします。
もう「Figmaだから縦書きは無理…」と諦める必要はありません！ぜひ、あなたのデザインに縦書きを取り入れてみてくださいね。
