こんにちは。
リクルートジョブズ パートナーの佐藤です。
先日公開されたAdobe Experience Design CCですが、早速使ってみましたので所感と簡単な使い方をまとめてみたいと思います!
ツールとしては覚えることはそんなに多くありません。特にPhotoshopやIllustrator使ったことがある人は、ほとんど学習コストなしで使えると思うのでぜひ使ってみてくださいね。

xd00

所感まとめ

使った感想を簡単にまとめるとこんな感じです。
・プロトタイピングツールだけあって、細かな作り込みができる感じではない。
・簡単な画面はサクサク作れていい感じです。
・作った画面間の遷移を確認できる機能がついていて便利。
・デザイナー以外でもどんどん使っていける操作感。学習コストが低い。

使い方

xd01
起動するとこんな画面が立ち上がります。
今回は新しく作成するので「Start a New Design」から「iPhone 6」を選択します。

xd02
iPhone 6の大きさのパレットができました。
ツールの全体像としてはこのキャプチャに映っているものでほぼ全てです。
PhotoshopやIllustratorよりも項目が少ないので、要点さえ掴んでしまえば誰でも使えます。

レイアウトを作る

xd03
ためしにヘッダーを作ってみます。
左側のツールバーから四角いアイコンをクリックして必要な大きさに設置します。
右側のFillのところのにある、丸をクリックするとColorsという小窓が開くので色を設定します。
16進数などで設定できないのでざっくり適当に設定します。

xd04
それらしい要素をどしどし入れてみました。
画像の設置は、他のツールで画像をコピーしてきて配置することができますが、オブジェクトをドラッグアンドドロップすることでも配置できます(この辺りは他のグラフィックツールと一緒ですね)。

余談ですが、パレットの左上のタイトルはダブルクリックで変更できます。
今回は「iPhone6-1」を「list」と変更しました。
プロトを作っているとどの画面が何か、わからないと大変なことになるので変更しておきましょう。

xd05
ドラッグアンドドロップで画像を配置する場合、パレット上のオブジェクトめがけてドロップすると、オブジェクトの形にマスクかけられた状態で画像が配置できます。
地味に便利なのでどんどん使っていきましょう。

xd06
次は「Repeat Grid」についてです。
僕はこのツールを使っていて一番気に入った機能がこちらになります。

まず、複製したいオブジェクトを選択した状態で、ツール右上の「Repeat Grid」をクリックします。
すると選択したオブジェクト全体が緑色の枠で囲まれます。この右と下にあるツマミがありますが、こちらを広げると…

xd07
じゃーん。
選択していたオブジェクトが複製されました。
今回は下のツマミを伸ばしましたが、右のツマミを伸ばせば横に複製されます。
サイトやアプリを作っていると、複製するレイアウトはたくさんあるので便利ですね。

xd08
この状態で複数の画像をオブジェクトめがけてドラッグアンドドロップしてみます。

xd09
すると、リストの同じ要素の部分にそれぞれ画像が適用されます。すごい便利ですね!
もう一度「Repeat Grid」をクリックすると緑色の枠が消えます。

xd10
左のツールバーの下、角が折れた四角いアイコンをクリックすると端末リストが出てきます。
iPhone 6で作成しているので、2画面目もiPhone 6にします。

xd11
iPhone 6をクリックするとツール上にパレットがもう一つ作成されました。
ここでもパレットのタイトルを「iPhone6-1」から「詳細」に変更しました。

xd12
作成されたパレットにざくざく要素を突っ込んでみました。
わかりやすくするために、1画面目とは異なるレイアウトにしています。

プレビューしてみる

xd13
画面左上のPrototypeをクリックすると、1画面目のパレットの左上にホームアイコンが出ました。
これが設定されているところが、プレビューする際に最初の画面になります。

xd14
クリックさせる要素を設定すると青く囲まれるため、右側のツマミをリンク先のパレットに接続します。

xd15
画面右上の再生ボタンを押すとプレビュー画面を開くことができます。
プレビュー画面では、右上のRecordをクリックするとプレビューの動きを動画で保存することができます。

xd16
再生ボタンの右側をクリックすると、作った環境をネット上で確認できるようになります。
Adobeのサーバにアップされますので、URLを共有すれば様々な環境から確認できます。これは便利ですね。

xd17
今回作ったファイルはこんな感じの遷移図で以下のURLにアップしてあります!
よかったら確認してみてください!
http://adobe.ly/1M9lzJC

だいたいこのツールでできることはこんな感じです。
できることは多くないですが、その分、わかりやすくて動作が快適なのでサクサク作れるのがいいところですね。
今後も定期的にアップデートを繰り返していくそうなので、情報をキャッチアップしていきましょう。
Adobe Experience Design CC