manabuyasuda · September 12, 2022 06:33 · Mar 4, 2017 · Mar 1, 2017 · Mar 1, 2017 · Mar 1, 2017
diff --git a/From-engineers-to-designers.md b/From-engineers-to-designers.md
@@ -1,32 +1,36 @@
 # エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。
-デザインカンプをコーディングするときに困りがちなことや、こうしてもらえるとすごく助かることなどをまとめています。デザイナーが他のデザイナーのデザインカンプを引き継ぐこともあるので、誰にとっても使いやすいデザインカンプを作ることは大切なことだと思います。  
-すべてとは言いませんが、なるべくこれに沿って作ってもらえると助かります。
+デザインカンプをコーディングするときに困りがちなことや、こうしてもらえると助かることなどをまとめています。デザイナーが他のデザイナーのデザインカンプを引き継ぐこともあるので、誰にとっても使いやすいデザインカンプを作ることは大切なことだと思います。  
+
+このドキュメントは指示ではなく、エンジニア目線の提案です。必ずしも正しいとは考えていませんし、このドキュメントをもとに意見を出し合えたらと思っています。
+
+基本的にデザインカンプに残して欲しいとしていますが、共有されているのであればデザインカンプ以外でも構いません。デザイナーの頭の中にだけある状態はさけたいと考えているので、ストックしておく場所としてデザインカンプを選んでいます。
+
+ツーツはPhotoshopを想定しています。これは単純にPhotoshopで作られることが多いからです。違うツールを使っている場合は、読み替えるか、読み飛ばしてください。
 
 ## 全体編
 デザインの全体像を知るためにしてほしいことです。  
 デザインを作っているときに考えていることをデザインカンプに残しておいてもらえると、その考えに沿ってコーディングをすることができます。デザインの意図に合致したコードは良いコードになります。
 
 ### サイト共通のサイズや色などをわかるようにしてください。
-why:
-デザインカンプを作っていない人がデザインカンプを見ると、どれが同じで、どれが違うのかは判断できません。すべてを確認する必要があるので、どうしても時間がかかってしまいます。
+#### なぜそうするのか？
+デザインカンプを作っていない人がデザインカンプを見ると、どれが同じで、どれが違うのかを判断するのに時間がかかってしまいます。  
 サイト共通の値をコーディング開始時から知っていることで、効率的に、修正に強いコードが書きやすくなります。  
 デザインカンプでは伝えきれないことは文章で伝わるようにしておいてください。
 
-do:
-デザインのレイヤーとは別にサイト共通の値を確認できるレイヤーを作ってください。「どういうときに使うのか」がわかるとなお良いです。  
-これ以外にも、後述する方法を使ってPhotoshopの項目から数値を判断できるようにしておいてください。。
+#### どうやってするのか？
+デザインのレイヤーとは別にサイト共通の値を確認できるレイヤーを作ってください。「どういうときに使うのか」が分かるのがベストです。
 
 参考リンク：
 
 - [Photoshopで共同デザイン作業するときのポイント、注意点25個まとめ - PhotoshopVIP](http://Photoshopvip.net/40426)
 
 
 ### 場所やUIごとにレイヤーを分けてください。
-why:
+#### なぜそうするのか？
 適切にレイヤーがわかれていないと、全体像を把握するのが大変になります。  
 書き出し設定（例えば、余白を含んだ画像アセットの書き出し）などもやりにくくなってしまいます。
 
-do:
+#### どうやってするのか？
 場所、UI、小さなパーツの順でレイヤーを整理してみてください。色分けなどもしてもらえると、よりわかりやすくなります。  
 よく使うクラス名をまとめているので参考にしてください。
 
@@ -48,10 +52,15 @@ do:
 - [【デザイナー必読！！】Photoshopレイヤー整理４個のチェックリスト（Illustrator・Fireworksにも応用可） | 株式会社 N2P](https://n2p.co.jp/blog/design/codingpsd/)
 
 ### デザインカンプにない状態のデザインを教えてください。
-why:
-通常、スマホとPCの2つのデザインカンプを作ることが多いですが、特にタブレット表示のときの見せ方に困ってしまいます。その他にも、文章が長くなったときや、マウスオーバーのときのアニメーション、画面幅が広がったときに画像はどんな大きさになりますか？
+#### なぜそうするのか？
+通常、スマホとPCの2つのデザインカンプを作ることが多いですが、その中に含まれていない状態がある場合があります。例えば、以下のようなことです。
+
+- タブレット表示のときはどんな見せ方になりますか？
+- 文章が長くなったときはどんな見せ方になりますか？
+- アニメーションはどんな速度や動き方をしますか？
+- 画面幅が広がったときはサイズは固定ですか？同じように広がりますか？
 
-do:
+#### どうやってするのか？
 デザイン作成時に想定している動きがあれば、文章や参考リンクなどでデザインカンプ内に残しておいてください。その動きを想定したコードを書くことができるようになります。
 
 参考リンク：
@@ -63,11 +72,11 @@ do:
 デザインの作成中にしかできないこともありますし、デザインを作っている人にしてもらったほうが早くて確実なこともあります。
 
 ### 画像アセットを準備した状態でデータを渡してください。
-why:
-コーディングは得意ですが、Photoshopの扱いは得意ではありません。なるべく整理された状態で渡してもらうことで、サイト制作全体の時間を短縮することが期待できます。  
-その他、本来なら一緒に書き出される想定だったパーツが含まれないまま書き出されてしまうといった、ケアレスミスを防ぐこともできます。
+#### なぜそうするのか？
+画像アセットで書き出しをすることで、サイト制作全体の工数削減が見込めます。そのデザインツールに慣れていて、そのデザインを作った本人がセットをしたほうが効率的です。  
+本来なら一緒に書き出される想定だったパーツが含まれないまま書き出されてしまうといった、ケアレスミスを防ぐこともできます。
 
-do:
+#### どうやってするのか？
 データを開いてすぐに画像が書き出せるように、適切なレイヤーにファイル名と拡張子をつけてください。  
 レイヤー名は以下のようにしてください。おそらくレイヤー名を変更することになるので、大雑把に分かれば十分です。
 
@@ -81,13 +90,13 @@ do:
 - [画像の命名規則](https://github.com/manabuyasuda/styleguide/blob/master/image-naming-rule.md)
 
 ### なるべくベクターデータで渡してください。
-why:
-高解像度ディスプレイに対応したり、レスポンシブウェブデザインに柔軟に対応するために、なるべくベクターデータを使っていきましょう（IE9以上の対応なら使えます）。  
-いつでも綺麗な状態で表示させることもできるので、デザインとコードも双方にとってメリットが大きいです。
+#### なぜそうするのか？
+高解像度ディスプレイや、レスポンシブウェブデザインに柔軟に対応するためです（IE9以上の対応なら使えます）。  
+いつでも綺麗な状態で表示させることもできるので、デザインとコード双方にとってメリットが大きいです。
 
-do:
-アイコンをパスとして作成したり、エンジニア側がフォントを持っていない場合が多いのでフォントはアウトライン化しておいてください。Illustratorから貼り付ける場合は「シェイプレイヤー」にしておいてください。  
-Photoshopで完結しなくても、	Illustratorの画像アセットで書き出せるようにしておいてもいいです。
+#### どうやってするのか？
+アイコンをパスとして作成したり、フォントはアウトライン化しておいてください（フォントがインストールされていないとベクターデータとして書き出せない）。Illustratorから貼り付ける場合は「シェイプレイヤー」にしておいてください。  
+Photoshopで完結しなくても、	Illustratorの画像アセットで書き出せるようにしておいても大丈夫です。
 
 参考リンク：
 
@@ -103,42 +112,33 @@ Photoshop上では1つの余白ですが、コーディングをする場合は`
 慣れていないと作りにくいということもあると思うので、テキスト周りは「できれば」で大丈夫です。ただ、使い回しが出来るのはデザインの作業的にもメリットがあると思うので、ぜひ試してみてください。
 
 ### 段落ウィンドウでマージンを指定してください。
-why:
-文字と文字の間の余白を正確に再現するには以下のような計算が必要が必要で、とても時間がかかってしまいます。
-文字同士の余白 - ((行送り - フォントサイズ) ÷ 2) + ((行送り - フォントサイズ) ÷ 2) 
+#### なぜそうするのか？
+文字と文字の間の余白を正確に再現するには以下のような計算が必要で、とても時間がかかってしまいます。  
 
-do:
-段落ウィンドウの「段落後のアキ」に`margin-bottom`に当たる数値を指定してください。`line-heigth`を考慮した状態での余白をPhotoshop上で知ることができます。  
-後述する「段落スタイル」を併用するとなお良いです。
+```
+文字同士の余白 - ((行送り1 - フォントサイズ1) ÷ 2) + ((行送り2 - フォントサイズ2) ÷ 2) 
+```
+
+#### どうやってするのか？
+段落ウィンドウの「段落後のアキ」に`margin-bottom`に当たる数値を指定してください。`line-heigth`（行送り）を考慮した状態での余白をPhotoshopの表示で知ることができます。  
+後述する「段落スタイル」を併用するのがベストです。
 
 参考リンク：
 
 - [marginとline-heightによる"真の余白"について考える | SimpleIsm](http://simpleism.net/2015/06/true-margin/)
 - [Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 | 株式会社LIG](http://liginc.co.jp/240544)
 - [Photoshop での段落の書式設定 | アドビサポート](https://helpx.adobe.com/jp/photoshop/using/formatting-paragraphs.html)
 
-### ジャスティフィケーションを指定してください。
-why:
-「行送り」にpxを指定すると、計算が必要になります。
-
-do:
-「行送り」を自動にした状態で、段落パネルのオプションから「ジャスティフィケーション」を選択して、「自動行送り」にパーセンテージで指定してください。  
-後述する「段落スタイル」を併用するとなお良いです。
-
-参考リンク：
-
-- [Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 | 株式会社LIG](http://liginc.co.jp/240544)
-
 
 ### 段落スタイルを設定して、フォントのパターンを作ってください。
-why:
-同じような見た目でも、作っていない人には同じかどうかの判断が難しいですし、微妙に違う場合に気づけないかもしれません。
-
-do:
-「新規段落スタイルを作成」を選択して、フォントファミリーやフォントサイズ、ジャスティフィケーションや段落後のアキなどを指定してください。
-名前はお互いがわかるであろう名前をつけてください。  
+#### なぜそうするのか？
+同じような見た目でも、作っていない人には同じかどうかの判断に時間がかかりますし、微妙に違う場合に気づけないかもしれません。  
 いくつか段落スタイルを作っておけば、パターンにあるフォントなのかそうでないのかが判断しやすくなります。
 
+#### どうやってするのか？
+「新規段落スタイルを作成」を選択して、フォントファミリーやフォントサイズ、段落後のアキなどを指定してください。
+名前はどんなときに使うのかが分かるのがベストです。  
+
 参考リンク：
 
 - [PhotoshopでWebデザインを効率化するための便利な使い方 | 株式会社LIG](https://liginc.co.jp/web/design/photoshop/88454)

diff --git a/From-engineers-to-designers.md b/From-engineers-to-designers.md
@@ -1,65 +1,79 @@
 # エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。
-デザインカンプをコーディングするときに困りがちなことや、こうしてもらえるとすごく助かることなどをまとめています。
+デザインカンプをコーディングするときに困りがちなことや、こうしてもらえるとすごく助かることなどをまとめています。デザイナーが他のデザイナーのデザインカンプを引き継ぐこともあるので、誰にとっても使いやすいデザインカンプを作ることは大切なことだと思います。  
 すべてとは言いませんが、なるべくこれに沿って作ってもらえると助かります。
 
 ## 全体編
 デザインの全体像を知るためにしてほしいことです。  
-デザインを作っているときに考えていることを、デザインカンプに残しておいてもらえると共有しやすくなります。コーディングで例えるなら、コメントと変数が近いです。
+デザインを作っているときに考えていることをデザインカンプに残しておいてもらえると、その考えに沿ってコーディングをすることができます。デザインの意図に合致したコードは良いコードになります。
 
 ### サイト共通のサイズや色などをわかるようにしてください。
 why:
-デザインカンプを作っていない人が見ると、どれが同じで、どれが違うのかはわかりません。全てを調べる必要があるので、時間がかかってしまいます。
-共通の値をコーディング開始時に知っていることで、効率的に、修正に強いコードが書きやすくなります。  
-デザインカンプでは伝えきれないことは文章で伝えるようにしてください。
+デザインカンプを作っていない人がデザインカンプを見ると、どれが同じで、どれが違うのかは判断できません。すべてを確認する必要があるので、どうしても時間がかかってしまいます。
+サイト共通の値をコーディング開始時から知っていることで、効率的に、修正に強いコードが書きやすくなります。  
+デザインカンプでは伝えきれないことは文章で伝わるようにしておいてください。
 
 do:
-デザインのレイヤーとは別にレイヤーを作ってください。「どういうときに使うのか」がわかるとなお良いです。  
-後述する方法を使って、Photoshopの項目から数値を判断できるようにしてください。
+デザインのレイヤーとは別にサイト共通の値を確認できるレイヤーを作ってください。「どういうときに使うのか」がわかるとなお良いです。  
+これ以外にも、後述する方法を使ってPhotoshopの項目から数値を判断できるようにしておいてください。。
 
 参考リンク：
 
-- [Photoshopで共同デザイン作業するときのポイント、注意点25個まとめ](http://Photoshopvip.net/40426)
+- [Photoshopで共同デザイン作業するときのポイント、注意点25個まとめ - PhotoshopVIP](http://Photoshopvip.net/40426)
 
 
 ### 場所やUIごとにレイヤーを分けてください。
 why:
-全体像が把握しにくく、書き出し設定（例えば、余白を含んだ画像アセットの書き出し）などがやりにくくなってしまいます。
+適切にレイヤーがわかれていないと、全体像を把握するのが大変になります。  
+書き出し設定（例えば、余白を含んだ画像アセットの書き出し）などもやりにくくなってしまいます。
 
 do:
-場所、UI、小さなパーツの順でレイヤーを整理してください。色分けなどもしてもらえると、よりわかりやすくなります。
+場所、UI、小さなパーツの順でレイヤーを整理してみてください。色分けなどもしてもらえると、よりわかりやすくなります。  
+よく使うクラス名をまとめているので参考にしてください。
+
+[CSS クラス名リスト](https://github.com/manabuyasuda/styleguide/blob/master/css-class-name-list.md)
+
+例えば、このようになります。
+
+- header/logo/logo_header.svg
+- header/navigation/TOP
+- contents/about/title
+- contents/news/text
+- footer/navigation/contact
+- footer/copyrights
 
 参考リンク：
 
-- [Webデザイン時におけるPhotoshopレイヤー整理の俺流ルール](http://creativememomemo.com/Photoshop_layer_arrange/)
+- [Webデザイン時におけるPhotoshopレイヤー整理の俺流ルール | クリエイティブメモメモ](http://creativememomemo.com/Photoshop_layer_arrange/)
 - [HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント (2/3)：CodeZine（コードジン）](http://codezine.jp/article/detail/8493)
 - [【デザイナー必読！！】Photoshopレイヤー整理４個のチェックリスト（Illustrator・Fireworksにも応用可） | 株式会社 N2P](https://n2p.co.jp/blog/design/codingpsd/)
 
-### SPとPCの間を教えてください。
+### デザインカンプにない状態のデザインを教えてください。
 why:
-通常、スマホとPCの2つのデザインカンプを作ることが多いですが、特にタブレット表示のときの見せ方に困ってしまいます。
+通常、スマホとPCの2つのデザインカンプを作ることが多いですが、特にタブレット表示のときの見せ方に困ってしまいます。その他にも、文章が長くなったときや、マウスオーバーのときのアニメーション、画面幅が広がったときに画像はどんな大きさになりますか？
 
 do:
-デザイン作成時に想定している動きがあれば、文章や参考リンクなどでデザインカンプ内に残しておいてください。
+デザイン作成時に想定している動きがあれば、文章や参考リンクなどでデザインカンプ内に残しておいてください。その動きを想定したコードを書くことができるようになります。
 
 参考リンク：
 
-- [実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート](http://qiita.com/y_hokkey/items/de88447bd31d9379b80a)
+- [実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート | Qiita](http://qiita.com/y_hokkey/items/de88447bd31d9379b80a)
 
 ## データ編
 画像やアイコンのようなデータの扱いや、保存形式についてです。  
 デザインの作成中にしかできないこともありますし、デザインを作っている人にしてもらったほうが早くて確実なこともあります。
 
 ### 画像アセットを準備した状態でデータを渡してください。
 why:
-コーディングは得意ですが、Photoshopの扱いは得意ではありません。なるべく整理された状態で渡してもらうことで、時間の短縮になります。
-本来なら一緒に書き出される想定だったパーツが含まれないまま書き出されてしまうことを避けることもできます。
+コーディングは得意ですが、Photoshopの扱いは得意ではありません。なるべく整理された状態で渡してもらうことで、サイト制作全体の時間を短縮することが期待できます。  
+その他、本来なら一緒に書き出される想定だったパーツが含まれないまま書き出されてしまうといった、ケアレスミスを防ぐこともできます。
 
 do:
-データを開いてすぐに画像が書き出せるようにレイヤー名にファイル名をつけてください。
+データを開いてすぐに画像が書き出せるように、適切なレイヤーにファイル名と拡張子をつけてください。  
 レイヤー名は以下のようにしてください。おそらくレイヤー名を変更することになるので、大雑把に分かれば十分です。
 
 - logo_header.svg（ヘッダーにあるサイトロゴ）
 - image_contents01.jpg（コンテンツの1つ目の画像）
+- image_contents02_sp.jpg（コンテンツの2つ目のSP用の画像）
 
 参考リンク：
 
@@ -68,60 +82,62 @@ do:
 
 ### なるべくベクターデータで渡してください。
 why:
-高解像度やレスポンシブウェブデザインに対応するために、なるべくベクターデータを使いたいです。
-いつでも、綺麗な状態で表示させることもできます。
+高解像度ディスプレイに対応したり、レスポンシブウェブデザインに柔軟に対応するために、なるべくベクターデータを使っていきましょう（IE9以上の対応なら使えます）。  
+いつでも綺麗な状態で表示させることもできるので、デザインとコードも双方にとってメリットが大きいです。
 
 do:
-パスとして作成したり、フォントはアウトライン化してください。Illustratorから貼り付ける場合は「シェイプレイヤー」にしておいてください。
+アイコンをパスとして作成したり、エンジニア側がフォントを持っていない場合が多いのでフォントはアウトライン化しておいてください。Illustratorから貼り付ける場合は「シェイプレイヤー」にしておいてください。  
 Photoshopで完結しなくても、	Illustratorの画像アセットで書き出せるようにしておいてもいいです。
 
 参考リンク：
 
-- [SVGの各アプリケーション書き出しをあれこれを調べてみた](https://in.spicagraph.com/Photoshop/about-svg/)
+- [SVGの各アプリケーション書き出しをあれこれを調べてみた | デザイナーのイラストノート](https://in.spicagraph.com/Photoshop/about-svg/)
 - [SVG MANIAX Ver.2 - Mars vanilla](https://www.slideshare.net/ssuser99dc16/mars-svg)
 - [SVG運用ガイドライン](https://github.com/manabuyasuda/styleguide/blob/master/svg-operating-rules.md)
 
 ## テキスト編
 コーディングをするときに地味に面倒なのが、文字と文字の間の余白を知ることです。  
-Photoshop上では1つの余白ですが、コーディング上では`line-height`と`margin`に分けて考えないとデザイン通りにすることができません。  
+Photoshop上では1つの余白ですが、コーディングをする場合は`line-height`と`margin`に分けて考えないとデザイン通りの余白にすることができません。  
 上手に余白を計測する方法は見つかっていませんが、Photoshopの機能をうまく使うことで計測する数を減らすことはできそうです。
 
-慣れていないと作りにくいということもあると思うので、テキスト周りは「できれば」で大丈夫です。ただ、使い回しが出来るのは作業的にメリットもあると思うので、ぜひ試してみてください。
+慣れていないと作りにくいということもあると思うので、テキスト周りは「できれば」で大丈夫です。ただ、使い回しが出来るのはデザインの作業的にもメリットがあると思うので、ぜひ試してみてください。
 
 ### 段落ウィンドウでマージンを指定してください。
 why:
-Photoshopの行間はCSSの`line-height`とは余白を持つ方向が違うため、正確に余白を測るのに時間がかかってしまいます（Photoshopは文字の下につき、CSSでは文字の上下に均等につきます）。
+文字と文字の間の余白を正確に再現するには以下のような計算が必要が必要で、とても時間がかかってしまいます。
+文字同士の余白 - ((行送り - フォントサイズ) ÷ 2) + ((行送り - フォントサイズ) ÷ 2) 
 
 do:
-段落ウィンドウの「段落後のアキ」に`margin-bottom`に当たる数値を指定してください。`line-heigth`を考慮した状態での余白を知ることができます。  
+段落ウィンドウの「段落後のアキ」に`margin-bottom`に当たる数値を指定してください。`line-heigth`を考慮した状態での余白をPhotoshop上で知ることができます。  
 後述する「段落スタイル」を併用するとなお良いです。
 
 参考リンク：
 
+- [marginとline-heightによる"真の余白"について考える | SimpleIsm](http://simpleism.net/2015/06/true-margin/)
 - [Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 | 株式会社LIG](http://liginc.co.jp/240544)
-- [Photoshop での段落の書式設定](https://helpx.adobe.com/jp/photoshop/using/formatting-paragraphs.html)
+- [Photoshop での段落の書式設定 | アドビサポート](https://helpx.adobe.com/jp/photoshop/using/formatting-paragraphs.html)
 
 ### ジャスティフィケーションを指定してください。
 why:
 「行送り」にpxを指定すると、計算が必要になります。
 
 do:
-「行送り」を自動にして、段落パネルのオプションから「ジャスティフィケーション」を選択して、「自動行送り」にパーセンテージで指定してください。  
+「行送り」を自動にした状態で、段落パネルのオプションから「ジャスティフィケーション」を選択して、「自動行送り」にパーセンテージで指定してください。  
 後述する「段落スタイル」を併用するとなお良いです。
 
 参考リンク：
 
 - [Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 | 株式会社LIG](http://liginc.co.jp/240544)
 
 
-### 段落スタイルを設定して、プリセットを作ってください。
+### 段落スタイルを設定して、フォントのパターンを作ってください。
 why:
-同じような見た目でも、同じかどうか判断が難しいですし、微妙に違う場合に気づけないかもしれません。
-気づかない間に、微妙に違う指定が散乱してしまうことを避けることもできます。
+同じような見た目でも、作っていない人には同じかどうかの判断が難しいですし、微妙に違う場合に気づけないかもしれません。
 
 do:
 「新規段落スタイルを作成」を選択して、フォントファミリーやフォントサイズ、ジャスティフィケーションや段落後のアキなどを指定してください。
-名前はお互いがわかるであろう名前をつけてください。
+名前はお互いがわかるであろう名前をつけてください。  
+いくつか段落スタイルを作っておけば、パターンにあるフォントなのかそうでないのかが判断しやすくなります。
 
 参考リンク：
 

diff --git a/From-engineers-to-designers.md b/From-engineers-to-designers.md
@@ -3,15 +3,17 @@
 すべてとは言いませんが、なるべくこれに沿って作ってもらえると助かります。
 
 ## 全体編
+デザインの全体像を知るためにしてほしいことです。  
+デザインを作っているときに考えていることを、デザインカンプに残しておいてもらえると共有しやすくなります。コーディングで例えるなら、コメントと変数が近いです。
 
 ### サイト共通のサイズや色などをわかるようにしてください。
 why:
 デザインカンプを作っていない人が見ると、どれが同じで、どれが違うのかはわかりません。全てを調べる必要があるので、時間がかかってしまいます。
-共通の値をコーディング開始時に知っていることで、効率的に、修正に強いコードが書きやすくなります。
+共通の値をコーディング開始時に知っていることで、効率的に、修正に強いコードが書きやすくなります。  
 デザインカンプでは伝えきれないことは文章で伝えるようにしてください。
 
 do:
-デザインのレイヤーとは別にレイヤーを作ってください。「どういうときに使うのか」がわかるとなお良いです。
+デザインのレイヤーとは別にレイヤーを作ってください。「どういうときに使うのか」がわかるとなお良いです。  
 後述する方法を使って、Photoshopの項目から数値を判断できるようにしてください。
 
 参考リンク：
@@ -44,6 +46,8 @@ do:
 - [実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート](http://qiita.com/y_hokkey/items/de88447bd31d9379b80a)
 
 ## データ編
+画像やアイコンのようなデータの扱いや、保存形式についてです。  
+デザインの作成中にしかできないこともありますし、デザインを作っている人にしてもらったほうが早くて確実なこともあります。
 
 ### 画像アセットを準備した状態でデータを渡してください。
 why:
@@ -78,13 +82,19 @@ Photoshopで完結しなくても、	Illustratorの画像アセットで書き
 - [SVG運用ガイドライン](https://github.com/manabuyasuda/styleguide/blob/master/svg-operating-rules.md)
 
 ## テキスト編
+コーディングをするときに地味に面倒なのが、文字と文字の間の余白を知ることです。  
+Photoshop上では1つの余白ですが、コーディング上では`line-height`と`margin`に分けて考えないとデザイン通りにすることができません。  
+上手に余白を計測する方法は見つかっていませんが、Photoshopの機能をうまく使うことで計測する数を減らすことはできそうです。
+
+慣れていないと作りにくいということもあると思うので、テキスト周りは「できれば」で大丈夫です。ただ、使い回しが出来るのは作業的にメリットもあると思うので、ぜひ試してみてください。
 
 ### 段落ウィンドウでマージンを指定してください。
 why:
 Photoshopの行間はCSSの`line-height`とは余白を持つ方向が違うため、正確に余白を測るのに時間がかかってしまいます（Photoshopは文字の下につき、CSSでは文字の上下に均等につきます）。
 
 do:
-段落ウィンドウの「段落後のアキ」に`margin-bottom`に当たる数値を指定してください。`line-heigth`を含んだ状態で余白を知ることができます。
+段落ウィンドウの「段落後のアキ」に`margin-bottom`に当たる数値を指定してください。`line-heigth`を考慮した状態での余白を知ることができます。  
+後述する「段落スタイル」を併用するとなお良いです。
 
 参考リンク：
 
@@ -96,7 +106,8 @@ why:
 「行送り」にpxを指定すると、計算が必要になります。
 
 do:
-「行送り」を自動にして、段落パネルのオプションから「ジャスティフィケーション」を選択して、「自動行送り」にパーセンテージで指定してください。
+「行送り」を自動にして、段落パネルのオプションから「ジャスティフィケーション」を選択して、「自動行送り」にパーセンテージで指定してください。  
+後述する「段落スタイル」を併用するとなお良いです。
 
 参考リンク：
 
@@ -105,12 +116,12 @@ do:
 
 ### 段落スタイルを設定して、プリセットを作ってください。
 why:
-同じような見た目でも、同じかどうか判断が難しいですし、微妙に違う場合に気がつけないかもしれません。
+同じような見た目でも、同じかどうか判断が難しいですし、微妙に違う場合に気づけないかもしれません。
 気づかない間に、微妙に違う指定が散乱してしまうことを避けることもできます。
 
 do:
 「新規段落スタイルを作成」を選択して、フォントファミリーやフォントサイズ、ジャスティフィケーションや段落後のアキなどを指定してください。
-名前はお互いがわかるであろう名前をつけてください。	
+名前はお互いがわかるであろう名前をつけてください。
 
 参考リンク：
 

diff --git a/From-engineers-to-designers.md b/From-engineers-to-designers.md
@@ -12,7 +12,11 @@ why:
 
 do:
 デザインのレイヤーとは別にレイヤーを作ってください。「どういうときに使うのか」がわかるとなお良いです。
-後述する方法を使って、PhotoShopの項目から数値を判断できるようにしてください。
+後述する方法を使って、Photoshopの項目から数値を判断できるようにしてください。
+
+参考リンク：
+
+- [Photoshopで共同デザイン作業するときのポイント、注意点25個まとめ](http://Photoshopvip.net/40426)
 
 
 ### 場所やUIごとにレイヤーを分けてください。
@@ -22,6 +26,11 @@ why:
 do:
 場所、UI、小さなパーツの順でレイヤーを整理してください。色分けなどもしてもらえると、よりわかりやすくなります。
 
+参考リンク：
+
+- [Webデザイン時におけるPhotoshopレイヤー整理の俺流ルール](http://creativememomemo.com/Photoshop_layer_arrange/)
+- [HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント (2/3)：CodeZine（コードジン）](http://codezine.jp/article/detail/8493)
+- [【デザイナー必読！！】Photoshopレイヤー整理４個のチェックリスト（Illustrator・Fireworksにも応用可） | 株式会社 N2P](https://n2p.co.jp/blog/design/codingpsd/)
 
 ### SPとPCの間を教えてください。
 why:
@@ -30,12 +39,15 @@ why:
 do:
 デザイン作成時に想定している動きがあれば、文章や参考リンクなどでデザインカンプ内に残しておいてください。
 
+参考リンク：
+
+- [実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート](http://qiita.com/y_hokkey/items/de88447bd31d9379b80a)
 
 ## データ編
 
 ### 画像アセットを準備した状態でデータを渡してください。
 why:
-コーディングは得意ですが、PhotoShopの扱いは得意ではありません。なるべく整理された状態で渡してもらうことで、時間の短縮になります。
+コーディングは得意ですが、Photoshopの扱いは得意ではありません。なるべく整理された状態で渡してもらうことで、時間の短縮になります。
 本来なら一緒に書き出される想定だったパーツが含まれないまま書き出されてしまうことを避けることもできます。
 
 do:
@@ -45,6 +57,10 @@ do:
 - logo_header.svg（ヘッダーにあるサイトロゴ）
 - image_contents01.jpg（コンテンツの1つ目の画像）
 
+参考リンク：
+
+- [【スライス不要】Photoshop「画像アセット生成」の基本とつまずきがちな5つのコト | 株式会社LIG](http://liginc.co.jp/225512)
+- [画像の命名規則](https://github.com/manabuyasuda/styleguide/blob/master/image-naming-rule.md)
 
 ### なるべくベクターデータで渡してください。
 why:
@@ -53,17 +69,27 @@ why:
 
 do:
 パスとして作成したり、フォントはアウトライン化してください。Illustratorから貼り付ける場合は「シェイプレイヤー」にしておいてください。
-PhotoShopで完結しなくても、	Illustratorの画像アセットで書き出せるようにしておいてもいいです。
+Photoshopで完結しなくても、	Illustratorの画像アセットで書き出せるようにしておいてもいいです。
+
+参考リンク：
+
+- [SVGの各アプリケーション書き出しをあれこれを調べてみた](https://in.spicagraph.com/Photoshop/about-svg/)
+- [SVG MANIAX Ver.2 - Mars vanilla](https://www.slideshare.net/ssuser99dc16/mars-svg)
+- [SVG運用ガイドライン](https://github.com/manabuyasuda/styleguide/blob/master/svg-operating-rules.md)
 
 ## テキスト編
 
 ### 段落ウィンドウでマージンを指定してください。
 why:
-PhotoShopの行間はCSSの`line-height`とは余白を持つ方向が違うため、正確に余白を測るのに時間がかかってしまいます（PhotoShopは文字の下につき、CSSでは文字の上下に均等につきます）。
+Photoshopの行間はCSSの`line-height`とは余白を持つ方向が違うため、正確に余白を測るのに時間がかかってしまいます（Photoshopは文字の下につき、CSSでは文字の上下に均等につきます）。
 
 do:
 段落ウィンドウの「段落後のアキ」に`margin-bottom`に当たる数値を指定してください。`line-heigth`を含んだ状態で余白を知ることができます。
 
+参考リンク：
+
+- [Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 | 株式会社LIG](http://liginc.co.jp/240544)
+- [Photoshop での段落の書式設定](https://helpx.adobe.com/jp/photoshop/using/formatting-paragraphs.html)
 
 ### ジャスティフィケーションを指定してください。
 why:
@@ -72,6 +98,10 @@ why:
 do:
 「行送り」を自動にして、段落パネルのオプションから「ジャスティフィケーション」を選択して、「自動行送り」にパーセンテージで指定してください。
 
+参考リンク：
+
+- [Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 | 株式会社LIG](http://liginc.co.jp/240544)
+
 
 ### 段落スタイルを設定して、プリセットを作ってください。
 why:
@@ -82,10 +112,7 @@ do:
 「新規段落スタイルを作成」を選択して、フォントファミリーやフォントサイズ、ジャスティフィケーションや段落後のアキなどを指定してください。
 名前はお互いがわかるであろう名前をつけてください。	
 
+参考リンク：
 
-## 参考リンク
-
-- [Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 | 株式会社LIG](http://liginc.co.jp/240544)
-- [共同でWebデザインを制作するときに知っておきたいPhotoshopのワザ | 株式会社グランフェアズ](http://www.granfairs.com/blog/staff/font-setting-of-ps)
-- [[Photoshop]画像アセット機能からSVGを書き出す時に忘れがちなこと](http://yonecoweb.com/archives/292)
-- [【スライス不要】Photoshop「画像アセット生成」の基本とつまずきがちな5つのコト | 株式会社LIG](http://liginc.co.jp/225512)
+- [PhotoshopでWebデザインを効率化するための便利な使い方 | 株式会社LIG](https://liginc.co.jp/web/design/photoshop/88454)
+- [共同でWebデザインを制作するときに知っておきたいPhotoshopのワザ | 株式会社グランフェアズ](http://www.granfairs.com/blog/staff/font-setting-of-ps)
diff --git a/From-engineers-to-designers.md b/From-engineers-to-designers.md
@@ -0,0 +1,91 @@
+# エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。
+デザインカンプをコーディングするときに困りがちなことや、こうしてもらえるとすごく助かることなどをまとめています。
+すべてとは言いませんが、なるべくこれに沿って作ってもらえると助かります。
+
+## 全体編
+
+### サイト共通のサイズや色などをわかるようにしてください。
+why:
+デザインカンプを作っていない人が見ると、どれが同じで、どれが違うのかはわかりません。全てを調べる必要があるので、時間がかかってしまいます。
+共通の値をコーディング開始時に知っていることで、効率的に、修正に強いコードが書きやすくなります。
+デザインカンプでは伝えきれないことは文章で伝えるようにしてください。
+
+do:
+デザインのレイヤーとは別にレイヤーを作ってください。「どういうときに使うのか」がわかるとなお良いです。
+後述する方法を使って、PhotoShopの項目から数値を判断できるようにしてください。
+
+
+### 場所やUIごとにレイヤーを分けてください。
+why:
+全体像が把握しにくく、書き出し設定（例えば、余白を含んだ画像アセットの書き出し）などがやりにくくなってしまいます。
+
+do:
+場所、UI、小さなパーツの順でレイヤーを整理してください。色分けなどもしてもらえると、よりわかりやすくなります。
+
+
+### SPとPCの間を教えてください。
+why:
+通常、スマホとPCの2つのデザインカンプを作ることが多いですが、特にタブレット表示のときの見せ方に困ってしまいます。
+
+do:
+デザイン作成時に想定している動きがあれば、文章や参考リンクなどでデザインカンプ内に残しておいてください。
+
+
+## データ編
+
+### 画像アセットを準備した状態でデータを渡してください。
+why:
+コーディングは得意ですが、PhotoShopの扱いは得意ではありません。なるべく整理された状態で渡してもらうことで、時間の短縮になります。
+本来なら一緒に書き出される想定だったパーツが含まれないまま書き出されてしまうことを避けることもできます。
+
+do:
+データを開いてすぐに画像が書き出せるようにレイヤー名にファイル名をつけてください。
+レイヤー名は以下のようにしてください。おそらくレイヤー名を変更することになるので、大雑把に分かれば十分です。
+
+- logo_header.svg（ヘッダーにあるサイトロゴ）
+- image_contents01.jpg（コンテンツの1つ目の画像）
+
+
+### なるべくベクターデータで渡してください。
+why:
+高解像度やレスポンシブウェブデザインに対応するために、なるべくベクターデータを使いたいです。
+いつでも、綺麗な状態で表示させることもできます。
+
+do:
+パスとして作成したり、フォントはアウトライン化してください。Illustratorから貼り付ける場合は「シェイプレイヤー」にしておいてください。
+PhotoShopで完結しなくても、	Illustratorの画像アセットで書き出せるようにしておいてもいいです。
+
+## テキスト編
+
+### 段落ウィンドウでマージンを指定してください。
+why:
+PhotoShopの行間はCSSの`line-height`とは余白を持つ方向が違うため、正確に余白を測るのに時間がかかってしまいます（PhotoShopは文字の下につき、CSSでは文字の上下に均等につきます）。
+
+do:
+段落ウィンドウの「段落後のアキ」に`margin-bottom`に当たる数値を指定してください。`line-heigth`を含んだ状態で余白を知ることができます。
+
+
+### ジャスティフィケーションを指定してください。
+why:
+「行送り」にpxを指定すると、計算が必要になります。
+
+do:
+「行送り」を自動にして、段落パネルのオプションから「ジャスティフィケーション」を選択して、「自動行送り」にパーセンテージで指定してください。
+
+
+### 段落スタイルを設定して、プリセットを作ってください。
+why:
+同じような見た目でも、同じかどうか判断が難しいですし、微妙に違う場合に気がつけないかもしれません。
+気づかない間に、微妙に違う指定が散乱してしまうことを避けることもできます。
+
+do:
+「新規段落スタイルを作成」を選択して、フォントファミリーやフォントサイズ、ジャスティフィケーションや段落後のアキなどを指定してください。
+名前はお互いがわかるであろう名前をつけてください。	
+
+
+## 参考リンク
+
+- [Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 | 株式会社LIG](http://liginc.co.jp/240544)
+- [共同でWebデザインを制作するときに知っておきたいPhotoshopのワザ | 株式会社グランフェアズ](http://www.granfairs.com/blog/staff/font-setting-of-ps)
+- [[Photoshop]画像アセット機能からSVGを書き出す時に忘れがちなこと](http://yonecoweb.com/archives/292)
+- [【スライス不要】Photoshop「画像アセット生成」の基本とつまずきがちな5つのコト | 株式会社LIG](http://liginc.co.jp/225512)
No results found