Webデザイン制作時にillustratorと連携しなければいけない時の話
こんにちは。nests運営チームです。
本日はみなさんにWebデザイン制作時、Illustratorと連携しなければならない時に気を付けて頂きたい点をまとめさせて頂きます。
これからWebデザインを勉強される方のなかには、もともと紙のデザインをされていた方やイラストを描いていたなんて方もいらっしゃると思いますし、そんな方にとっては使い慣れたイラレでWebデザインが作れるなら使いたいなと思う方もいるかもしれませんよね。
でも初めにお伝えしておくと、イラレで作ったデザインデータをコーダーさんに渡すと、結構な割合で嫌な顔をされます。
もっと言うとお断りされる場合も・・・。
何故かと言うとコーダーさんにとってイラレで作ったデザインデータはコーディング用としては扱いづらい要素が満載だったりするからなのですが、その理由をこの後ご説明させて頂きますね。
自分はこれからXDを中心にWebデザイン制作をするから関係ない話かなと思う方もいるかもしれませんが、今後みなさんが広告系のデザイン事務所や代理店なんかにお勤めされたりすると、結構な頻度でイラレで作ったポスターデータを受け取ってサイト用に加工し直したりすることがあると思います。場合によってはDTPデザイナーさんが作ったWebデザインのカンプデータを利用することなんてこともあったします。そんなデータを扱っているとコーダーさんでなくとも、「ん？なんかうまくぴっちりレイアウトできないな」とか「なんでこんなに画像がジャギって見えちゃうの？」なんて戸惑うことがあります。
なのでこのお話はコーダーさんに限らず、Webデザイナーを目指すみなさんにもぜひ覚えておいて頂けたらと思いますので、ちょっとだけお付き合いください。
ちなみにPhotoshopで制作したWebデザインデータは問題ありません。むしろXDが登場するまではWebサイトのデザインといえば普通フォトショで作っていましたし、今でもフォトショで作られるデザイナーさんもいらっしゃいます。なので途中から制作に参加したり、引き継いだ案件によってはフォトショを使わざるおえないなんてことも起こり得ます。
そんなPhotoshopでのWebデザイン制作についてのお話はまた次回と言うことで、今回はイラレでのお話をさっそく始めさせて頂きたいと思います。
まずどうしてコーダーさんにイラレが嫌われるか。その理由は実はコーダーさんごとに少しづつ違ったりしながらもたくさん存在するのですが、今日はそのなかから代表的な理由をいくつかピックアップさせて頂きます。
●カラーモードがCMYKになったまま
DTPではデザインデータをCMYKモードで制作するのですがWebではRGBモードで制作します。DPTデザイナーさんからデータを受け取る場合は事前にRGBに変換してもらって、できればRGBに変換することで色味が変わって見える部分は調整なんかもお願いできたらありがたいのですが、調整どころかCMYKのままデータを送ってくるデザイナーさんも結構いらっしゃったりいらっしゃらなかったり・・・。しかもデータのよっては微妙なカラープロファイルが埋め込まれてしまっていたりすることもあります。
そうするとこちらでカラーモードを変換してWebデザインに組み込むわけですが、色味を変換してこんな感じかなと作り込んでいくこの作業が結構面倒だったりします。確認のための手間も増えますし。
ちなみにコーダーさんにそのままお渡ししてしまうと画像書き出しの際に色が変わってしまってやり直しなんてことになりますので、カラーモードは気を付けないとなんです。
●単位がmmのままで小数点入り乱れオブジェクト
イラレの魅力は枠にとらわれず自由に思うままに好きなデザインができる部分にありますが（実際はそんな自由にはいきませんが）、Webのお作法はそうもいかなかったりします。
まずWebデザインでは単位はピクセル（px）で統一します。イラレでは紙での出力を基本にしているので単位がmmなのですが、Webデザインはpxが基本なのでmmで受け取ったデータもpxに切り替える必要があります。
ですがここで問題いなのがmmで指定されたサイズのオブジェクトをpxに切り替えると、小数点混じりのpxサイズになってしまったりします。
小数点が混じってしまったデザインデータの１番の問題は、画像を書き出した時に写真だろうがオブジェクトだろうが、端っこが白くボヤけてしまった画像になってしまうことです。
これを避けるためには単位も最初からpxに設定し整数をで各素材のサイズを決めていくのですが、印刷物はそんな制約を受けませんので当然DTPデザイナーさんは少数であっても綺麗にまとまるデザインを作りますので、それが結果的にコーダーさんの負担を増やすことになります。
●リンクに関わるトラブル
イラレのデザインデータは画像など複数のファイルを取り込んでデザインされていきますので容量もどんどん膨れ上がります。様々なデータが埋め込まれた横綱級のイラレデータを少しでも軽くさせるために、画像などは別ファイルをイラレに埋め込まずリンク設定させたりして、入稿の際やクライアントとの受け渡しなどを行うのですが、これと同じことをWebデザインでも行うと、環境によってはリンクが正しく反映されなかったり、開けなかったりすることがあります。
一概には言えませんが自分の心象としてはDTPデザイナーさんとコーダーさんではOSやアプリケーション、それぞれのバージョンなどPC環境に違いがありますのでその辺も影響しているように感じます。
さらにこのリンクファイルを開くと、同じように見えて似て非なる色がそれぞれに指定されていたりすこともあります。
デザイナーさんは見た目の色味重視だったりしますが、コーダーさんはその色をカラーコードで指定しますので、ピックアップするごとに似てるけど番号が違い色が混ざっていると、どれを正として扱えばいいかわからなくなります。結果、確認の手間が発生します。
●テキストのトラブル
DTPでは入稿の際に文字はアウトラインを取って印刷所に送りますが、それはもう校閲も終わって文字修正がないからなんですが、Webの魅力でもあり納期が曖昧になる一番の理由はあとで差し替え可能なところな訳です。
Webデザインの場合、テキスト部分は閲覧されるユーザーのPCにインストールされたデバイスフォントを頼って表示されます。
ただ、タイトルや見出しなど装飾したいフォントもありますので、そういったユーザーがもていなそうなフォントを使った部分はアウトラインをとって画像として処理します。
じゃぁ全部画像にしちゃってもよいかというと、それでもサイト構築は可能ですが重いサイトになりますし、後でテキストを差し替えようとしても画像ごと差し替えないといけなくなったりSEOなどいろんな理由で普通はしません。
そんな訳でデザイナーさんが「ここのテキストは画像として処理してもらって、こっちはデバイスで扱ってもらおう」なんて考えながら作ったデザインデータを何の説明もなくコーダーさんにお渡しすると、どれがアウトラインをとった画像でどれがデバイスフォントなのか区別がつきづらくなります。なので必ずアウトラインがどれなのかわかりやすく指定する必要があります。それとウェブの場合はアウトラインしたテキスト部分でもコーディングの際にそのテキスト情報が必要になりますので、アウトラインを取る場合は原文のコピーと取って、コーダーさんにわかりやすいように近くに配置しておいてあげてください。自分でも後で修正指示が来た時に辛くなるのでお気をつけて。
それからテキストの配置方法ですが、一つのセンテンスを一つのテキストボックス内にまとめず、見た目はひとまとめになってそうで実は複数のテキストボックスなんかを並べて配置したりするとコピーが取りづらいのでコーダーさんに敬遠されます。デザイナーのあなたがExcelやPowerPointで構成を渡されて作業しようとしたら、セルやテキストボックスが複数に分かれていてテキスト取り出すの面倒なんだよ！ってイラッとした時の感覚です。
この辺のコーダーさんにとっては手間が増えるので嫌われてしまいます。
こんな感じで、例えばXDのようにWebデザインに特化したツールと比べたら、イラレにはなんでこの機能がないのかなどなど色々と扱いづらい理由が出てくるですが、一番コーダーさんを悩ませるのは確認のための手間が大幅に増える、という部分に尽きると思います。
問い合わせるお相手が何かしら理由をこじつけてでも連絡を取りたいと思いを寄せる方でもない限り、この作業はどんどんコーダーさんの精神を削ってしまいます。
でもこれはイラレに限らず、例えばWebと相性の良いXDを使ったとしても起こり得ることなんです。大切なのは立場の違う方にデータを引き継ぐ際に、デザインの意図や趣旨を理解してもらえるように注記を加えたりコーダーさんが扱いやすいデータとして構成をまとめられるか、だと思います。
初めのうちは色々やりすぎてコーダーさんに「ごちゃごちゃしててわかりづらいよ！」と怒られることもあるかもしれませんが、そこで気づくことも沢山ありますので「今ぜったい経験値が上がってるはず」自分に言い聞かせて頑張ってください。
そんな訳でイラレのクセを考慮せずにWeb制作を進めてしまうと色々な所でトラブルを起こしかねませんが、Web用のデータを作る手順やお作法を理解することでイラレでもWebデザインデータを制作することは可能ですので、次回はその手順をご説明いたします。