Adobe XDのリピートグリッドを使いこなすヒント

ビジュアルデザイナーにとって、複数のビジュアル要素の微調整を繰り返し、多くの時間を費やすのはよくあることです。それは、クライアントが個々の要素間を数ピクセル空けて欲しがったためかもしれませんし、アバター画像の角を円くしたいと指示されたからかもしれません。いずれにしても、自分のデザインに同じ微調整を繰り返し行う作業とは、何回も何回も向き合うことになります。

Adobe Experience Design CC (Beta)では、このデザインワークフローにおける「面倒さ」に対処するため、リピートグリッド機能を導入しました。この記事では、時間を節約するその真のパワーを深く掘り下げて説明します。リピートグリッドの作成と調整、コンテンツの追加、そしてプロトタイプモードでの関連付けを順に見ていきましょう。実際に試しながら読みたい場合は、Adobe XDを無償でダウンロードして利用できます。

__
Adobe XD ベータ版 for Mac
ダウンロード

リピートグリッドの作成と調整

リピートグリッドはグループの特殊なタイプです。リピートグリッドの作成は、通常のグループと同様に、選択したオブジェクトまたはグループから行います。 この記事では、画像と名前だけの簡単な連絡先リストを作成することにしましょう。

ステップ1： 基本オブジェクトの作成

まずは、リストの基本要素を作成します。

注：要素位置等の調整は後からできるので、この時点では適当な配置で構いません。

ステップ2： リピートグリッドの作成とサイズ変更

プロパティインスペクタ内のボタン、もしくはCmd+Rのショートカットキーで、選択したオブジェクトをリピートグリッドに変換します。
リピートグリッドになったグループには、右側に1つ、下に1つのハンドルがあり、周囲は緑色の点線で表示されたボックスで囲まれます。

01-repeat-grid

どのアイテムからでもリピートグリッドは作成できる

右側のハンドルを右にドラッグして、リピートグリッドを広げてみましょう。下のハンドルを下にドラッグすれば、リピートグリッドが下向きに展開されます。これらの操作によって、リピートグリッド内には要素が繰り返し配置されます。

任意のオブジェクトの組み合わせをリピートグリッドに変換可能です。何れかのオブジェクトにスタイルを適用した場合、全てのセル内の該当するオブジェクトにも同じくスタイルが適用されます。

ステップ3： リピートグリッド内の要素の調整

リピートグリッド内の要素を操作する方法は、普通のグループの場合と同様で、グリッドをダブルクリックします。修正が完了したら、Escキーを押して編集モードを終了できます。ただし、グリッド内の要素の選択には他の方法も利用可能です。例えば、レイヤーパネル（Cmd+Y）内で要素にドリルダウンしたり、直接選択（Cmd+Click）もできます。

02-repeat-grid

どのオブジェクトのどの属性を調整しても、リピートグリッド内のすべてのセルに適用される

ステップ4： リピートグリッドの行と列のパディングを調整

作成したリピートグリッドの行と列の間隔を調整してみましょう。要素の間にカーソルを移動すると、行と列を示す線が表示されて、自由に変更できるようになります。

03-repeat-grid

セルの隙間にマウスを移動すると、セル間のパディングを簡単に調整できる

リピートグリッドでデータを使用

連絡先リストのおおよその配置ができたので、コンテンツを中に埋め込みましょう。最も単純な方方は、要素をひとつひとつ更新することです。

ステップ1： 個々のテキスト要素を更新する

ステップ2： 画像の塗りつぶしパターンを作成

04-repeat-grid

リピートグリッドに上書きしてテキストを変更したり画像によるパターンを作成できる

テキストオブジェクトのコンテンツは個別に上書きできますが、スタイルは全ての関連するテキストオブジェクト間で共有されます。一方、自動的に塗りとしてマスクする機能では、画像の繰り返しがつくられます。例えば、3番目の矩形に画像をドラッグして3画像の繰り返しパターン、5番目の矩形に画像をドラッグして5画像のパターンを作成できます。

とはいえ、こういった作業は退屈になりがちです。代わりに、事前に用意しておいたコンテンツを使う方法を見てみましょう。

ステップ3： 複数行のテキストファイルをテキストオブジェクトにドラッグする

これで、テキストオブジェクトには、ファイル内の行数に応じたデータが繰り替えし適用されます。例えば、テキストファイルが4行だった場合、テキストオブジェクト4つごとに、ファイル内に記述されていたデータが1行ずつ順に配置されます。

ステップ4： 選択した画像ファイルを矩形にドラッグ

05-repeat-grid

1つずつ画像をドラッグしたときと同様に、オブジェクトの塗りの繰り返しパターンがつくられます。また、テキストと同様に、矩形へのスタイル変更は、リピートグリッド内の全ての対応する矩形に反映されます。

このように、リピートグリッドの変更は、個々のオブジェクトを編集するか、外部からデータをドラッグして行います。外部のデータはインポートされるため、XDファイル内に配置後に元データを変更しても、配置済みのデータにその変更は反映されません。

リピートグリッドに要素を追加する

連絡先リストの体裁がとりあえずできたところで、同僚やステークホルダーからのフィードバックを受けて、デザインの更新を続けましょう。その際、新たに要素を追加することになるかもしれません。リピートグリッドでは、どれか1つのセルに要素を追加するだけで目的を実現できます。

今回の例では、セルを区切るための水平線を追加してみます。

ステップ1： セル内に描画する

リピートグリッドを編集状態にすれば、新しい要素を後から追加できます。追加した要素も自動的に繰り返されるため、デザイン作業をこれまでにない柔軟さで行えます。

今回引いた線は他のセルに重なってしまいました。そのため、見た目がおかしくなっています。そこで、セル間の縦方向の隙間を広げてみましょう。このような時に、リピートグリッドは行と列のガターを再計算してくれています。もし重なりがあれば負の値が設定されているはずです。

ステップ2： 重なったセルを再調整する

06-repeat-grid

リピートグリッドのセルに要素を追加すると、追加した位置によってはセルの重なりが発生することがある

問題が解決したところで、予め作成しておいたアートワークを追加してみましょう。その際、リピートグリッド間での切り貼りができます。

ステップ3： リピートグリッドへのカット&ペースト

07-repeat-grid

リピートグリッドでオブジェクトを配置した後から、個々のオブジェクトに分けて扱いたくなる場合もあるでしょう。その場合は、リピートグリッドのグループを解除すれば、通常のオブジェクトとして扱えるようになります。

ステップ4： リピートグリッドのグループを解除し、必要な編集を行う

08-repeat-grid

SVGデータは編集可能なパスとしてインポートされます。リピートグリッドの要素として繰り返し配置し、グループ解除してから個々に調整することもできるのです。

リピートグリッドを使ったプロトタイプ

リピートグリッドのデザインができたら、プロトタイプモードに移って、他のアートボードとつなげてみましょう。Adboe XDでは、デザインモードとプロトタイプモードの間を簡単に行き来できます。そのためUIとインタラクションデザインを平行して進めることができます。

この記事では、リピートグリッドから他のアートボードへの遷移を定義する例として、3種類の異なるシナリオを紹介します。

シナリオ1： リピートグリッド全体から接続する

09-repeat-grid-1024x555

リピートグリッドから配線する

このシナリオで行った作業は、リピートグリッド全体をインタラクションを起動する領域として定義するというものです。

シナリオ2： リピートグリッド内のひとつの要素から接続する

10-repeat-grid-1024x555

リピートグリッド内の1つの要素から配線

このシナリオでは、リピートグリッド内の1つの要素をインタラクションのターゲットにしました。では、セル全体を選択対象にしたい場合はどうしたらよいでしょう？次はリピートグリッド内にグループを作成するシナリオです。

シナリオ3 ：リピートグリッド内に要素のグループを作成し、そのグループから接続する

11-repeat-grid-1024x555

リピートグリッド内にグループを作成し、それをインタラクションの対象領域として利用

以上のように、インタラクションのトリガーとなる領域は、リピートグリッド全体、リピートグリッド内の1つのオブジェクト、リピートグリッド内のオブジェクトのグループから作成できます。

最後に

この簡単なチュートリアルが、リピートグリッドの使い方を探るために役立つことを祈っています。 この単純で強力な機能は、ベータ版では非常に人気があり、ユーザーからのフィードバックと共に進化しています。 改善のアイデアがあるならば、コメントをお知らせください。

※ この記事は2016年11月17日に公開されたExploring Repeat Grid In Adobe XD（著者Elaine Chao）の抄訳です。