XDでテキストを縦書きにする方法を知りたい。
この記事は上記の課題に向けて作成しております。
XDではデフォルト機能でテキストを縦書きにする方法はありません。
そのためプラグインを導入する必要があります。
この記事ではプラグインでテキストを縦書きにする方法を紹介します。
この記事でわかること
- XDでテキストを縦書きにする方法
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
XDでテキストを縦書きにする方法
早速XDでテキストを縦書きにする方法を紹介します。
XDでテキストを縦書きにする手順は下記の通りです。
XDでテキストを縦書きにする手順
- 「Tategaki for Adobe XD」をダウンロードする
- 「Tategaki for Adobe XD」をXDにインストールする
- XD上でテキストを縦書きに変更する
「Tategaki for Adobe XD」をダウンロードする
まず「Tategaki for Adobe XD」というプラグインをダウンロードします。
ダウンロードの手順は下記の通りになります。
「Tategaki for Adobe XD」のダウンロード手順
- GitHubにアクセス
- ZIPファイルをダウンロード
①GitHubにアクセス
まずはGitHubにアクセスします。
「こちら」からアクセスしてください。
②ZIPファイルをダウンロード
続いてZIPファイルをダウンロードします。
「Code」という緑色のボタンを選択します。
「Download ZIP」をクリックします。
するとプラグインがダウンロードされます。
「Tategaki for Adobe XD」をXDにインストールする
続いてダウンロードしたプラグインをXDにインストールします。
XDにインストールする手順
- 拡張子を「.zip」から「.xdx」に変更する
- 「.xdx」に変更したファイルを開く
- 「ローカルにインストール」を選択する
①拡張子を「.zip」から「.xdx」に変更する
ダウンロードしたファイルの拡張子を「.zip」から「.xdx」に変更します。
※zipファイルは開かずに拡張子を変更してください。
②「.xdx」に変更したファイルを開く
拡張子「.xdx」に変更したファイルを開きます。
クリエイティブクラウドが立ち上がり、ポップアップが表示されるので「OK」を選択してください。
③「ローカルにインストール」を選択する
続いてプラグインをローカルにインストールします。
「ローカルにインストール」を選択してください。
下記ポップアップが表示されるので、「OK」を選択してください。
これでXDにプラグインをインストールすることが出来ました。
XD上でテキストを縦書きに変更する
最後にXDでテキストを縦書きにします。
XDでテキストを縦書きにする手順は下記の通りです。
XDでテキストを縦書きにする手順
- 縦書きにしたいテキストを入力する
- 「テキストを縦書きにする」を選択する
①縦書きにしたいテキストを入力する
縦書きにしたいテキストを入力します。
今回は下記のテキストを縦書きにしたいと思います。
②「テキストを縦書きにする」を選択する
テキストを選択した状態で「テキストを縦書きにする」を選択します。
「テキストを縦書きにする」は上部メニューバーの「プラグイン」→「Tategaki」の階層に含まれています。
※先ほどダウンロードしたプラグインがXDにインストールされると「Tategaki」が表示されるようになります。
選択するとテキストが縦書きに変化します。
以上でテキストを縦書きにする手順は終了です。
XDでテキストを縦書きにする際の注意点
XDでテキストを縦書きにする際は注意点があります。
縦書きの注意点
- 句読点や長音記号は縦書きされない
句読点や長音記号は縦書きされない
句読点や長音記号(伸ばす横線)は縦書きの対象となりません。
下記は「私は、ビリヤードが大好き。」という文章です。
見てわかるように、「、ー。」が縦書きになっていません。
句読点や長音記号はXDの縦書きに不向です。使用する際はこれらの記号が含まれない文章や単語を選びましょう。
XDに似たデザインツールのFigmaでテキストを縦書きにすると句読点や長音記号も縦書きになります。
Figmaでテキストを縦書きにする方法は下記の記事を参考にしてください。
XDでテキストを縦書きにするのは簡単！
最後にまとめです。
- XDでテキストを縦書きにするには「Tategaki for Adobe XD」を導入する
- 句読点や長音記号は縦書きにならない
以上です。
是非実施してみてください。