【Figma】Figmaでテキストを縦書きする方法

Figmaは、WebデザインやUIデザインにおいて広く利用されているツールですが、
縦書きテキストの作成には少し工夫が必要です。
本記事では、Figmaで縦書きテキストを作成する方法を詳しく解説します。

1. テキストの入力

まず、縦書きにしたいテキストを入力します。この際、日本語フォントを選択してください。具体的には、「Hiragino Kaku Gothic Pro（ヒラギノ角ゴシック Pro）」「Hiragino Mincho Pro（ヒラギノ明朝 Pro）」「Noto Sans JP」などが適しています。

2. テキストボックスの幅と行間の調整

テキストボックスの幅（Width）と行間（Line Height）を、使用しているフォントサイズと同じ値に設定します。例えば、フォントサイズが「60」の場合、幅と行間も「60」に設定します。これにより、テキストが縦に配置されます。

ただし、この状態では長音符（ー）や句読点（、。）が横向きのままになっています。これらを縦向きに修正する必要があります。

3. 「Vertical Alternates」の有効化

テキストオブジェクトを選択し、右側のプロパティパネルで「…」をクリックしてフォントの詳細設定を開きます。「詳細設定」タブ内の「字形」セクションにある「Vertical Alternates」を有効にします。これにより、長音符や句読点が縦向きに表示されます。

注意点として、フォントによっては「Vertical Alternates」オプションが利用できない場合があります。その際は、別の日本語フォントを試してみてください。

4. 行間の調整

テキストの可読性やデザインのバランスを整えるために、行間（ラインハイト）の調整が重要です。行間を適切に設定することで、テキストの詰まりや間延びを防ぎ、視認性を向上させることができます。

行間を調整する方法として、以下のポイントに注意しましょう：

• テキストプロパティでラインハイトを指定する：フォントサイズに応じて適切な行間を設定し、読みやすさを確保します。
• Auto Layoutを活用する：複数のテキスト要素を均等に配置し、柔軟に調整できるようにします。

5. まとめ

Figmaでは標準機能だけで完全な縦書きテキストを作成するのは難しいものの、テキストボックスの調整や改行の工夫、Auto Layoutの活用などで縦書き風の表現が可能です。

デザインの要件に応じて、これらの方法を適切に組み合わせながら、Figmaでの縦書きテキスト作成に役立ててください。