デザイン

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

tategaki

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

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

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

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

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

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

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

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

tategaki-for-xd.git
tategaki-for-xd.git

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

フォルダ名変更

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

.zipから.xdxに変更
.zipから.xdxに変更

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

変更
変更

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

tategaki-for-xd-master.xdx
tategaki-for-xd-master.xdx

tategakiをXDにインストール

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

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

インストール
ローカルにインストール

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

OK
OK

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

Tategaki
Tategaki

実際に縦書きにする

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

テキストを縦書きにする
テキストを縦書きにする

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

縦書きにする
縦書きにする

英文の文字ずれ対応

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

英文文字ズレ
英文文字ズレ

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

中央揃え
中央揃え

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

英文整列
英文整列