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

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

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

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

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

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

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

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

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

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

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

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

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

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