Affinity Designerで日本語縦書きの荒技!

最初に断っておきますが、これは裏技です。
僕が日本語縦書きしたいケースでは充分実用的ですが、本格的なデザインには向かないと思います。ご承知の上で読み進めて頂けますと幸いです。
(僕の場合:電子書籍の表紙にタイトルなどを入れる用途がメインなので)

さて、Affinity Designer、素晴らしいソフトです。
「これで日本語縦書きさえ出来ればどれほどイラレの牙城を崩す位置に近づけるか」と言われ続けて2年ほどでしょうか。
僕自身、発売された頃からずっと使っていて、それさえあればなあと思っていました。

でも、日本語の縦書きを実装するのって、相当難しいんですよね。
世界的にみれば縦書き文字はごくごく少数派。
そのために開発リソースを割くのはかなり厳しいと想像されます。

日本人が作成した日本語のアプリですら、完璧な縦書き対応を実現しているものは少ないのですから……。

・約物の位置と回転が、種類によって異なる。

例えば、「。」や「、」について見ると──
 横書き:1文字のスペース内で右下にあります。
 縦書き:右上です。向きはそのままですね。
「─」については、
 横書き:1文字のスペース内で、上下センター、左右は文字幅いっぱいです。
 縦書き:1文字のスペース内で、左右センター、上下は文字幅いっぱいです。向きは90度回転しています。


・行間と文字間の考え方を逆転させなければならない。

 文字自体の向きは同じなのに、横書きでは文字の左右が文字間。縦書きでは文字の天地が文字間になります。
 単純な問題のようで、実は結構難しそうなのですよね。
(技術的なことは分かりませんが、縦書きをうたっているアプリで横書きから縦書きに変更すると行間がおかしなことになる場合は、そういうことなんじゃないかと思います)

使っている側はあまり意識していませんが、開発には高いハードルがありそうですね。

となれば、待っていても日本語縦書き正式対応は難しそう。
いろいろといじっている中で、ちょっとした裏技を見つけました。
今回はそれをご報告(前置きが長い!)

方法としては2つあります。
どちらも横書き文字を強制的に縦に整列させる方法ですが、文字間と行間を読み替えることで、それなりに調節も可能です。

まず1つめ。
文字ボックスを用います。


 
とっても簡単ですね。
文字ボックスに文字を打ったら、横幅を一文字分程度に縮めるだけです。
最初から縦に細い文字ボックスを作っておけば、縮める手間も不要です。

次です。
まずラインを引きます。


 
メニューバーの「レイヤー」から「テキストフレームに変換」を選択し、文字を打ちます。
この方法だと、最初から縦書きになっているので見やすいですね。

ということで、どちらの方法もほぼ手間は同じ。
何か有意な差はないかといろいろ見てみましたが、どちらでも好き好きということで。

はい。
え、これで終わりじゃつまらない?

そうですね。

これらの方法には、大きな欠点があります。
vert03

冒頭の内容にあったとおりです。
句読点が全て変な位置にありますし、「──」が横向きになっています。

これを、直していきましょう。
出来るんですよ、ちゃんと(ちょっと面倒ですが)。
まずは読点(、)から。


(ちょっと途中で間違えていますが、それはご愛嬌……)

読点の位置が調整出来ましたね。
左右位置を調整したい時は、改行を挿入して段落を変えてしまうのがミソです。
こうすれば、上下左右とも自由に文字位置を調整出来ます。

次は「──」の回転です。

これは、先ほどのようにはいきませんでした。
残念ながら、オブジェクト自体を分割してちまちま直すしかないようです。


(わざわざ動画にするようなものでもありませんが……。実は、罫線は縦横が別文字として存在しています。今回の場合は、縦用の罫線を打ち直せばいいだけなのですが、ね。「──」「││」)

さて、役に立つか立たないのか分からないような微妙な内容でしたが、お楽しみいただけましたでしょうか?

今回の記事、もちろんAffinity Designerで縦書きしたい人が対象なのですが、もう一つ目的があります。こういう記事が書かれることによって、日本語縦書き需要の大きいことが、Affinityを作っている会社さんに届くと良いなあと思っているのが本音だったりもします。

では、本日はこれにて!

Happy designing!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>