XDで日本語と英文を縦書きにする方法（プラグイン）【Adobe XD】

WEBデザインを作る際にAdobeの「XD」がよく活用されています。

文字を縦書きにしたい場合、Photoshopでは簡単にできますがデフォルトのXDにはその機能が搭載されていません。

そこで簡単に縦書きにできるXD専用のプラグインをご紹介します。

AdobeXD専用縦書きプラグインダウンロード

GitHubという世界中の人々が自分の作品を保存・公開できるウェブサービスがあるので、そこからダウンロードをして適用します。

▪下記からダウンロードサイトに移行します⇩

➡ 縦書きプラグイン-Git Hub

サイトに移行した後は、Code→Download ZIPをクリックするとZIPファイルのダウンロードが始まります。

自身のPCのエクスプローラー→ダウンロードにtategaki-for-xd-master.zipがダウンロードされています。

フォルダ名変更

このZIPファイルを解凍しないで.zip→.xdxに変更します。

変更した際に、警告がでますがそのままはい（Y）をクリック。

.zipフォルダから.xdxファイルに変更完了。

tategakiをXDにインストール

先ほどのtategaki-for-xd-master.xdxをダブルクリックします。

Creative Cloud Desktopが開きますので、ローカルにインストールをクリック。

「Tategaki」プラグインをインストールと表示されるのでOKをクリック。

Creative Cloud Desktopのプラグインに「Tategaki」がインストール済みになっていれば成功です。

実際に縦書きにする

何でもいいので文字を入力し選択した後、プラグイン→Tategaki→テキストを縦書きにするをクリック。

この操作で簡単に縦書きに変更できます。

英文の文字ずれ対応

英文はそのまま縦書きににするとズレがあるので中央揃えにします。

フォントの中央揃えをクリックし自動調整します。

これで英文も綺麗に整列しました。