人と共有するのって難しい
ファイル渡す、確認する、伝える…
ディレクター、デザイナー、エンジニア
育ってきた環境が違うから
すれ違いはしょうがない
「自分の中では分かっているのにどう説明したらいいの」
「○○を△△でください」(えーやり直し…？)
みたいな面倒くせーを無くしてサクサク進めるためのtips
まぁぐぐったら出てくる些細なことばっかりだよ！ごめんね！
Macでzipにパスワード
zipをターミナルコマンドで作成
$ zip -e -r ファイルに付ける名前.zip 対象のフォルダorファイル名
$ enter password?: パスワード入力
すでにある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に無いもの使うとかバージョン切り替えるとか…ちょいちょい使う
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
最近Xcodeは一旦消してからアップデートする
GoogleDrive
[shift] + [ z ]
コピーと違って「複数のフォルダに所属させる」だけなのでファイル増えない
シンボリックリンク的な使い方ができる
作業フォルダからコピーとか事故のもとでしかない
Photoshop
画像の書き出し
レイヤー名でアセット書き出しをコントロールする
毎回書き出しとかしない
***.png
****.png24
***.png,****.jpg
複数の形式は,(カンマ)で区切ればOK
アイキャッチとコンテンツ用の出し分けとか
Google先生に怒られた時に使う低画質
画質は拡張子の後ろに1〜10(10%〜100%)の整数つけて調整
***.jpg4
***.jpg10,***.jpg4
大きさの指定はファイル名の前に%で指定
200%***.png
フォルダ分けして書き出す
[フォルダ名]/***.png
全ての画像に同じ設定を使う場合は空レイヤーに設定する
※Defaultの設定は必須
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高い
まとめ
細々したことだけど少しでもストレスフリーで仕事しよう
サーバーエンジニア出身のデザイナー目線でお送りしました