コーダーの私が「Webデザインデータを Illustrator データ以外で欲しい」と感じる15の理由

2021年09月09日2021年09月11日

コーダーとして仕事をしていると、Webデザインデータをあらゆる形式で受け取ります。私はその中でもIllustrator(ai)形式でデータを受け取ってコーディングするのが苦手です。Illustrator 形式であってもとても快適にコーディングできる人もいるようですので、その場合は「なぜだろう」と思うでしょう。私が苦手だと感じる理由を書き出してみます。長年のしんどい思い出を辿りながら、心折れながら書いているので読みにくいと思います。
特に何かに役立つ情報ではありませんので、読んでみたい方だけお読みくださいね。

※なお、印刷前提のデータとしてIllustratorファイルを受け取る(作る)のは、まったく苦痛ではありません。ロゴやイラストなど、Webサイト内で部分的に使用するベクタファイル素材の場合も同様です。あくまでWebデザインデータとしての話です。

目次

CMYK

Illustratorあるある第一位(私調べ)CMYKでデータが送られてきます。めちゃ多いです。うっかりそのまま画像を書き出してしまうと、色が変わってしまいます。私から何度、データをRGBで欲しいと伝えて、その理由や参考資料を添えても、引き続きCMYKのデータが送られてきがちです。そして画像に妙なプロファイルがうめこまれているなど。

FigmaやXDなどのWebデザイン/プロトタイプソフト(以下、「他のツール」とします)で受け取ったデータにそういうトラブルが発生したことは、私の経験上はないです。このトラブルはIllustratorだけ、しかも頻発するので避けたくなります。連絡コストがかかります。

小数点が発生しがち

フォントサイズ指定や、アセット書き出ししたSVGファイルの縦横幅、線幅などに小数点が発生していがちで、コーディングしにくいです。また、ピクセル整合しても、書き出した画像の端っこが白くなりがちです。

これも他のツールでは遭遇したことないと思います。Illustratorだけです。端っこ白くなるのはPhotoshopのアセット書き出しでもありますが。余談ですがPhotoshopの画像アセット書き出しは画像形式はもちろんフォルダや圧縮率がレイヤーごとに指定できるなど、非常に優れているのでXDにも搭載して欲しいです。

そもそも単位がpxじゃない

mmなど、pxではない単位で作られたデータが送られてくることがごく稀ですが、あります。書類の単位mmからpxに変更して、アートボードサイズを幅何pxのイメージで作ってるのかを別途、確認することになります。そして小数点だらけに…。あと、変更指示も単位が級やPtだったりします。
他のツールでこれが起きたことはないです。

画像がリンク切れ

AIファイルから呼び出されている外部リンク画像が一緒に送られてこず、再送をお願いすることになります。また、ファイル名によっては環境問題でうまくリンクされません。パッケージ機能などがあることも私は知っていますが、送られてくるデータがそうなってなければ私は何もできないです。

他のツールでこれが起きたことはほぼないです(Photoshopではクラウド上のパーツファイルリンク切れはあったかも??)。

ファイルごとに色々バラバラ

Illustratorファイルはデータが重くなりがちなので(私の体感)、Webサイトのデザインが、レイアウトごとに複数のファイルに分割して送られてくることがあります。

全体に2カラムレイアウトが採用されているとして、サイドバーの幅は統一されていたとしても、メインカラムの幅がそれぞれ微妙に異なっていたり、あるいは両方の要素感の余白が異なっていたりします。同じファイルの中ですらもバラバラだったり。
また、似て非なる色が同じデザインと思われる見出しに使われていたり、同じ文脈の場所で異なるフォントやフォントサイズが採用されていることがあります。まだ、ヘッダーフッターサイドバーなどの共通パーツの内容がファイルによって異なっていたりします。
判断に迷いますし、どれが本命あるいは最新なのか連絡確認するコストが発生します。

他のツールでは同じファイル内に1つのWebサイトの情報をまとめられ、レイアウトグリッド機能やコンポーネント機能もついていたりするので、こういった問題が起きにくいです。

--
2021/09/11追記
正直に言えば、上記の5点がなければ、私はIllustratorデータでも困りません。
ですが、上記のトラブルが多く、私が失礼を承知で、根拠や手法を添えてお願いをしても「すみません」と言うだけで次も同じ状態だったり、あるいは「コーダーはデザインについて何もわからないくせに口を出すな」「コーダー(下請け)のくせに、デザイナーの仕事のやり方に文句を言うな」という反応だったりして、私の心は折れてしまいました。
もう「デザイナーの仕事にコーダーが口を出すな」という状況に対峙したくありません。

他のコーダーがどうかは分かりませんが、私の場合は、コンポーネント機能がなくとも、 「common_parts.ai」等にヘッダーフッターなどの共通パーツをマスターとしてまとめてあり、他のAIデータではJPGがダミーとして挿入されているなどであれば、どれがコーディングすべきパーツかは分かります。
--

アウトライン済みとそうでないデータ両方の管理が必要

私の経験上、Illustratorでデータが送られてくる場合、なんの前フリもなく有償のフォントが使われていることがあります。これについて、Webフォント契約するのか、そもそもそのフォントはWebフォントとして配信されているのかなども含めて調べて私から打診する手間が発生します。その中でも特にフリーダムなセレクトの場合には、複数のフォント配信プラットフォームと契約することになり、現実的ではありません。
こういった理由で文字をSVGなどの画像として書き出しする場合、altを記入するために、アウトライン済みとそうでないデータを両方開くことになります。LPなんかだともうめっちゃ重いです。

他のツールでこれが起きたことはないです。他のツールでシステムフォント以外を指定されることもありますが、だいたいは相手側から事前に「Webフォントはこれを導入」などの指示が来ます。

コンポーネント機能がない

上の項目で先に触れてしまいましたが、コンポーネント機能がないことで、何がデザインの成分であり、何が意図的ではないイレギュラーなのか、何が主で何がバリエーションなのかも読み取りにくいです。

余白データがとりにくい

他のツールでは、オブジェクトをクリックして他のオブジェクトとの空間にカーソルをかざすだけで様々な距離を測って表示できたりするのですが、Illustratorではそれができないです。また、Illustratorには(単純なグリッド表示ではない)レイアウトグリッド機能がないためか、横幅の解釈をどう受け取って良いか判断が難しいことがあります。自由な横幅や、規則性が見つけられない余白になりがちです。

※日頃はIllustratorファイルをXDで開き、さらにそこからZeplinで開いて測っています。クラウドXDなら必要に応じてローカル保存してからZeplinして、Figmaならそのまま測ってます。測れない時は矩形ツールで隙間を埋めるようにして測ります…。

原稿がコピーしにくい

Illustratorファイル上のテキストをHTMLにコピーペーストする際、オブジェクトを選択して、テキストを選択してコピーコマンドを打つ必要があります。地味に手数がかかるほか、作業中に文字を書き換えてしまいそうで気が引けます。

他のツールではオブジェクト選択→ワンクリック(もしくはショートカット)で原稿がコピーできることが多く、しかも誤って編集してしまう可能性も低いです。

デザインスペック機能がない

コーディングに必要な、要素の縦横幅や角丸の大きさ、ボックス内配置、フォントサイズ&行間&揃え、カラーコードなどを同じパネル内に一括表示したり、CSSコードとして表示する機能がないです。Illustratorでもウィンドウの配置を工夫すれば似たようなことはできなくはないとは思いますが、やはりWebデザイン専用につくられた他のツールと比べると使い勝手が劣ります。

ボックスモデル的概念を支える機能がない

どう表現すれば伝えられるか見当もつかないのですが、Illustratorはアートボード内の、どこにでも、どのようにでも要素を配置できます。いっぽうWebページは、ボックスモデルを軸にしてレイアウトすることになるため、Illustratorファイルのフリーダムな配置は再現しにくいです。心を無にしてレスポンシブに position: absoluteしつづけるもしくはvw命マンが生まれる。そして更新しにくいサイトが出来上がってしまう。

いっぽう他のツールではスタックやオートレイアウトなどWebの動きを想定した動的なレスポンシブデザイン対応機能も搭載されていて、それらを活用してもらえていれば、デザインを再現しやすいです。

プロトタイピング機能がない

Illustratorにはプロトタイピング機能がありません。そのため、書き出したPDFをクライアントが確認しているようなのですが、Webで組み上がったあとに「印象が違う」「(元データと同じサイズにしているのに)字が小さすぎる」「幅が広すぎる」のようなクライアントからの修正が舞い込んできがちです。

改善のための修正そのものは全くイヤではないのですが、他のツールでは起こりにくい現象がおこりやすいとなると(クライアントも幸せじゃないですよね)、Illustratorデータ案件はおっくうに感じます。

バージョンコントロールがない

IllustratorファイルもAdobeクラウドに保存してある程度は履歴管理もできるはずだと思うのですが、私が受けとるデータはその機能を使っていません。なにか変更があれば、相手から、変更部分だけをまとめた別のファイルが送られてきたりします。これによって見比べるファイルがたくさんできてしまい、それらをうまく自分側で管理する必要がでてきます。

他のツールでは、同じ一つのファイルをクラウド上で共有できるため、こういった「あとからの変更でたくさんファイルが生まれる」ことが少ないです。特定のバージョンに名前をつけたり、いつ誰が何を変更したかも閲覧できるので(履歴はプランによるか?)何かと安心です。

コミュニケーション機能がない

Illustratorにはオンラインでコメントをつけたりコミュニケーションする機能がないため、何かを確認したければ別途スクショ&何らかの外部コミュニケーションツールを使って連絡を取る必要があります。

他のツールでは、ファイル内のデザインに注釈をつけたり、あるいは音声会話等でやりとりができるため、必要なコミュニケーションが取りやすく、お互いに制作物を改善しやすく、仕事がしやすいです。
※前向きなコミュニケーションは好きなんです

Webデザイン専用に作られたデザインソフトが快適すぎる

私にとって、Webデザイン専用に作られたソフトで製作されたデザインファイルは、とても扱いやすいです。この記事のこれまでを読んで「こいつワガママだな」「仕事なんだから文句言わずにやれ」と思われるなら、その通りです。私はWebデザイン専用ソフト&素晴らしいデザインデータにすっかりダメにされたコーダーです。全員、しなくて良い苦労はしないで、別のところに気力や体力を使いながら、(クライアントや閲覧者含めて)関わった誰もが作って良かったと思えるようなWebサイトを作りたいです。

女性が笑っている
佐藤あゆみ(旧姓:古庄)
屋号PentaPROgram フリーランス Web制作者/著書「Webページ高速化超入門 」/計算メモ帳アプリ「Kanau」制作

関連記事

  1. 雑記
  2. コーダーの私が「Webデザインデータを Illustrator データ以外で欲しい」と感じる15の理由