tanatiyo デザインカンプも回数を重ねるに連れて、やり方がどんどん変わっていっています。毎回、出来るだけ効率の良いやり方を模索しています。実際に4回目のデザインカンプでやったこと流れを出来るだけ具体的に残しておきたいと思います。
①デザインカンプ用のローカル（自分のPC上に）フォルダを作成し、そこにXDデータをダウンロード。（実際のポートフォリオ用としてupしているフォルダとは別のフォルダを作って完成するまではそこに保存）
↓
②XDデータをダウンロードしたら、XDをアプリで開く→「環境にないフォント」をまずはチェック。GoogleFontsや他のダウンロードサイトを利用して、フォントをダウンロードし、出来るだけ揃える。
※フォントチェックの時は、必ずデザイン上のフォントをクリックして、font-weightも確かめておく。後で知ったのですが、GoogleFontsでフォントを持ってくる時は、font-weight：normal;とfont-weight:bold;をコーディングで使う場合、regularとboldの２つを指定してからダウンロードする必要があります。私はそれが分からず、「GoogleFontsでフォントを持ってきたのに、bold;に指定しても文字が太くならない！！」と結構悩みました＾＾；
↓
③XDデータから画像の書き出しを行う。基本的なことはPENGIN BLOGさんなど、まとめて頂いている方が多いので、そこを参考に画像を書き出していきます。画像を書き出した後は、https://tinypng.com/などで圧縮するのも忘れずに。
※ちなみに、今の段階の私は正直アートボードサイズが・・・というのが分かっていません。とりあえずpngやjpgを2xで書き出しています。→ここはまだまだちゃんと勉強する必要有ですね。。。
※この時点で私はデザインカンプ全体の画像も書き出しておきます（後にピクセルパーフェクトを行う作業の為に画像が必要）
↓
④A4用紙にカンプをカラー印刷。書き込める余白を3割ほど取って、カンプデータは縮小印刷。
↓
⑤④に直接、XDデータから分かる情報を書いていく。全部書くとしんどいので、自分にとって何度も見返すと手間だと感じるところや、書き出しておいた方がコーディングが楽だと思う部分を( ..)φメモする。
例えば私なら、フォント周りの情報（サイズ、太さ、種類、行間やラインハイト、色）、写真のサイズ、余白、画面幅やコンテンツの幅、などです。ほとんど全部に近いですね＾＾；
↓
⑥⑤の情報をもとに、全体の構成を考える。ヘッダーやファーストビュー、メインビュー、セクション、フッターなどの構成とその中のさらに細かい構成までを□で囲むなどして分かりやすく( ..)φメモ。出来れば、その時点でクラス名なども大体決めておくとコーディングの時にあまり手が止まらない。同時に、共通パーツを見つけて（見出し部分、ボタン部分など）、そこはクラスを同一にしたり、コンテンツ幅が同じなら、そこは同じCSSをあててクラス名を複数持たせたり、など細かいところまで考える。余白部分は、paddingでスマホ対応のレスポンシブを考える時に％の計算をする場合もあるので、％で幅を指定した方がよさそうなところには割合を計算して書き込んでおく。ここでレスポンシブの場合にどう対応するかも一通り考えて配置を決める。
↓
⑦大体の構成が決まったら、実際にコードを書いていく。VSコードとGooglChormを開き、VSコードの拡張機能の一つ（Live Servere）を起動。HTML部分を書いていく。まずはHTMLでDOCTYPE宣言など基本的な情報を書いた後、リセットCSSをあてる。リンクも忘れずに。私の場合は別ファイルを用意して相対パスで指定します。
※リセットCSSを書くのはHTML部分を書き終わってからでも良いかも。リセットCSSにはいろいろあります。ぜひご自身で一度調べてみてください。私は4回目のカンプも含め、ほとんど毎回違うリセットCSSを使っていました＾＾；いろいろ試してみて、自分に合うものが見つかるはず。。。。
↓
⑧⑥を見ながらコードを書いていく。⑥を作っている時点で大体の構成は頭の中にあるし、デザイン全体もA４用紙に印刷されているので、パッと見で、今どの部分のコードを書いているかが分かりやすいです。
ちなみにクラス名は⑥の段階で考えていたものを⑧の段階で修正して対応したりもしました。参考にしたサイトを挙げておきます↓
https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470
この時点で私はまだBEM設計（CSSのクラス命名規則）などはきちんと学んでいませんが、自分が分かりやすいクラス名をとりあえずつけてデザインカンプに取り組みました。
↓
⑨HTML部分の書き出しが終わったら、style.cssを作成し、CSSをあてていく。一応、CSSを書き始める前にリセットCSSがきちんと反映されているか確認。ここからWebブラウザをPC画面の右半分、VSコードを左半分に置いてコードを書いていく。VSコードのLiveServeが瞬時に画面をリロードしてくれるので、すぐにCSSが反映されてコードが書きやすいです。思ったようにCSSが反映されない場合は、Webブラウザ上で検証ツールも適宜使いながら、思った通りの指定が出来ているか確認しながら進める。また、どういったCSSを充てて良いか分からない時は、適宜ググりながらコードを書いていく。
↓
⑩一通り書いたら、次はレスポンシブ対応。画面幅が大きくなったり（2000px以上）、タブレットサイズやスマホサイズだったりを意識しながらレスポンシブ用のCSSを書いていく。
※レスポンシブ用の＠media～のCSSはどの場所に書くか、ですが、私はPC用のCSSコードのすぐ下、各セレクタに対応している部分に書いた方が（レスポンシブ用のCSSをまとめてstyle.cssファイルの最後の方に書いたり、別ファイルでまとめたりするよりも）最もやりやすかったです。これも人によって違うかも。
↓
⑪ここまで終わったら、GooglChormの拡張機能の一つ、PerfectPixel by WellDoneCode (pixel perfect)で、デザインカンプ全体の画像をアップロードし、ローカルのWebブラウザ上で作っているサイトに重ね合わせる。透明度は自分がやりやすいように調整。実際のデザインカンプ上のデータと自分が作成しているローカル上のサイトをピクセルパーフェクトを目指しCSSを微調整。ここでCSSを書き換えていくわけですが、VSコードを直接書き換えたり、GooglChormの検証ツールを利用して書き換えてみてからVSコードを書き換えたり、やり方はその時その時でやりやすいようにしています。
※どうも、実際の開発環境上とXDデータとでは、ラインハイトの関係もあり、デザインカンプデータ通りに全部の箇所を再現するのは難しいそうです。そのため、ファーストビュー（サイトを開いた瞬間の、一目見たスクロールする前の画面状態）で一致するくらいが丁度良いそうです。ただ、どうしても下にズレてくると透過画像とズレて見えにくくなるので、セクション毎に透過画像の位置を切り替えて、余白部分などCSSの調整を行うようにしました。
↓
⑫さて、ここまで来たらサイト制作も終盤！いよいよセルフチェックの段階です！セルフチェックはサーバーup前とup後の2回行います。私はここに⑩までの時間の倍以上かかってしまいました＞＜；ただしここは納品前の大事な作業になるのでしっかり行う必要があります。自分自身も厳しく確認していき、「これ以上できない！OK！」というまで確認しました。具体的なセルフチェックについては、私はしょーごさんのセルフチェック方法を参考にさせて頂いています。しょーごさんのブログにも記事があります。note購入者には特典でついてきます。是非、最後のもうひと踏ん張り、頑張りましょう！！
大まかな流れとしては、ローカル上のサイトでセルフチェック項目を一つ一つ確認→サイトをサーバーにアップしてセルフチェックをもう一周。レスポンシブ含め問題なく動作しているか、フォント周りの再現は出来ているか特に気を使いました（フォント周りは特に多くの方がおざなりになりやすいそうなので、私自身も気を引き締めて確認しました。ちなみにフォントの確認はGooglChormの拡張機能の一つFonts Ninjaと検証ツールを合わせて確認しました。ここも確認の仕方はしょーごさんのブログ記事を参考にしました）。
↓
⑬最後に、もう一度Web上でPerfectPixel by WellDoneCode (pixel perfect)を用い、ファーストビューでほぼピクセルパーフェクトになっているか確認。
↓
⑭しょーごさんに表示確認依頼の連絡。
以上の流れになります。言語化するとかなり長くなってしまいました＾＾；
完走された方々はセルフチェックに時間がかかったと皆さん仰っていました。私も⑩、⑪、⑫は何度も行ったり来たりしながらかなり時間がかかりました。実際の案件ではセルフチェックの時間を充分に確保することを意識してスケジュールを立てた方が良さそうです。
あくまで私の一例で、今後もやり方は変わっていくと思います。とりあえず、備忘録として残しておきます。