デザインカンプをコーディングするときに困りがちなことや、こうしてもらえると助かることなどをまとめています。デザイナーが他のデザイナーのデザインカンプを引き継ぐこともあるので、誰にとっても使いやすいデザインカンプを作ることは大切なことだと思います。
このドキュメントは指示ではなく、エンジニア目線の提案です。必ずしも正しいとは考えていませんし、このドキュメントをもとに意見を出し合えたらと思っています。
基本的にデザインカンプに残して欲しいとしていますが、共有されているのであればデザインカンプ以外でも構いません。デザイナーの頭の中にだけある状態はさけたいと考えているので、ストックしておく場所としてデザインカンプを選んでいます。
ツーツはPhotoshopを想定しています。これは単純にPhotoshopで作られることが多いからです。違うツールを使っている場合は、読み替えるか、読み飛ばしてください。
デザインの全体像を知るためにしてほしいことです。
デザインを作っているときに考えていることをデザインカンプに残しておいてもらえると、その考えに沿ってコーディングをすることができます。デザインの意図に合致したコードは良いコードになります。
デザインカンプを作っていない人がデザインカンプを見ると、どれが同じで、どれが違うのかを判断するのに時間がかかってしまいます。
サイト共通の値をコーディング開始時から知っていることで、効率的に、修正に強いコードが書きやすくなります。
デザインカンプでは伝えきれないことは文章で伝わるようにしておいてください。
デザインのレイヤーとは別にサイト共通の値を確認できるレイヤーを作ってください。「どういうときに使うのか」が分かるのがベストです。
参考リンク：
適切にレイヤーがわかれていないと、全体像を把握するのが大変になります。
書き出し設定（例えば、余白を含んだ画像アセットの書き出し）などもやりにくくなってしまいます。
場所、UI、小さなパーツの順でレイヤーを整理してみてください。色分けなどもしてもらえると、よりわかりやすくなります。
よく使うクラス名をまとめているので参考にしてください。
例えば、このようになります。
- header/logo/logo_header.svg
- header/navigation/TOP
- contents/about/title
- contents/news/text
- footer/navigation/contact
- footer/copyrights
参考リンク：
- Webデザイン時におけるPhotoshopレイヤー整理の俺流ルール | クリエイティブメモメモ
- HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント (2/3)：CodeZine（コードジン）
- 【デザイナー必読！！】Photoshopレイヤー整理４個のチェックリスト（Illustrator・Fireworksにも応用可） | 株式会社 N2P
通常、スマホとPCの2つのデザインカンプを作ることが多いですが、その中に含まれていない状態がある場合があります。例えば、以下のようなことです。
- タブレット表示のときはどんな見せ方になりますか？
- 文章が長くなったときはどんな見せ方になりますか？
- アニメーションはどんな速度や動き方をしますか？
- 画面幅が広がったときはサイズは固定ですか？同じように広がりますか？
デザイン作成時に想定している動きがあれば、文章や参考リンクなどでデザインカンプ内に残しておいてください。その動きを想定したコードを書くことができるようになります。
参考リンク：
画像やアイコンのようなデータの扱いや、保存形式についてです。
デザインの作成中にしかできないこともありますし、デザインを作っている人にしてもらったほうが早くて確実なこともあります。
画像アセットで書き出しをすることで、サイト制作全体の工数削減が見込めます。そのデザインツールに慣れていて、そのデザインを作った本人がセットをしたほうが効率的です。
本来なら一緒に書き出される想定だったパーツが含まれないまま書き出されてしまうといった、ケアレスミスを防ぐこともできます。
データを開いてすぐに画像が書き出せるように、適切なレイヤーにファイル名と拡張子をつけてください。
レイヤー名は以下のようにしてください。おそらくレイヤー名を変更することになるので、大雑把に分かれば十分です。
- logo_header.svg（ヘッダーにあるサイトロゴ）
- image_contents01.jpg（コンテンツの1つ目の画像）
- image_contents02_sp.jpg（コンテンツの2つ目のSP用の画像）
参考リンク：
高解像度ディスプレイや、レスポンシブウェブデザインに柔軟に対応するためです（IE9以上の対応なら使えます）。
いつでも綺麗な状態で表示させることもできるので、デザインとコード双方にとってメリットが大きいです。
アイコンをパスとして作成したり、フォントはアウトライン化しておいてください（フォントがインストールされていないとベクターデータとして書き出せない）。Illustratorから貼り付ける場合は「シェイプレイヤー」にしておいてください。
Photoshopで完結しなくても、 Illustratorの画像アセットで書き出せるようにしておいても大丈夫です。
参考リンク：
コーディングをするときに地味に面倒なのが、文字と文字の間の余白を知ることです。
Photoshop上では1つの余白ですが、コーディングをする場合はline-heightとmarginに分けて考えないとデザイン通りの余白にすることができません。
上手に余白を計測する方法は見つかっていませんが、Photoshopの機能をうまく使うことで計測する数を減らすことはできそうです。
慣れていないと作りにくいということもあると思うので、テキスト周りは「できれば」で大丈夫です。ただ、使い回しが出来るのはデザインの作業的にもメリットがあると思うので、ぜひ試してみてください。
文字と文字の間の余白を正確に再現するには以下のような計算が必要で、とても時間がかかってしまいます。
文字同士の余白 - ((行送り1 - フォントサイズ1) ÷ 2) + ((行送り2 - フォントサイズ2) ÷ 2)
段落ウィンドウの「段落後のアキ」にmargin-bottomに当たる数値を指定してください。line-heigth（行送り）を考慮した状態での余白をPhotoshopの表示で知ることができます。
後述する「段落スタイル」を併用するのがベストです。
参考リンク：
- marginとline-heightによる"真の余白"について考える | SimpleIsm
- Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 | 株式会社LIG
- Photoshop での段落の書式設定 | アドビサポート
同じような見た目でも、作っていない人には同じかどうかの判断に時間がかかりますし、微妙に違う場合に気づけないかもしれません。
いくつか段落スタイルを作っておけば、パターンにあるフォントなのかそうでないのかが判断しやすくなります。
「新規段落スタイルを作成」を選択して、フォントファミリーやフォントサイズ、段落後のアキなどを指定してください。 名前はどんなときに使うのかが分かるのがベストです。
参考リンク：