Figmaで和欧混植を簡単に！ Japanese Font Mixerを使ってみた

タイトル画像のような、デザイン作業で日本語と英語が混ざった文字組みをすること、ありますよね。Webデザインで、特にFigmaを使っていると、デザイナーが手作業で一つずつフォントを変更しなければならず、かなり面倒です。

まだまだ日本語の制作環境にはしばしばマッチせず不便なこともあるFigmaですが、そんな時に便利なのが「Japanese Font Mixer」というプラグイン。これを使えば、手間なく日本語と英語のフォントの個別切り替えが可能となります。

和欧混植って何？

そもそも「和欧混植」とは、日本語（和文）と英語（欧文）を混ぜて文字組みをすることを指します。和文フォントの中に含まれる欧文フォントを「従属欧文」というのですが、デザインによってはこの従属欧文がしっくりこないことも（特にデザイナー目線だと、従属欧文は和文と比較してもっさりしてしまう傾向があるんですよね）。

特に見出しやバナー、ポスターなどで使う場合に顕著に差が出ます。和文と欧文を別々のフォントに置き換えて組み合わせることで、欧文から違和感が消えより美しい仕上がりにできるのが和欧混植のメリットです。デザイナーであれば積極的に使いましょう。玄人感が一気に増します。

作り方にルールはありませんが、和文の書体に合わせて欧文フォントを選ぶケースがほとんどです。
本文のような「読ませる」文章で和欧混植するのであれば、基本、「ゴシック体＋サンセリフ体」や「明朝体＋セリフ体」で、且つ「ウェイトが揃っている」といった組み合わせが一般的です。アンチック系はこれには該当しない例ですね。

Webの場合は、スタイルシートで設定する

Webで一番簡単な和欧混植の方法は、CSSのfont-familyプロパティを使う方法です。
先に記述したフォントから優先的にブラウザに適用されるので、欧文フォントを和文フォントよりも先に指定すると和欧混植が可能です。

自動的に半角英数字に欧文フォントが当たる記述例

body { font-family: 'Avenir', 'Hiragino Sans', sans-serif; }

印刷物の場合は後述しますが、Adobe IllustratorとinDesignによって、各フォントの性質に寄り添った優れたタイポグラフィを表現できます。（Webでも是非、画像化文字等の場合に活用してもらいたい。）

Japanese Font Mixerって？

実際のWebサイトでは、上記のような設定によって和文・欧文では別のフォントを指定できるのはよく知られています。しかし、Figma上では和文と欧文に対しフォントを個別設定できず、Web実装前にデザイナーが同じ使い分け表現をするのは難しいのが現状です。よって、コーディング後にFigmaデザインの印象とずれてしまうのです。

もちろん、テキストレイヤーの中の欧文を選択して一つひとつフォントを変える手作業は可能ですが、見落としの危険や作業時間の増加が避けて通れません。そんなお悩みを、簡単に解決してくれるプラグインが『Japanese Font Mixer』なのです。

『Japanese Font Mixer』では和文と欧文に対してワンクリックでフォントを設定できます。 また、和文全体だけでなく漢字・かな・約物といった文字種別ごとにフォントを指定することもできます。

※開発元のKODANSHAtechのサイトより

このプラグインは、Figma上でフォントの和文と欧文の個別指定に対して一括で設定をしてくれる便利ツールです。たとえば、日本語には「ヒラギノ角ゴシック」、英語には「Helvetica」を設定したり、さらには漢字、かな、約物（句読点や記号など）を別々に指定する等細かい設定も可能です。

つまり、AdobeのIllustratorとinDesignの「合成フォント」に近い機能が備わってくれたことになるのです！

使い方

プラグインからJapanese Font Mixerを開きます。設定はシンプルで、テキストレイヤーを選択して（複数選択もOK）、出てきたリストからフォントを選び、「Apply」を押すだけ。

例：和文に「ヒラギノ角ゴシック」、欧文に「Helvetica」を設定

もともとNoto Sansフォントでしたが、ヒラギノ角ゴシックに変わり、半角英数字に、指定のHelveticaが反映されました（フォント幅の変化により、最後の文字が行からあふれました）。全角英数字は変化がありません。※意図しない混在に気をつけましょう。

設定ボックスの下の方にある「Detail Settings」にチェックを入れると、さらに漢字、かな、約物（句読点や記号等）のフォントを個別設定できるようになります！

例：漢字には「Mochiy Pop One」、約物には「Yaku Han JP」、欧文に「Helvetica」、ウェイトも太く

今度は、句読点や鉤括弧が半角詰まりましたね。NotoフォントがGoogleフォントのMochiy Pop Oneに変わり、半角英数字も、指定のHelveticaに。太さもBoldになりました。※全角英数記号はウェイト以外変化無し

さらに、上部にあるプラスボタンをクリックすると、設定を名前を付けて保存でき、複数の設定を同一ファイル内で呼び出すことが可能です。（現在（2024年9月）はまだBETA版のようですが）

実際に使ってみた感想

実際に使ってみると、このプラグインの存在を知らなかった時に比べて作業効率はぐっと上がります。Figmaの標準機能では、一つのテキストレイヤー内の文字ごとに手動でフォントを変更しなければならないので手間がかかりますが、Japanese Font Mixerを使うと一発で自動的に切り替わるため、非常にスムーズ。日本語と英語が混在するデザインを効率よく進められるのは大きなメリットです。

嬉しいことに、一度した設定はデフォルトに記憶されるので、変換を繰り返す際、リストを逐一選択し直す必要もありません。

特に、Webサイトデザインを作るときに、和欧混植を簡単に再現できるので、本番に近いデザインが作れる点がとても助かります。

IllustratorやInDesignほど細かい設定は無いですが、UIデザインなら、そこまで大きくない文字なら、十分使えます！

和欧混植をWebデザインに取り入れる場合の注意点

印刷物のデザインでは、IllustratorもしくはinDesignの「合成フォント」機能を使って、欧文フォントのサイズやベースライン位置を細かく調整して、和文フォントと美しく組み合わせる「和欧混植」が一般的です。欧文フォントを使うことで、より本格的で高品質なタイポグラフィが実現できるためです。一般的に、同じフォントサイズで和文と欧文を表示させると、欧文のサイズの方が小さかったり、ベースラインがズレるということが起こりますが、この問題は「合成フォント」で設定をすることで解決できるのです。

一方、Webデザインでは、CSSで和文と欧文フォントを組み合わせることが可能ですが、フォントごとのサイズやベースライン位置を細かく調整することはできません。その結果、和文と欧文のバランスが崩れ、ちぐはぐな印象を与えることがあります。合成フォントと比較するとWeb上でのタイポグラフィの甘さは際立ちます。

調べると、最近ではWebにおいてのある程度の解決策もいくつかあるようです。IllustratorやInDesignでプロがやる高度な設定も含めて、またの機会にお伝えできればと思います。

以上、Maromaroのfutaでした。