【Figma】縦書きデザインをマスターしよう

figma70のサムネイル

日本語の縦書きデザインを扱う際にはいくつかの工夫が必要です。特に「どっちから配置すればいいのか?」「伸ばし棒の扱い」「改行の方法」「プラグインの活用」など、縦書き特有の課題をクリアしながらデザインを作成する必要があります。本記事では、Figmaで縦書きデザインを実現するための方法を詳しく解説します。

Figmaでの縦書きの基本

Figmaはデフォルトで横書きのデザインに対応しており、縦書きの機能は標準では搭載されていません。しかし以下の方法を活用することで、Figma内で縦書きデザインを実現できます。

縦書きの基本設定

Figmaで縦書きを設定する方法には、以下の手順があります。

テキストの改行

文章を手動で改行して縦に並べる

1文字ずつの配置

文字を1つずつ配置する(時間がかかる)

プラグインを活用

専用のFigmaプラグインを使う(効率的)

プラグインは次の次のセクションで紹介しています。

縦書きデザインの課題と解決策

縦書きの方向

「縦書き どっちから始めるのか?」という疑問はよくあります。基本的には、縦書きは右から左へ配置するのが一般的です。日本語の書籍や新聞と同じルールでデザインすれば違和感がありません。

伸ばし棒の問題

縦書きにすると「ー(伸ばし棒)」の向きが横のままになってしまうことがあります。正しく表現するためには、以下の方法を試してください。

  • 全角の「ー」を使うと縦書きでも正しく表示されることが多い
  • プラグインで自動変換できるものを使う
  • フォントの設定を見直す(特定のフォントでは縦書きに適応される)

改行のルール

Figmaではデフォルトで横書きが前提となっているため、改行の設定にも注意が必要です。通常の改行(Enterキー)ではなくShift + Enterを使うことで、意図した場所で改行しやすくなります。

縦書きの場合は改行位置がデザインの美しさに影響を与えるため、行間の調整を適切に行いましょう。

縦書きに対応したFigmaプラグイン

Figmaで縦書きを効率的に扱うには、プラグインの活用が重要です。以下のプラグインを試してみましょう。

「Vertja」プラグイン

  • 文字を縦書きに変換できる
  • 伸ばし棒の向きも自動で修正
  • グループ化や整列機能を維持

実践!縦書きデザインの作成手順

実際にFigmaで縦書きデザインを作成する手順を紹介します。

縦書き用のテキストを準備

Figmaで新規プロジェクトを作成

テキストツール(T)を使い、文章を入力

必要に応じて改行やフォントを調整

プラグインを適用

「Vertja」プラグインを適用

伸ばし棒や改行を確認

必要ならフォントを変更

日本語の縦書きデザインをより美しくするコツ

フォントの選び方

縦書きに適したフォントを選ぶことで、デザインがより洗練されます。

おすすめフォント

  • 游明朝体(読みやすく上品)
  • ヒラギノ明朝(和風のデザインに最適)
  • 源ノ明朝(シンプルで視認性が高い)

下線の活用

横書きではアンダーライン(下線)を使用することが多いですが、縦書きでは避けた方が無難です。代わりに「傍点」や「字間の調整」を活用すると、強調が伝わりやすくなります。

どうしても線を引きたい場合は右側に「傍線(サイドライン)」を引くことが自然ですが、見慣れないので少し不自然に感じる可能性が高いです。(左側に間違って引く人が多い印象があるので、迷う人が多いのだと思います)

まとめ

Figmaで縦書きデザインを行うには、標準機能ではなくプラグインを活用するのがベストです。

「縦書き どっちから配置すべきか」「伸ばし棒の向き」「改行の工夫」「プラグインの選定」「フォントや下線の使い方」を意識することで、美しい日本語の縦書きデザインが可能になります。

Figmaを使いこなして、魅力的な縦書きデザインを作成してみましょう!

他にもクリエイターの収入アップ方法も紹介しているので、自分の給与に違和感がある方は覗いていってみてください。

最新記事
  • カテゴリー
  • 月別
  • Twitter

    ココナラでデザインを依頼する

    7000本の授業が見放題!社会人向けオンライン学習動画【Schoo(スクー)】

    Webデザイン業界特化のレバテック

    定額制で質問し放題【Web食いオンラインスクール】

    関連記事

    最新記事NEW

    CONTACTCONTACT CONTACTCONTACT

    お問い合わせ

    ご意見やお仕事のご依頼などは以下よりご連絡ください。

    情報入力

    内容確認

    完了

      お名前必須

      フリガナ必須

      メールアドレス必須

      お問い合わせ内容