【要参考】
・「AdobeXDの教科書.pdf」参考
★Adobe XD ラーニングとサポート 先生より、XD操作方法練習できるのでおすすめとのこと
Adobe XDとは
Adobe XDは、アドビが販売しているベクターベースのプロトタイピング作成ツールである。
【ワンポイントアドバイス】
XDはまだ求人票で必要なスキルと掲載は少ないですが、取り入れている企業と、取り入れているデザイナーさんは増えています。
まずは、基本操作と利点などをしっかりと確認しておきましょう。
【参考サイト】
XD データ連携について
Adobe XD では、Photoshop や Illustrator などの他のアドビアプリケーションからデザイン素材を読み込むことができます。XD では、これらのデザイン素材をさらに拡張することも、これらのデザイン素材を使用してインタラクティブプロトタイプを作成することもできます。
【ワンポイントアドバイス】
実際のお仕事では、お客様とのやり取りに合わせて連携方法が変わるでしょう。必要に応じて、ai（Illustrator）なのかpsd（Photoshop）がいいのか、XDがいいのか、お客様に合わせて判断していきましょう。
【参考サイト】
- その他のアプリケーションから Adobe XD にデザイン素材を …
- Photoshop ファイルを XD で開くときにサポートされる機能
- XDで Illustrator ファイルを開く際にサポートされる機能と …
XDメモ
・切り抜きはない、クリッピングマスクは使える
・プロトタイプモードで動きをテストできる
・相手がXDを持っていなくても動きを共有できる（共有する際はクラウドに入れる）
※通常文字の縦書きはできないが、縦書きプラグインを入れるとできる（プラグインの入っていない方で開くと崩れる）
プラグインがない状態で縦書きを表示させる場合は画像を表示させる（↓アセットの書き出し参照）
【レイヤー】
・shiftで複数レイヤー選択できる
※フォルダ分けや名前できちんと整理した方がいい
【アートボード】
・アートボード左上のアートボード名クリックで選択された状態で、Alt+Shiftでドラッグでアートボードをコピーできる
・左メニューのアートボードアイコンクリックで右側にモバイル版のサイズが表示され選択できる
【ガイド】
・何も選択していない状態で、左、上からガイドが持ってこれる（左、上に戻すとガイドが消える）
・ガイドを持ちながらShift押すと細かく調整できるっぽい？
・表示タブでガイドの表示、非表示切り替えできる
※オブジェクトなどの移動時、持ったままAlt押すと、近いオブジェクトとの距離pxが表示される
【ファイル読み込み】
・レイヤー維持されたままでPSDファイルなど読み込める
【クリッピングマスク】
・枠の図形に画像をデスクトップなどからドラッグ
・選択ツールで選択した状態で、「選択したオブジェクトで書き出し」でマスクした形で画像保存できる
この画像を使ってもいいし、Photoshop等で元々画像を作成しても、CSSで希望の形に表示させてもなんでもOK
【リピートグリッド】
・例えば【画像：段落】のような横並びのものなど、並んでいるものをすべて選択して、右側メニュー「リピートグリッド」で緑色の枠で囲まれたら、線をドラッグで等間隔でコピペできる
・等間隔幅も、一つ変えたら他も連動される
＜応用＞
◆画像を連番表示
「01.jpg」「02.jpg」「010.jpg」とか順に名前付けしてリピートグリッド内の画像枠にドラッグで、連番表示される
※頭に0を付けないと、2の前に10や100など来てしまうので、01、02などにする
◆文章を順に表示
画像とは違い、メモ帳などに改行などで書いて、Shift JISで保存し、文章枠にドラッグで改行ごとに表示される
※改行で次の枠に行ってしまうのであまりおすすめではないとのこと
【アセットの書き出し】
・Photoshopなどのデータの中で、画像の一部だけ（フォントなども）画像として書き出せる（jpgもpngも大丈夫なのでpngなら透過画像ができる）
・画像まるごと使う場合はそのままWeb用に保存でOK
①必要なレイヤーをグループ化→グループ名を「○○○.jpg（またはpng）」など拡張子を記入して名前付け
②ファイル→生成→アセット
③画像化されたファイルができる
（文字は間隔が離れた縦書きなどの場合、モバイル版でレイアウト変更をする可能性があるので、段落かたまりごとに透明pngで画像用意するのがおすすめとのこと）
【ワイヤーフレーム画像の書き出し】
書き出し→すべてのアートボード→jpg or pngで書き出しできる
メモ
★先生より、下記の順での作業がやりやすいとのこと
①必要な情報を文字起こし
②手書きで配置メモ
③PCサイズのワイヤーフレーム（Photoshop or XD）
④レスポンシブ・モバイルサイズのワイヤーフレーム
（↓契約後？）
⑤デザインカンプ（色や写真を載せたカラー版ラフ）
・XDかFigma（フリーソフト）が使いやすい
・ワイヤーフレームは白黒グレーで作る下書き、写真や色を付けたものがデザインカンプ
・企業によって使用ソフトや作成ソフトの指示があるのでPhotoshopやXDどちらでも作れるようにしておく（XDが多い印象とのこと）
・画面を開いたときの最初の視角範囲＝ファーストビューは、高さ550～650px、横1000～1200pxに収める（PC）
・レスポンシブ・スマホ版でも文字の大きさは基本変わらないイメージで作る（別でコーディングが必要になる？ため）
【授業でのLP作成について】
◆既存商品のLPだけど、社名や社名ロゴは架空で作ったほうがいい？
↓
（田中先生）どっちでもいいけど、余裕があれば架空で作ればロゴや名刺、DMなども作ってストーリー性を持ってPFに載せられる/ロゴは余裕がなければジェネレーター（URL載せて）でもいいよとのこと
（齋藤先生）時間が無くなって大変だから既存のままでいい、素材やアイコンを借りてきて使っていいとのこと
◆元々企画のフィンランドは営利的でないので既存商品で進めているが、授業ではページ数の多いWebサイト制作は予定ある？
↓
（田中先生）予定はないけど、もし余裕があれば作ってサーバーに載せてPF載せてもOK
（齋藤先生）予定はない、普通のサイトよりもLPが作れる方が就職には有利だから
