デザインを作る際、和文と欧文で別々のフォントを指定したくなることがあります。Adobe Expressでは、一旦すべて和文フォントにしてからすべて欧文フォントを適用することでそれを実現できます。まるでバージョン10までのIllustratorのようです。
やりたいことが和文と欧文で別々のフォントを指定するだけなら上記方法で解決します。しかし、もし数字だけは別のフォントにしたいとか、欧文のみサイズを上げたいなど条件が増えてきた場合手に負えなくなってしまいます。
IllustratorやInDesignには合成フォントという機能があり、事前に漢字・かな・半角欧文・半角数字などの文字種ごとにフォントやサイズなどを指定し、それらを1回で適用できます。Adobe Expressでもそれができたら嬉しいですね。
そこで、合成フォントのように文字種ごとに別々のフォントを一気に適用するAdobe Express用add-on、Composite Font を紹介します。
目次
Composite Fontって何？
Adobe Expressに専用パネルを追加し、合成フォント風に文字種ごとに別々のフォント・サイズを一括で適用できるadd-onです。このadd-onで作った合成フォント設定は書類内に保存され、アクセスする端末が変わっても利用できます。必要に応じてJSONファイルとして書き出し・読み込み可能です。
ほかのAdobeアプリではこういった拡張機能をプラグインやスクリプトなどと呼びますが、Adobe Expressではadd-onと呼びます。Adobe ExpressはWebアプリであり、Composite Fontもそのプラットフォーム上で動きます。環境を選ばずWebブラウザさえあれば動くので、とてもお手軽です。
フォントはローカルに存在するものに加え、Adobe Fontsの豊富なバリエーションから選べます。よりどりみどりですね。
どうやってインストールするの？
ここにありますので、リンク経由で取得してください。
現在まだ公開審査中のため、Adobe Express内部の検索で見つけることはできません。上記リンクをご利用ください。
また、利用できるのは開発版（Dev）です。デザインや機能は変更される可能性があります。開発版と公開版ではデータ保存領域が異なるため、書類内で同じ合成フォントを直接共有できません。必要ならJSONファイルを経由してやりとりしてください。
使いかたは？
基本的にパネルを使って操作します。左側タブのAdd-onsを選び、Composite Fontを選択してパネルを開いてください。Composite Fontを選ぶ場所は左側ですが、パネルが現れるのは右側です。
ひとまず試したいだけ
サンプル合成フォントにて適用をお試しできます。
- パネルのボタン［＋ サンプル合成フォントを追加］を押す
- アートボード上でテキストフレームを選択する
- パネルにて、手順1でできた合成フォント［サンプル合成フォント］を選ぶ
すると、漢字・かな・全角約物・全角記号は源ノ角ゴシック JP Regular、半角欧文と半角数字はSource Sans 3 Regularの110%サイズになります。
合成フォントの適用
Adobe Expressのアートボード上でテキストフレームを選択し、Composite Fontパネルで適用する合成フォントを選んでください。設定通りになります。テキスト・合成フォント両方選んだ状態で［適用］ボタンを押すことでも実現可能です。
注意点
- 合成フォント選択時はシングルクリックで適用が発動します。語発動に注意してください
- 適用は「一方通行」で、合成フォント設定とテキストを同期したりはできません。つまりマクロのようなものです
- サイズは文字サイズを直接変更するため適用時行間は大きいほうの数値がもとになります
合成フォントの追加（作成）
今のところ合成フォントの設定専用GUIはありません。設定を作るには、アートボード上のテキストに直接、文字種ごとにフォントやサイズを指定します。add-onはそれをもとに合成フォントを生成します。
１ 設定テンプレートを配置する
Composite Fontパネルの右上のアイコンメニューで［設定テンプレートを配置］を選んでください。
アートボード上に「漢あ。％A0」という内容のテキストが現れます。
２ 設定テンプレートテキストにフォントなどを指定する
「漢あ。％A0」の1文字それぞれが、漢字・かな・全角約物・全角記号・半角欧文・半角数字の象徴になります。それぞれに対してAdobe Expressの通常機能を使ってフォントやサイズを指定してください。
適用のとき文字サイズは、全角漢字を等倍としたときの相対比率になります。比率で計算するので、例えば［漢字: 1、半角欧文: 1.1］と［漢字: 100、半角欧文: 110］はどちらも同じ意味です。
３ 設定テンプレートをもとに合成フォントを追加する
設定テンプレートテキストを選択した状態でComposite Fontパネルの［追加］ボタンを押してください。合成フォント-1のような名前で追加されます。必要に応じ、適宜後からリネームしてください。
注意点
- ベースラインシフトはAdobe Express自体に存在しないため設定不可です
合成フォントの設定内訳確認
設定の内訳は、合成フォントのHover時に現れます。
合成フォントの削除
Composite Fontパネルで削除したい合成フォント（複数可）を選択し、右下のゴミ箱アイコンを選んでください。ダイアログで実行を許可した後、実際に削除されます。Undoはできないので、慎重に許可を出してください。
合成フォントの書き出し（ダウンロード）
Composite Fontパネルで書き出したい合成フォント（複数可）を選択し、アイコンメニューの［合成フォントのダウンロード］を選びます。するとすぐにJSONファイルとしてローカルにダウンロードされます。
合成フォントの読み込み（アップロード）
１ メニュー［合成フォントの読み込み］を選択する
メニューはパネル右上のアイコンメニュー内にあります。
２ 対象のJSONファイルを選ぶ
ファイル選択ダイアログが出るので、インポートしたい合成フォントファイルJSONを選びます。
３ 実行を許可する
もし形式が有効なJSONなら、またダイアログが出て実行許可を求めてきます。Undoはできないので、慎重に許可を出してください。
すると、idが一致する合成フォントは上書きされ、それ以外は追加されます。
作者に感謝を伝えたい！
Buy me a coffeeは、クレジットカード払いなどでクリエイターにコーヒーをおごれるサービスです。ツール・情報が役に立った！ 感謝の気持ちを表現したい！ というかた、おごっていただけましたら嬉しいです☕️
これでまた少し仕事が速くなりました。今日もさっさと仕事を切り上げて好きなことをしましょう！
