コーディングをイラレデータで要求するな。Figmaでやれ。

令和にも関わらず、一部のWEB制作会社では、まるで時代錯誤のような手法が使われています。それがコーディングをAdobe Illustrator（以下イラレ）データで要求する手法です。時代に合わせた制作・開発を行っている会社からすると驚くかもしれません。冒頭強めに書いてしまいますが、現代では今すぐにでもやめたほうがいいです。本当に今すぐに（強めな言い方になって申し訳ないですが、気づいてほしいのです）。

主な問題点は、このような手法がチームの生産性・モチベーションに影響を与えることです。WEB制作や開発は通常、一人ではなくチームで行われ、そのメンバーはプロジェクトごとに変わることがあります。新しいメンバーが加わることもあれば、部署異動や離職でメンバーが変わることもあります。

もし、一人のメンバーが独自の高い制作・開発手法を採用している場合、他のチームメンバーもその手法に合わせなければならなくなります。これにより、チーム全体の生産性・モチベーションが下がります。

時代に合わせた標準的な制作・開発手法を採用することが、チームの連携をスムーズにし、生産性・モチベーションを維持する鍵となります。

■ レガシーな手法を行っている会社は、人材が集まりづらい

レガシーな手法を採用している会社は、新しい人材を集めるのが難しいことがあります。例えば、採用サイトの募集要項を見ると、会社が求めるスキルレベルや社風がうかがえます。

たとえば、募集要項に「WEBデザイナーの実務経験3年以上、Photoshop、Illustratorスキル必須」とあれば、その会社は比較的デザイナーについて解像度が低めで、とりあえず経験のあるデザイナーが欲しいといった意思が読み取れます。

一方で、「デザインツールにFigma、コミュニケーションツールにFigJam、Slack、Zoom、Trelloを使用」などと記載されている場合は、開発への解像度が高く、比較的最新の開発手法を取り入れていることが伺えます。

このように、募集要項から会社の技術的志向性が読み取れるため、求職者は自分に合った企業を見つけやすくなります。

■ Figma主流の時代へ

2023年11月現在のWEBデザイン界で重要なのは「Figmaを採用しているか」という点です。少し過去の話をすると、デザインデータは主にPhotoshopやFireworksで作られていましたが、特に縦長のWEBサイト制作では、データの重さが問題となっていました。

「より軽快なツールはないか」といった需要から、2010年にSketchがリリース。2015年にはFigma。後発でAdobe XDが2017年にリリースしました。他にもデザインツールはありますが、主流としてSketch、Adobe XD、Figmaの3つのツールが競合する時代に突入しました。この中で、リモートワーク環境での同時閲覧・編集やブラウザでの操作・確認がスムーズなFigmaが注目を集め、使用者が増加しました。

その流れの中で、多くの有名企業がFigmaを導入し、Sketchは影を潜め、Adobe XDの開発ペースが落ちた結果、2022年9月にAdobeによるFigmaの買収が発表され、これが大きなきっかけでFigmaが圧倒的な地位を築きましたと言えます。（EUの規制当局から独占禁止法違反だと指摘を受けており、実現はまだできていません）

Adobe XDの開発が停滞している現在、WEB開発の主流ツールとしてはFigmaが推奨されています。もちろんFramerやSketchなど他のツールも存在し、開発で使用されるケースもありますが、これらは少数派になっています。

下記が2022年後半の最も人気のあるUIデザインツールの表です。

2022年の最も人気であるUIデザインツール
https://uxtools.co/survey/2022/ui-design/#ui-design-tools-graph

主力ツールとして、Figmaが圧倒的です。反対にイラレはサブで使用されるツールとして人気があります。

2022年サブで人気であるUIデザインツール
https://uxtools.co/survey/2022/ui-design/#ui-design-tools-graph

■ IllustratorとFigmaの比較

Web制作におけるデザインツールとして、IllustratorとFigmaはそれぞれ異なる特徴を持っています。以下の比較表がその違いを示しています。

IllustratorとFigmaの比較

Illustratorはグラフィックデザインに適しており、印刷物やロゴ作成に優れています。一方、FigmaはUI/UXデザインやプロトタイピングに特化しており、チーム協働やリアルタイムフィードバックの取得に便利です。

プロジェクトの要件に合わせて適切なツールを選択することが重要です。完結に言いますと、ロゴや印刷物のデザインにはIllustratorが、WEB制作ではFigmaが最適な選択となります。これらのツールはそれぞれの分野において強みを持ち、用途によって使い分けることが大切です。

■ コーディングにおいてイラレを使用する問題点

コーディングにおいてイラレのデザインデータを使用することに関連する問題点を言語化してみましょう。

1. ファイル形式の非効率性

イラレのデータは、基本的にベクターベースのグラフィック用です。これは、WEB制作においては、必ずしも最適な形式ではありません。WEB制作には、HTML、CSS、JavaScriptなどのコーディングが必要で、これらとイラレのデータ形式は直接的な互換性がありません。

2. 作業効率の低下

イラレで作成されたデザインでWEB制作を行うのは困難です。レイアウト管理にとても苦労します。FigmaであればAutolayout（オートレイアウト）という機能でレイアウトを設定できるので、格段に効率的です。しかしイラレの場合は、イラレは1つ1つを手作業でレイアウトするため、時間がかかるのと、ミスが発生する可能性が高く、デザイナーへの負荷が上がります。

3. 協働と共有の困難さ

Figmaのようなコラボレーションツールは、リアルタイムでの共同作業やフィードバックに適しており、デザイナーとエンジニア間のコラボレーションを容易にします。イラレはこのような協働機能もありますが、正直使い勝手が悪く、使用感として単純に動作が重いです。いまのところ実制作で使用するには適さないでしょう。

4. 更新とメンテナンスの問題:

WEBサイトは更新されていくものですが、イラレファイルは運用には適してなく、メンテナンスの効率が悪くなりがちです。
WEBサイトの更新作業は通常、複数のチームメンバーによって行われるため、イラレファイルを共有し、適切に管理することが重要です。しかし、このファイル形式は共同作業やバージョン管理には最適化されていないため、チームでの作業効率が低下するリスクがあります。

さいごに

「コーディングをイラレデータで要求するな。Figmaでやれ。」という強いタイトルになってしまいましたが、まだまだイラレデータでコーディングを行う会社が存在しているため、この現状を無くしたく、あえて強めのタイトルにしました。この環境はデザイナーにとって不幸な環境だと知って欲しいのです。
もちろんイラレも使用しますが、イラレだけを使用するわけではありません。途中でも触れましたが、ツールはそれぞれの分野において強みを持ち、用途によって使い分けているのです。

これを読んだ、経営層・プロジェクトマネージャー・部門長など権限をお持ちの方で「ウチはコーディング時に何のデータ・アプリを使っているんだ？」と気になった方はぜひ調べてみてください。

そして、もし「コーディングはイラレデータで行いたい」と言った声を聞いた場合、「どうしてイラレがいいんですか？」と「イラレで行うメリットを教えてほしい」など、何度か尋ねてみてください。

チームでコーディングをイラレデータで行う理由は無いので、もし他意見があれば教えてください。私が記事内に追記して回答いたします。

健全なWEB制作ができる環境を整えていきたいです。