デザイン→コーディングをスムーズに！
Photoshopデータの作り方
WEBページの制作は、デザインとコーディングを分業している会社も多いと思います。デザイナーからコーディング担当者にバトンタッチしてから、余計な説明や打ち合わせを極力少なく、スムーズにコーディングを進めてもらうデータを制作するための心得をまとめました。初期設定をはじめ基本的なことがほとんどですので、WEBデザインを始めて間もない方にはぜひ見たいただきたいです。今回はAdobe Photoshop CCを使うことを想定して解説します。
■デザインを始める前のPhotoshop初期設定
1. カラーモードを「RGB」に設定
WebページはRGBモニターで表示することを想定しています。制作前に必ずカラーモードを「RGB」に設定しましょう。
▼新規作成時に「カラーモード」 ＞ RGBカラーに設定
または、上部メニューの「イメージ」から モード ＞ RGBカラーに設定
途中で変更することもできますが、もしCMYKで作っていた場合、それまで作っていたものと色味が変わってしまい全て修正することになります。また、ロゴなどをaiデータとして埋め込んだりする場合はそちらもRGB設定にする必要があります。元々紙媒体用にCMYKで作られたデータ（ロゴなど）をwebに流用することもありますが、注意が必要です。
2. 寸法単位を「px（ピクセル）」に設定
webコーディングのでの単位は「px」ですので、Photoshopで扱う単位を全てpixelに変更します。
▼上部メニューの「編集」から 環境設定 ＞ 単位・定規 ＞ 定規と文字を「pixel」に設定
最初単位は1pxで、コーディングではpx単位では整数しか指定できません。もしmmやpointで制作していると画像書き出しを行う際に1px未満のずれが生じてしまうので気をつけましょう。ちなみにIllustratorでは同じように設定していても、スライスの際に多少のずれが発生する場合があるので、通常のスライスをするならPhotoshopの方が正確に切り出せます。
3. 1px未満の滲みを発生させないようオプション設定
▼上部メニューの「編集」から 環境設定 ＞ ツール ＞ ベクトルツールと変形をピクセルグリッドにスナップにチェックを入れる（Photoshopのバージョンによっては「ツール」でなく「一般」の中にあります）
上記の設定はデフォルトでチェックがついていると思いますが、念の為確認しましょう。これを設定していないとシェイプなどの図形を変更する際に1px未満のサイズにまでスナップしてしまい端が滲んでしまいます。
また、併せてシェイプレイヤーを扱う際は上部メニュー内の「エッジを整列」をチェックしましょう。セットで設定することで完全にpx単位でのデザインが可能になります。
これで主な初期設定は完了です。次にデザインする際に気を付ける項目をピックアップします。
■Photoshopデータを制作する上での注意点
- 他者が見ても分かりやすいデータ作り
- HTMLテキストの最低フォントサイズは「11px」
- 透過画像に対して描画モードを設定しない
- 要素をはみ出さない・重ねない
- 複数の画像として切り出す要素は重ねない
- 背景パターンはリピートできるデザインに
- 動的な部分は慎重に決定し、正確に伝える
1. 他者が見ても分かりやすいデータ作り
Photoshopデータを分かりやすく作っておくと、コーディング担当者に渡した際やり取りが少なくなりスムーズに進みます。誰が見ても管理が容易なので、保守性が上がるというメリットもあります。（Photoshopデータは重たいので、できるだけデータを戻すことは避けたいものです）
レイヤーを整理する
- レイヤーに名前を付ける
レイヤーには何のオブジェクトを指しているかが分かるよう簡潔な名前をつけましょう。例では分かり易い英単語をつけていますが、ファイル名ではないので日本語の使用も可能です。 - レイヤーの順番を守る
web画像の書き出しはパーツ毎に書き出す必要があるため、要素の表示・非表示を頻繁に行います。レイヤーがあちこちに散らばっていると分かり辛く時間がかかります。レイヤーはきちんと順番を守り、下から上（奥から手前）に並ぶように整理しましょう。（重なり順に気を付ければレイヤー順は上から下でも問題ありません。お好みで。） - グループ化する
オブジェクトのまとまりはグループ化しましょう。大まかにレイアウト別にすることと、画像で書き出す単位毎にまとめておくとスッキリします。また、何度も使いまわす要素はグループ化でなくスマートオブジェクト化しておくと修正があった時にすばやく対応でき便利です。 - 表示・非表示レイヤー
更新があった箇所は前の状態を取っておきたい場合があると思います。そういう時は日付などをつけて非表示にしておくと分かりやすいでしょう。また、必要ないレイヤーは管理が煩雑化し、ファイル容量の増加にもなり動作も重くなる可能性があるのでなるべく削除しましょう。 - 切り替え要素レイヤー
切り替わる要素、例えばマウスオーバーした時の画像等を用意する場合は、専用のレイヤーを用意してレイヤーに色を付けると分かり易いです。書き出しの際も数回のクリックで済み、時間短縮になります。 - レイヤーカンプ
最後に、レイヤーカンプで確定デザインのレイヤー状態を登録しておきましょう。こうすることで、誤操作でレイヤーを表示・非表示してしまった時に確定デザインの最終状態に瞬時に戻すことができます。5.で説明した切り替え要素レイヤーをレイヤーカンプを活用して登録してもよいのですが、レイヤーカンプは要素を追加・削除した際に機能しなくなってしまう弱点があります。デザイン変更があった時に、反映後にセーブする感覚で更新ボタンでレイヤーカンプを更新して使う方法がおすすめです。
2. HTMLテキストの最低フォントサイズは「11px」
Google Chromeが10px以下を11pxに繰り上げ
Google Chromeはオプションのデフォルト設定で10px以下のフォントをすべて11pxに繰り上げて表示する仕様となっています（2017/7現在）
ブラウザの設定を変えれば表示可能ですが、可読性が良くない上に環境によって見え方が変わるので、できないと考えておいた方がよいでしょう。もしどうしても小さい文字を使いたい場合は、CSS3のscaleを利用して無理やり小さくする方法もあります。ケースバイケースですが画像にするのも手だと思います。
3. 透過画像に対して描画モードを設定しない
上記画像のように透過テキストに描画モード（ここでは乗算）を設定する表現は、そのままだと文字部分だけに背景を透過させた画像を切り出せません。新規レイヤーで図形にしてからマスクを掛けたものを用意しておくと良いでしょう。
4. 要素をはみ出さない・重ねない
最初に決めたコンテンツ幅から要素がはみ出さないように気を付けましょう。一番多いのがコンテンツの端に配置された要素のドロップシャドウだけ枠を飛び出している例です。こういったケースでは少し内側にpaddingを設けたり、ドロップシャドウの角度を変えたりして対応しましょう。また、上記のようなボタンがいくつか横並びになっているケースで、ドロップシャドウのみ隣のボタンのスライスに重なってしまっていた、なんてこともあるので気を付けましょう。
5. 背景パターンはリピートできるデザインに
反復するパターン背景はリピートできるようにデザインします。また、当たり前ですが、背景でなくても同じサイズの反復する要素のサイズは統一しましょう。特に横幅はコンテンツのサイズが決まっていますので、横並びの要素は要素や余白含め、綺麗にコンテンツ幅に収まるように気を付けましょう。
6. 動的な部分は慎重に決定し、正確に伝える
CSS3やJavaScriptで動きを付ける必要がある箇所は、必ず出来ることを確認した上で実装を試みましょう。技術的に不可能でなくても、時間が掛かりすぎたり、コーディングする人が実現できなければ意味がありません。また、レガシーブラウザはどこまで対応するのかという問題もあります。（サポートが終了しているブラウザは基本対応すべきでないと私は思います）
そういった部分はコーダーとも相談の上で決定し、お互いの認識の違いが生まれないよう正確に伝えましょう。コーディングの中でも時間がかかる工程ですので、間違ったものを作ってしまうと大きなタイムロスにつながります。実装したいことを実現している参考サイトが用意できるとベストです。
仕様書や口頭での説明はもちろんのこと、デザインデータも動きのある部分は1.で紹介したように別レイヤーで作っておくとコーディングがとてもスムーズになります。例えば、アコーディオンなら開く前の状態と開いた後の状態を色をつけた別レイヤーにしたり、タブ切り替えだったら切り替え後のレイヤーを用意する、といった具合です。要素を動かすアニメーションの場合は、仕様書にまとめたり、カンプデザインをプリントして、動きをメモしながら口頭で伝えると間違いが起きにくいです。待機時間、アニメーションスピード、イージングの指定の仕方でも印象は変わりますので、そこも考えてデザインしているのであれば伝えると良いでしょう。
まとめ
デザインについて色々と語りましたが、実は私はデザイナーではありません…。コーダーの立場からコーディングがしやすいと思うデザインの基本的なことをまとめてみました。デザイナーとコーダーで分業していると、これらをあまりに怠ったデータだと、渡した人の表情を曇らせる可能性が高いです。（もちろんデザイナーからコーダーへの不満や注意すべき点もあると思います）私は仕事で人の文句を言うのも聞くのもあまり好きではないので、不満があればコミュニケーションを取り、改善できそうな点はどんどん意見して反映していくべきだと思います。余裕がないと難しいことですが、一緒に作業する仲間には出来るだけ気を使ってあげたいと思っています。
最後に、これらのルールは全員で守ってこそ真価を発揮しますので、是非みなさんでルール決めをして、作業を効率化してみてください。今回紹介したことが参考になれば幸いです。
WEBプログラマー ／ O.K
