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 でスマホ表示のデザインデータつくるとき、どっち派ですか？？」というアンケートをとったらこのような結果になりました。%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3E%E3%81%BF%E3%81%AA%E3%81%95%E3%82%93%E3%80%81Photoshop%20or%20Illustlator%20or%20XD%20%E3%81%A7%E3%82%B9%E3%83%9E%E3%83%9B%E8%A1%A8%E7%A4%BA%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%87%E3%83%BC%E3%82%BF%E3%81%A4%E3%81%8F%E3%82%8B%E3%81%A8%E3%81%8D%E3%80%81%E3%81%A9%E3%81%A3%E3%81%A1%E6%B4%BE%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F%EF%BC%9F%E3%80%90%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E3%80%91%3C%2Fp%3E%26mdash%3B%20%E3%82%8D%E3%81%8F%E3%81%9C%E3%81%86%E3%81%A9%E3%82%93%20(%40rokuzeudon)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Frokuzeudon%2Fstatus%2F956042601366458369%3Fref_src%3Dtwsrc%255Etfw%22%3EJanuary%2024%2C%202018%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3Eアートボードを２倍以上のサイズでつくる方がかなり多かったです。皆さんの制作フローはいかがでしょうか？