タイトルの通り、Adobe XDを使ってデザイン起こすというスキルを身につけました！

PhotoshopじゃなくてXDでもデザインできる。
それは知ってたけど、XDってワイヤーフレーム作るツールって認識だったし、ワイヤーフレームとかプロトタイプ作る必要があった時しかXDを使ったことがなかったので、これでデザイン作るっておんなじようなのにしか仕上がらないんじゃないか。ってずーーーーっとそう思ってました。

こんな検証もしてみたことありました。
※この検証した時より今はもっと再現率高いと思います。
https://note.mu/emiworks/n/nb69f37952b88

そして2019.8月のアップデート時だったかな。XDからPhotoshopで編集というのが使えるようになったのを知って、いよいよ使えそうかも。でも会社でXDでデザインの案件ないんでそのまま試さず放置してました。

そうしているうちに会社を辞める決断をし、XDでデザイン案件の相談もきてPhotoshopにこだわっている場合じゃないなと思って、試すことに。

なかなか自分であちこちさわってもいまひとつ思うように使えない、進まないなあ、と思って思いついたのが、前に配布してた「レイアウトの引き出し増やすように作ったPhotoshopで作ったデザインをXDで作り直す」ということを思いついて、試しに作ってみました。

この作業を空き時間でしてたんですが、その間にもXDで描画モードを使えるようになるという待ちに待ったアップデートがあって、その後は作業もはかどりました。

XDで作業を始めてみて思ったのが、Photoshopで普通に使っているクリッピングマスクの方法と、描画モードをうまく再現できないのが大変でした。

特にクリッピングマスクは考え方がPhotoshopとは違っている。という認識で、どちらかというとIllustratorやInDesignに近かったです。
デザインを作るという思いから、脳が勝手にPhotoshopで作成する時を思い出してしまい、とにかく作業しづらくて仕方なかったのですが、InDesignとおんなじようなツールっていう認識になってからは比較的スムーズに作業していくことができました。

そして完成したのがこちらです。
左がPhotoshopで作ったもの、右はXDで作りました。
後で気づいたのがコンテンツ幅がPhotoshopで作ったものとは違っていました。
コンテンツ幅が違うので中身に入るもののサイズが違うので全体の長さも変わってしまっています。

が、XDでデザイン作れるようになる。が今回のテーマだったのでそこは気にしないことにします。

あと作業していて気づいたのがPhotoshopで作業するときとXDで作業するときの進め方が同じ私なのに全然違うのが自分でビックリしました。

XDで作業するときは一旦グレーの状態でワイヤーというか枠を全部作ってから画像入れたりして作りこみ。
Photoshopの場合は手書きで作ったワイヤーみながら画像入れつつ作る。

という進め方の違いです。

XDでひとつデザインを仕上げたことでなんとなくツールの使い方もわかってきたので、あとはまだPhotoshopで作る方が早いので、XDでも同じくらいのスピードで作れるようになるのを目標にどんどん作業して慣れていくしかないな。と思っています。