皆さんこんにちは！ディレクターの尾崎です！
イッパイアッテナでは私たちディレクターがWEBサイトの設計図である「ワイヤーフレーム」を作成します。
その中で、必ずと言っていいほど登場する「表」。
今回はXDで、後から色々な要素が変更になっても対応できる「表」を作成していこうと思います！

今回作る表の説明

これから作る表は、
①（テキストの）高さの自動調整　②パディング　③コンポーネント　④スタック
という4つの機能を組み合わせて、下記のような変更を後からでもすることができます。

• テキストの文字量・行数を変える（使用機能：高さの自動調整、パディング、縦スタック）
• 行を入れ替える（使用機能：縦スタック）
• 行を追加する（使用機能：縦スタック）
• 表の横幅を変える（使用機能：高さの自動調整、パッディング、横スタック、コンポーネント）
• 表の色を変える（使用機能：コンポーネント）

実際上記の変更を加えている動画をお見せします！

色々な変更ができるようにしてあるのですが、慣れてきたら自分は絶対に使わないという変更機能は消してしまっても問題ありません。

それでは早速作っていきましょう！

実際の表の作成方法

1.ボックスとテキスト2セット作成し、それぞれの文字サイズ・色などを適当に整える。ボックスとテキストを1セットずつ重ねて、テキストを「高さの自動調整」にしてから、テキストの横幅をおおよその列幅に伸ばす。

※この時テキストボックスがボックスからはみ出ないようにしてください

2.項目名とボックス、本文とボックスをそれぞれグループ化し、パディングを設定する

3.項目名グループと本文グループをまとめて1つのグループにし、横スタックを設定してからコンポーネント化する。

4.コンポーネントをコピーし、それらをグループ化してから縦スタックを設定する

以上の4つの工程で最初にお見せしたような、後から色々な変更ができるような表ができます。

【補足】
※表の全体に共通して変更を加えたい時は、親コンポーネントを編集してください
※親コンポーネントをいじると子コンポーネント等にも変更が加わってしまうので、表から親コンポーネントを一度消して、色や横幅など全体に変更を加えたい時は　右クリック>メインコンポーネントを編集　で都度メインコンポーネントを呼び出し編集する方が使いやすい場合があります。
※また、この表を複数の場所に使う時は、一度1行に戻してコンポーネントを解除し、3の工程から再度やり直すことをお勧めします。複数の場所にコンポーネントを使用すると意図しない変更が加わってしまうことがあります。

さいごに

いかがでしたでしょうか？
今回は自分の中で一番使いやすいと思っているXDの表の作り方をご紹介いたしました！
この一手間で私は何度も救われています。
ぜひ活用してみてください！