XDでも、テキストのアウトライン化を どうぞよろしく(^^)/

Adobe XDユーザーグループの管理人をされている方が、勉強会でのLT登壇者をわりと必死で募集していました。まずは周りのXDユーザー数名に声をかけたのだけど、ダレも行くと言わないので、ジブンで登壇してきました。初心者なのに。ちょうどネタもあったのでね。
でももうネタ切れです。XDを使って何かをクリエイトしているわけでもないので、XDのデザインカンプに対する愚痴くらいしか話すことはないワケなのですよ。
次回から、みんな来てね。初心者のヒトも、イロイロ学べて楽しいと思います。
話してきた内容は「画像として書き出すテキストは、とにかく全部アウトライン化しといてね!アウトライン化のコマンドはCtrl+8ですから!」ということに尽きます。

SVG画像にするテキストは、アウトライン化してね

筆者はつい最近まで、次のような勘違いをしておりました。

XDはワイヤーフレームとプロトタイプを作るツール

ところが、最近新たにパートナーとして紹介していただいた方に次のように言われました。

パートナーさんA
デザインはXDで作ってるんで、ヨロシク

なんと、XDってデザインカンプを作れるんですね!これまでの勤務先に、XD使いのデザイナーさんが一人もいなかったので、そういうツールであると認識する機会がなかったのですよ。

さて、XDを使うためには、まずPCを買い換えなければなりませんでした。当時使っていたのはWindows7のPCで、あろうことか7にはXDをインストールできないのです。今後は勤めに出る可能性よりも在宅案件を請けていく可能性の方が大きくなりそうだったし、Windows7のサポートがまもなく終了するので、まー買い替え時ではあったのです。

さて、PCを注文して一息ついていた頃、件のパートナーさんから次のような申し出がありました。

パートナーさんA
トップページだけさくっとコーディングしてくんない?
あ、デザインカンプはXDです

ここで「まだPC届いてないし、さあ困った!!!(゚д゚)!」とならないのがXDのいいところ。デザインスペックのURLを発行してもらえば、そこからコーディングに必要な情報を拾えます。

デザインスペックとは、XDで作ったファイルをオンラインで閲覧できるようにしたものです。デザインスペックの方がローカルのファイルよりシンプルな見た目で、コーディング用の情報がワンリックで取得できるので、コーディングをするだけなら、むしろデザインスペックを渡してもらった方がいいくらいです(とはいえ、グループ化した要素や重なり順が下の要素からはテキストが拾えなかったりする 2019年10月のアップデートで、この不具合が改善されました\(^O^)/)。

その上、この8月のアップデートでCSSコードを自動生成する機能が追加されているそうです。これはぜひローカルファイルにも表示してほしいのですが、現時点ではデザインスペックでしか利用できないようですね。

デザインスペック上のCSSコード

デザインスペックから画像をダウンロードすることもできるのですが、どの画像を対象にするかということはローカルファイルの方で設定しなくてはなりません。ですので、この時は画像の作成は全てパートナーさんにおまかせし、まとめて送っていただきました。

ところで、このパートナーさん、SVG画像が大好きなのです。jpeg以外の画像は全てSVG形式で出力したものが送られてきました。SVGの方が綺麗に表示されるからなのだと思いますが、これまで自分でコーディングする時はpng8等で済ませていたようなものまで含めて全てSVGになっていたので、ちょっと驚きました。

さて、渡されたSVG画像を何も考えずのそのまま適用したところ、一見何も問題がなさそうに見えました。ところが、タブレットで検証を行うと、見え方が全然違っていました!(case01という部分がSVG画像です。Android端末にはserif書体が入っていないので、PCで明朝体が表示されている部分も異なった形になっています)

SVG画像のアウトライン化がされていない

そこでSVGファイルのソースを見てみたら、テキストがアウトライン化されていないことが判明しました。PCにたまたまこのフォント(Garamond)が入っていたので、PCでの閲覧時にはデザイン通りに表示されていたのですが、フォントがない環境ではデバイスフォントが適用されてしまうんですね。なので、どの環境でもデザイン通りのフォントでSVG画像を表示させるためには、アウトライン化が必須なのです。

さて、少々トラブルが有ったものの、初めてXDのデザインカンプからコーディングを行った感想は、とにかく楽、ということ。

  • CSSの記述に必要な情報を取得しやすい
  • ファイルが軽い
  • 要素間の距離が一瞬で把握できる

など、いい事ずくめ。このパートナーさんと組めて一番良かったこと、と言っても言い過ぎでは有りません!当初はXDに対して妙な誤解をしていた筆者ですが、世の中のデザインカンプが全てXDになればいいのに、と今では願っています。

イヤイヤ、画像化するテキストは、全部アウトライン化しといてね

さて、しばらく後にいただいた、別案件でのお話です。PCが届いてローカルでXDファイルが開けるようになり、XDの扱いにもやや慣れた頃、別のパートナーさんにこんなことを聞かれました。

パートナーさんB
XDのデータは扱えますでしょうか?

この方からの依頼はIllustrator案件が多いので「これまた珍しい!」と思いましたが、XD案件ならばと喜んでお請けしました。あちなみに筆者はIllustratorのカンプからコーディングするのが大嫌いなので、Illustrator案件の料金は高めにしてあります_〆(・_・ )

さて、受け取ったXDファイルでは、自分の環境にないフォントが使われていました。XDは、こうやってフォントがないことをわかりやすく知らせてくれるから、とっても助かります。

環境にないフォントの一覧が表示される

このリストのフォント名を右クリックすると、「フォントを置き換え」「カンバスでハイライト」というメニューが現れます。該当フォントが何処にあるのか一目瞭然ですし、フォントの置き換え作業はPhotoshopやIllustratorよりもわかり易く、間違いなく行える感じです。

右クリックでメニューが表示される

この時は、依頼を受ける前にデザインスペックを見せていただいていました。筆者は微妙なフォントの違いには気づかないこともあるのですが、今回はデザインスペックで見たものとローカルのファイルであまりに見た目が異なっていたので、違和感を感じてすぐに気づきました。

PCにフォントがなくてもデザインスペックでは指定通りのフォントが表示される

社内の全てのPCに同じフォントのライセンスが入っていて、フォントの違いに留意しなくても良い環境にいらっしゃる方にはピンとこないかもしれませんが、筆者は多数の勤務先を渡り歩いたり、外注に出された仕事のそのまた下請け案件みたいなものばかりに関わっているので、結構な数の「フォントが無いトラブル」に見舞われています。

デザインスペックは、フォントがローカルPCにインストールされていなくても、該当フォントが適用された状態、すなわちデザイナーの方の意図通りに表示されるのです。このように、「正しいデザイン」を確認できる場が、ローカルのファイル以外に用意されているのはとても助かります。

さて、このままでは画像を書き出せないので、パートナーさんに該当箇所のアウトライン化を依頼しました。すると、返ってきたお返事が…

パートナーさんB
XDはアウトライン化できないようで…

そして画像ファイル(ていうか、Illustratorのファイル)とフォントファイルそのものが送られてきました(O_O)

まあ、画像やフォントがあれば、デザイン通りの画像を適用できるので、いいといえばいいのですが(^_^;)
余計なフォントをインストールしたくもないですし、Illustratorから画像を書き出すのもいちいち手間ですよね。ひと手間ふた手間、余計にかけなきゃならないわけです。

そして、アウトライン化ができないはずないと疑問に思って調べました。実は自分でもやったことはなかったので、ひょっとしたらできないのでは、と一瞬弱気になりましたが、もちろんできました。

アウトライン化のコマンドは Ctrl+8 (win) / command+8 (mac) です!!!!

余談ですが、今回の勉強会で行われた景品争奪戦クイズに於いて、上記コマンドについて問う問題が出題されました。筆者の発表の後だったため全員が正解できてしまったのは言うまでもありません。

さて、このパートナーさん(の依頼元のデザイナーさん)、さらに謎発言を続けます。

パートナーさんB
DIN(フォント名)はAdobeフォントだからクリエイティブクラウドでアクティベート化したら使えます。

この発言、根本的にイロイロ間違っておりまして、まず、件のフォントはAdobe fontsに含まれていませんでした(類似フォントはあったが、全く同じものはなかった)。そして、3月のアップデートで、アクティベートされていないAdobe fontsがXDに含まれていた場合、自動的にアクティベートされるようになっているのです。

つまり、わざわざアクティベートしなくても「環境にないフォント」の一覧から該当フォントが消え、そのフォントは適切に表示されるはずなのです。しかし実際はそのようにはなっていません。

ファイルを開くとAdobe Fontsは自動的にアクティベートされ、一覧から消える

XDはちょいちょいアップデートが行われているようなので、情報を追いきれていないヒトもいるのでしょうね。ジブンはそのようなことにならないよう、新しい情報をキャッチアップしていくようにしなければ、と自身を戒める機会ともなりました。

以上のことから、エンジニアにデザインカンプを渡すときは、デバイスフォント・Webフォント以外で表現したいテキストは全部アウトライン化しておいて頂いたほうが良さそうですね。SVG画像化するものに限らず。そしてできればAdobe Fontsも。

アウトライン化が必要なのはIllustratorでも同様ですが、「Illustrator案件ではアウトライン化したファイルも渡す」という認識がかなり浸透しているので、ほぼ間違いなく_olがついた(クソ重たい)アウトライン化済みのファイルが同梱されてきます。

XDでも、必要な部分をアウトライン化したファイルを渡す、という認識が浸透し、なおかつ、アウトライン化していない状態のデザインスペックも用意してもらえるとコーディングする時に何かと便利かなーと個人的には思います(時としてalt用のテキストを拾う必要があるので)。

こういったあたりのワークフローが他の制作現場ではどの様になっているのか、効率の良いファイルの渡し方があるのか等々、イロイロな事例について伺ってみたいものです。

XDのファイルをコーダーにわたす時に用意してほしいモノ

アウトライン化に関してもう一事例。

最近、右図のように見出しにアルファベット表記を付記したデザインカンプを受け取りました。このアルファベット部分をテキストとしてマークアップしてしまうと、スクリーンリーダー等でブラウズする時に邪魔になるため、筆者がコーディングする時は背景画像か疑似要素とします。この件では画像として書き出せばいいと思い、デザイナーの方にアウトライン化をお願いしたところ、こう言われました。

デザイナーさん
そこはWebフォントなんで
英単語が付記された見出し

まーWebフォントでも別にいいのですが(^_^;)
それはファイルを渡す時点で伝えていただくか、ファイル内にメモとして記載しておいていただきたいです。ドコのサービスのどのフォントかが一見してわかるように、該当フォントのWebページのURLを添えていただければなお助かります。

こちらから「アウトライン化して頂戴」等々と伝える前に、必要な情報がなにもかも整って完璧な状態のファイルを渡していただける…ということはこれまで滅多になかったのですが、コレを読んだヒトが今後気にかけてくれるといいなあ、と思って登壇した内容の記事をまとめた次第です。

コーダーがもらって嬉しい、XDのコーディング用4点セット\(^O^)/

  • デバイスフォント・Webフォント以外で表現したいテキストは全てアウトライン化済みのXDファイル
  • アウトライン化を一切していないデザインスペック(alt用のテキストを取得することがあるため)
  • Webフォントを使用する時は、フォントサービス(Googl Fonts, Adobe Fonts等)の該当フォントのWebページのURL
  • デザイナーのPCでXDから書き出した全アートボードの画像(上記3つに何かしら不備があっても、出来上がったページのスクショとこの画像を重ねて比較することで、デザイナーの意図通りになっていない箇所に最終的に気づくことができる)

以上、XDでも、アウトライン化をどうぞよろしく(^^)/

Adobe Fontsは、2019年12月31日以降、クライアントワークでWebフォントを使用する場合、自社のライセンスが使用できなくなるそうです。
Web フォントを顧客の Web サイトに使用することはできますか。

アセットの作り方、プロトタイプの作り方など、こちらの記事が大変参考になります
Adobe XDでモバイルファーストのWebデザイン入門