Webフォントを使ってIllustratorで作った文字組みをWebで再現する方法《SVG→HTML変換》


  • 公開:
  • 更新:
  • 編集:
概要 ▶ Illustratorで作成した文字組みをWebで再現するには、SVGに書き出して変換したものをHTMLに組み込むことでできます。
Webフォントを使ってIllustratorで作った文字組みをWebで再現する方法《SVG→HTML変換》

はてなブックマークで話題のページでこんな記述がありました。(以下は原文ママ)

文字の間隔や改行位置がデバイスやユーザーの環境によって変わり同じ見た目を保証できない中、それをコントロールすることに注力すべきでしょうか?それを実装するエンジニアの工数は効果に見合ったものでしょうか?ユーザーはどんなメリットが得らるのでしょうか?何をもって美しいタイポグラフィとするのでしょうか?

Dear Web designer(Medium)

なるほど。

でも、作り手の苦労はクライアントからしたら結構どうでも良くないですか?


クライアントも、何の考えもなしに「紙とWebって同じようにできませんかねぇ」と言っているのではなく、(レイアウトやタイポグラフィ含め)印刷物で表現した世界観をWebでも同じように再現できれば、「紙のカタログは凝っているけど、ウェブはちょっと違うな…(メイリオフォント)」みたいな世界観の断絶を少しは和らげられるのでは、と思って発言されているのだと思います。

それをメディアが違うから…と頭ごなしにバッサリ切ってしまうのは、少し違うと思うのですよね。(もちろん考えなしに発言する人も多いでしょうが)


当然、コストの問題もあると思いますので、(改行位置はともかく)ユーザーの環境で同じように見えて、工数が少なければ良いのか!(ポジティブ思考)と考えて、Illustratorで制作したタイポグラフィ・文字組みを同じようにWebでも反映したいという要望に敢えてチャレンジしてみました。


目次 [ 隠す ]
Loading...

印刷・Web用で共に同じフォントが使えるAdobe Typekit

タイポグラフィという部分で、見た目を合わせるために、印刷用で使用したフォントと同じフォントが使用できるWebフォントサービスを使用します。今回は「Adobe Typekit」を使ってみました。

Typekit


2016年3月19日現在、Creative Cloudユーザーなら、日本語フォントが34書体(太さのバリエーションは含まず)使用できます。印刷用としてもWeb用としても使えるので、今回は「りょう Text PlusN」のフォントを使ってみます。



Illustratorで文字を入力&設定

Illustratorで文字を入力します。今回のテキストはWikipediaの文章を使用しました。

20160318-Illustratorの文字組みや詰めをWebで再現する-11


文字・段落の設定は以下の通りです。

20160318-Illustratorの文字組みや詰めをWebで再現する-12

  • フォント:「りょう Text PlusN」16pt(=16px)
  • カーニング:0
  • 文字組み:行末約物半角


この組み方の普通の人にも分かりやすい部分は「英数字の前後にひらがなや漢字があると、文字の間隔が空く」というものです(厳密なツッコミはしないで(汗))。文字間が空いているのは半角スペースを入れているわけではありません。

この文字組みをWebで再現してみます。



SVGに書き出す

Illustratorで書き出す部分を選択して、メニューから「ファイル」→「選択範囲を書き出し」を選択します。(右クリック→「書き出し」でもOK)

20160318-Illustratorの文字組みや詰めをWebで再現する-13


ファイルの種類は「SVG」を選択し、「選択範囲を書き出し」をクリックします。

20160318-Illustratorの文字組みや詰めをWebで再現する-14


SVGオプションは以下の通りです。

20160318-Illustratorの文字組みや詰めをWebで再現する-15

  • スタイル:内部CSS
  • フォント:SVG
  • 「縮小」「レスポンシブ」にチェック


書き出したSVGファイルをテキストエディタで開くと以下のようになっています。

これを見たら「あ、コレ何とかなりそう」と思えますよね。単にclassを作ってletter-spacingで詰めているだけなので。

つまりIllustratorがカーニングなどの詰め情報を計算して、pxに変換したものをSVGとして用意してくれるのです。

<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503 145"><defs><style>.cls-1{font-size:16px;font-family:Ryo Text PlusN;}.cls-2{letter-spacing:4px;}.cls-3{letter-spacing:-8px;}</style></defs><title>20160318-Illustratorの文字組みや詰めをWebで再現する-01</title><text class="cls-1" transform="translate(0 14.08)">もとはアドビシステムズ社内用のフォント制作・PostScrip<tspan class="cls-2" x="419.15" y="0">t</tspan><tspan x="428.59" y="0">編集ソフ</tspan><tspan x="0" y="28">トウェアであったが、198</tspan><tspan class="cls-2" x="189.47" y="28">6年</tspan><tspan x="223.3" y="28">1</tspan><tspan class="cls-2" x="233.12" y="28">2</tspan><tspan x="246.95" y="28"></tspan><tspan class="cls-2" x="262.95" y="28"></tspan><tspan x="282.95" y="28">Macintos</tspan><tspan class="cls-2" x="348.21" y="28">h</tspan><tspan x="361.49" y="28">版が一般向けに開</tspan><tspan x="0" y="56">発され、198</tspan><tspan class="cls-2" x="93.47" y="56">7年1</tspan><tspan x="141.12" y="56">月に出荷された。198</tspan><tspan class="cls-2" x="298.59" y="56">8</tspan><tspan x="312.42" y="56">年には、多くの新しい機</tspan><tspan x="0" y="84">能を導入し</tspan><tspan class="cls-2" x="80" y="84"></tspan><tspan x="100" y="84">Illustrator 88(バージョン 1.6)がリリースされた。日</tspan><tspan x="0" y="112">本語版も発売されたが、8</tspan><tspan class="cls-2" x="185.82" y="112">8</tspan><tspan x="199.65" y="112">としての記述はなかった</tspan><tspan class="cls-3" x="375.65" y="112"></tspan></text></svg>



SVGの不要な部分を置き換え・削除する

テキストエディタなどで正規表現を使って置換を行い、不要な部分を削除します。

置換する内容は以下の通りです。


  • 「.+?<defs>(.+?)</defs><title>.+?</title>(.+?)</svg>」→「$1$2」(不要なタグを削除)
  • 「 transform=".+?"」→「」(不要な属性を削除)
  • 「 x=".+?" y=".+?"」→「」(不要な属性を削除)
  • 「<(/)?tspan( )?」→「<$1span$2」(tspanタグをspanタグに)
  • 「<(/)?text( )?」→「<$1p$2」(textタグをpタグに)
  • 「(font-family:)(.+?);」→「$1"$2";」(font-familyのフォント名を括っておく)


パターンはいつも一緒なので、マクロで変換すれば瞬時に変換できますね。


先程のSVGの内容は置換して以下のテキストになりました。

<style>.cls-1{font-size:16px;font-family:"Ryo Text PlusN";}.cls-2{letter-spacing:4px;}.cls-3{letter-spacing:-8px;}</style><p class="cls-1">もとはアドビシステムズ社内用のフォント制作・PostScrip<span class="cls-2">t</span><span>編集ソフ</span><span>トウェアであったが、198</span><span class="cls-2">6年</span><span>1</span><span class="cls-2">2</span><span></span><span class="cls-2"></span><span>Macintos</span><span class="cls-2">h</span><span>版が一般向けに開</span><span>発され、198</span><span class="cls-2">7年1</span><span>月に出荷された。198</span><span class="cls-2">8</span><span>年には、多くの新しい機</span><span>能を導入し</span><span class="cls-2"></span><span>Illustrator 88(バージョン 1.6)がリリースされた。日</span><span>本語版も発売されたが、8</span><span class="cls-2">8</span><span>としての記述はなかった</span><span class="cls-3"></span></p>



Illustratorの画面とWebの画面を比較してみる

あとはWebフォント用のスクリプトを入れ、Webフォントの「りょう Text PlusN」が適用されるHTMLの中に、先程加工したテキストを入れれば完成です。

なお「りょう Text PlusN」はCSSでは以下のように記述します。

font-family: "ryo-text-plusn";


作成したHTMLをFirefoxで表示してみました。

(幅はIllustratorに合わせました/行間は設定なしのブラウザーデフォルトです)

20160318-Illustratorの文字組みや詰めをWebで再現する-06


元のIllustratorの編集画面は以下の画像の通りなので、結構うまく再現できているように見えますね。

20160318-Illustratorの文字組みや詰めをWebで再現する-11



他の文字組みも試してみた

他の文字組みでもうまくいくのか試してみましょう。

英数字の前後にひらがなや漢字があった場合のアキをなくした場合。

20160318-Illustratorの文字組みや詰めをWebで再現する-16


文字・段落の設定は以下の通りです。

20160318-Illustratorの文字組みや詰めをWebで再現する-17

  • フォント:「りょう Text PlusN」16pt(=16px)
  • カーニング:0
  • 文字組み:なし


先程と同じ手順で作成したHTMLをFirefoxで表示すると次のようになりました。

20160318-Illustratorの文字組みや詰めをWebで再現する-07


元のIllustratorの編集画面は以下の画像の通りなので、こちらもうまく再現できているように見えますね。

20160318-Illustratorの文字組みや詰めをWebで再現する-16



次に「適当に詰めてみた」場合。

20160318-Illustratorの文字組みや詰めをWebで再現する-18


文字・段落の設定は以下の通りです。

20160318-Illustratorの文字組みや詰めをWebで再現する-19

  • フォント:「りょう Text PlusN」16pt(=16px)
  • カーニング:オプティカル
  • 文字組み:約物半角


先程と同じ手順で作成したHTMLをFirefoxで表示すると次のようになりました。

20160318-Illustratorの文字組みや詰めをWebで再現する-08


元のIllustratorの編集画面は以下の画像の通りなので、こちらもうまく再現できているように見えますね。

20160318-Illustratorの文字組みや詰めをWebで再現する-18


ただ、よく見てみると「8(」の部分でFirefoxの表示が乱れているのが確認されました。

Chrome・Edge・Internet Explorer 11は大丈夫でした。

20160318-Illustratorの文字組みや詰めをWebで再現する-09



最後に手動で設定した例。「残薬バッグ」という文字列をIllustratorで入力すると以下のような表示になりました。

20160318-Illustratorの文字組みや詰めをWebで再現する-20


でもこの表示、間隔がバラバラに見えますよね?

20160318-Illustratorの文字組みや詰めをWebで再現する-21

文字の「カーニング」を調整して空けたり詰めたりします。

20160318-Illustratorの文字組みや詰めをWebで再現する-22


今回はこんな感じにしてみました。(ッの前も詰めました)

20160318-Illustratorの文字組みや詰めをWebで再現する-23


先程と同じ手順で作成したHTMLをFirefoxで表示すると次のようになりました。上がカーニングなしで、下がカーニング調整済みです。(行間は画像編集で調整しています)

20160318-Illustratorの文字組みや詰めをWebで再現する-24


元のIllustratorの編集画面は以下の画像の通りなので、こちらもうまく再現できているように見えますね。

20160318-Illustratorの文字組みや詰めをWebで再現する-25

手動でカーニングを設定しても反映されることがわかりました。



まとめ

Illustratorの文字組みを再現する方法は以下の通りとなります。

  1. Webフォント環境を用意する
  2. IllustratorからSVG書き出し
  3. SVGファイルを置換
  4. HTMLファイルへ組み込み


たったこれだけです。

作業はそんなに面倒ではないですよね。

文字詰めでこだわった部分があったら試してみましょう!


それでは。



余談

スクリプトができる人は、SVG書き出しすらしなくて、いきなりクリップボードに整形済みのHTMLを入れたりできるのではなかろうか…とか思ったり。



追記(2016/03/19)

初出時、置換の部分でタグが消えた状態になっていました。現在は修正済みです。

カテゴリー:

このページをぜひシェアしてください