Adobe XDが台頭してきていますが、まだまだPhotoshopでデータ作成が必要な場面も多いです。特にレスポンシブデザインの制作では、PC、タブレット、スマホそれぞれのデータを用意する必要がある一方、Photoshopのデータにすると容量も大きく扱いにくいのが悩みどころです。その辺りをうまく進める工夫を紹介します。

データ作成のコツ

アートボードは等倍でつくる

Photoshopのモバイルプリセットは、iPhone6用が750×1334px…すなわち２倍のサイズになっていますが、あえてそれを使わず、375×667pxなど（等倍）で作成しましょう。データ容量が約半分になり操作時のタイムラグも減ります。

ただし、何も考えずに等倍で作ると後からの編集に弱いデータになる可能性があります。後述するポイントも必ず抑えてください。

画像はアセット機能でまとめて書き出す

画像の書き出しは、 ファイル > 生成 > 画像アセット を使います。 default 100% + 200% @2x という名称の空レイヤーを設定しておくと @2x 画像の書き出しが自動化されて楽です。

ただし、ラスタライズされたレイヤーを２倍で書き出して粗いです。そこでスマートオブジェクトまたはリンクを配置を使い、２倍書き出しに対応したオブジェクトを作成します。

２倍以上の書き出しに対応したスマートオブジェクトをつくる

仕組みは単純です。２倍サイズのレイヤーをスマートオブジェクト化し、50%に縮小して配置しておくだけです。

つくりかたを紹介します。わかりやすいように、とりあえず四角シェイプを配置しました。

早速、200%に拡大しましょう。もちろん最初からこのサイズのシェイプを配置してもOKです。

このシェイプをスマートオブジェクト化します。

そして50%サイズに縮小します。

次に、作成したスマートオブジェクトの編集モードへ。

表示したいオブジェクト（画像、テキストなど何でも）を配置します。

保存し、元のファイルに戻ります。

最後に書き出したいファイル名をレイヤー名にすればもう完了です。

メリット

• PC/モバイルとでパーツを使いまわせるモバイル→PC、PC→モバイルへのコピペである程度済むためデザイン工程が楽スタイルを揃える（コンポーネント化、管理する）のが容易であり、ミスが減りコーディング時の負担も少なくなる

• データ自体が軽い

デメリット

• Ratina画面では等倍表示（コマンド+１など）すると実際の半分のサイズで表示されるので、ズームツールなどで２倍にしながら作業する必要があるPhotoshopには200%表示する機能があるので、ショートカットを割り当てておくと便利です（私はコマンド+１+オプションにしてます）慣れると気にならないですPhotoshopを低解像度モードにする方法もありますが、作業中粗く見えるのが辛いので私は使っていません。Ratina対応の優先度とか、チームメンバーの設定・好みなど擦り合わせた上で利用するかどうか選ぶと良いのではないでしょうか

• デザイン工程で、書き出したい要素のスマートオブジェクト化or外部リンク化の手間が増えるランディングページやゲームUIなどのようにリッチなコンテンツの多いデザインでは負担が大きくなり向いていません。その時は私も２倍または３倍のアートボードで作成しています特定の条件下で @2x 画像がボケてしまうのですが、 「Photoshopのスマートオブジェクトを拡大して書き出すとぼける現象について - saucer」こちらの記事が詳しく検証・解説されています

ちなみに私は次の操作をアクション＆ショートカットキー登録しています。

• 選択レイヤーの200%拡大

• 選択レイヤーの50%縮小

• 選択レイヤーのスマートオブジェクト変換

• 選択レイヤーのラスタライズ

最後に

サンプルデータを作ってみたので、画像アセットやスマートオブジェクトの編集など自由にお試しください。

sample-sp.psd

おまけ

この間、Twitterで「Photoshop or Illustlator or XD でスマホ表示のデザインデータつくるとき、どっち派ですか？？」というアンケートをとったらこのような結果になりました。

アートボードを２倍以上のサイズでつくる方がかなり多かったです。皆さんの制作フローはいかがでしょうか？