今回のテーマはデイトラWeb制作コースの学習記録。
初級（1st）DAY15、DAY16のデザインツールの使い方編で学んだ内容とレッスンの感想を残しておく。
まだ学習中なので、要点をさくっと短めに。
「デザインツールの使い方編」で学習した内容
Adobe XDの基本操作
XDでよく使う基本操作は５つ。
つかむ → V
四角形 → R
テキスト → T
アードボード → A
戻る → ⌘＋Z
XDでは、パズルのようにアートボードに要素を並べてWebカンプをつくっていく。
Webカンプの作り方（PC／スマホ）
PC用とスマホ用のWebカンプを見ながら模写していく。
ほかの要素との距離を測るには、対象の要素を選択して、optionを押しながらほかの要素に触れると、その要素までの幅が表示される。
Webカンプが完成したら、誰が見てもわかりやすいように、要素をグループ化してレイヤーを整える。
プラグインの導入方法
XDは、プラグイン（拡張機能）を導入することでより便利になる。
たとえば、
Resize Artboard to Fit Content
というプラグインを入れると、アードボードの余った余白を自動的にカットしてくれる。
書き出しの方法
もしデザイナーさんから画像などの元素材をもらえるのであれば、もらうのがベスト。
ただ素材をもらえない場合も多いので、そのときはXDから直接書き出す。
とくにRetinaディスプレイへの対応が必要な場合など、画質が荒くなると困る場合は、画像を引き伸ばしてから書き出してCSSで調整する。
書き出し時のjpgとpngの使い分け
jpg
画像
png
色味が少ないもの（イラストなど）
四角形でないもの ※jpgはすべて四角形で書き出される
統計な部分があるもの（ロゴなど）
ワイヤーフレームの作り方
ワイヤーフレームは、白黒のままでデザイン要素がない、Webカンプの骨組みのようなもの。
ワイヤーフレームをつくることができれば、エンドクライアントとも仕事ができるようになる。
Wires.jpなどのワイヤーフレームの専用キットを使うと効率よくつくることができる。
共有の方法
XDでつくったWebカンプは、共有タブからURL（リンク）を生成して共有できる。
開発者同士で共有するための開発モードや、クライアントと共有できるデザインレビューモードなどあるので、用途によって使い分ける。
「デザインツールの使い方編」の感想
Webサイトのコーディングをするときには、Webデザインのカンプ（Comprehensive layout）と呼ばれるレイアウトの見本をもとに作業をする。
その見本をつくるためのツールが本レッスンで学んだAdobe XDだ。
WebカンプはPhotoshopやIllustratorでつくられることも多いが、近年は無料で使えて操作も簡単なAdobe XDの利用が増えてきている。
WebカンプをつくるのはWebデザイナーの仕事だが、WebカンプをもとにコーディングをするWeb製作者も、XDの基本的な操作は学んでおく必要がある。
XDに触れたのははじめてだったし、PhotoshopやIllustratorもほとんど使ったことがないので、XDを立ち上げた瞬間はかなり使いづらそうな印象だった。
食わず嫌い的な。
だけど動画のレッスンを見ながら実際に触ってみると、そこまで難しくはなかった。
少なくとも、コーディングの際に数値や素材を取得することはできそう。
実際に現場で使っている細かなテクニックも教わった。
デザインツールの使い方編はつい先日追加されたばかりだ。
デイトラのコンテンツは期限なくずっと見ることができるのに、どんどん新しいコンテンツが追加されてアップデートされていく。
1年間の期限つきではあるものの、わからない部分はSlackで質問することができる。
Web制作を学びたい人には心強い教材だと思う。
