# CSS Nite in Kobe, vol.53「XDで作るワイヤーフレーム・プロトタイプとサイト制作時のコミュニケーション」に参加してきました

URL: https://webrandum.net/cssnite-kobe-53/
公開日: 2020-02-01
更新日: 2020-02-02
カテゴリー: セミナー・イベント
タグ: CSS Nite, XD
出典: Webrandum（著者: サイトウ マサカズ）

先日開催されたCSS Nite in Kobe vol.53「XDで作るワイヤーフレーム・プロトタイプとサイト制作時のコミュニケーション」に参加してきました。

自分は普段Sketchばかりを使っているのですが、以前と比べXDもバージョンアップを繰り返してかなりレベルの高いデザインツールになっていました。

## 今回の登壇者

今回の登壇者は[ツキアカリ](https://tsukiakari.design/)の松下絵梨さんです。

松下さんはCSS Nite in Osakaの主催や、Adobe XD ユーザーグループ大阪の主催もされている方です。

今回はXDを使ってワイヤーフレーム・プロトタイプの作成が目的で、XDで進行するウェブサイト制作フロー3回のうちの第1回目でした。

- [vol.53](http://cssnite-kobe.jp/vol53/)「XDでワイヤーフレーム・プロトタイプの作成」

- [vol.54](http://cssnite-kobe.jp/vol54/)「ワイヤーフレームをもとにXDでビジュアルデザインの作成」

- [vol.55](http://cssnite-kobe.jp/vol55/)「XDで作られたデータを元にコーディング」

## あらためてXDを触ってみて

あらためてXDを触ってみると、とにかく「ものすごく軽い」と感じます。

Sketchも使い始めた頃は軽いと思いましたし、いまでもIllustratorやPhotoshopに比べると断然軽いですが、アートボードが増えてくると重く感じます。

さらに今回のセミナーを機会に、他の機能も調べてみたところ「ドキュメント履歴」機能が追加されていたり、「共同編集」もベータ版ですができるようになっていたり、バージョン管理アプリの[Abstract](https://www.abstractapp.com/)にもいつの間にか対応していました（共同編集機能やドキュメント履歴機能のおかげで、そもそもAbstractが不要になりそうです）。

[![](https://www.google.com/s2/favicons?domain=www.abstract.com)Abstract![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/e58388f62f8eb26a587eddaa0ab6e0b90760d0ef3210807cabc3e54fedd865f5.webp)Abstract: Design Version Control, Collaboration, & Handoff for Teamshttps://www.abstract.comBring git-inspired version control & collaboration to your design team. Centralize design decisions, feedback, and files. Integrates with Sketch & Adobe XD.](https://www.abstract.com)

少し触っていないうちに機能がどんどん追加され、いつの間にか別のツールのようになっているXDに驚かされました。それに、ここまでいろんな機能を追加していながら動作の軽さも維持しているのはすごいことです。

## ワイヤーフレームの作成をラクにするポイント

- レイアウトグリッドの色は変えておく

- リピートグリッドを使って画像やテキストの流し込みをラクにする

- アセット機能をうまく利用する

### レイアウトグリッドの色は変えておく

［表示］→［レイアウトグリッドの表示（shift + command + '）］でアートボードにグリッドを表示できます。

デフォルトの状態だとこのレイアウトグリッドの水色が濃いので、右のグリッドパネルから色を薄くしておきます。

![レイアウトグリッドの色を変える](https://webrandum.net/mskz/wp-content/uploads/2020/02/image_1-1024x576.png)

他にも「列」「段間隔」や「列の幅」など細かく設定できるので、設定が必要な場合はパネルから設定しましょう。

設定が終わったら、グリッドパネルにある「初期設定にする」ボタンを押しておくと、アートボードを追加したときも同じ設定を使い回せます。

### リピートグリッドを使って画像やテキストの流し込みをラクにする

XDの特徴でもあるリピートグリッド（command + R）は、同じ要素が繰り返される場合は必ず使った方がよさそうです。

要素ごとにマージンがバラバラになる可能性がなくなりますし、あとからテキストや画像をドラッグすれば一気に設定できるのでかなりラクになります。

![AdobeXDのリピードグリッド機能](https://webrandum.net/mskz/wp-content/uploads/2020/02/image_2-1-1024x652.png)

### アセット機能をうまく利用する

［表示］→［アセット（shift + command + Y）］でアセットの表示ができます。

アセットには「カラー」「文字スタイル」「コンポーネント」の3種類があり、それぞれ要素を選択した状態で「＋」アイコンをクリックして追加します。

![Adobe XDのアセット機能](https://webrandum.net/mskz/wp-content/uploads/2020/02/image_3-1.png)

使いたいときは要素を選択した状態で使いたいアセットをクリックしたり、コンポーネントの場合はドラッグアンドドロップでも追加できます。

カラーや文字スタイルをきちんと管理しながら制作を進めることで、余計なスタイルができないようにできますし、コンポーネントを使えば共通パーツの管理ができます。

また、この「コンポーネント」はSketchのシンボルと同様の「オーバーライド機能」があり、ベースとなる親コンポーネントの色やテキストを変えた子コンポーネントが作れます。

使い勝手もすごく良くて、手軽さで言えば完全にSketchを超えていて驚きました。

## まとめ

ワイヤーフレームの段階からアセット機能を使っておくと、ワイヤーフレームからビジュアルデザインを作っていくときにラクになりますし、スタイルを整理しながら制作できるので作っていて気持ちがいいです。

本当に最初のワイヤーフレームからビジュアルデザインまでXDで完結できそうですし、コーディングをするときもスタイルが整理されてコンポーネント化まである程度されていると、やりやすさが全然違います。

1年2年経つといつの間にか別ツールのようになるんだなと、改めて驚きました。