Figmaでテキストを縦書きにする方法を解説。基本テクニックを使って、わかりやすく紹介します。
ももっぺも最初は、Figmaに「縦書きボタン」があるのかなと思っていました。実際には、テキストボックスの幅を調整して1文字ずつ折り返されるようにし、行間や文字間を整えることで、縦書きのように見せる流れになります。
Figmaで日本語を縦書き風に見せるときは、テキストボックスの横幅を狭くします。
横幅を狭くすると、文字が横に並びきらず、1文字ずつ下に折り返されます。これを利用することで、縦書きのような見た目を作ることができます。
ただし、この方法は文字を完全な組版として縦書きに変換するというより、テキストボックスの幅を調整して、文字を縦に並べる方法と考えると分かりやすいです。
そのため、文章量が多い本文よりも、短い見出しや装飾テキストに向いています。
まず、Figmaでテキストツールを選択し、縦書きにしたい文字を入力します。
最初は短い言葉で試すのがおすすめです。
たとえば、「できますと」「お知らせ」「キャンペーン」「使い方」など、数文字の言葉から試すと調整しやすいです。
文章が長いと、折り返しや行間の調整が難しくなるため、まずは短い見出しから作ると分かりやすいです。
まずはテキストツールでテキストを入力する
次に、テキストボックスの横幅を狭くします。
横幅を狭くすることで、文字が1文字ずつ下に折り返され、縦に並んだように見えます。Figmaでは、テキストレイヤーのバウンディングボックスの幅や高さを調整できるため、この仕組みを使って縦書き風に整えます。
このとき、横幅を狭くしすぎると文字が詰まって見えることがあります。
逆に広すぎると、2文字以上が横に並んでしまう場合があります。
文字サイズに合わせて、1文字だけが入るくらいの幅に調整するときれいに見えます。
- テキストボックスの横幅を固定
- フォントサイズと同じサイズで横幅を指定
文字が縦に並んだら、行間や文字間を調整します。
文字同士が近すぎると読みにくくなり、離れすぎるとまとまりがなく見えます。Figmaの行間設定では、テキストの行間の距離を調整でき、読みやすさやデザインのバランスに関係します。
縦書き風に見せる場合は、文字の間隔を少しゆったりさせると読みやすくなります。
特に、サムネイルやバナーに使う場合は、画像全体の中で文字が見やすいかを確認しながら調整すると良いです。
行間を100%に設定すると文字の間隔が埋まります
お好みで行間を調整して、ちょうどよい文字の間隔を探してみてください
縦書きにするときに気になりやすいのが、長音符「ー」や記号の向きです。
たとえば、「オーラ」「キャンペーン」「ユーザー」のように長音符が入る言葉では、横書きのままだと少し違和感が出ることがあります。
今回の記事のように、長音符だけ角度を調整する方法もあります。
該当する文字だけを別テキストに分けたり、回転させたりして、見た目を整えると自然に見えます。
ただし、すべての文字を細かく調整しすぎると作業が大変になります。
短い見出しや装飾テキストに使う場合だけ、必要な部分を整えるくらいが扱いやすいです。
何も設定しないと、横書きのままの長音符になってしまいます
長音符を縦書きに合わせて回転させます
Figmaで縦書き風にする方法は便利ですが、いくつか注意点があります。
まず、長い本文にはあまり向いていません。
テキストボックスの幅を狭めて折り返す方法なので、長文になると読みづらくなったり、調整に時間がかかったりします。
また、長音符、括弧、句読点、英数字などは、縦書きにしたときに違和感が出やすいです。
特に英数字が混ざる場合は、横向きのまま残すか、別レイヤーにして調整するかを考える必要があります。
そのため、Figmaで縦書き風テキストを使うときは、短い言葉や見出しに限定すると使いやすいです。
ももっぺがFigmaで縦書きを試してみて感じたのは、短い見出しや装飾にはかなり使いやすいということです。
特に、サムネイルやバナーの中で少しアクセントをつけたいときに便利だと感じました。
ただし、長文をきれいに縦組みにする用途には向いていない印象です。
細かい記号や英数字まで整えようとすると、手作業での調整が必要になります。
そのため、Figmaでは「本文をしっかり縦組みする」というより、デザインのアクセントとして縦書き風に使うのが良さそうです。
Figmaでは、テキストボックスの横幅を狭くすることで、日本語の文字を縦書き風に並べることができます。
文字を入力したあと、テキストボックスの幅を1文字分くらいに調整し、行間や文字間を整えると、見やすい縦書きになります。
ただし、長文や英数字を含む文章では調整が難しくなることがあります。
そのため、短い見出しやサムネイル、バナーのアクセントとして使うのがおすすめです。
ももっぺは、Figmaの縦書き風テキストは、デザインに少し変化をつけたいときに便利な小技だと感じました。
横書きだけでは少し単調に見えるときや、和風・ポスター風の雰囲気を出したいときに試してみると良さそうです
