2014年11月8日におこなわれたCREATE NOW “Best of Max”でのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。

1. 株式会社Plankton Design
牧下 浩之
モバイルにも通用する
デザインカンプ制作のイロハ
2014.11.8

2. 牧下 浩之
クリエイティブディレクター／デザイナー
印刷媒体のデザイン事務所に4年勤務後、独立
Web媒体を中心にフリーランスとして約10年活動
2011年に株式会社Plankton Design設立
株式会社Plankton Design 代表取締役
Adobe Pinch Inにて記事連載中
東京造形大学非常勤講師
デザイナー同士がプレゼンテーションを行うイベント DePre! 主催
コーヒーの焙煎と抽出

3. さまざまな画面サイズ
さまざまなピクセル密度

4. 手間を減らす
効率的なワークフローを考える

5. 「モバイルにも通用する
デザインカンプ制作のイロハ」
Photoshopを使用した、
Webサイトのデザインカンプを効率的・機能的に作成する
アイデアをご紹介します
‣ 少なくともサイト全体のうちいくつかのページについて、ページまるごとデザインしてクライアント確認をおこなう必要のあるケースを想定
本セッションのねらい

6. 1はじめに
あらかじめおさえておきたいこと。

7. 名前を付ける
レイヤーグループには構造・要素名。
レイヤーには部位名（テキストレイヤーを除く）
順番に並べる
奧、上、左にレイアウトされているレイヤーから順に。
グルーピングする
HTML構造に沿ったレイヤーグループ構造に。
レイヤーパネルの整理
Adobe Pinch in 連載
“「デザインをスムーズにするガイドライン」第1回”参照
http://www.adobe.com/jp/jos/pinchin/article/design-and-guideline/ideas-for-smooth-production.html

8. メリット
‣ 構造を把握したり、構造的な矛盾に気づくことができる。
‣ 要素単位での表示非表示の切り替えや、移動・複製・削
除などの操作をおこないやすい。
‣ 複数人で作業する際にすばやく理解できる。
‣ レイヤーのフィルタリングを活用できる。
レイヤーパネルの整理
slideshare
“レイヤーのフィルタリングを活用しよう！”参照
http://www.slideshare.net/msdfjp/slide-share-14061501

9. 2要素の共有
オブジェクト間で、ファイル間で、デザイナー間で。
共有しやすいデータのつくりかた。

10. 要素の共有
レイヤーの共有
【スマートオブジェクト】

11. スマートオブジェクトとは
‣ PhotoshopやIllustratorで作成したファイルをpsdファイルに埋め込む機能。
‣ 非破壊編集をおこなうことができる。（拡大縮小やスマートフィルターなど）
スマートオブジェクト

12. スマートオブジェクトの種類
スマートオブジェクト
埋め込み
スマートオブジェクト
（コンテンツをpsd内部に持つ）
リンクされた
スマートオブジェクト
（コンテンツをpsd外部に持つ）

13. ヘッダやフッタなど、複数ページ（ファイル）にわたって
使用されるオブジェクトは、
“リンクされたスマートオブジェクト”として配置すると便利
スマートオブジェクト

14. 共通モジュール・汎用的な要素を外部ファイルとして管理し、各ページファイルにスマートオブ
ジェクトとしてレイアウトする。
メリット
‣ 内容の同一性が確保できる。
‣ 元ファイルを修正すれば、リンク先も自動で更新される。
スマートオブジェクト
slideshare
“コーディングを考慮したWebデザインガイドライン”参照
http://www.slideshare.net/msdfjp/ss-37633139

15. 要素の共有
カラーの共有
【スウォッチ】

16. ‣ 何度も使用するカラーはスウォッチで管理する。
‣ スウォッチの名前や順番はプリセットマネージャーで
編集することができる。
スウォッチ

17. スウォッチをファイルとして書き出したり、読み込むことができる。
スウォッチ
aco
Photoshop専用の色見本ファイル
フォーマット。
ase
色見本交換用のファイルフォーマット。
Photoshop、Illustrator、InDesignで
読み書き可能。
ファイル形式の種類

18. 要素の共有
スタイルの共有
【スタイル】

19. ドロップシャドウや光彩などはレイヤースタイルで実現させる。
再編集可能であることや、コピー＆ペーストできるなど汎用性が高い。
反復して使用するスタイルはスタイルパネルで管理する。
スウォッチと同様、スタイルパネルに登録しておけば、
すぐに呼び出すことができる。
外部ファイル化も可能。ファイル形式はasl。
スタイル

20. 要素の共有
文字・段落設定の共有
【文字スタイル・段落スタイル】

21. 反復して使用する文字設定・段落設定は、文字スタイル・
段落スタイルパネルで管理する。
文字スタイル・段落スタイルは、スタイルを編集すると、
スタイルを適用しているテキストの属性も更新される。
文字スタイルや段落スタイル単独で外部ファイル化するこ
とはできないが、psdファイルから文字スタイルや段落ス
タイルを読み込むことは可能。
文字スタイル・段落スタイル

22. 要素の共有
ステートの共有
【レイヤーカンプ】

23. レイヤーの表示／非表示、位置、レイヤースタイルの状態
を記憶させておくことができる。
例えばグローバルメニューなどで、通常時とカレント時と
いったステートのバリエーションを用意する場合は、1フ
ァイルで完結させ、レイヤーカンプで管理するとよい。
レイヤーカンプ設定を含むファイルをスマートオブジェク
トとして配置すると、スマートオブジェクトのレイヤーカ
ンプを切り替えて表示することができる。
レイヤーカンプ

24. 要素の共有
新しい共有方法
【Creative Cloud ライブラリ】

25. Photoshop
CC 2014.2 ∼
Creative Cloud ライブラリとは
‣ さまざまなデザインアセットを登録したり利用すること
ができる。
‣ Creative Cloudを通じてアセットが共有されるため、
同じAdobe IDを使用していれば、どの環境からでも利
用することができる。
‣ PhotoshopやIllustrator、さまざまなモバイルアプリに
対応している。
Creative Cloud ライブラリ

26. Photoshopのライブラリで使用できるアセット
Creative Cloud ライブラリ
ライブラリへの登録 ライブラリからの利用
ライブラリ内の
アセットの編集
カラー ○ ○ ○
グラフィック ○ ○ △
Photoshopで作成した
グラフィックのみ編集可
レイヤースタイル ○ ○
テキストスタイル ○ ○
ブラシ ○

27. 留意点
‣ ライブラリ内のアセットとライブラリから使用したドキュメント上の要素とは同期してい
ない。（ライブラリを更新してもドキュメント上の要素は更新されない）
‣ ライブラリを外部ファイルとして書き出すことができない。
Creative Cloud ライブラリ
手軽な点や、アプリケーションを横断して使用できる点は便利。
既存のスマートオブジェクトやスウォッチ、スタイルの代替手段にはならない。
使い分けが必要。

28. 3スケーラブルな表現方法
さまざまなピクセル密度に対応できる
データの作りかた。

29. さまざまなピクセル密度のデバイスが存在する。
ピクセル密度ごとにデザインパターンを作る手間は避けたい。
スケーラブルなデータ作りで、デザインデータの作成の手間を減らす。
スケーラブルな表現の重要性
1x 2x 3x ...

30. スケーラブルな表現方法
シェイプレイヤー

31. ベクターグラフィックなのでスケーラブル。
ライブシェイプもスケーラブル。
べた塗り、グラデーション、パターンのいずれもスケーラブル。
（パターンは素材の拡大・縮小率による）
シェイプレイヤー
200%

32. ピクセル未満のにじみを発生させない
主にシェイプレイヤーにおいて、１ピクセル未満のにじみが発生しないようにする。
Photoshopの環境設定から、「ベクトルツールと変形をピクセルグリッドにスナップ」
にチェックを入れる。

33. スケーラブルな表現方法
スマートオブジェクト

34. ベクターグラフィックはOK。
ビットマップグラフィックはあらかじめ縮小してあればOK。
ただしピクセル未満のずれが発生することがある。
スマートオブジェクト

35. スケーラブルな表現方法
テキストレイヤー

36. テキストもシェイプと同じくベクターでデータを保持しているためスケーラブル。
テキストレイヤー

37. スケーラブルな表現方法
ベクトルマスク

38. 同様にベクターのためスケーラブル。
マスクのぼかしもスケーラブル。
ベクトルマスク

39. スケーラブルな表現方法
塗りつぶしレイヤー

40. べた塗り、グラデーション、パターンのいずれもスケーラブル。（パターンは素材の解像度
による）
塗りつぶしレイヤー

41. スケーラブルな表現方法
レイヤースタイル

42. スケーラブル。
なおスマートフィルターはほぼNG。
レイヤースタイル

43. 4Generatorによる画像の書き出し
グラフィカルUIで操作が簡単に。

44. 書き出したいレイヤーやレイヤーグループの名前の末尾に拡張子を付ける。
マージンを任意に指定したい場合はマスクを使用する。
下準備

45. “ファイル＞アセットを抽出”または
レイヤーパネルで該当レイヤーを右ク
リックし、コンテクストメニューから
選択。
拡張子を付けたレイヤーやレイヤーグ
ループがすべてリストされるためわか
りやすい。
グラフィカル UI「アセットを抽出」 Photoshop
CC 2014.2 ∼

46. ファイル形式の変更や、複数のファイル形式の書き出し
を、グラフィカルなUIで簡単に実施することができる。
‣ 設定した内容は、ピクセル密度や接尾辞、フォルダ
名はデフォルトレイヤーの名前にフィードバックさ
れる。（デフォルトレイヤーがない場合は作成され
る。）
‣ ファイル形式は該当するレイヤーやレイヤーグルー
プの名前にフィードバックされる。
画像の書き出しサイズ、ファイル名の接尾辞、書き出し
フォルダを設定できる。
グラフィカル UI「アセットを抽出」

47. 画像アセットの抽出を、ドキュメントの更新時に自動でおこなうか、手動でおこなうかを設
定することができる。
‣ ファイル＞生成＞画像アセットのチェック
‣ 「アセットを抽出」パネルの設定＞自動抽出のチェック
グラフィカル UI「アセットを抽出」

48. 1) レイヤーパネルを整理する。
2) 共有しやすいデータを作成する。
3) スケーラブルな表現手法を使う。
4) “アセットを抽出”で複数のスケールの画像を
一度に書き出す。
「モバイルにも通用する
デザインカンプ制作のイロハ」

49. ☺
ご清聴ありがとうございました！