###初心者がXDを使うときに最初にしなければいけないこと

マークアップ言語を勉強していく中で、XDでデザインのカンプをもらって、それをもとにしてコーディングをしていくときがいつか訪れると思います。
（大体、初心者がマークアップの勉強を始めて、半年くらいで訪れると思う）

そんな時にまず初めに私なりにしなければいけないと思ったことを過去の自分に宛てるつもりで書いていこうと思います。
言わずもがなですがXDは最初に最新のものをインストールしておきましょう！
それでは始めます！

####①まずは書き出しの方法を学習しよう！
サイトを作るうえで、サイトの中で使う写真を集める必要があります。
最初は「サイトに使う写真はどこから集めるんだ？？」となるかもしれません。
結論を言うと写真はXDのデザインカンプから直接、抽出します。
これを書き出しといいます。書き出しの方法は簡単です。書き出したい画像をクリックして
ctrl+E のショートカットを使うか、もしくは画像を選択してハンバーガーメニューから書き出しを選択するだけです。
この時に書き出しの形式にPNGやJPEGなどがありますが、JPEGは容量が軽くて画質がやや粗い画像を抽出できます。PNGは容量が多くて色彩のゆたかな画像を抽出できます。
特にこだわりがなければPNGでいいとおもいます。なんなら初心者にとってはどっちの形式を使ってもそんなに変わらないと思います。

※よくある疑問
書き出しをするときに目的の画像だけでなく、いらない画像まで一緒に保存されることがあります。操作に慣れていないとよく起きます。
例えば画像に重なっていたロゴも一緒に書き出しされて、一枚の画像になってしまうといったことです。

こなれてくると複数選択して一気に正確に書き出しできるのですが最初は、間違えて書き出すことも多くあったので、
初心者の方はマウスでXDのカンプの画像をドラックして、その画像以外何もないところに持ってきてから書き出しするとミスが減ります。

動かした画像はそのままだと困るのでctrl+Zで元に戻すといいでしょう。

####②XDを使う時のスクロールの仕方を覚えておこう！
XDの操作はかなり独特です。
特に横方向へのスクロールはスクロール方法を知らないとできないと思います。
方法としてはshiftボタンを押しながらマウスホイールを動かすと横方向に動きます。
私も最初のほうはスクロール方法に大いに苦しめられました。
またctrlボタンを押しながらマウスホイールを回すと拡大と縮小ができます。
マウス押し込みでポインターが手の形になり画面をドラックで移動させれます。
XDはなかなか直感的な操作ができないので最初はショートカットを調べて操作方法を学んだほうが後々の効率はいいと思います。

####③フォントを用意しよう！
adobe creative cloudを利用するとフォントを無料で追加して使うことができます。
フォントの設定は初心者にとってハードルが高いので最初はフォントを適当に選択してしますこともあると思います。
しかしフォントはデザインの印象を大きく変えるのでやはりこだわったほうがいいと思います。
コーディングするうえで必要なフォントはXDでデザインカンプを開いて左側にタブに環境にないフォントというのが出てくるので、フォント名をadobe fontsで調べます。（この時、環境にないフォントで出てきたフォント名とadobe fonts 上でのフォント名が微妙に違う時がありますが、あまり気にしなくていいです。

目当てのフォントを見つけたら、アクティベートしたあと、画面右上あたりにウェブプロジェクトに追加という項目があるので、クリックしてプロジェクト名をつけてください（プロジェクト名はわかりやすければ何でもいいです）
そのあとにHTMLのheadに選択したフォントを使うためのコードが出てるのでhead内にコピー＆ペーストしましょう。この時にcss内で記述するときのためのコードも出てくるのでメモ帳にでも書いておいてください。

例としてHTMLのヘッド内には

<script>
  (function(d) {
    var config = {
      kitId: 'ahg6syh',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

またcssでは

font-family: yu-mincho-pr6, sans-serif;
font-style: normal;
font-weight: 400;

といったようなコードになります。

####まとめ

まずXDを使う際には

XDのインストール→ショートカット及び操作を覚える→書き出しの方法を覚える→フォントをダウンロードする。

というような手順で進めていくとスムーズに進めていけると思います。

私自身がまだ初心者なので間違っているところやもっと効率的な方法があるかもしれませんが、何かお気づきの点があれば教えていただけるとありがたいです。

閲覧ありがとうございました。