6月7日に、3回目のXd講座を行いました。この講座は事前にスライド資料を作成し、その画面に沿ったお話をさせていただいているのですが、実は回数を重ねるたびに自分でも思わぬ「気づき」があり、お話をさせていただいているうちに、私自身にも予想しなかった思わぬスイッチが入ってしまい、どんどん掘り下げて話をしてしまうことが多いです。
もちろん、それは当初お話するプロセスから脱線するのではなく、改めてXdというツールの奥の深さを実感し、どんどん話が専門的になっていくのです。なんだか、セミナーや講座を行うというよりは自分自身「ライブ」な感じがとっても気に入っています。おそらく初回にお話したXd講座に比べて現在の内容は、かなり「濃い」ものになっているような気がします（当社比w）
その講座の内容の変遷を、ここでざぶっとお話するとXdがウェブ制作というフローの中で、画面設計の際に軸になっているツールであることを実感します。およそ画面設計の中では、「ワイヤーフレーム / プロトタイプ / モックアップ」というプロセスがあると思うのですが、その場面で全てXdを採用することによって、最初から最後まで同じツールが一気通貫でプロセスを管理できることは大きなメリットがあると思います。
ワイヤーフレーム設計時におけるXd
ワイヤーフレームというのは、情報設計という工程の中に含まれる成果物です。一般的に情報設計はサイトに掲載する情報を抽出したり、それをグルーピングしたり、ラベル（情報の名称）を付与したり、さらには複数のページによって構成されるウェブサイトの形にしたり（ハイレベルストラクチャ）、さらに利用者のサイト内遷移を考慮したナビゲーションなどを設計する「構造設計」という工程があります。
その構造設計を基に、具体的に利用者が画面と向かい合うときに、情報の要素を整理し配置することを「画面設計」と言います。その画面設計時に「情報の要素」をもれなく記載し、簡単な骨組み状態で要素の確認を行うドキュメントをワイヤーフレームと呼び、この作業は情報設計の専門家であるIA（インフォメーションアーキテクト）や、ウェブディレクターが担当することが多いです。
これまでの制作会社ではワイヤーは、Adobe IllustratorやMicrosoft PowerPointなどを使って、クライアント（事業者や代理店）と確認することが多いのですが、私はこの段階からXdを投入することを推奨しています。その理由としては、ワイヤーを制作する担当者がデザイナーでない場合は、Illustratorの操作は難易度が高い。それに比べてXdはPowerPoint感覚で操作できる。ということが挙げられますが、もう一点は、IllustratorやPowerPointで作成したドキュメントは、どうしてもA4縦位置で作ってしまうことが多く、それに比べてXdは実際のブラウザの画面比率で制作ができるということです（スマホ画面は言うに及ばずw）。
そのメリットとしては、A4縦位置で作成したドキュメントより、最終成果物であるブラウザやスマホ画面で制作したドキュメントの方が、クライアントは「見る気になって」ちゃんとチェックしてくるということが挙げられます（笑）。初動の段階で、きちんと見てもらえず、最後に「ちゃぶ台返し」を食らう確率が随分減ると思うのです（当社比w）。
プロトタイプ作成時におけるXd
ウェブの制作工程で、ワイヤーフレームでクライアント合意が取れれば「プロトタイプ」という工程に突入します。これはユーザーインタフェースを細部まで決め込み、さらにページの遷移や利用者の画面操作（インタラクション）までも視野に入れて吟味しなくてはならない工程で、ウェブの画面設計で最も重要な工程であり、かつ制作者と事業者（クライアント）が密接にコミュニケーションし、慎重にに時間をかけて吟味する工程で、まさにXdの真骨頂です。
※プロトタイピング工程でのXd活用は、また詳しく詳しく解説しますので暫くお待ちください。
モックアップ作成としてのXd
サイトやモバイルアプリの利用者の体験を想定したプロトタイピング工程が終了すると、いよいよ実装に向けての段階としてのモックアップ制作に入ります。モックアップというのは実装の最終形態であるブラウザやスマホ表示と同じ画面を作成する工程で、これまでは（現在も）Adobe Photoshopを使用することが多く、画面内に配置されている要素（見出しやパラグラフなど）の大きさやマージン値を正確に作成します。テキストに関しても同様で、実際のブラウザで表示されるフォントやウェイト、行間なども正確に設定したものとなります。
1ピクセルのズレもなく正確にレイアウトされたモックアップは、マークアップエンジニア（コーダー）が、PSDファイルをスライスして画像を書き出し、配置されているテキストのサイズや行間を読み取って実装を行います。
現在でも、この工程をPhotoshopで行う作業チームであれば問題はありませんが、ワイヤーやプロトタイプという工程をXdで管理しているのであれば、実装にむけてのモックアップもXdが担うことは問題ありません。
今回、Xd講座をお話して思ったことは、この部分なのです。もしモックアップもXdが担うのであれば、プロトタイプの段階で正確なマージン値を用いたり、配置するテキストもサイズや行間も実装を前提とすべきでしょう。例えばあるパラグラフをブロックレベルで表現するのであれば、背景色やボーダーの設定もCSSを理解して行うべきではないかと思うわけです。
さらに画像の書き出しについても、Xdの「バッチ」を利用することで、SVGを含めた各種画像フォーマットで出力（スライス）できることも大きな魅力です。
そんなわけで、私自身Xdの解説を講座で行うことが自分自身の気づきとなり、より効果的にXdを使いこなせるのではないかと思っています。
