# CSS Nite in Kobe, vol.54「XDで作ったワイヤーフレームを元に制作するウェブビジュアルデザインと精度の高いプロトタイプをコーダーに渡すときのポイントのセミハンズオン」に参加してきました

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

先日開催されたCSS Nite in Kobe vol.54「XDで作ったワイヤーフレームを元に制作するウェブビジュアルデザインと精度の高いプロトタイプをコーダーに渡すときのポイントのセミハンズオン」に参加してきました。

vol.53の続きで、前回作成したワイヤーフレームからビジュアルデザインをどのように行っていくのかと、コーダーにデータを渡す上でのポイントを学びました。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2020/02/eyecatch-1.jpg)CSS Nite in Kobe, vol.53「XDで作るワイヤーフレーム・プロトタイプとサイト制作...https://webrandum.net/cssnite-kobe-53先日開催されたCSS Nite in Kobe vol.53「XDで作るワイヤーフレーム・プロトタイプとサイト制作時のコミュニケーション」に参加してきました。自分は普段Sketchばかりを使っているのですが、以前と比べXDもバージョンアップを繰り返してかなりレベルの高いデザインツールになっていました。今回の登壇者今回の登壇者はツキアカリの松下絵梨さんです。松下さんはCSS Nite in Osakaの主催や、Adobe XD ユーザーグループ大阪の主催もされている方です。今回はXDを使ってワイヤーフレーム・プロトタイプの作成が目的で、XDで進行するウェブ...](https://webrandum.net/cssnite-kobe-53)

## 今回の登壇者

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

今回はXDを使ってビジュアルデザインと、その後のコーダーへの受け渡しが目的で、XDで進行するウェブサイト制作フロー3回のうちの第2回目でした。

- [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のカンバスでハイライト](https://webrandum.net/mskz/wp-content/uploads/2020/02/image_1-28.png)

コンポーネント機能も、マスターコンポーネントさえちゃんと管理しておけば意図しない変更がすべてのインスタンスに反映されることもありませんし、インスタンスの編集は直感的でかなり優秀です。

## リサイズ時に表示がおかしくなる場合の対処

XDを使っていると、たまにリサイズ時におかしな表示になるときがあります。

そういうときは右サイドバーの「レイアウト」にある「レスポンシブサイズを変更」をオフにすると解決することが多いです。

![レスポンシブサイズを変更](https://webrandum.net/mskz/wp-content/uploads/2020/02/image_2-26.png)

この機能はレスポンシブに対応したデザインを作成するために、要素を柔軟にリサイズしてくれる設定なのですが、それがお節介する場合があるみたいです。

このあたりの機能もちゃんと使いこなせれば、PC・タブレット・スマホのデザインを作るスピードもかなり上がりそうです。

## XDでこうなって欲しいと思ったポイント

実務のことを考えると、「こうなって欲しいな」と思うポイントも見えてきました。

### リピートグリッド内の一部だけを変更する

リピートグリッドは画像の変更やテキストの変更はできますが、一部だけ図形を追加したり装飾を変えたりができません。

具体的には下記のようなケースです。

- 並んでいるメニューの「お問い合わせ」にだけメールアイコンを付けたい

- ブログ記事一覧の最新のボックスには「NEW」という装飾を付けたい

リピートグリッドの上からアイコンや装飾を合わせれば、見た目上は変わったように見えます。しかし応急処置感が出てなんだか気持ち悪いです。

（解決策があればぜひ教えてください）

### キーボードでの操作を増やしてほしい

XDは誰でも使えるようにドラッグアンドドロップの操作が多く、それ自体は初心者の方も使いやすくて良いのですが、業務で本格的に使おうとすると腕が疲れてしまいそうです。

しかも、何か値を変えるときは右パネルへ移動し、アセットを使うときは左パネル…と画面上を上下左右あちこち回りながら操作する必要があります。

もっとキーボードを使った操作もできるようにしてもらえると、1日中使っても腕に負担をかけずに操作できそうです。