2016/10/21

@KAZUMA87

Kazuma Sekiguchi

関口和真Comcent,Inc CTOシステム開発、WebDesign、講師Cordovaを利用したアプリ開発やECサイト開発がメイン

のはずが、最近は企画書ばっかり書いてます

1 Behance？

2 Behanceを使ってみる

3 XdからBehanceにアップ

4 AdobePortfolioとの連携

1Behance

•Adobeが提供しているデザイナー間相互褒め称えましょう

的SNSサイト

•デザイナー同士が出会う素敵機能は今のところ無い

作成したデザイン（写真、イラスト、3DCG、ポスター、動画など）をアップする

他の人が見て、「良いね」的なことをしてくれる

モチベーションアップ！

•比較的単純な操作で作品を公開できる

•映像などもアップ可能

•デザインに特化しているため、デザイン系のタグをつけることが

必須

• 検索がしやすい

•AdobeCC所有者なら無料で使える

•Adobe製品で作っているとちゃんとAdobeの

製品アイコンが表示される

•ある程度日本語になっている

•だいたいは英語

•でも多分分かる

•BehanceのAndroid版Appの製作者が未だにBehance

• Adobeで検索しても出てこないよー

2Behance使う

•AdobeIDでログイン済みのまま、Behanceへ

•ログインをクリックすれば作成画面が表示される

•プロファイルを設定

•名前とか一部だけ必須

•カスタムで追加可能なため、アピールしたいポイントが多ければ、

カスタムで追加して追記

• TwitterやFacebookとのリンクも可能

•作品は全てプロジェクト単位で管理される

•新しいファイルをアップするとプロジェクトが作成される

•「ファイルのアップロード」からアップロードができるので、

保存してあるファイルをドラッグアンドドロップでアップ

•CreativeCloud、Lightroom上にアップされている

ファイルをそのままアップすることも可能

•ほとんどのファイル形式に対応しているが、なんと

PSDファイルは弾かれるので注意

• CreativeCloud上のPSDファイルはそのままアップロード

できる

•もちろん複数ファイルの同時アップロードも可能

•URLをはき出すサービスの埋め込み

• GoogleMapとかYouTubeなどのURLはき出してくれる系は

「メディアを埋め込み」で埋め込みができる

• iframeもここで埋め込み可能

• AdobeXDも「オンラインで共有」→「新規リンク」をクリック

して、「埋め込み」を選択しコピーしたものをここで設定すれば

無事に表示することが可能

• きちんとプロトタイプで設定した動きも反映される

•複数の画像をアップロードした場合、画像の順番を

入れ替えたり簡単なテキストを入力したり、キャプション

を追加可能

•「デザインを編集」から「スペースサイズ」、「区切り線

の色や種類」、「背景色」や「背景画像の設定」が可能

•文字も色、フォント、サイズ、位置など細かく指定可能

•プレビューしておく

•Continueでプロジェクトの登録画面に移行

•プロジェクトカバー画像を作成

•勝手に一番最初の画像が選ばれるため、変更したい場合は下から

選ぶか、別途アップロードする

•埋め込みしかない場合は、アップロードが必要

•Crop&Continueで決定

•「プロジェクトの定義」「キーワード」「作品としての分

類（3つまで）」「コメントを許可するかどうか」

•次の画面で

•「何を使ったか」「何の目的か」などを入力

•途中まで入れると推定キーワードを出してくれるので楽

•ライセンスを設定

• CCで設定するか、設定しないか

• CC：Attribution• 営利目的での再利用、改変、別作品のベースとして利用を許可

• ライセンスの表示、適切なクレジット表示が必要

• CC：Attribution Share Alike• 営利目的での再利用、改変、別作品のベースとして利用を許可

• ライセンスの表示、適切なクレジット表示が必要

• ライセンスの継承を行うこと

• CC：Attribution Non-Derivative• 営利目的を含め資料を複製したり、再配布を許可

• ライセンスの表示、適切なクレジット表示が必要

• 改変禁止

• CC：Attribution NonCommercial• 非営利に限り再利用、改変、別作品のベースとして利用を許可

• ライセンスの表示、適切なクレジット表示が必要

• CC：Attribution NonCommercial-ShareAlike• 非営利に限り再利用、改変、別作品のベースとして利用を許可

• ライセンスの表示、適切なクレジット表示が必要

• ライセンスの継承を行うこと

• CC：Attribution NonCommercial-NoDerivs• 非営利目的に限り資料を複製したり、再配布を許可

• ライセンスの表示、適切なクレジット表示が必要

• 改変禁止

•直接アップロードする機能は無いため、Appboxの仕様に従う• 概要説明を記述

• プロトタイプを埋め込み（iframe）

• ビデオを埋め込み（XDで録画したもの）

• キャプチャ画像などをアップロード

•プロジェクトのタグ：AppBoxAwards2016

•使用ツール：Adobe Experience Design（その他に使用したツールも設定する）

•クレジット：チームで参加する場合は、全メンバーのユーザーIDを追加してください

3DEMO

4AdobePortfolio

•BehanceにアップロードするとAdobe Portfolioと連携

が可能

• BehanceのプロジェクトをそのままPortfolioで公開可能

• Portfolioの方が細かい設定が可能

• 最初に大まかなレイアウトを設定するためのテーマを選択

• 写真公開サイトとかなら充分ではないか？と思えるほど微調整が可能

• 独自ドメインの設定も可能

5まとめ

•Behanceは非常に簡単に利用することが可能

•自分の作品を公開したい場合は有用では？

•全てが公開コンテンツになるため、クライアントワークに

は向いていない

•Appbox Award2016、XDで応募しましょう！

Thank youAppbox Awardアイディアマンは是非！