SALUDOBlog

Figmaで縦書きテキストを簡単に作る方法|注意点も解説

Figma縦書きテキストを簡単に作る方法

Figma縦書きテキストを作る前に知っておくべき知識

Figmaを使ってデザインでよくある縦書きのテキスト。実は意外と簡単に実現できます。基本の流れを見ていきましょう。

ステップ1: 和文フォントを使用

欧文フォントではダメ

まずテキストに和文フォントを指定します。欧文フォントの場合は縦書きができません。

Robotフォントは×

FigmaのデフォルトフォントであるRobotは欧文なので注意が必要です。

ステップ2: 幅と行間を調整

幅を文字サイズと同じに

テキストフレームの幅を文字サイズと同等にします。これで自動折り返しが可能に。

行間はフォントサイズ以上に

行間はある程度大きめにとることがポイントです。行間と文字サイズのバランスが大切です。

この単純な手順で、Figmaでもスムーズに縦書きテキストが実装できるのです。

Figmaの縦書きテキストに関する注意点

Figmaで縦書きテキストを作る際の追加ポイントと注意事項を整理します。

ステップ3: 詳細設定の変更がポイント

縦中横の調整が必要

長音符や句読点の向きがおかしくなります。「Vertical Alternates」をチェックして直します。

テキストオプションから設定可能

右のText設定アイコンから表示される詳細設定画面でVertical Alternatesの設定ができます。

複数行の縦書きテキストに対応しにくい

改行には対応していない

残念ながらFigmaの縦書きテキストは改行に対応していません。

複数テキストで疑似的に表現する方法も

複数行必要な場合は、テキストオブジェクトを何個かに分ける等の表現を検討する必要がありそうです。

Figmaで縦書きテキストを簡単に作る方法

Figmaで縦書きテキストを作成する方法を説明します。以下の手順に従ってください:

  • テキストツールの使用:
    • Figmaを開いて、作業したいデザインファイルを選びます。
    • ツールバーから「テキスト」ツール(Tキー)を選択します。
  • テキストボックスの作成:
    • キャンバス上でクリックし、ドラッグしてテキストボックスを作成します。
  • テキストの入力:
    • 作成したテキストボックスに、縦書きにしたいテキストを入力します。
  • 縦書きの設定:
    • テキストボックスを選択した状態で、右側のプロパティパネルにある「テキスト」セクションを見ます。
    • 「テキスト」セクションの下部にある「詳細オプション」をクリックします。
    • ここで「縦書き」またはそれに相当するオプションを探し、選択します。
  • フォントとサイズの調整:
    • 縦書きにしたテキストは、必要に応じてフォントやサイズを調整できます。
  • 配置とスタイルの調整:
    • テキストの配置や行間、文字間などのスタイルもカスタマイズできます。

これでFigmaで縦書きテキストを作成できます。ただし、Figmaのアップデートによりインターフェースや機能が変更されることがあるため、最新のガイドやヘルプセクションを参照することをお勧めします。

他にもあるFigmaで縦書きテキストを作成する方法

  • テキストボックスの回転:
    • この方法は直感的で、テキストレイヤーを選択し、SHIFTキーを押しながらレイヤーの角をドラッグして90度に回転させます。この方法は迅速ですが、読みやすさについては調整が必要になることがあります
  • テキストボックスのプロパティ調整:
    • このアプローチでは、テキストボックスを1文字ごとの行に収まるように縮小し、テキストを縦に並べます。この方法では、文字の縦の整列や間隔をより細かく制御できます
  • ラインツールの使用:
    • 別の方法として、ラインツールを使ってテキストボックスの中央に線を引き、その線の両側にテキストを入力するというものがあります。これは時間がかかりますが、見た目の良い縦書きテキストが得られます
  • プラグインの利用:
    • より自動化されたソリューションを求める場合は、Vertical TextやVertical Typeなどのプラグインを使用できます。これらのプラグインはテキストを縦に整形し、読みやすく視覚的に魅力的にします。
  • Auto Layoutを使った縦書きテキスト:
    • FigmaのAuto Layout機能を使って縦書きテキストを作成できます。これによりプロセスが自動化され、時間の節約になるとともに、文字の間隔や整列を一貫して保つことができます。文字を縦に並べてAuto Layoutを適用すると、効率的に間隔を調整できます
  • パスを使用したのテキスト作成:
    • よりダイナミックなデザインのためには、パス上にテキストを入力する技術を使用できます。この方法は、円形のパスや他の複雑な形状に沿ってテキストを作成するのに適しています

どの方法を選択するかは、特定のデザインニーズや目指す美学に依存します。各アプローチにはそれぞれの利点があり、異なるシナリオで効果的に使用できます。また、特に東アジアの言語で一般的な縦書きテキストをデザインする際は、選択するフォントが縦書き形式で読みやすいことを確認することが重要です

まとめ

  • 和文フォントを使用する
  • テキストフレームの幅を字体のサイズと同じにする
  • 行間をある程度大きく確保する
  • 縦中横の文字を直すには詳細設定の変更が必要
  • 残念ながら改行には対応していない

以上がFigmaで縦書きテキストを実装する基本的な流れです。 簡単な数行程度であれば活用できますが、改行ができないという制限がある点には注意が必要です。 複数行の疑似的な表現には工夫が求められます。