初めての「Adobe XD」で簡単にWebデザインができた
今までPhotoshopを使ってWebサイトのトレースをしていましたが、1サイトに時間がかかり過ぎて全然数がこなせませんでした。
そこで、効率化のために Adobe XD を使ってみました。
XDを使うきっかけになったのは、以下の記事です。
使用方法がわかりやすく書かれていたので、すぐにDLして使ってみました。
「Adobe XD」を使った実際のWebデザイン
テキストの内容、配色、画像などは自分の好みに一部アレンジしましたが、構成などはマネて作ったので、ほぼトレースです。
見本とはメインビジュアルが違うため、配色まで真似するわけにはいかず、スポイトツールで花と葉の色を使いました。個人的には草木やナチュラルな感じが好きなので、わりと気に入っています。
フッターの色は特に悩みましたが、緑に寄せたトーン低めの青にしました。緑と黄色の反対色である紫も考えたのですが、自然な雰囲気とは異なりモダンな印象だったので却下。
お問い合わせフォームもマネして作ってみました。
Adobe XDでWebデザインしてみて思ったこと
初めてのXDでしたが、さくっとWebデザインができました。
トレースに使うツールとしては、細部の観察やボタン、テキストなどの編集はPhotoshopが適していて、Xdはおおまかにデザインを把握するのに使えると感じました。連携もできるようなので、使い方を学んで両方使っていきたいです。
XDはモックアップも作れるので、そちらの機能も積極的に利用していきたいです。
最後に、今回参考にさせて頂いたWebクリエイターボックスさん。大変勉強になりました。ありがとうございました。