XD：Webデザインに特化したデザインソフト。ワイヤーフレーム～デザインカンプが作れる。
右タブにあるものが機能のすべて。簡単なものしかないので、複雑なものはIllustratorやPhotoshopで作成が必要。
だがその分容量が軽い。
ウェブ版とレスポンシブ版を横並べして作れる。書き出しも一括。
ページのリンクの動きが一括で管理できる。ワイヤーでつなぐ。

ワイヤーフレーム、デザインカンプ

Photoshopで作るよう依頼されるときとXDで依頼される作るよう依頼されるときと2通りあり。両方できるように。

流れ

XDでWeb版のレイアウト大まかに作る（白黒＝ワイヤーフレーム）
※Photoshopで大まかレイアウト作って、XDで読み込み（ファイル→読み込みでもOK）
↓
XDでWeb版整える（白黒＝ワイヤーフレーム）※細かい文章はあとでもOK。〇×□でも。
↓
XDでレスポンシブ版（スマホ版）ワイヤーフレームつくる。Web版のを当てていく。※細かい文章はあとでもOK。〇×□でも。
↓
XDでWeb版の画像とか色入れる＝デザインカンプ（設計図完成）※細かい文章はあとでもOK。〇×□でも。
↓
XDでレスポンシブ版の画像とか色入れる＝デザインカンプ（設計図完成）※細かい文章はあとでもOK。〇×□でも。

※ワイヤーフレームとデザインカンプは、両方別で保存する！

※HTML、CSSを意識して作る

  • ワイヤーフレーム終了時点で印刷して手書きでCSS書き込むとよい。
  • Web版とレスポンシブ版は、基本フォントとか改行とかmarginとかも統一。CSSたくさん書くのを防ぐため。
    Web版→レスポンシブ版あてはめてみて違和感なければＯＫ。
  • 慣れないうちは初期値(文字ピクセルなら16px）で作り、どうしても変えたいところだけCSSで変える。変えるのも、CSSで、レスポンシブ版は80％（calc）にする、という指定をする！体で、60×0.8＝48ptでワイヤーフレーム上作る、というやり方。
    widthは％で指定すること！！
  • でも大変だから、なるべくWeb版＝レスポンシブ版にした方がよさそう。

  • こやなぎフラワーパークは基本margin30pxで作ってる。セクション間は90pt。
  • top画像…CSS：文字などを真ん中ぞろえに
  • top説明…width（がこの幅に達したら文字送り！）を設定する
  • ナビ…width（がこの幅に達したら文字送り！）を設定して縦書きにする

  • 画像は背景のみ使用、その上のテキストは必ず直打ち！IllustratorやPhotoshopで文字まですべて作ると、検索ヒットせずSEO対策にならない。
  • セクションごとにグループ化

新規作成方法

新規→カスタムサイズでW、H設定、作成。

アートボードツール→Alt＋ドラッグでアートボードコピーできる。orアートボードツール→タイトルクリックしてコピペ

右側の変形、カスタムサイズ（カンバス）大小できる。

レスポンシブ版もアートボードツール→右側から機種選択。

Photoshop→xdへ連動

ファイル→読み込み→ Photoshopファイルえらぶ。カスタムサイズに位置合わせて、上の名前クリックしてカンバス大小！

xdの書き出し

ファイル→書き出し→すべてのアートボード。書き出しサイズ1x＝原寸。（色々？）
で書き出し。

XDの機能

左上　デザイン：編集
　プロトタイプ：動きの設定
　　　　　共有：共有者の設定

デザインモードで、左下ひし形でレイヤー出せる。フォルダマーククリック！

  • クリッピングマスクは使えるが、普通のマスクは無い。
  • パスは書けるが、ダイレクト選択ツールは無い。
  • 基本たて書きは難しい。一応やり方はある。
    Photoshopで縦書きレイヤーをグループ化！→000.pngなど拡張子つけた名前に。→ファイル→生成→画像アセットで、テキストを画像として保存！→xdに読み込み。
  • 青い印…ビューポートがプレビュー範囲。みたい範囲で置いて、右上➤プレビュー。たまに確認する。
    クライアントにあげるのはプレビュー。

ファーストビュー

ページを開いた時最初に見える範囲。大画面で見るとは限らないので、幅1200px（カンバス外も含む）、高さ650pxを意識。ガイドやビューポートを置くと良い。

クリッピングマスクのやり方

図形を作る→その図形にJPEG.PING化した画像をドラッグ&ドロップ！
→画像が入る。ダブルクリックすると、バウンディングボックスが出るので、希望のところに動かす。
※田中先生の画像は、800 × 400だが、どんな画像サイズもきれいに入れてくれる。

リピートグリッド

同じ大きさ（幅・高さ）・位置の図形やテキストを作りたい
対象を選択して「リピートグリッド」！緑のフレームが出る。〇を押すと同じ大きさ・同じmarginでコピーができる。
はり込む画像ファイルを01.jpg、02.jpgとか連番にしておくと、シフト→図形にペーストで一気に貼り付け可能！！連番は必ず0をつける。

※テキストの場合は、terapad上の改行が連番になるが、テキストはあまり使わないほうがよい。しっかりあわせないといけなくなるから手間。