見出し画像

IllustratorでWebデザインはやめようと思った話

れんらんらん

私はWebデザイナー歴8年ですが、これまでWebサイトのデザインはほぼIllustratorで作ってきました。特に私がWebデザインを始めた当初は、Illustratorにはアセットの書き出しやピクセルグリッドを整合する機能がなかったので、スライスツールで画像を切り取ったり、小数点をひとつひとつ消すという不毛な作業をしていました。（なんだったんだろうあの作業）

IllustratorでWebデザインはできないでしょ？

「Webのデザインデータできました！　デザインツールですか？　もちろんIllustratorです！」といわれたらコーダーさんはショックを受けるんじゃないかなと思います。

なぜなら「Illustratorで作ったWebのデザインデータでまともなものを見たことがない」というコーダーが多いからです。私も自分のIllustratorで作ったWebデザインがまともだったとはいえないです。

小数点は消しても消しても現れるし、揃えたはずの余白がずれてよくわからなくなる、なんてことはしょっちゅうでした。

そんなめんどくさいIllustratorでWebデザインをなんでしていたの？　という話になってきますよね。その理由は、私がはじめて就職した名古屋のWeb系の制作会社で、先輩デザイナーがIllustratorでWebデザインをしていたからです。新人の私は「IllustratorでWebデザインをするものなんだ」と思い、なにも疑うことがありませんでした。

Fireworksの時代が終わり、Photoshop全盛期のころでした。

ほぼほぼIllustratorでWebデザインをしてきましたが、そのことで困ることがあまりなく、コーディングは自分ですることが多かったのと、社内のコーダーはIllustratorで慣れているので問題なかったのです。

印刷物のデザインに転用するからIllustratorを使う、は愛知県特有？

新卒入社後数年が経過し、そろそろ転職したいなと思ったとき、さまざまな企業の募集要項を見てびっくりしました。PhotoshopでWebデザインができる人の募集ばかりだったからです。

その後、IllustratorでWebデザインを作成するのは愛知県特有の文化なのだと知りました。Illustratorでデザインする理由はいろいろあるのですが、よく聞くのは印刷物のデザインに転用するためです。「納得はできるのですが、RGBのデータをCMYKに変換するので結局めんどくさいのでは？」といわれて、たしかに〜となりました。

せきゆおうさんが行なった愛知県のIllustrator使用率アンケート

せきゆおうさん（https://twitter.com/wurst_design）が行なった「愛知県のWebデザイナー/制作会社との繋がりのある方、愛知県のWebデザイナーさんに聞いた Webデザイン制作でのイラレ（Illustrator）採用率は？」というアンケートがあります。

こちらのアンケートでは「4人に1人がイラレ使い」という結果が出ました。たまにまで含めるとイラレ使いは結構います。私もそのひとり……。

全国との比較もせきゆおうさんがツイートしてくださっています。私も取引先がIllustratorでと指定があったので、フリーランスになってからもIllustratorをしばらくは使っていました。

Webサイトに適したデザインをすべき

IllustratorでWebデザインをしようなんて思わないかもしれないのですが、figmaやXDを使った方がいいですよ！！　といいたいです。しかし、figmaやXDを使ってもWebサイトとして成立していない、コーディングしづらい／できないデザインができあがることもあります。ツールはただの道具でしかないので、デザインを作る人のスキル次第で納品物は変わります。

Webサイトとして成立していない、コーディングしづらい／できないデザインをコーディングしてもらおうとして「コーダーに怒られた！　最悪！　ぷんぷん！」では済まないのです。Webサイトとして成立していないデザインはコーダーの余計な工数を増やし、メンテナンス制や品質の悪いWebサイトができあがるのです。Webサイトは生き物なので更新性、メンテナンス性を考えたデザインにしなくてはいけません。

figmaやXDは、余白が測りやすかったり、コンポーネントに登録することでボタンのスタイルを固定できたりと、CSS設計を考えるときにうれしい機能がたくさんあります。こんなに便利なのに使わない手はない！　学習だけがんばれば！　と思うのです。

IllustratorでWebデザインをするとなぜコーダーが困るのか

以下の中には、figmaやXDでも起こるものもありますが、Illustratorでよくある困ることをまとめました。

  • 余白を測るのにシェイプを使ったりして手間がかかる。

  • 画像の書き出しをする際、アセットに登録しなくてはいけないので工数が増える。

  • 動作が重い、よく落ちる。

  • できるだけ動作を軽くするためにページごとにAiデータを分ける必要がある。そのため、複数のファイルを開閉する無駄な工数がかかる。

  • アウトライン化されたデータをコーダーに渡す必要がある。

  • コーディング中、アウトライン化前のデータとアウトライン化後のデータの両方を開かないといけない。

  • リンクファイルのリンク切れでお互いに消耗する。

  • ガチガチに文字づめをされている。（画像にするぞ）

  • テキストボックス内に見出しと段落が共存。pタグなのかhタグなのかの判断にコーダーが消耗する。

  • ガチャ要素 ＜ 確定演出キターSSR「アートボードがmm単位」

  • カラーモードがCMYK。

  • 薄い背景を敷くときに不透明度でいじってある。

  • 小数点がでる。

小数点が出るなどは代表的かと思います。オブジェクトを拡大縮小をしたら確認するようにしましょう。

Webデザインをするには、コーディングの知識が必要

Webデザイナーがデザインに特化していくことはよいことだと思います。でも、それはHTMLの文書構造を理解していて、正しくデザインができる前提の話です。

「コーダーがよしなにしてくれ」ではなく、「ここからここまでは段落で、ここはh2でここはh3、ここはリストだね」と考えながらデザインしてほしいのです。

そういった構造を考えずにデザインをして、「SEOが気になるので、できるだけテキストにしてくださいね！」なんていわれても困るし、「ここ改行じゃなくて、段落だから！」などとデザインデータが無茶苦茶なのに文句をいうのはお門違いだよ、と伝えたいんです。

自分がWebサイトのデザインを行うときには、デザインと同時にコーディングがはじまっていると思っています。

ほとんど自分でデザインしてコーディングするんですけど、要素を決めながらデザインしています。みんなしない？　するよね…？　私も自分でコーディングするからとデザインデータぐっちゃぐちゃなときもあります（汗）

正直Illustratorで小数点がでるのはもうどうしようもないと思ってよしなにやるんだけど、HTMLの構造を考えていないデザインデータだと悲しくなるから。寝込みそうなくらいショックなの。好きなデザイナーさんからそんなデータもらったら立ち直れないんじゃないか私。

IllustratorでWebデザインしない……ともいえない

ツールは道具でしかないので、適した使い方をすればツールもコーダーも最高のパフォーマンスで仕事をしてくれるはずです。「IllustratorでWebデザインをするな！」といえないのは、凝ったデザインはfigmaやXDでは困難な場合があるのでPhotoshopやIllustratorで作ることもあるだろうと……。つまり、目的に沿ったデザインを行うためにツール選びもしようね！　ってことで！

編集・協力：いとさん（https://twitter.com/kippou_i）


この記事が気に入ったらサポートをしてみませんか？