chouchou

未経験からWEBデザイナーを目指すfuyu_naのブログ

初めての「Adobe XD」で簡単にWebデザインができた

f:id:ne-ochi:20180930015044p:plain

今までPhotoshopを使ってWebサイトのトレースをしていましたが、1サイトに時間がかかり過ぎて全然数がこなせませんでした。

そこで、効率化のために Adobe XD を使ってみました。

XDを使うきっかけになったのは、以下の記事です。
使用方法がわかりやすく書かれていたので、すぐにDLして使ってみました。

Adobe XD」を使った実際のWebデザイン

f:id:ne-ochi:20180930081612p:plain

テキストの内容、配色、画像などは自分の好みに一部アレンジしましたが、構成などはマネて作ったので、ほぼトレースです。

見本とはメインビジュアルが違うため、配色まで真似するわけにはいかず、スポイトツールで花と葉の色を使いました。個人的には草木やナチュラルな感じが好きなので、わりと気に入っています。

フッターの色は特に悩みましたが、緑に寄せたトーン低めの青にしました。緑と黄色の反対色である紫も考えたのですが、自然な雰囲気とは異なりモダンな印象だったので却下。

f:id:ne-ochi:20180930084354p:plain

お問い合わせフォームもマネして作ってみました。

Adobe XDでWebデザインしてみて思ったこと

初めてのXDでしたが、さくっとWebデザインができました。

トレースに使うツールとしては、細部の観察やボタン、テキストなどの編集はPhotoshopが適していて、Xdはおおまかにデザインを把握するのに使えると感じました。連携もできるようなので、使い方を学んで両方使っていきたいです。

XDはモックアップも作れるので、そちらの機能も積極的に利用していきたいです。

最後に、今回参考にさせて頂いたWebクリエイターボックスさん。大変勉強になりました。ありがとうございました。