LOGzeudon

名古屋で働いているWebデザイナーのブログです

レスポンシブなWebデザインカンプを Photoshop CC でつくるときの工夫

レスポンシブなWebデザインカンプをPhotoshopでつくるときの工夫

Photoshopでレスポンシブデザインなウェブサイトのデザインカンプを制作することがあります。その時に実践している工夫を紹介します。

モバイル表示のデザインデータ作成

アートボードを等倍にする

Photoshopのモバイルプリセットは、iPhone6用が750×1334px…すなわち2倍のサイズになっていますが、あえてそれを使わず、375×667pxなど(等倍)で作成することが多いです。

画像アセットで一括書き出し

画像の書き出しは、 ファイル > 生成 > 画像アセット を使います。以前「空レイヤー名にルールを書くだけで Photoshop の自動アセットが劇的に楽になった」の記事で紹介した通り、 default 100% + 200% @2x という名称の空レイヤーを設定しておくと @2x 画像の書き出しが自動化されて楽です。

ただし、ラスタライズされたレイヤーは2倍で書き出しても粗いままです。そこでスマートオブジェクトを活用します。※「リンクを配置」でも同様です

2倍書き出しに対応したスマートオブジェクトの作成

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

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

f:id:rokuzeudon:20180210203226p:plain

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

f:id:rokuzeudon:20180210203352p:plain

これをスマートオブジェクト化します。

f:id:rokuzeudon:20180210203404p:plain

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

f:id:rokuzeudon:20180210203416p:plain

スマートオブジェクトの編集モードへ。

f:id:rokuzeudon:20180210203433p:plain

表示したい要素(画像、テキストなど何でも)を配置・保存します。

f:id:rokuzeudon:20180210203509p:plain

元のファイルに戻ります。

f:id:rokuzeudon:20180210203546p:plain

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

メリット

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

デメリット

  • Ratina画面では等倍表示(コマンド+1など)すると実際の半分のサイズで表示されるので、ズームツールなどで2倍にしながら作業する必要がある
    • Photoshopには200%表示する機能があるので、ショートカットを割り当てておくと便利です(私はコマンド+1+オプションにしてます)
    • 慣れると気にならないです
    • Photoshopを低解像度モードにする方法もありますが、作業中粗く見えるのが辛いので私は使っていません。Ratina対応の優先度とか、チームメンバーの設定・好みなど擦り合わせた上で利用するかどうか選ぶと良いのではないでしょうか
  • デザイン工程で、書き出したい要素のスマートオブジェクト化or外部リンク化の手間が増える

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

  • 選択レイヤーの200%拡大
  • 選択レイヤーの50%縮小
  • 選択レイヤーのスマートオブジェクト変換
  • 選択レイヤーのラスタライズ

終わりに

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

sample-sp.psd

ここ最近は、会社でも個人的にもXDを使うことが多いですが、PSD納品の案件もたまにあります。こうしたTipsを活かすと効率よく制作できるのではないでしょうか。

おまけ

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

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