テキストを縦書きで入れる方法（Xd）

2023年2月19日 00:53

今回の記事では、Xdで縦書きテキストを配置する方法2パターンを記載します。
なお、Figmaでの方法は以下の記事に記載しています。

1.プラグイン利用で縦書きテキストを入れる

この方法では下記手順で『Tategaki for Adobe XD』を導入し、Xd内のテキストを縦書き化します

2.『Code』部分を押下後、下画像赤枠部分『Download ZIP』を押下しファイルをダウンロードします。

3.ダウンロードした『tategaki-for-xd-master.zip』の拡張子をzipからxdxに変更します。

4.拡張子を変更したファイルをダブルクリックするとCreative Cloudが起動し、『プラグインを確認できませんでした』というメッセージが出現するので、『ローカルにインストール』を選択します。

5.『「Tategaki」プラグインをインストール』のメッセージが出現するので、『OK』を選択します。

6.インストールが開始されます。

縦書き化したいテキストを選択した状態で、プラグイン一覧の『Tategaki』から『テキストを縦書きにする』を選択すると縦書きになります。

注意点として、このプラグインは文字一つずつに改行を入れることで縦書きに見せているだけなので、下画像のように長音符は縦にならず、句読点の位置はズレ、複数行の文言も一行になります。
これらは複数オブジェクトに分けて手動で配置する等で調整する必要があります。

この方法では縦書き機能が実装されているIllustratorでテキストを作成し、それをCCライブラリを経由することでXd上に配置します。

1.【ウィンドウ】→【CCライブラリ】を選択してCCライブラリを表示します。

2.CCライブラリ内のライブラリを選択します（画像赤枠部分）。

3.Illustrator内で縦書きテキストを作成します。

4.テキストをアウトライン化します。

5.テキストを右クリックし、『CCライブラリに追加』を押下します。

6.Xd内のCCライブラリからテキストを貼り付けることができます。

以上、Xdで縦書きテキストを配置する方法2パターンでした。