PhotoshopとXDの役割

今日はWEBデザインについて学習しました。

ウェブデザインで使うツールは、Photoshop、Xd、illustrator、figma、canvaなど色々あります。

人それぞれ使い勝手がいいものがあるかと思いますが、

今回はPhotoshopとXDに焦点を当てて、それぞれの特徴や役割について学んでいこうと思います。

PhotohopとXDの使い分け

Photoshopがwebデザイン制作に使用するツールに対して、

XDはプロトタイプ(基盤となる模型)作成ツールで、ワイヤーフレーム(指示書)を作るのに最適なツールです。

XDには下に挙げた便利な機能があります。

ウェブサイトでよく見かける画像とテキストを組み合わせたブロックを繰り返し表示させたい時に

XDでリピートグリッドを押してドラッグするだけで簡単にブロックを複製することができます。

デザインを作る前段階のワイヤーフレーム(構成図)を作成するときに役立ちます。

ヘッダーやフッターなど共通部分をコンポーネントに登録しておけば一括で管理ができ、

修正が入った場合でも一箇所変えるだけで全てに適用されます。

共通部分のひとつのボタンもコンポーネントに登録ができ、

それだけでなくマウスオーバーした時のデザインも登録できます。

フォント(文字スタイル)や色をアセットに登録しておけば、

変更をしたいときに一括でフォントや色を変えることができます。

XDにはphotoshopにはない便利な機能プロトタイプがあります。

ボタンの遷移やページの遷移をドラッグするだけで指定することができ、

さらにブラウザ上でデモをプレビューできます。

Photoshopのメリットは以下の２つです。

部分的な写真の切り抜きや画像の合成、

camera rawフィルターを使用した写真の色合いの変更ができます。

XDは画像の加工はできず、XDだけでデザインを仕上げることはできないのに対し、

Photoshopは単体でデザインを仕上げることができます。

以上のことをまとめるとこうなりました。

XD	プロトタイプやワイヤーフレーム作成に適している
Photoshop	デザイン制作を完結させることができる

XDとPhotoshopの特徴や役割を知ることで、効率的にサイト制作を進めることができます。

これからもwebデザインについてもっと深く学んでいこうと思います。