FigmaはUIデザインやプロトタイピングに向いたデザインプラットフォームです。ブラウザベースで軽快に動作し、操作性も優れているため、デザイン用途だけでなく資料作りなどにも重宝します。

そんなFigmaの数少ない欠点が縦書きに対応していないことです。そこでFigmaで縦書きをする方法を紹介します。とはいえ、疑似的に縦書きを実現するだけですので弱点もあります。そちらもあわせて説明します。

縦書きにする方法

例えば下記のような文言を縦書きにしたいとします。

テキストのプロパティはこのようになっています。

「フルスクラッチの～」という文言のレイアウトはこのようになっています。テキストボックスの幅693をフォントサイズである30に変更します。

縦書きになります。オブジェクト幅＝フォントサイズにしたことで、疑似的に縦書きを実現しています。

1文字ごとに改行しているに等しい状態ですので、文字詰めは文字間ではなく行間の方で調整可能です。行間を40に広げるとこのようになります。

縦書きに見せているだけですので、小さい「ツ」の行間や左右の位置は微妙です。行間の調整が必要です。左右のずれも気になる場合は「ツ」だけオブジェクトをわけるなどの対応が必要でしょう。

「サイト構築を～」のテキストも縦書きしました。長音符「ー」は当然縦にはならないため手動で対応が必要です。この例のようにゴシック体であればオブジェクトを分けて回転させれば済みますが、明朝ではそうはいきません。こうなるとIllustratorなどで縦書きしたものをベクターにして持ってきたほうが効率的です。

句読点も左に寄ります。

改行ももちろんできません。テキストオブジェクトを複製してそれっぽく見せるのみです。細々と調整をしてできあがったのがこちら。

できあがってしまえば、インパクトのある見出しにはなります。資料などで一部使う程度なら十分使えそうです。

まとめ

Figmaで縦書きを実現する方法でした。Adobe XDの場合はTategakiというプラグインを使うと同じようなことができます。長音符の横棒のままになる点なども含め、ほぼ同じ使用感です。XDの場合はIllustratorで縦書きしたものをCCライブラリ経由で取り込めますので、そちらが本命となります。

ウェブデザインにおいて、縦書きをアクセントとして使用する機会は決して少なくはありません。正式に縦書きに対応して、この記事が不要になることを切に願います。