【Webデザイン】はじめてのWebデザイン自作・番外編 - PhotoshopデザインカンプからXDへ

背景

はじめてオリジナルデザインカンプをPhotoshopで作成しました。

すぐにコーディングに入ろうというところでしたが、
今までのnote模写課題の形式に則りまずはデザインカンプのXD化を考えました。
そこから、レスポンシブデザインもつくってしまいます。

成果物

自作デザインのXD化が完了しました！
PC版 : <https://xd.adobe.com/view/d4299dd3-fc7a-4ac1-7b25-fd399f0610b6-a218/>
SP版 : https://xd.adobe.com/view/4944c3b8-1739-4867-7c09-7febd8b45805-3f75/

制作期間 : 1/7 - 1/8 2日間
制作時間 : 6.0h
　PC版5.0h + SP版1.0h

まとめと感想

作業中、Photoshop側での作業が綿密でなく意図したものからズレのある仕上がりになっていたことに気付きました。
特にフォント・行間指定とテキストオブジェクトとしての高さ指定の部分と、コンテンツ毎に設けた余白の兼ね合いで全体的なズレが発生していました。
根本的にはPhotoshop側でのテキストオブジェクトの扱いでミスがあったことが問題だったようなので、調べて直します。

XDへの変換について、今回はXD側で一から自製という形にしましたが、Photoshop側からXDファイルを書き出すという方法もあるようです。この場合、事前にアセットを作っておくとPhotoshop側の修正がXDに反映されるらしいですが...
参考 :
その他のアプリケーションから Adobe XD にアセットを読み込みます。
Adobe XDとPhotoshopのアセット連携が便利! 快適なデザイン制作フローを実現しよう - ICS MEDIA

こちらは次の機会に試したいと思いました！