Adobe XDでWEBデザイン。画像書き出しでの失敗談

こんにちは山形のWEBデザイナー菅野です。

WEB制作の仕事の場合
デザインからコーディング、CMSの構築まで全てを担当することもあれば
デザインだけを担当するなど様々なケースがあります。

少し前から、コーディングだけの仕事依頼も増えてきています。
ただ、コーディングだけの依頼の際は、コーディングが得意なパートナー企業に頼むことが多いです。
デザインが完結している状態での作業になりますので
迷いが少なく頼みやすい案件と言えます。

コーディング作業の場合は、デザイナーからデザインデータいただいて
それを元に画像パーツなどを作成したり
デザインやレイアウトに必要な情報を拾いWEBサイトを作成していくわけです。
そのデザインデータが、今までは定番ツールのIllustratorやPhotoshopで作成されたデータが主流でしたが
最近では XDで作成されたデータをいただくことが増えてきています。

XDとはIllustratorやPhotoshopと同じAdobeのツールで、ワイヤーフレームの作成からプロトタイプの作成、そしてWEBデザインまで出来るという万能なツールです。
2016年に初リリースされた比較的新しいツールです。

今もコーディングだけの案件を、パートーナー企業に頼んで進めていますが
こちらもデザイナーさんから支給されたデザインデータはXDで作成されたものでした。
作業が進み、ほぼ出来上がりテストサーバーにデータをアップし
デザイナーさんにチェックしていただいている状況なのですが
ここでちょっとした問題が発生😅

デザイナーから画質が全体的に粗いので修正してほしいと指摘が入りました
この場合は、画像を2倍サイズなどの 大きい画像と差し替えれば基本的には解決します。
パートーナー企業のコーダーさんにそのことを伝えたところ
XDから画像書き出しでは画像サイズに限界があるので、XDではなくIllustratorデータで欲しいとのこと
しかし、デザイナー側は直接XDでデザインしているので もちろんIllustratorデータはありません💦

◆デザイナー「コーダー側でなんとかしてください」
◆コーダー「トリミングなども関わるので、Illustratorデータでデータ送り直してください」

完全に平行線💦

公開まで余り時間もなかったのと、間に挟まれた気まずさから
結局 私が対応することにしました😓
今回の対応方法の一つとしては、一通り出来上がっている画像を元に
IllustratorかPhotoshopを使用し
同じファイル名で2倍サイズに書き出しして上書きすればOKなので
ここの作業だけ私が対応するのは問題ありません。あとは作業するのみ

しかし、蓋を開けてみたら画像数ハンパねー💦
PCとスマホきっちり別画像に分けてあるので
書き出し画像数2倍〜〜💦
3月年度末で仕事が立て込んでいたこともあり
かなり強烈でした😭

後々冷静になって考えた時に
もしかして、XDでWEBデザイン全体を2倍にして書き出すなど
もっと簡単なやり方があったのではと思いました

今後は増えてくるであろうXDでのWEBデザイン
私もまだそれほど使いこなせていないので
コーディング時の対応はもちろん、デザインにおいても活用していきたいと思います👍

【PR】


さいたまのホームページ制作運用定額プラン2x2(ツーバイツー)のご案内


長尺動画制作パッケージのご案内│新浦和映像