2025.10.14
# Web制作
Figmaでもできる！ 縦書きデザインの作り方
Figmaで縦書きはできる？
日本語デザインでは欠かせない「縦書き」。
雑誌の見出しや和風パッケージ、ポスターなどでよく見られますが、WEBの現場だと横書きが主流で使う頻度は減りますよね。その為かFigmaでは、海外製ということもあり、残念ながら縦書き設定が用意されていません。Microsoft OfficeやAdobe CCのツールでは、当たり前にあるのに…とショックを受けた方も多いのでは。日本語を使う身として、悔しすぎる…諦めるしか道は無いのでしょうか…。
しかし、少し設定を工夫することで、見た目はちゃんと“縦書きっぽく”再現できるんです。Figmaでも、縦書きデザインを諦めなくていいのです。つまずきやすい「ー」や「…」など縦組みでの文字の崩れも解決できます。
縦書きとは。デザインを使うシーンと魅力
皆さんご存知縦書きとは、上から下、右から左へと並べる書字方向で、漢字をルーツにもつ言語圏で利用されています。日本では、書籍、雑誌、新聞、コミック、広告など、幅広い分野で横書きと併用されています。
縦書きには独特のリズムと雰囲気があります。例えば、
- 和風・落ち着いた印象を出したいとき
- 情報量をコンパクトにまとめたいとき
- 目線の流れを変えて印象を強くしたいとき
冊子やグラフィックデザインはもちろん、横書き主流のWEBデザインではアイキャッチや文字の強調といったデザイン上の効果を狙って用いられることが多いです。横書き中心のデザインに「縦の要素」を1本入れるだけで、ぐっと引き締まることもあります。デザインにいい味出してくれます。使っていきましょう。
日本語フォントの強い味方、OpenType機能でさらに美しい縦組みも
日本のフォントメーカーは、縦組みにも手厚いです。縦の文字組みを美しく見せる「縦組みペアカーニング」など、縦書き機能を備えているOpenTypeフォントが多数リリースされています。
LETSのサイトより
フォント配信サービスLETSのサイトでは、フォント閲覧時、文字組み方向の切り替えができ、プレビューで簡単に見られるように配慮されています。
WEBでの縦書きを普及促進するべく活動する委員会（縦書きWeb普及委員会）もあるようです。知っていくと、奥が深いです日本の縦書き。
日本の歴史的な慣習もあり、多様なフィールドで用途がある縦書きですが、欧米など多くの国では使用されません。WEBでも横書きが主流で、Figmaにも縦書きの概念が無いですが、いつか標準でご用意いただけるのでしょうか…。
Figmaで縦書きを表現する方法
手動で縦並びにする
いちばんシンプルで皆が思いつくのは、「改行して縦に並べる」方法です。
こ
ん
に
ち
は
このように、横書きのボックスでも一文字ずつ改行して並べれば、見た目は縦書きに見えます。
改行を入れなくても、文字ボックスのサイズを思い切ってキュッと1文字分の幅に縮めてみましょう。縦書きになりました。
どちらも行間（Line height）を少し詰めて調整すると◎です。見本は、行間を110%にしています。数値でコントロールできるので意外と融通が利きます。
この方法は、見出しなど短いテキストに向いています。2行にまたがる場合、文字ボックスを分けなければ成立しません。改行を伴う文章、長文には不向きです。
よくある注意点と対処法
文字数が多い日本語を扱うと、上記だけでは上手くいかない場合が出てきます。
文字が左に寄っている
左揃えのまま入力すると、一部の文字（主にひら・カタ・英数字）が偏って表示されてしまいます。文字揃えを中央揃えにしておきましょう。
また、タイポグラフィの詳細設定のProportional alternate widthsにチェックを入れている場合も、自動カーニングが働いて左寄りになってしまいます。センター揃えにしておくか、Proportional alternate widthsのチェックを外すと解決します。
伸ばし棒（長音符「ー」）や句点・読点の向きや位置がおかしい
当たり前なのですが、縦書きに見えてもベースは横書きなので、「ー」などは横向きのままです。句読点の位置もなんだかおかしい。
しかし、こちらも詳細設定を開き、Vertical alternatesにチェックをすると、なんと良い感じに変わってくれます。
行間が不自然
前述したように、 行間（Line height）を100%前後に調整すると、1行の文字間隔が縮まり、不自然さは取れます。フォントによっては90〜120%で見やすくなることもあるので、適宜調整しましょう。
縦書きをきれいに見せるコツは、“詰めすぎないこと”。文字間・行間に少し余裕を持たせると、縦の流れがきれいに見えます。
Figmaの設定を使って、縦書きをそれなりに擬似的に表現するテクニックは、以上になります。複数行の縦書きは、実用的ではありません。修正が入って1行の文字数が増減したら…絶望的になりそうです（汗）。
プラグインで縦書き表現を効率アップ
ある程度、Figmaでの縦書きの世界に光が見えるプラグインが複数ありますので、使ったことがあるものを一つ紹介します。
Vertja
「Vertja」は、先ほど述べたややこしい文字の設定の一つひとつの調整を自動で一瞬でやってくれます。そしてなんと、行が複数にまたがってもOKなのです。
普通に打ったテキストボックスを選択し、変換時の行間と字間をVertjaで設定します。
字間10%、行間200％にしてみました。「Convert/Sync」ボタンを押すと、瞬時に縦書きに変換されます。行間などが上手くいかなければ、入力し直せば何度も変換OK。長音符や句点・読点は手動で直します。あとから改行を入れて1行の文字数が変わっても、しっかり反映されます。
構造を見てみると、例の擬似的に縦書きに見せた文字ボックスを、オートレイアウトで配置しているようです。
長文もOKなので、ポエムとかにも良さそうですね。変換したボックスは、オートレイアウトで緻密に組まれており、今後直接触るのは少々しんどそうです。
まとめ
Figmaでの縦書きは、完全対応ではなくあくまで擬似的ですが、少しの工夫で十分きれいに再現できます。記事本文のような超長文は難しいですが、プラグインを使えば行数がある程度あっても楽に縦書きにできます。
デザインの印象を変える“縦の流れ”。ぜひ自分の作品にも取り入れてみてください！
以上、Maromaroのfutaでした。
