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

#人と共有するのって難しい
ファイル渡す、確認する、伝える…

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

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

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

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

#Macでzipにパスワード
###zipをターミナルコマンドで作成

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

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

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

Finderから作成したzipにパスワードをかけると
**文字コードの違いで解凍できなくなる**
![oh](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528842/40992836-a0a3-9df4-ea1a-4c4365a35631.png) 「Mac zip パスワード」で出てくるんだけどね…


###不可視ファイルを表示
触らないに越したことはない非表示ファイル

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


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

```bash:
$ defaults write com.apple.finder AppleShowAllFiles TRUE
$ killall Finder
```

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

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

![hatena](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528842/56a4fc56-edf3-561d-9607-b396a66b95b9.png)最近Xcodeは一旦消してからアップデートする

##GoogleDrive
```bash:ファイルを選んで…
 [shift] + [ z ]
```
コピーと違って「複数のフォルダに所属させる」だけなのでファイル増えない
シンボリックリンク的な使い方ができる
![normal](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528842/645f468c-f564-24ef-7bf2-72f542200486.png) 作業フォルダからコピーとか事故のもとでしかない

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

```bash:png32(透過あり)で書き出し
***.png
```

```bash:png-24(透過なし)で書き出し
****.png24
```

```bash:png32(透過あり)とjpgで書き出し
***.png,****.jpg
```

![ok](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528842/fa8bc8af-3fc7-c54e-1785-15521c98d2f4.png)複数の形式は,(カンマ)で区切ればOK


アイキャッチとコンテンツ用の出し分けとか
[Google先生に怒られた時](https://developers.google.com/speed/pagespeed/insights/)に使う低画質

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

```bash:画質40%
***.jpg4
```

```bash:高画質とうんこ画質
***.jpg10,***.jpg4
```
大きさの指定はファイル名の前に%で指定

```bash:2xで書き出す
200%***.png
```
フォルダ分けして書き出す

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

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

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

![normal](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528842/645f468c-f564-24ef-7bf2-72f542200486.png) 余白込みの書き出しはベクトルマスクを追加する

###よく使うショートカット
ｃとかv以外も便利だけど意外と使われてない…

```Bash:デフォルトのもの
レベル補正  [command] + [ l ]
トーン補正  [command] + [ m ]
クリッピングマスク [option] + [command] + [ g ]
カーニング [shift] + [ → ]
グリッド表示 [command] + [ @ ]
ガイド表示 [command] + [ : ]
ツール [ u ]
ツール切り替え [shift] + [ u ]
選択ツール [ m ]
選択解除 [command] + [ d ]
```

```bash:個別設定してるもの
レイヤースタイルのコピー    [control] + [command] + [ c ]
レイヤースタイルのペースト  [control] + [command] + [ v ]
```

![normal](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528842/645f468c-f564-24ef-7bf2-72f542200486.png)スタイルコピーは地味に便利です


#XDの共有機能
###アセットの共有
[リアルタイムで共同編集できる](https://blogs.adobe.com/japan/cc-web-xd-november-2019-update-coediting-more/)ようになったけど事故は起きます
マスターファイルのアセット作っていくときに楽になるショートカット

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

![heart](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528842/f5703130-d558-317d-f6e9-576d8afc9b59.png) カラーは追加時にパレットにも追加すると便利


###誰に見せるかで共有モードを選ぶ
|  | デザインレビュー | プレゼンテーション | 開発 | ユーザーテスト |
|:-------|:------:|:------:|:------:|:------:|
| 対象 | ディレクター・企画 | 社外・利権者 | エンジニア | テストユーザー |
| ヒント表示 | ✅ | ✅ | ✅ | ❌ |
| コメント | ✅ | ❌ | ✅ | ❌ |
| ナビゲーション制御 | ✅ | ✅ | ✅ | ❌ |
| 全画面表示 | ❌ | ❌ | ✅ | ✅ |
| デザインスペックの表示 | ❌ | ❌ | ✅ | ❌ |

![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528842/fa8bc8af-3fc7-c54e-1785-15521c98d2f4.png).psや.aiのデザインデータはXDで読み込むだけでいい




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

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

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

![tab.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528842/645f468c-f564-24ef-7bf2-72f542200486.png)[マリオが左から右に走るわけ]
(https://www.lancaster.ac.uk/news/articles/2015/why-super-mario-runs-from-left-to-right/)


###自然なイージングをかける
| 動き | 始め | 終わり |
|:-- |:---|:---|
| 落とす | ease-in(衝突)  | (反跳)ease-out |
| 爆発 | ease-out  | linear |
| 消える | ease-in | linear |
| 注意喚起 | ease-in(表示) | ease-out(消え) |
| おだやか | ease-in-out | (少し止める) |
なんだか違和感と思ったらこんな感じで

###視線の動きに逆らわない
**画面静止時**
左上から右上、左下から右下とZの形で動く
画像とテキストの並べ方で同じ文章でも印象が変わる
![image_left.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528842/bb409bbf-f617-0e56-cffa-7a4691c512c0.png)
![image_right.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528842/6613f01a-ed17-bb92-fd05-94c135baf3e3.png)
**スクロール中**
左上に視線が集中する
優先度の高い内容は一文にしすぎず短く

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

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