こんにちは！
アメーバブログでデザインを担当している、中 隆理(ナカ タカミチ)と申します。
私は、pixateの紹介や操作方法、理解が難しいと感じた部分の説明などを2度に分けて行いたいと思います。
今回は、制作開始までに必要な準備とツールの使い方を、作業を円滑に進めるためのポイントなどを含め説明させていただきます。
「細かい動きまで作り込める、ネイティブアプリ向けプロトタイピングツール」
です。
そして、pixateを使用するメリットとして
「アプリなどの操作に対応するアクション(パーツの動きや形、色の変化など)を、ある程度簡単に実際の端末で再現できる」
この点にあると思います。
以前、所属していたモックテックという部署で、pixateでできることを探りながらデザインモックを制作したので、これを見れば多少はできることがイメージできると思います。
また、以下のことも知っておいたほうが良いと思います。
・制作したアニメーションをコードに変換できない
・使いづらい部分がなかなかある(UI説明の部分で記入します)
・pngしか使用できない
・pixateのPCアプリをダウンロード
（最近のアップデートでブラウザ上での制作ができなくなった）
・wifi
（画面を端末で確認するにはおなじwifiにつなぐ必要がある）
※OS10.9以下だと端末接続がうまくいかないことがあるかも？
※android端末なら設定を行うとUSBで同期可能だそうです。
・Xcode
（PC上でシュミレーションできる）
・広い画面
（pixateの制作画面が拡大縮小できないので）
・Retinaサイズの画像
（名前をわかりやすくつけると、pixate上で探す際に便利）
1 ,左側の画面が出てくるので、「create a new prototype」をクリック。または、⌘＋Nでも良いです。
2 , 名前を決めます。
3 ,右側の画面が出てくるので、 画面サイズを選択します。
また、保存したデータは「◯◯◯◯.pixate」という拡張子のファイルになります。 ダブルクリックで開けます。
主にこの画面で制作を行います。
真ん中の部分をキャンバスと言い、画像などを置いていきます。
白い部分が表示エリアになり、端末で見える部分になります。
全体の見た目（画像配置時）
ちなみに実際に画像を配置した時はこのように上下左右にパーツが広がっていると思います。 この場合は横フリックでの遷移を表現したいので、画像を横に並べてあります。
画像配置は、表示エリア（真ん中の白い部分）に画像を動かして、遷移やアクションなどの連続性を表現するイメージ です。
なので、構造を意識した画像配置が大事です！
レイヤー
解説
・キャンバスに置いた画像などのレイヤーが並びます。
・グループは子にしたいレイヤーを親にしたいレイヤーにドラック＆ドロップします。
・右上の＋ボタンで四角形が作れます。そして四角形をものすごくよく使います。
・レイヤーが動かしにくく、勝手にグループになったりします。下から上に動かすと割とマシです。
・レイヤー横のボタンはキャンバス上での表示/非表示を切り替えます。なので、端末では上にあるレイヤーが見えています。
プロパティ
アクション
・パーツの整列などが行えます。レイヤーを選択し、行いたいアクションを選択し、右向きの三角ボタンを押すと実行されます。
・タブの遷移やスクロールなど定番のテンプレートも作れるのですが、pixateを理解していないと変更しづらかったり、自分の作りたい構造と違う形になっていることも多いので、慣れてきたら見てみてください。
インタラクション / アニメーション
2つはタブで切り替えられます。
インタラクションの解説
・レイヤーに持たせたい要素をドラッグ＆ドロップすると、そのレイヤーがそのパネルの機能を持ちます。
例えばTapをドラッグ&ドロップしたレイヤーはタップできるようになります。
・プロパティに選択しているレイヤーが持っているインタラクションが表示されます。
・スクロールは少し特殊で悩む人が多いと思うので、第2回で説明します。
アニメーションの解説
・どんな変化をさせたいかをレイヤーにドラッグ＆ドロップします。
プロパティパネルの下のANIMATIONSという部分にドラッグ＆ドロップしてもよいです。
アニメーション条件設定
UIの右下部分に、選択したレイヤーに付いているアニメーションが表示されます。
・条件の指定をして、どんなインタラクションがされたらどんなアニメーションを起こすのかを設定してきます。
ここで大事なことは
どのレイヤーがどんな動きをしたら、どのレイヤーがどのようにに変化するのかを分解して考える
ということです。
どんな良いアニメーションもシンプルな動きの組み合わせでしかないはずです。
そして、重要になってくるのがアニメーションさせる際の条件の設定になります。
条件の設定がpixateの1つの壁だと思っていて、その部分の理解が深まると、できることの幅がグッと広がると思います。
アニメーションの条件の付け方については、次回紹介したいと思います。
制作の流れとしては、
1 , 画像を配置し、配置の構造とレイヤーの上下関係や親子関係を整理する
2 , 何をしたら、どう動くのかを考え、レイヤーにインタラクションやアニメーションをつけて、条件を設定していく
これをモジュール単位などで繰り返し行なっていきます。
赤い丸が付いている部分のタブをクリックするか、画像を直接pixate上にドラック＆ドロップした場合にこの画面になります。
画像の追加はASSETSの＋ボタンからでも可能です。
そしてアセット画面では、画像パーツをキャンバスに配置することができます。画像をpixateに追加するだけでは、キャンバス上には置かれていません。
リストになっている画像をドラック＆ドロップして配置しましょう。
ヒント！
・あまり正確に配置できないと思うので、プロパティで数字を打ちましょう。
・アセットリストは名前順に並ぶので、ヘッダーやフッターなど構造ごとにわかり易い名前にしましょう。
次回は実際にモック制作を行う際に、おそらくつまづくであろう部分の解説と私がよく使う技など、実践的な内容を紹介しようと思っております。
また、「pixate」以外にも「principle」や「flinto」などの細かいアクションが設定できるツールも登場していますので、興味のある方は是非触ってみてください。
最後まで読んでいただきありがとうございます！
アメーバブログでデザインを担当している、中 隆理(ナカ タカミチ)と申します。
私は、pixateの紹介や操作方法、理解が難しいと感じた部分の説明などを2度に分けて行いたいと思います。
今回は、制作開始までに必要な準備とツールの使い方を、作業を円滑に進めるためのポイントなどを含め説明させていただきます。
「pixate」とは
「細かい動きまで作り込める、ネイティブアプリ向けプロトタイピングツール」
です。
そして、pixateを使用するメリットとして
「アプリなどの操作に対応するアクション(パーツの動きや形、色の変化など)を、ある程度簡単に実際の端末で再現できる」
この点にあると思います。
以前、所属していたモックテックという部署で、pixateでできることを探りながらデザインモックを制作したので、これを見れば多少はできることがイメージできると思います。
また、以下のことも知っておいたほうが良いと思います。
・制作したアニメーションをコードに変換できない
・使いづらい部分がなかなかある(UI説明の部分で記入します)
・pngしか使用できない
「pixate」を始める準備
必要な準備・pixateのPCアプリをダウンロード
（最近のアップデートでブラウザ上での制作ができなくなった）
・wifi
（画面を端末で確認するにはおなじwifiにつなぐ必要がある）
※OS10.9以下だと端末接続がうまくいかないことがあるかも？
※android端末なら設定を行うとUSBで同期可能だそうです。
・Xcode
（PC上でシュミレーションできる）
・広い画面
（pixateの制作画面が拡大縮小できないので）
・Retinaサイズの画像
（名前をわかりやすくつけると、pixate上で探す際に便利）
新規作成
ファイル選択画面と端末サイズ選択画面
1 ,左側の画面が出てくるので、「create a new prototype」をクリック。または、⌘＋Nでも良いです。
2 , 名前を決めます。
3 ,右側の画面が出てくるので、 画面サイズを選択します。
また、保存したデータは「◯◯◯◯.pixate」という拡張子のファイルになります。 ダブルクリックで開けます。
制作部分のUI説明
全体の見た目
主にこの画面で制作を行います。
真ん中の部分をキャンバスと言い、画像などを置いていきます。
白い部分が表示エリアになり、端末で見える部分になります。
全体の見た目（画像配置時）
ちなみに実際に画像を配置した時はこのように上下左右にパーツが広がっていると思います。 この場合は横フリックでの遷移を表現したいので、画像を横に並べてあります。
画像配置は、表示エリア（真ん中の白い部分）に画像を動かして、遷移やアクションなどの連続性を表現するイメージ です。
なので、構造を意識した画像配置が大事です！
レイヤー
赤と青のレイヤーを用意し、グレーのレイヤーを親としてグループ化してあります。
解説
・キャンバスに置いた画像などのレイヤーが並びます。
・グループは子にしたいレイヤーを親にしたいレイヤーにドラック＆ドロップします。
・右上の＋ボタンで四角形が作れます。そして四角形をものすごくよく使います。
・レイヤーが動かしにくく、勝手にグループになったりします。下から上に動かすと割とマシです。
・レイヤー横のボタンはキャンバス上での表示/非表示を切り替えます。なので、端末では上にあるレイヤーが見えています。
プロパティ
解説
・Positionは表示エリアの左上を座標の（0,0）としています。グループの場合は親レイヤーの左上が（0,0）になります。
・pixateのキャンパスは拡大できないので、画像の位置をあわせるときはプロパティで合わせたほうが早くて正確だと思います。
・opacity（不透明度）を0にすると端末でも表示されなくなります。
・Appearanceにある「色をつけない」をものすごくよく使います。四角形と組み合わせて空の領域を作れます。
四角形の色は斜線アイコンで消す。
アクション
・パーツの整列などが行えます。レイヤーを選択し、行いたいアクションを選択し、右向きの三角ボタンを押すと実行されます。
・タブの遷移やスクロールなど定番のテンプレートも作れるのですが、pixateを理解していないと変更しづらかったり、自分の作りたい構造と違う形になっていることも多いので、慣れてきたら見てみてください。
インタラクション / アニメーション
2つはタブで切り替えられます。
インタラクションの解説
・レイヤーに持たせたい要素をドラッグ＆ドロップすると、そのレイヤーがそのパネルの機能を持ちます。
例えばTapをドラッグ&ドロップしたレイヤーはタップできるようになります。
・プロパティに選択しているレイヤーが持っているインタラクションが表示されます。
・スクロールは少し特殊で悩む人が多いと思うので、第2回で説明します。
アニメーションの解説
・どんな変化をさせたいかをレイヤーにドラッグ＆ドロップします。
プロパティパネルの下のANIMATIONSという部分にドラッグ＆ドロップしてもよいです。
アニメーション条件設定
UIの右下部分に、選択したレイヤーに付いているアニメーションが表示されます。
・条件の指定をして、どんなインタラクションがされたらどんなアニメーションを起こすのかを設定してきます。
ここで大事なことは
どのレイヤーがどんな動きをしたら、どのレイヤーがどのようにに変化するのかを分解して考える
ということです。
どんな良いアニメーションもシンプルな動きの組み合わせでしかないはずです。
そして、重要になってくるのがアニメーションさせる際の条件の設定になります。
条件の設定がpixateの1つの壁だと思っていて、その部分の理解が深まると、できることの幅がグッと広がると思います。
アニメーションの条件の付け方については、次回紹介したいと思います。
制作の流れとしては、
1 , 画像を配置し、配置の構造とレイヤーの上下関係や親子関係を整理する
2 , 何をしたら、どう動くのかを考え、レイヤーにインタラクションやアニメーションをつけて、条件を設定していく
これをモジュール単位などで繰り返し行なっていきます。
アセット部分のUI説明
アセットページ
赤い丸が付いている部分のタブをクリックするか、画像を直接pixate上にドラック＆ドロップした場合にこの画面になります。
画像の追加はASSETSの＋ボタンからでも可能です。
そしてアセット画面では、画像パーツをキャンバスに配置することができます。画像をpixateに追加するだけでは、キャンバス上には置かれていません。
リストになっている画像をドラック＆ドロップして配置しましょう。
ヒント！
・あまり正確に配置できないと思うので、プロパティで数字を打ちましょう。
・アセットリストは名前順に並ぶので、ヘッダーやフッターなど構造ごとにわかり易い名前にしましょう。
今回はここまで
今回はpixateの表面的な部分や考え方を紹介しました。文字で説明すると、ちょっと複雑に感じるのですが、触りながら読むとすぐ分かると思います。次回は実際にモック制作を行う際に、おそらくつまづくであろう部分の解説と私がよく使う技など、実践的な内容を紹介しようと思っております。
また、「pixate」以外にも「principle」や「flinto」などの細かいアクションが設定できるツールも登場していますので、興味のある方は是非触ってみてください。
最後まで読んでいただきありがとうございます！