【Adobe XD】テキストを縦書きにするプラグイン「Tategaki for Adobe XD」の使い方

こんにちは、Ryohei（@ityryohei）です！

本記事では、Adobe XDでテキストを縦書きにするプラグイン「Tategaki for Adobe XD」のダウンロード・インストール～簡単な使い方をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

Adobe XD用プラグイン「Tategaki for Adobe XD」でテキストを縦書きにしよう！

Tategaki for Adobe XDは、Adobe XD用のプラグインです。個人の方が開発しているプラグインで、Adobe XDにプラグインをインストールするだけでテキストを縦書きにする機能を追加することができます。

現状、Adobe XDにはテキストを縦書きにする機能がないため、縦書きの機能を追加したい場合はこちらのプラグインをインストールすることが必要となっています。

私もインストールしてみましたので、ダウンロード・インストール～使用方法まで詳しくご紹介していきたいと思います。

「Tategaki for Adobe XD」をダウンロードする

Tategaki for Adobe XDをGitHubからダウンロードします。下記のURLにアクセスしてください。

Tategaki for Adobe XD：https://github.com/ashryanbeats/tategaki-for-xd

Codeと表示されたボタンをクリックし、Download ZIPを選択してプラグインをダウンロードします。（下記画像の赤枠部分です。）

ZIPファイルが保存出来たら、プラグインのダウンロードは完了です。続いてダウンロードしたプラグインをインストールします。

「Tategaki for Adobe XD」をインストールする

前項でダウンロードしたZIPファイルの拡張子を.zipから.xdxに変更します。具体的には下記のように変更します。

tategaki-for-xd-master.zip → tategaki-for-xd-master.xdx

拡張子を変更したtategaki-for-xd-master.xdxをダブルクリックします。実行すると、Creative Cloud Desktopが起動します。下記のように順にメッセージが表示されますので、それぞれ承認側の青色のボタンをクリックしていきます。

プラグインを確認できませんでした。

「Tategaki」プラグインをインストール

インストール完了

Creative Cloud Desktopのプラグイン管理で緑色のアラートが表示されたら、プラグインのインストールは完了です。Adobe XDを起動して、テキストを縦書きにしてみましょう。

「Tategaki for Adobe XD」でテキストを縦書きにする

Adobe XDを起動し、テキストツールでテキストを入力します。入力したテキストを選択した状態で、ツールバーから下記を選択します。

プラグイン > Tategaki > テキストを縦書きにする

XD上では下記の位置にあります。

テキストを縦書きにするを実行すると下記のようにテキストが縦書きになります。

これでテキストを縦書きにすることができます。

最後に

GitHub上で公開されているソースは、ブラウザ場でソースの内容を確認することができます。本記事でご紹介したプラグインの処理内容を見ていると、テキストを一文字ずつに分解して、各文字の後ろに改行コードを付与する処理が記述されていました。もし縦書きにするケースがほとんどない場合は、プラグインをインストールするのではなく、テキストを一文字ずつ改行するだけでも良いかもしれませんね。

以上、Adobe XDのテキストを縦書きにするプラグイン「Tategaki for Adobe XD」の使い方のご紹介でした！