Photoshopでレスポンシブデザインなウェブサイトのデザインカンプを制作することがあります。その時に実践している工夫を紹介します。
モバイル表示のデザインデータ作成
アートボードを等倍にする
Photoshopのモバイルプリセットは、iPhone6用が750×1334px…すなわち２倍のサイズになっていますが、あえてそれを使わず、375×667pxなど（等倍）で作成することが多いです。
画像アセットで一括書き出し
画像の書き出しは、 ファイル > 生成 > 画像アセット を使います。以前「空レイヤー名にルールを書くだけで Photoshop の自動アセットが劇的に楽になった」の記事で紹介した通り、 default 100% + 200% @2x という名称の空レイヤーを設定しておくと @2x 画像の書き出しが自動化されて楽です。
ただし、ラスタライズされたレイヤーは２倍で書き出しても粗いままです。そこでスマートオブジェクトを活用します。※「リンクを配置」でも同様です
２倍書き出しに対応したスマートオブジェクトの作成
仕組みは単純です。２倍サイズのレイヤーをスマートオブジェクト化し、50%に縮小して配置しておくだけです。
具体例を紹介します。わかりやすいように、とりあえず四角シェイプを配置します。
これを、200%に拡大します。もちろん最初からこのサイズのシェイプを配置してもOKです。
これをスマートオブジェクト化します。
そして50%サイズに縮小します。
スマートオブジェクトの編集モードへ。
表示したい要素（画像、テキストなど何でも）を配置・保存します。
元のファイルに戻ります。
最後に書き出したいファイル名をレイヤー名にして完了です。
メリット
- ２倍でデータを作成したときにうっかりありがちな、文字が小さすぎる問題（16pxの文字を配置してしまうなど）を回避できる
- PC/モバイルとでパーツを使いまわせるためデータの見通しが良くなり、コーディング工程への引き継ぎが楽
- モバイル→PC、逆にPC→モバイルへのコピペである程度済むのでデザイン工程も楽
- データ自体が軽い
デメリット
- 書き出したい要素のスマートオブジェクト化or外部リンク化の作業が増える
例えばランディングページやリッチなコンテンツの多いデザイン（ゲームアプリとか？）、PC向けとモバイル向けとで完全に切り替える場合などでは、素直に２倍・３倍のアートボードで作成した方が早そうです。
ちなみに、私は次の操作をアクション＆ショートカットキー登録して早く作業できるようにしています。
- 選択レイヤーの200%拡大
- 選択レイヤーのスマートオブジェクト化
- 選択レイヤーの50%縮小
終わりに
サンプルデータを作ってみたので、画像アセットやスマートオブジェクトの編集など自由にお試しください。
ここ最近は、会社でも個人的にもXDを使うことが多いですが、PSD納品の案件もたまにあります。こうしたTipsを活かすと効率よく制作できるのではないでしょうか。
ちなみに、スマートオブジェクトのノウハウは一年以上前に会社の先輩に教えていただきました。ありがたやー。
おまけ
この間、Twitterで「Photoshop or Illustlator or XD でスマホ表示のデザインデータつくるとき、どっち派ですか？？」というアンケートをとったらこのような結果になりました。
アートボードを２倍以上のサイズでつくる方がかなり多かったです。皆さんの制作フローはいかがでしょうか？