Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Dive into Origami Studio
@eegozilla
12.21.2016
at html5j Web Platform
Who are you ?
@eegozilla
某広告会社系のWEB制作会社
プロデューサーとかディレクターとかいうなのパシリ、、、
html5j Webプラットフォーム部 スタッフ
html5j ロボット部 部長
html5j運営スタッフ
...
Made in Origami
新しいインターフェースを設計するための
プロトタイピングツール。
Facebookのデザイナーたちが作成し、使用している。
無料で利用することができる。
http://origami.design/
Copyri...
Design with Layers
レイヤーを使うことでプロトタイプがカンタンにつくれる。
Sketchからレイヤーと取り出すことで、マスク、パーティクル、ライブカメラなどを動かすことができる。
Copyright @ html5j Web ...
Reuse Components
プレビルドされた素材やiOSのコンポーネントを使うことで作業時間が短縮。
チームで使うライブラリを作り、一緒により早くデザイン作業ができる。
Copyright @ html5j Web Platform or...
Build Interactions
すばやく検索し、パッチにより視覚的にみせる。
クリエイティブティに限りはなく、フロー作成、新しいインタラクションをつくることができる。
Copyright @ html5j Web Platform org...
Preview It Live
ビューアを作成するとすぐに変更が表示に反映される。
プロトタイプをテストし、即座に調整することが可能。
Copyright @ html5j Web Platform organization. All righ...
Made in Origami
実際にFacebook, Messenger , InstagramはOrigami Studioによって設計されており
様々なサンプルが配布されている
Copyright @ html5j Web Platfo...
Made in Origami
Facebook New Stories
ニュースフィードが一定の距離だけスクロールされたと
きに表示されるようにする。
Copyright @ html5j Web Platform organization....
Made in Origami
Facebook Popular Events
シンプルな水平スクロールカルーセルを作成。
Copyright @ html5j Web Platform organization. All right rese...
Made in Origami
Instagram Adjust
ドラッグしてInstagram straighten toolを制御。
Copyright @ html5j Web Platform organization. All rig...
Made in Origami
Messenger Photo View
吹き出しとライトボックスの切り替え間で写真を
アニメーション化。
Copyright @ html5j Web Platform organization. All ri...
Live on Device
Origami Liveでプロトタイプをプレビュー
AndroidとiOSに対応
プロトタイプとやりとりするデバイスを接続し、リア
ルタイムで変更を確認。
プロトタイプでは、デバイスのカメラ、マイク、加速
度計、お...
Perfect Companion to Sketch
⌘
command
C ⌘
command
V
Sketchからコピーし、Origami Studioにネイティブレイヤーを貼り付け、
手戻りなく振る舞いやアニメーションのレイヤプロパティ...
Present & Share
Record Videos
Origami Studioで直接プロトタイプのレコー
ディングをキャプチャしてエクスポート。
Share Prototypes
Origami StudioかOrigami Live...
Community
https://www.facebook.com/groups/origami.community/
Copyright @ html5j Web Platform organization. All right reser...
Summary
ツール選択の条件としては「遷移・挙動をイメージしやすくできる」「共有できる」。
大きな学習コストを要しないこと(UIの簡単さとドキュメントの充実も重要)
デザインツールとの連携ができると便利
UIプロトタイピングツールはプロジェ...
Upcoming SlideShare
Loading in …5
×

Dive into Origami Studio

655 views

Published on

2016/12/21 html5j Webプラットフォーム部 第15回勉強会資料。

Published in: Design
  • Be the first to comment

Dive into Origami Studio

  1. 1. Dive into Origami Studio @eegozilla 12.21.2016 at html5j Web Platform
  2. 2. Who are you ? @eegozilla 某広告会社系のWEB制作会社 プロデューサーとかディレクターとかいうなのパシリ、、、 html5j Webプラットフォーム部 スタッフ html5j ロボット部 部長 html5j運営スタッフ 日本アンドロイドの会 運営委員 Leap Motion Developers JP 共同運営者 Copyright @ html5j Web Platform organization. All right reserved.
  3. 3. Made in Origami 新しいインターフェースを設計するための プロトタイピングツール。 Facebookのデザイナーたちが作成し、使用している。 無料で利用することができる。 http://origami.design/ Copyright @ html5j Web Platform organization. All right reserved.
  4. 4. Design with Layers レイヤーを使うことでプロトタイプがカンタンにつくれる。 Sketchからレイヤーと取り出すことで、マスク、パーティクル、ライブカメラなどを動かすことができる。 Copyright @ html5j Web Platform organization. All right reserved.
  5. 5. Reuse Components プレビルドされた素材やiOSのコンポーネントを使うことで作業時間が短縮。 チームで使うライブラリを作り、一緒により早くデザイン作業ができる。 Copyright @ html5j Web Platform organization. All right reserved.
  6. 6. Build Interactions すばやく検索し、パッチにより視覚的にみせる。 クリエイティブティに限りはなく、フロー作成、新しいインタラクションをつくることができる。 Copyright @ html5j Web Platform organization. All right reserved.
  7. 7. Preview It Live ビューアを作成するとすぐに変更が表示に反映される。 プロトタイプをテストし、即座に調整することが可能。 Copyright @ html5j Web Platform organization. All right reserved.
  8. 8. Made in Origami 実際にFacebook, Messenger , InstagramはOrigami Studioによって設計されており 様々なサンプルが配布されている Copyright @ html5j Web Platform organization. All right reserved.
  9. 9. Made in Origami Facebook New Stories ニュースフィードが一定の距離だけスクロールされたと きに表示されるようにする。 Copyright @ html5j Web Platform organization. All right reserved.
  10. 10. Made in Origami Facebook Popular Events シンプルな水平スクロールカルーセルを作成。 Copyright @ html5j Web Platform organization. All right reserved.
  11. 11. Made in Origami Instagram Adjust ドラッグしてInstagram straighten toolを制御。 Copyright @ html5j Web Platform organization. All right reserved.
  12. 12. Made in Origami Messenger Photo View 吹き出しとライトボックスの切り替え間で写真を アニメーション化。 Copyright @ html5j Web Platform organization. All right reserved.
  13. 13. Live on Device Origami Liveでプロトタイプをプレビュー AndroidとiOSに対応 プロトタイプとやりとりするデバイスを接続し、リア ルタイムで変更を確認。 プロトタイプでは、デバイスのカメラ、マイク、加速 度計、およびハプティック(振動)を使用することが できる。 プロトタイプをエクスポートし、外に持ちだすことが 可能。直接デバイスにプロトタイプを送信。 Copyright @ html5j Web Platform organization. All right reserved.
  14. 14. Perfect Companion to Sketch ⌘ command C ⌘ command V Sketchからコピーし、Origami Studioにネイティブレイヤーを貼り付け、 手戻りなく振る舞いやアニメーションのレイヤプロパティを素早く調整したり追加することが可能。 Copyright @ html5j Web Platform organization. All right reserved.
  15. 15. Present & Share Record Videos Origami Studioで直接プロトタイプのレコー ディングをキャプチャしてエクスポート。 Share Prototypes Origami StudioかOrigami Liveを使ったデ バイスでデザインをほかの人に共有でき る プレゼンテーションでは、Origami Liveでプロトタイプを制御しながら、 さまざまなデバイスでフルスクリーンでデザインを見せることが可能。 Copyright @ html5j Web Platform organization. All right reserved.
  16. 16. Community https://www.facebook.com/groups/origami.community/ Copyright @ html5j Web Platform organization. All right reserved.
  17. 17. Summary ツール選択の条件としては「遷移・挙動をイメージしやすくできる」「共有できる」。 大きな学習コストを要しないこと(UIの簡単さとドキュメントの充実も重要) デザインツールとの連携ができると便利 UIプロトタイピングツールはプロジェクトメンバー間でのコンセンサスを取るためのツール 提供されているサンプルを触ることで覚えていくことが可能。とはいえいきなり使いこなすのは不可能。 他のツールが画面遷移に対して、レイヤー思考なので、その辺に違和感あり。でもOrigami Liveは便利。 Sketchのコピー&ペーストは便利。 単なる画面遷移でなくカメラ、マイク、ハプティックまでプロトタイピングできる Copyright @ html5j Web Platform organization. All right reserved.

×