慣れないXDのデザインデータを元にコーディングした時の話

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

11月上旬に広告代理店 B社さんからコーディング案件をいただきました
デザインはB社さんが行い、こちらではコーディング作業のみ
その後、WEBサイトの運用管理はB社さんです

B社さんからのデザインデータは
AdobeのWEBデザインツールXDで作成されたものでした
WEBデザインの定番ツールと言えばIllustratorやPhotoshopが有名ですが
最近はこのXDでWEBデザインされることが非常に増えています

今までもXDでWEBデザインデータを支給されることはありましたが
その場合は、コーディングが得意なパートナー企業に頼んでいました
しかし、パートナー企業も他の案件が立て込んできており頼むことができず
今回 今更な感じではありますが
初めて自分でXDのデザインデータを元にコーディングすることに💦

私の場合、XDを使ったことはあるものの
基本的にはバリバリのIllustrator派
慣れていないこともありXDはあまり使いたくない気持ちがあります😓
さらに この案件 納期も短めでしたので
不安と焦りを感じながらの作業となりました

コーディングの進め方としては
デザインデータがXDであっても、IllustratorまたはPhotoshopだとしても
基本的には同じになります
サイトに使用するカラー、各コンテンツの横幅や高さ、テキストのフォント種類やサイズなど
様々な情報をデザインデータから拾ってhtml・cssファイルへ反映させていきます

また、画像やデザインされたパーツなどを
jpg・png・svgデータなどで書き出して配置していきます

基本的にはこれらの作業を繰り返しWEBサイトの完成を目指します

その後 作業を進めていき
なんとか一通り完成し、データをテストアップ、あとは校正待ちです
慣れていない分 やはりいつもより時間がかかりましたが
終わりが見えてきた感じです(^^)

そして、B社さんから校正の指示がきました
簡単な文字修正だったのですが
修正箇所が元々画像で作られていたため
パーツを作成した元データがないと修正できない状態でした

B社さんに連絡し
「パーツを作成した元データを送っていただければこちらで修正いたします」
とお伝えしたところ
早速 元データを送ってきてくれました

データを確認してみると…
修正パーツのみの元データがくると思いきや
なんとページ全体がデザインされた Illustratorデータ😵

どうやら最初にIllustratorでデザインし、それを元にXDで作り直していたようです💦

なぜわざわざXDでデータを作り直したかはツッコめませんが
Illustratorのデータがあるなら 最初にそれを頂きたかった〜😭

私の中だけでモヤっとする点はありましたが
今回は、食わず嫌いにしていたXDに触れる良い機会になりました

【PR】


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


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