共有作業のちょっとしたコツを教えるよ

14001 ワード
アニメーション Mac photoshop XD Mac テキストリンク

人と共有するのって難しい

ファイル渡す、確認する、伝える…

ディレクター、デザイナー、エンジニア
育ってきた環境が違うから
すれ違いはしょうがない

「自分の中では分かっているのにどう説明したらいいの」
「○○を△△でください」(えーやり直し…？)

みたいな面倒くせーを無くしてサクサク進めるためのtips

まぁぐぐったら出てくる些細なことばっかりだよ！ごめんね！

Macでzipにパスワード

zipをターミナルコマンドで作成

パスワード付きzip
$ zip -e -r ファイルに付ける名前.zip 対象のフォルダorファイル名
$ enter password?: パスワード入力

すでにあるZipファイルにパスワードをかけるコマンドはあるが…

zipにパスワードをかける
$ zipcloak -r "対象のzipファイル"
$ enter password:

Finderから作成したzipにパスワードをかけると
文字コードの違いで解凍できなくなる
「Mac zip パスワード」で出てくるんだけどね…

不可視ファイルを表示

触らないに越したことはない非表示ファイル

ショートカット
 [command] + [shift] + [.(ドット)]

ターミナルで設定するとこう

$ defaults write com.apple.finder AppleShowAllFiles TRUE
$ killall Finder

brewのインストール

Node.js使うときに入れてるので無意識？
AppStoreに無いもの使うとかバージョン切り替えるとか…ちょいちょい使う

brewインストール
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

最近Xcodeは一旦消してからアップデートする

GoogleDrive

ファイルを選んで…
 [shift] + [ z ]

コピーと違って「複数のフォルダに所属させる」だけなのでファイル増えない
シンボリックリンク的な使い方ができる
作業フォルダからコピーとか事故のもとでしかない

Photoshop

画像の書き出し

レイヤー名でアセット書き出しをコントロールする
毎回書き出しとかしない

png32(透過あり)で書き出し
***.png
png-24(透過なし)で書き出し
****.png24
png32(透過あり)とjpgで書き出し
***.png,****.jpg

複数の形式は,(カンマ)で区切ればOK

アイキャッチとコンテンツ用の出し分けとか
Google先生に怒られた時に使う低画質

画質は拡張子の後ろに1〜10(10%〜100%)の整数つけて調整

画質40%
***.jpg4
高画質とうんこ画質
***.jpg10,***.jpg4

大きさの指定はファイル名の前に%で指定

2xで書き出す
200%***.png

フォルダ分けして書き出す

フォルダ分けして書き出し
[フォルダ名]/***.png

全ての画像に同じ設定を使う場合は空レイヤーに設定する
※Defaultの設定は必須

等倍、2倍、3倍で書き出す
default @1x/, 200% @2x/ @2x
default [等倍のフォルダ名], 200% [2倍フォルダ名]/[2倍のサフィックス]

余白込みの書き出しはベクトルマスクを追加する

よく使うショートカット

ｃとかv以外も便利だけど意外と使われてない…

デフォルトのもの
レベル補正  [command] + [ l ]
トーン補正  [command] + [ m ]
クリッピングマスク [option] + [command] + [ g ]
カーニング [shift] + [ → ]
グリッド表示 [command] + [ @ ]
ガイド表示 [command] + [ : ]
ツール [ u ]
ツール切り替え [shift] + [ u ]
選択ツール [ m ]
選択解除 [command] + [ d ]
個別設定してるもの
レイヤースタイルのコピー    [control] + [command] + [ c ]
レイヤースタイルのペースト  [control] + [command] + [ v ]

スタイルコピーは地味に便利です

XDの共有機能

アセットの共有

リアルタイムで共同編集できるようになったけど事故は起きます
マスターファイルのアセット作っていくときに楽になるショートカット

アセット作成ショートカット
[shift] + [command] + [ t ] テキストスタイルの作成
[shift] + [command] + [ k ] コンポーネントの作成
[shift] + [command] + [ c ] カラースタイルの作成

カラーは追加時にパレットにも追加すると便利

誰に見せるかで共有モードを選ぶ

デザインレビュー プレゼンテーション 開発 ユーザーテスト
対象 ディレクター・企画 社外・利権者 エンジニア テストユーザー
ヒント表示 ✅ ✅ ✅ ❌
コメント ✅ ❌ ✅ ❌
ナビゲーション制御 ✅ ✅ ✅ ❌
全画面表示 ❌ ❌ ✅ ✅
デザインスペックの表示 ❌ ❌ ✅ ❌

.psや.aiのデザインデータはXDで読み込むだけでいい

動きの伝え

見て自然に入ってくる動きの法則をまず守ってみる
無意識に感じる向きや動きを基本に

動く方向

・画面左(下手)ネガティブ
・画面右(上手)ポジティブ
・時計回り

before → Afterと視線誘導するとするっと伝わる
左から右に向かって行くと正の方向だと認識する
メリーゴーランドはアメリカ製以外は時計回り
時計回りは手前だけを見ると右から左に見える

マリオが左から右に走るわけ

自然なイージングをかける

動き 始め 終わり
落とす ease-in(衝突) (反跳)ease-out
爆発 ease-out linear
消える ease-in linear
注意喚起 ease-in(表示) ease-out(消え)
おだやか ease-in-out (少し止める)

なんだか違和感と思ったらこんな感じで

視線の動きに逆らわない

画面静止時
左上から右上、左下から右下とZの形で動く
画像とテキストの並べ方で同じ文章でも印象が変わる


スクロール中
左上に視線が集中する
優先度の高い内容は一文にしすぎず短く

並んだボタン
左をみてから右の内容を比較する
肯定、誘導したいアクションは右に配置する方がCTR高い

まとめ

細々したことだけど少しでもストレスフリーで仕事しよう
サーバーエンジニア出身のデザイナー目線でお送りしました