Help us understand the problem. What is going on with this article?

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

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

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

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

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

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

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

Macでzipにパスワード

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

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

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

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

Finderから作成したzipにパスワードをかけると
文字コードの違いで解凍できなくなる
oh 「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)"

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

GoogleDrive

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

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

Photoshop

画像の書き出し

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

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

ok複数の形式は,(カンマ)で区切れば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倍のサフィックス]

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

よく使うショートカット

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

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

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

XDの共有機能

アセットの共有

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

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

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

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

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

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

動きの伝え

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

動く方向

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

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

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

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

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

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

視線の動きに逆らわない

画面静止時
左上から右上、左下から右下とZの形で動く
画像とテキストの並べ方で同じ文章でも印象が変わる
image_left.png
image_right.png
スクロール中
左上に視線が集中する
優先度の高い内容は一文にしすぎず短く

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

まとめ

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした