「Webサイト制作のワークショップ」のメモです。
Photoshop で Webデザインする場合、文字組みや画像配置など、Illustrator でグラフィックデザインをする操作に近い。シェイプレイヤー（ベクトルマスク）、スマートオブジェクト、テキストレイヤー、レイヤースタイルなどを使い、ピクセルに依存しない柔軟な作り方をしていく。
enjoy!
単位はピクセル
PCのディスプレイだけに限定しても、画像の表示サイズは異なる。100×100px の画像を等倍で表示した場合、見た目のサイズはディスプレイによって違う。ディスプレイによって1インチ四方あたりのピクセルの数（ピクセル密度）は違うし、ディスプレイ解像度の設定によっても変更される。
いま自分がみているディスプレイ上で「何センチ」と言っても、相手が見ているディスプレイに表示されている大きさとは異なる場合がある。
グリッドデザイン
960pxを12分割したテンプレート。3分割や4分割、2カラムのレイアウトのグリッドとして使いやすいサイズ。
960 Grid System
制作フロー
あくまでも一例。
- コンテンツ/ターゲットの設計｜目的の設計
- サイト構成/サイトマップ作成｜手段の設計
- ワイヤーフレーム/モックアップをつくる｜UXのテスト
- プロトタイプ｜必要に応じて、動きの確認するためのサンプル
- デザインカンプ制作｜デザイン
- コーディング｜ブラウザでの動作
- テストアップ｜動作チェック/ブラウザチェック
- 公開｜Google Analytics/Search Console の設定
デザインの前段階で使用するツールは、PowerPoint や Keynote、Illustrator など、使い慣れているもので良い。あらかじめUIキットが揃ったアプリもある。そのまま Photoshop でデザインを進める場合であれば、Photoshop でワイヤーフレームをつくった方が効率的。
Adobe XD は、遷移フローを簡単に作成できるプロトタイピングツール。UIキットも揃っているので、ワイヤーフレームの作成も効率的に行える。こういったツールは必要に応じて柔軟に取り入れていきたい。
モジュール/コンポーネント化
Webサイトはいくつかのコンポーネントで構成される。ヘッダー/フッターの要素、グローバルナビゲーション、パンくずナビ、見出し、段落、ボタン、サイドメニューなど。
この後のコーディングにも影響してくるのだが、再利用可能な派生コンポーネント（亜種）を使っていくこと。デザインも統一され、一定のトーンマナーを守ることにもつながる。
具体的には、ボタンの形はサイト全体を通して共通のデザインにする。グレーのボタンもブルーのボタンも、形やマージンなどは揃えておく。グレーのボタンに対してCSSで色だけを上書きすることでブルーのボタンにする。CSSを上書きすることで、グレーと青のボタンをそれぞれCSSで作成する必要はなくなり、さらに他の色のボタンが必要になっても、同じフローで追加することができる。また、ボタン自体の形やマージンを調整する場合でも、もととなるコンポーネントを1箇所修正するだけですべての色のボタンを変更することが可能となる。
どんなUIがあるか
それぞれのUIの特性を理解しておく。uikit
Device Preview
Photoshop で開いているデータをスマホでプレビューできる。Photoshop の「ウインドウ > Device Preview」を表示させ、iPhone で「Adobe Preview CC」を起動する。PCとスマホが同一 Wi-Fi にいることが条件。スマホサイトをデザインする際に使用する。
Photoshop/Illustrator
最近では、Illustrator でも Webデザインを行える環境が整備されてきた。ピクセルでのサイズ指定や、ピクセルグリッドにピクセルが正しく乗っていることなど気をつければ、Illustrator で作業も可能かも。ただ、Webデザインでは Photoshop を使うというのが多くの現場での世界基準ではあるので、データの受け渡し、コーダー/プログラマーへの引き継ぎなどが想定される場合は、Illustrator はやはりNG。
Photoshop の Tips
カラー設定
「編集 > カラー設定（command＋shift＋K）」から、「Web・インターネット用 – 日本」を選択する。
カラープロファイルは
- RGB｜sRGB IEC61966-2.1｜一般的なPCディスプレイのカラースペース
- グレー｜Gray Gamma 2.2｜一般的なPCディスプレイのガンマ値（明るさ）
となる。
単位
環境設定の「単位・定規」タブの「定規」と「文字」を pixel にする。制作データが2xの場合はテキストサイズの数値が2倍になる。ちなみに point だと画像解像度が変わってもテキストサイズの数値は変わらない。
ワイヤーフレームを作成する
長方形ツールのシェイプとパス選択ツールを使ってワイヤーフレームを作成する。ピクセルでの塗りを使用しないのは、リサイズを繰り返すうちに境界がぼけてしまうため。
その後、画像を配置してクリッピングマスクする。レイヤー間を option＋クリック（command+option+G）。複数のレイヤーがある場合は、マスク付きレイヤーグループにする（フォルダにマスクをかける）。
スマートオブジェクト
「ファイル > 埋め込みを配置」もしくは「ファイル > リンクを配置」で画像を配置する。
基本は「埋め込みを配置」。ヘッダー/フッターなど、全ページ共通のモジュールは「リンクを配置」が便利。スマートオブジェクトは拡大縮小しても画像が荒れない。取り消し可能なスマートフィルターも使用可能。環境設定の「一般」で、「配置時にスマートオブジェクトを常に作成」をオンにしておく。
同じ位置に配置する
ファイル間でレイヤーをドラッグ＆ドロップする際、レイヤーを「shift＋ドラッグ＆ドロップ」で同じ位置に配置できる。
画像の拡大縮小
スマートオブジェクトのリサイズは、環境設定の「一般」タブの「画像補完方式」を変更しながら行う。画像補間方式を間違うと画質が悪くなる。
- 拡大｜ニアレストネイバー法
- 縮小｜バイリニア法
スクラブズーム
ズームツール使用時、クリック連打するのではなく、「command＋space＋左右にドラッグ」でスマートに拡大縮小できる。ズームツールのオプションで「スクラブズーム」にチェックを入れておく。
ピクセルグリッド
好みで「表示 > 表示・非表示 > ピクセルグリッド」のチェックをオフにする。
グリッド表示
環境設定の「ガイド・グリッド・スライス」タブの「グリッド」の数値を変更する。
グリッド線：100px
分割数：10
必要に応じてcommand＋＠でグリッドを表示させる。
スナップ
「表示 > スナップ」オンで、ガイドやレイヤーにスナップするようにする。
テキストの確定
テキストを打って確定するときは、command＋enter（escキーを押すと打ったテキストが消えてしまう）で確定できる。Photoshop CC 2017 からは、環境設定の「テキスト」タブの「ESC キーを使用してテキストを確定」のチェックをオンにすることで、escキーでも確定できる。
文字組みのショートカット
基本的には Illustrator と同じショートカットが使える。
テキストの拡大縮小
command＋shift＋>
command＋shift＋<
行間
option＋↓↑
option＋command＋↓↑
ベースライン
option＋shift↓↑
option＋shift＋command↓↑
カーニング/トラッキング
option＋←→
option＋command＋←→
文字パネルの設定
それぞれの効果を理解して、日本語を打った時に表示がおかしい場合は文字パネルの設定を変更する。
- 欧文合字のオン/オフ
- 前後関係に依存する字形
- 任意の合字
- スワッシュ字形
- デザインのバリエーション
- タイトル用字形
- 上付き序数表記
- スラッシュを用いた分数
文字パネルを軽くする
「書式 > フォントプレビュー」のサイズを「なし」にする
ツール切り替えのショートカット
よく使うツールの1キーショートカットを覚えておく。
T｜文字ツール
V｜移動ツール
A｜パス選択ツール
D｜描画色と背景色を初期設定に戻す
X｜描画色と背景色を入れ替え
F｜スクリーンモードを切り替え
0-9｜レイヤー選択時に不透明度の変更、ブラシツール使用時にブラシの不透明度変更
ブラシのショートカット
ブラシサイズの変更
control＋option＋左右ドラッグ
ブラシのボケ足変更
control＋option＋上下ドラッグ
レイヤーの描画モードを変更
よく使うレイヤーの描画モードのショートカットを覚えておく。
乗算｜option＋shift＋M
スクリーン｜option＋shift＋S
オーバーレイ｜option＋shift＋O
差の絶対値｜option＋shift＋E
通常｜option＋shift＋N
順番に変更｜option＋shift＋プラス/マイナス
差の絶対値は、データ間の差異を調べるために使用する。
自動処理
「ファイル > 自動処理 > バッチ」
フォルダ内にアクションを実行する。画像ファイルの一括リサイズなど。
「ファイル > 自動処理 > コンタクトシート II…」
フォルダ内の画像一覧をプリントするなど。
Photoshop Generator
- 環境設定の「プラグイン」タブの「Generator を有効にする」をオンにする。
- 「ファイル > 生成 > 画像アセット」をオンにする。
- レイヤーフォルダ名/レイヤー名を「○○.jpg」のように「ファイル名＋拡張子」に変更する。自動的に assetsフォルダが生成されて、画像が書き出される。
パラメーターを記述することで、出力画質やサイズを設定できる。
レイヤーからの画像アセットの生成
マスク/ベクトルマスクの複製
レイヤーのマスク/ベクトルマスクを option＋ドラッグで複製。
レイヤーのマスク/ベクトルマスクを option＋クリックでマスクビュー。
パネルを隠す
Tabキー
塗りつぶし
描画色で塗りつぶし｜option＋delete
背景色で塗りつぶし｜command＋delete
シャドーチェッカー
調整レイヤーのトーンカーブで、ギザギザの山をつくる。トーンの流れを確認するのに利用する。
選択範囲の複製
command＋J
Illustrator でいう、command＋C、command＋F と同じ。選択範囲が無い場合はレイヤーが複製される。
パペットワープ
選択範囲をつくって、「編集 > 変形 > ワープ」
ビルの歪み修正や、顔のレタッチなどで使える機能。
