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

BY 公開

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

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

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

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

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

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

  • ようこそ画面で、使用するアートボードの種類を選択して新規にアートボードを作成
  • 矩形ツール(R)を使用してアートボード上に矩形を描画
  • 矩形の右側に、テキストツール(T)を使用して、適当な一行テキストを入力
  • 選択ツール(V)を使用して両方のオブジェクトを選択 (両方のオブジェクトをボックスで囲む、または1つのオブジェクトを選択してからShiftキーを押しながら他のオブジェクトを選択)

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

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

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

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

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

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

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

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

  • 選択ツール(V)を使用し、リピートグリッド内の任意の矩形をダブルクリック。編集中のセルの周りに明るい青色のボックスが表示されるのを確認したら、テキストを選択して矩形に揃う位置にドラッグする
  • テキストオブジェクトをクリックし、プロパティインスペクタで書体とサイズを変更。すべてのテキストオブジェクトで同じスタイルが共有される
  • エスケープを押して編集モードを終了し、全体の配置を見ながらリピートグリッドを移動
02-repeat-grid
どのオブジェクトのどの属性を調整しても、リピートグリッド内のすべてのセルに適用される

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

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

  • カーソルを、テキスト要素の右側と矩形の左側との間に置き、ピンク色の列インジケータが表示されたら、ガターの右端をドラッグして30に設定
  • カーソルを矩形の間に置いて、ピンク色の行インジケータが表示されたら、ガターの下側をドラッグして30に設定
  • セルの間隔とリピートグリッドの大きさを調整し、必要な数の要素をアートボード上に表示する
03-repeat-grid
セルの隙間にマウスを移動すると、セル間のパディングを簡単に調整できる

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

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

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

  • Cmd+クリックでリピートグリッド内のテキスト要素を選択し、編集モードに入る
  • テキスト要素をダブルクリックし、文字列を適当な名前に変更。テキスト要素へのスタイル変更は全てのテキスト要素に反映されるが、文字列の変更は他のテキスト要素に影響しない

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

  • 画像を左上の矩形にドラッグする。矩形の塗りとして適用され、自動的に大きさが矩形に収まるように調整される
  • 2つ目の画像を隣の矩形にドラッグする(リピートグリッド内の順序は、左から右、次いで上から下)。2つの画像が交互に表示される状態になる
  • 3つ目の画像を4番目の矩形にドラッグする。4つの矩形ごとに画像が繰り返されるパターン(1番目と3番目は同じ画像)になる
  • 4つ目の画像を最初の矩形にドラッグする。4種類の画像が繰り返される状態になる
04-repeat-grid
リピートグリッドに上書きしてテキストを変更したり画像によるパターンを作成できる

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

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

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

  • テキストファイルを作成し、一行ずつデータを入力して、改行で区切られた複数行のデータを作成、拡張子.txtのファイルとして保存
  • 保存したファイルを、OSのフォルダーから、リピートグリッド内のテキストオブジェクトにドラッグし、データをまとめてインポート

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

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

  • 画像ファイルを含むフォルダを開き、いくつかの画像を選択
  • 選択した画像を、リピートグリッドの矩形にドラッグし、矩形の塗りとしてインポート
  • 矩形を選択し、半径コントロールの1つをドラッグして角の半径を変更。すべての矩形にスタイル変更が反映されることを確認

05-repeat-grid

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

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

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

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

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

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

  • Repeat Gridを編集状態にする
  • 線ツール(L)を選択し、Shiftキーを押しながらドラッグして、セルの下に水平線を描画する
  • 選択ツールを使用して、線の位置を矩形の左に揃える
  • Escキーを押して、編集モードを終了

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

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

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

  • 重なった場所にカーソルを移動したら、矩形の上または下のいずれかをつかみ、少し隙間ができる位置まで引っ張る
06-repeat-grid
リピートグリッドのセルに要素を追加すると、追加した位置によってはセルの重なりが発生することがある

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

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

  • 星形が書かれたSVGファイルを、現在編集中のアートボードとは別のアートボードにドラッグ。SVGデータをプロジェクトにインポート
  • インポートされたパスをリピートグリッドに変換、合計4つの星になるまで右ハンドルを右にドラッグ。 星同士が近づくように間隔を調整
  • 星のリピートグリッドをカット(Cmd+X)し、連絡先リストの任意のセルをダブルクリックして編集状態にする
  • ペースト(Cmd+V)して星のリピートグリッドをセル内に貼り付けたら、テキストの下に星の位置を移動

07-repeat-grid

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

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

  • 星のリピートグリッドをクリックして選択
  • プロパティインスペクタの「グループ解除」ボタンを選択し、コンテキストメニューから「グリッドのグループ化解除」を選択
  • 星を2つ選択し、塗りのチェックを外す

08-repeat-grid

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

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

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

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

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

  • アートボードツール(A)を使用し、既存のアートボードの右側をクリックして、隣に2つ目のアートボードを作成し
  • プロトタイプモードに切り替える(アプリケーションフレーム上部にあるタブをクリック、またはショートカットキー(Cmd+Tab)を使用)
  • リピートグリッドを選択し、その右側中央に矢印の付いたコネクタを表示させる
  • コネクタを隣のアートボードにドラッグし、表示されるポップアップから遷移時のオプションを選択。Escキーを押すか、外側をクリックしてポップアップを閉じる
  • アプリケーションフレームの右上隅にある再生ボタン、またはショートカットキー(Cmd+Enter)を押してプレビュー画面を起動、リピートグリッドの任意の箇所をクリックしてインタラクションを確認
09-repeat-grid-1024x555
リピートグリッドから配線する

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

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

  • ショートカットキー(Cmd+Z)を押して、隣のアートボードと接続前の状態に戻す
  • Cmd+クリックで、リピートグリッド内の矩形を直接選択する
  • 矩形のの右側のコネクタをドラッグし、2番目のアートボードに接続。ポップアップから遷移オプションを選択して閉じる
  • プレビューウィンドウを表示して、インタラクションを設定した矩形をクリック
10-repeat-grid-1024x555
リピートグリッド内の1つの要素から配線

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

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

  • ショートカットキー(Cmd+Z)を押して、隣のアートボードと接続前の状態に戻す
  • デザインモードに戻る
  • Cmd+クリックで、リピートグリッド内の矩形を選択、横のテキストオブジェクトをShiftキーを押しながらクリックして選択範囲に追加
  • コンテキストメニューまたはショートカットキー(Cmd+G)を使用して、2つのオブジェクトをグループ化
  • プロトタイピングモードに戻る。選択箇所がデザインモードのままであることを確認
  • グループからコネクタを隣のアートボードにドラッグ
11-repeat-grid-1024x555
リピートグリッド内にグループを作成し、それをインタラクションの対象領域として利用

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

最後に

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


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

  TAGS

  AUTHOR

akihiro kamijo

アドビのコンサルティングチームでリードアーキテクトとして主にUIデザインプロジェクトに関わる。現在は独立してデザイン/開発に関連のマーケティング企画や情報発信、プロジェクト支援を行っている。