独学で始めるUIデザイン基礎の基礎
こんにちは。
独学で始める人のためのUIデザイン講座ということで「AdobeXD」を使ったサイト・アプリデザイン、プロトタイプの作り方、エンジニアや得意先への共有方法を何回かにわけてお話ししたいと思います。
今回は特に超基礎編ということで、超さわりだけお話しします。
XDでは、シンプルなツールを使って簡単に、迅速にワイヤーフレームの作成、デザイン制作を行えます。その後、アートボードをつないでこれもまた簡単にアクションつきの画面遷移を、関係者と共有して試行錯誤できるインタラクティブなプロトタイプを実行できます。その後、エンジニアとの共有も開発ツールを使用してとても楽チンにできます。
また、デザイナーどうしの共同作業機能もどんどんアップデートされ、クラウドを活用したライブラリ共有はもとよりバージョン管理機能も付加されるなどかなり充実してきました。
もはや、ひと昔前まで当たり前のように使われていたPhotoshopを使ってアプリデザインしている人はもう見かけなくなりましたし、サイトデザインなんかもかなり複雑な表現をしない限りXD、もしくはsketchでデザインすることが多くなりましたね。
僕の周りではまだまだsketchはユーザーは多く、便利な機能・プラグインは豊富ですが、フォトショ・イラレ、今後さらに隆盛してくる動画編集系（PrやAe）ソフトを有するAdobeに勝てるのか・・？と思ってXDを使うことを増やそうとしている今日この頃です。（まだまだsketchも使いますが）
そもそもXDの使われ方
ワークフローの手順の概要を以下に示します。
デザイン
デザインレイアウトエレメントを作成し、アートボードを追加し、Adobe Illustrator、 Adobe Photoshop や Adobe After Effects などの他のアプリケーションからリソースをインポートします。また、プラグインを使用して、反復操作や、面倒で複雑なデザイナーの反復的ワークフローの一部を自動化することもできます。
プロトタイプ
デザインのオブジェクトまたはアートボードを選択し、アートボード間のインタラクションを作成します。
共有
プロジェクトをレビューする準備ができたら、関係者とプロトタイプやデザインスペックを共有したり、プロジェクトやアセット書き出したりすることができます。
実際の画面を用いたチュートリアルはYouTubeにて公開しますので、ご覧ください。
また、簡単なアプリUIをXDで作成する動画も、参考までにご覧くださいませ。
UIは人と体験のつなぎめ。UI作りを目的にしてはいけない
ここまで説明しておいてなんですが、XDなどの「ツール」を使うってUI（ユーザーインターフェース）作ること自体はユーザーの体験値を高めるための「通過点」でしかないわけで、UI作りをゴールにもってきてはいけません。
UIに限らず、デザインのゴールはユーザーの体験価値を高めることです。アウトプットする表現は、ゴールまでの通過点なのです。
そんなこと聞き飽きたよって方は多いと思いますが、圧倒的にそこを理解してもらえてない人の方が多いのです・・。自分のいるクリエイティブを売りにしている大手広告代理店の現場ですら、です。
ツールの使い方、表現のレパートリーをレクチャーすることはデザインの本質ではないのですが、「デザイン」というキーワードで学びを求めてる人の多くはまだまだ「フォトショの使い方・・」とか「クールなエフェクト・・」とかそのあたり探されてるんですね。
そんな中で、どうすればデザインの本質を語っていけば届くか？というところを日々悩みながら、YouTubeチャンネルではひとまず表現の話をしてみたり、はたまたマーケの話に飛んでみたり、試行錯誤しているまっ最中です。結果がある程度出れば、今「デザイン」というキーワードで求められているコンテンツを共有させてもらおうと思います。
そういうわけで今後ともどうぞよろしくお願いします。
ではまた！
この記事が気に入ったらサポートをしてみませんか？