目次
Adobe XDはデザインの作成時に使用しWebページを作成します。
Adobe XD以外のソフトウェアにはFigmaやZeplinなどがあります。
どちらがいいのか悪いのかではなく、人の好みや、あと各プロジェクト毎に使い分けていく感じですね。
どのようなソフトウェアを使おうとも、コーディング（HTML,CSS）に落とし込むのに必要な知っているべき最低限のデザイン知識があります。
1.デザインデータ（やデザインカンプ）の扱い方
デザインデータをきちんと管理するのが大事です。
整理したりバージョン管理したり、フォルダの構成を考えたりすることで、効率的なデザイン作業ができます。
例えば、aiという拡張子があります。
これはAdobe illustratorのデータ
こんな感じで
doraemon.ai（本体）と
doraemon_ol.ai（本体のアウトライン化したデータ）、２つのデータがWEBデザイナーから渡されることがあります。
アウトライン化したデータとは、言ってしまえばどんなPC環境でも同じ表示をする写真みたいなデータです。
これによって、どんなPC環境でも同じデザインが見えますので、まずは、アウトライン化したデータを確認します。
2.画像のファイル形式
画像のファイル形式の選び方が大切です。
JPG、PNG、SVGなどの違いや使いどころを理解して、画像の表示品質やファイルサイズを最適化しましょう。
例えば、JPGは透過に対応してません。
ですから、後ろが透けてる画像が作れません。
また、PNGは透過に対応しており、JPGより高品質な画像にできますが、容量がJPGより重いです。
画像の使い分けが重要ですね。
3.デザイン、コーディングの基本知識
最後はデザイン、コーディングの基本的な知識を持つのが重要です。
コーディングを担当する人は配色やレイアウト、フォントなどの基本的なデザインの原則を理解して、魅力的で使いやすいWebデザインを作ります。
デザインデータにはHTML、デザインに必要なフォントや画像、フォントのサイズや太さなど 他にもいろいろあります。
デザインデータをどうやってWEBページに落とし込むのか。これにつきますね。
最低限これくらいは覚えていてほしいと思う３つを挙げてみました。
コーディングは奥が深いです。
頑張っていきましょう。
