高校生のためのUXデザイン入門〜Adobe XDを活用しよう!


過去の記事:

第1回:XDはUXツールの「いいとこ取り」だけど、必要最低限の機能からスタートしてるんだ!



第2回「えっ、こんなデザインだったんだ。なんか、イメージと違うなぁ。悪いけど作り直してくれる?」

20160909-02-Cover


Adobe Experience Design(アドビ・エクスペリエンスデザイン)通称、Adobe XD(エックスディー)を活用したUXデザイン入門、第2回目です。

今回は、プロトタイピングという作業について学習していきましょう。
まず、用語の確認から始めていきます。
 

プロダクトって「製品」のことですよね。
みんなが持ち歩いているスマホやケータイ、通学に使っている自転車、家にあるテレビや冷蔵庫、すべて製品です。


製品を考えたり、形にしていく人をプロダクトデザイナーと呼びます。
でも、1人でつくっているわけではなくて、たくさんの人たちが1つの製品に関わっているんだ。団体スポーツのように、チームを組んで進めている。

コンセプトを決める人、設計する人、見た目のデザインを考える人、テストする人、お金の使い方を管理する人、製品を宣伝する人など、それぞれ役割が違うから、完成品をイメージできるような絵や模型が必要になるんです。


Googleで「Prototype Automotive Design」って入力して、入力ボックスの下にある「画像」をクリックしてごらん。
たくさん画像が出てくるでしょう。



自動車の絵や模型が多いですよね。これが「プロトタイプ」なんです。
完成品に近いイメージを絵で表現したり、模型をつくる作業を「プロトタイピング」と呼びます。



XDは、スマホのアプリとか、Webサイトの「プロトタイプ」をつくるための専用ツールとして開発されています。

XDを起動すると、左上に「デザイン」と「プロトタイプ」って表示されていますよね。クリックすると画面が変わるでしょ。ここでは「デザインモード」と「プロトタイプモード」って呼びますので覚えておいてくださいね。

20160909-Textcast-02-04-


例えば、スマホのアプリ開発なら、「デザイン」モードで、完成に近いイメージを描いて、「プロトタイプ」モードで、実際にタップしたりスクロールできるような設定をするんです。

触って動かすことができますから、これだったら誰でも完成品がイメージできるでしょう。
いろいろな人に「どう?」って感想や意見を聞けることがとても重要なんだ。


プロトタイプがなかったら、「えっ、こんなデザインだったんだ。なんか、イメージと違うなぁ」なんて言われるかもしれないし、あまりにも違っていたら「もう一度、考えてくれる?」ってことになるかもしれない。

できるだけ早い段階で、プロトタイプをみんなに見てもらって、確認しながら進めていけば、スムーズに作業が進むよね。


プロトタイプを紙とペンで表現することを「ペーパープロトタイピング」って言います。
この方法の良いところは、誰でも参加できることなんだ。
絵のうまい、ヘタは関係ないから。

20160909-Textcast-02-05


もし、デザイナーさんしか使えないツールを使っていたら、毎回、打ち合わせのたびに「じゃ、お願い。来週までに描いてきてね」ってことになるから、とても時間がかかる。

ペーパープロトタイピングだったら、チームみんなで参加できるから、先送りする必要がなくなるんだ。


XDは、このペーパープロトタイピングのように、できるだけ直感的に使えるように設計されているんですよ。
ここは、とても大切なところで、Photoshop(フォトショップ)やIllustrator(イラストレーター)のようなツールを目指しているわけじゃないんだ。

紙にペンで描くように、プロトタイピングできるように考えられている。
「設計思想」って言うんだけど、XDを開発している人たちが「ここは外せないぞ!」って考えていること。


プロトタイピングって作業、なんとなくわかってきたかな?
 
土曜日は、もう少し詳しく学習していきます。
それでは!



※このテキストキャストは、以下のコンテンツには含まれない主に概論パートを中心に構成しています。

Adobe Experience Design(XD)
プロトタイピング[基礎編]

image


シンクゼロマガジンとは?

筆者:
Creative Edge School Books