Adobe experience designのプロトタイプをbehanceへ
•
0 likes•877 views
10月21日開催の「ほぼ毎月AdobeXd勉強会 Meeting #02」で発表したAdobe Experience DesignのプロトタイプをBehanceで公開する方法について。 Behanceのライセンスについても説明してます。
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Adobe experience designのプロトタイプをbehanceへ
Similar to Adobe experience designのプロトタイプをbehanceへ (20)
Adobe experience designのプロトタイプをbehanceへ
- 2. 関 口 和 真 Comcent,Inc CTO システム開発、WebDesign、講師 Cordovaを利用したアプリ開発や ECサイト開発がメイン のはずが、最近は企画書ばっかり書いてます
- 3. 1 Behance？ 2 Behanceを使ってみる 3 XdからBehanceにアップ 4 AdobePortfolioとの連携
- 4. 1Behance
- 6. • 比較的単純な操作で作品を公開できる • 映像などもアップ可能 • デザインに特化しているため、デザイン系のタグをつけることが 必須 • 検索がしやすい • AdobeCC所有者なら無料で使える • Adobe製品で作っているとちゃんとAdobeの 製品アイコンが表示される
- 7. • ある程度日本語になっている • だいたいは英語 • でも多分分かる • BehanceのAndroid版Appの製作者が未だにBehance • Adobeで検索しても出てこないよー
- 8. 2Behance使う
- 9. • AdobeIDでログイン済みのまま、Behanceへ • ログインをクリックすれば作成画面が表示される • プロファイルを設定 • 名前とか一部だけ必須 • カスタムで追加可能なため、アピールしたいポイントが多ければ、 カスタムで追加して追記 • TwitterやFacebookとのリンクも可能
- 10. • 作品は全てプロジェクト単位で管理される • 新しいファイルをアップするとプロジェクトが作成される • 「ファイルのアップロード」からアップロードができるので、 保存してあるファイルをドラッグアンドドロップでアップ
- 11. • CreativeCloud、Lightroom上にアップされている ファイルをそのままアップすることも可能 • ほとんどのファイル形式に対応しているが、なんと PSDファイルは弾かれるので注意 • CreativeCloud上のPSDファイルはそのままアップロード できる • もちろん複数ファイルの同時アップロードも可能
- 12. • URLをはき出すサービスの埋め込み • GoogleMapとかYouTubeなどのURLはき出してくれる系は 「メディアを埋め込み」で埋め込みができる • iframeもここで埋め込み可能 • AdobeXDも「オンラインで共有」→「新規リンク」をクリック して、「埋め込み」を選択しコピーしたものをここで設定すれば 無事に表示することが可能 • きちんとプロトタイプで設定した動きも反映される
- 13. • 複数の画像をアップロードした場合、画像の順番を 入れ替えたり簡単なテキストを入力したり、キャプション を追加可能 • 「デザインを編集」から「スペースサイズ」、「区切り線 の色や種類」、「背景色」や「背景画像の設定」が可能 • 文字も色、フォント、サイズ、位置など細かく指定可能
- 14. • プレビューしておく • Continueでプロジェクトの登録画面に移行 • プロジェクトカバー画像を作成 • 勝手に一番最初の画像が選ばれるため、変更したい場合は下から 選ぶか、別途アップロードする • 埋め込みしかない場合は、アップロードが必要 • Crop&Continueで決定
- 15. • 「プロジェクトの定義」「キーワード」「作品としての分 類（3つまで）」「コメントを許可するかどうか」 • 次の画面で • 「何を使ったか」「何の目的か」などを入力 • 途中まで入れると推定キーワードを出してくれるので楽 • ライセンスを設定 • CCで設定するか、設定しないか
- 16. • CC：Attribution • 営利目的での再利用、改変、別作品のベースとして利用を許可 • ライセンスの表示、適切なクレジット表示が必要 • CC：Attribution Share Alike • 営利目的での再利用、改変、別作品のベースとして利用を許可 • ライセンスの表示、適切なクレジット表示が必要 • ライセンスの継承を行うこと • CC：Attribution Non-Derivative • 営利目的を含め資料を複製したり、再配布を許可 • ライセンスの表示、適切なクレジット表示が必要 • 改変禁止
- 17. • CC：Attribution NonCommercial • 非営利に限り再利用、改変、別作品のベースとして利用を許可 • ライセンスの表示、適切なクレジット表示が必要 • CC：Attribution NonCommercial-ShareAlike • 非営利に限り再利用、改変、別作品のベースとして利用を許可 • ライセンスの表示、適切なクレジット表示が必要 • ライセンスの継承を行うこと • CC：Attribution NonCommercial-NoDerivs • 非営利目的に限り資料を複製したり、再配布を許可 • ライセンスの表示、適切なクレジット表示が必要 • 改変禁止
- 18. • 直接アップロードする機能は無いため、Appboxの仕様に従う • 概要説明を記述 • プロトタイプを埋め込み（iframe） • ビデオを埋め込み（XDで録画したもの） • キャプチャ画像などをアップロード • プロジェクトのタグ：AppBoxAwards2016 • 使用ツール：Adobe Experience Design（その他に使用した ツールも設定する） • クレジット：チームで参加する場合は、全メンバーのユーザーIDを 追加してください
- 19. 3DEMO
- 20. 4AdobePortfolio
- 21. • BehanceにアップロードするとAdobe Portfolioと連携 が可能 • BehanceのプロジェクトをそのままPortfolioで公開可能 • Portfolioの方が細かい設定が可能 • 最初に大まかなレイアウトを設定するためのテーマを選択 • 写真公開サイトとかなら充分ではないか？と思えるほど微調整が可能 • 独自ドメインの設定も可能
- 22. 5まとめ
- 23. • Behanceは非常に簡単に利用することが可能 • 自分の作品を公開したい場合は有用では？ • 全てが公開コンテンツになるため、クライアントワークに は向いていない • Appbox Award2016、XDで応募しましょう！