creatersnest47

Illustratorで文字のサイズを変えてもついてくる「ルビ」を書く方法


Illustratorはルビを振るようには出来ていません。
そのため文章にルビを振りたい場合は
【元の文章のテキストに文字のフォントを小さくしたルビを位置合わせする】
という方法がまずは思いつくのではないでしょうか?しかしこの方法だと
文章を修正した時にルビの位置がずれてしまい再び位置合わせをしなくてはなりません。
そこで、Illustratorを使って文字についてくるルビを書く方法を見ていきましょう。

 

【割注】文字のサイズを変えてもついてくる?「ルビ」

1

まずは元になる文章をテキストで入力します。

2

次にルビを振りたい文字の前にルビにしたい文字を入力します。

3

【ウィンドウ】→【書式】→【文字】でパネルが現われるので文字の大きさを入力します。
今回は20ptで作ってみましょう。

4

ルビにしたいひらがなと漢字部分を選択した状態で【文字設定】パネルの右上の矢印の中にある【割注】を選択します。

5

漢字部分を選択して文字を40ptに設定します。

6

【文字】パネルの右上のメニューを展開し【割注設定】を選択します。
【割注設定】パネルで【行の間隔:1pt】【中央揃え】を設定します。

7

ルビにしたいひらがなと漢字部分を選択し、【ウィンドウ】→【書式】→【文字】を開き
ベースラインシフトを【-3pt】に設定します。8
好みで文字の大きさを変えて終了です。

21

そこで、文字の大きさを24ptに変更しようとテキストオブジェクト全体に24pt適用して見ると・・・
あれー?おかしいことになりました。ルビのある漢字が小さい!

22
そう、割注機能だと【ポイント文字】に切り替えてテキストオブジェクトの大きさを変更する時は
文字の大きさに合わせてルビも付いてくるしサイズも変わるのですが
テキストオブジェクト全体を一括で変更すると
ルビのある漢字のサイズを1つずつ変えなければいけません。
使い方が限られる方法だということを覚えておいて使ってくださいね。

 

【上付き文字】文字のサイズを変えてもついてくる!「ルビ」

そこで、上付き文字を利用してルビを振ってみましょう。
この場合は上付き文字の設定をして、カーニングで位置を整えるという作業が必要です。

28

まずは元の文章を用意して、ルビを振りたい文字の後ろにルビにしたい文字を入力します。
割注を使ったルビのように前におくと後でカーニングで文字の位置を調節した時に
入力できる数値範囲が足りないため
上手くルビの体裁を整えることが出来ないので注意しましょう。

29

【ファイル】→【ドキュメント設定】から【文字オプション】のボタンを押して
【上付き文字】の設定を行います。
後からでも変更できるので【サイズ50%】【位置:100%】としておきます。

12-3

ルビ部分を選択し【上付き文字】にします。
次に【上付き文字】にした文字の前にカーソルを合わせてカーニングの数値を設定します。
カーニングについては次で詳しく見ていきますね。

27

ルビの位置が決まったら【ウィンドウ】→【アクション】パネルに登録しておけば
次に同じようにルビを振りたい時に毎回設定しなくても良いので使ってみて下さいね。

 

知っておきたいルビ整え術【カーニング】

さて、ここまででサイズを変えても文字を削除しても付いてくるルビの作り方は出来ました。
次は体裁を整える方法としてスペースを空ける、【カーニング】という手法が考えられます。

26

漢字1文字ごとにルビを振る場合は、

・ルビ1文字の場合
ルビの左にカーソルを合わせて【-750】、右にカーソルを合わせて【500】
・ルビ2文字の場合
ルビの左にカーソルを合わせて【-1000】、右にカーソルを合わせて【100】

に設定すると漢字の中央にルビが配置されます。

15

ただ、文章(ぶんしょう)のように1つの漢字に3つのルビを振りたい時は少し困ります。
カーニングは【-1000】から【1000】までの値しか入れられないため
右端にルビがはみ出てしまいます。
そんな時はトラッキングを使って文字の間隔を狭めれば中央に持ってくることが出来ますよ。

16

いかがでしたか?

Illustratorでルビを振るのは、実際にやったことがある人でも大変ですよね。
文章だと、修正が入ることもよくあるのでなるべく作業を簡潔にしたいものです。
文字と一緒にルビの大きさが変えられるこの方法で少しは作業時間が減らせるのではないでしょうか?
アクション機能も上手く使って時間短縮してみてくださいね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


趣味はDIYやハンドメイド。興味引かれたものは分野を問わずチャレンジしています。

Next ArticleIllustratorで和風デザインをするのに役立つチュートリアルまとめ