Adobe XDのリピートグリッドを活用する8つのレシピ
こんにちは。ネットパイロティング株式会社でUIデザイナーをしている湯口です。2016年3月にAdobe Experience Design CC(以下Adobe XD)を使いはじめて以来、Adobe XDを使ってワイヤーフレームを書いたりデザインを行っています。
本記事は、2017/2/7(火)に行った勉強会「Adobe XD Meeting #03」で発表した「リピートグリッドであそぼう」の内容をCreative Station向けに再構成したものです。https://blog.adobe.com/media_db5531d0497a06ca85273563ad992e8fd9ab7854.gif以前から「三分で作るカレンダー」など、レイアウトだけでなくUI自体にリピートグリッドを使う方法を模索していましたが、今回は、いままで蓄積してきたリピートグリッドにまつわるチップスを8つのレシピにまとめて紹介したいと思います。
レシピの紹介に使用している.xdファイル及びテキストファイルをZIPファイルadobe-xd-repeat-grid-7-recipesとして用意しました。ダウンロードの上記事を読んでいただくとよりわかりやすいと思います。
レシピ1：塗りつぶしパターン
Adobe XDには長方形などのシェイプをパターンで塗りつぶす機能がありません。HTMLでは、背景に画像の繰り返しを指定することがありますが、Adobe XDでそれを再現するならリピートグリッドが使えます。まずはパターンをリピートグリッドとしてつくったら、グループ化しておきましょう。
リピートグリッドをグループ化して変わる操作感
リピートグリッドの大きさは、ハンドルを用いて下方向または右方向に伸ばして変更します。この場合、幅と高さを一気に変更することはできません。リピートグリッドを単独でグループ化すれば、シェイプと同様に角をドラッグしてどんな方向にも大きさを変えられるようになります。
ハンドルを使わずにリピートグリッドの大きさを変えるには、プロパティインスペクタを利用したりShiftキーを押しながらキー操作する方方もありますが、これらはあまり直感的な操作とは言えません。背景塗りつぶしのような用途にはグループ化がお勧めです。
レシピ2：パンくずリスト
リピートグリッドでパンくずリストをつくってみましょう。このレシピで作ったパンくずリストは、リピートグリッドだけでできているので、テキストデータをドラッグ＆ドロップするだけで各階層の名称を変更できます。
- 区切り記号とテキストを選択してリピートグリッドにします
- リピートグリッドの要素をダブルクリックして編集状態にします
- 編集＞すべて選択で要素全体を選んだら、区切り記号が見えなくなるまで左に動かします
- 必要な分の階層が表示されるようリピートグリッドを変更します
リピートグリッドの幅と高さは、繰り返される要素の数に影響を与えるだけでなく、内部の要素に対するマスクのような役割を果たしています。このおかげで、パンくずリストのように最初の要素だけスタイルが違う（先頭の区切り文字が表示されない）UIのデザインを行うことができます。
レシピ3：奇数行・偶数行で色の違う表
勉強会でよく紹介しているのですが、奇数行と偶数行で色が違うテーブルやリストは、UIとして人気の高い表現です。これをリピートグリットを使って実現してみましょう。
- 背景にする長方形を2つ並べて描き、それぞれ別の色に塗ります
- 2つの長方形を選択し、リピートグリッドに変換します
- 隣に複数行テキストを作成し、リピートグリッドに変換します
- 背景のリピートグリットとテキストのリピートグリッドの左上が一致するよう整列します
- テキストが長方形内の適切な位置にくるよう、テキストのリピートグリッドを編集します
- 2つのリピートグリッドの大きさを揃えます
//www.youtube.com/embed/PvGZ0PFoJnQ
動画の1分過ぎのあたりで実行していますが、この2つのリピートグリッドをグループ化しておけば、背景とテキストをまとめてテーブルのサイズ変更ができて、便利に使えます。
レシピ4：上に、左に伸ばせるリピートグリッド
リピートグリッドの要素は下方向と右方向に増減する仕様なので、要素は常に左上を基準に配置されています。しかし、このレシピで作れば、右下を基準に、上方向と左方向に伸ばせる、リピートグリッドができあがります。
- 繰り返したいオブジェクトやグループを選択します
- リピートグリッドにします
- リピートグリッドを180度回転します
- リピートグリッドの要素をダブルクリックして編集状態にして、全て選択した状態で180度回転します
この性質はリピートグリッドというよりオブジェクトの性質を活かしたものなので、他のことにも応用できます。例えば、シェイプを180度回転してフッター背景にすれば、プロパティインスペクタで高さを調整してもページの下端からずれません。
オブジェクトの回転を意識して使う
レシピ5：重なりのあるカード型UI
マージン調整は、レイアウトに適度な間隔を与えるために使われる機能ですが、間隔を極端に詰めたり広げたりすると一風変わった使い方ができます。マージンをマイナスにすると、重なりのあるカード型UIをつくれます。
- カード型UIに使う要素を用意して、グループにします
- グループを選択し、リピートグリッドにします
- カードが複数表示されるようにリピートグリッドの高さを調整します。例では3枚のカードが表示できる高さにしています
- 要素のマージンがマイナスの値をとるようにドラッグします
カードが重なり合ったとき、調整前から表示されていたカードより後のカードは表示されません。そのため、最後のカードは重なりが無いように見えますが、幅や高さを変更すると新しい大きさに見合った数の要素が生成されて最後の要素にもマージンが適用された状態になります。
レシピ6：ページネーションのUI
記事リストの上下にページ移動のためのUIを配置するのは良くあるパターンです。マージンを大きく広げると、効率良くページネーションのUIをつくることができます。
- 記事リストのリピートグリッドの上下に余白を作ります
- 上の余白にページ番号のリピートグリッドを作成します
- ページ番号の左右に、前後へのページ送りのテキストを配置します
- ページ番号のリピートグリッドと前後へのページ送りを選択して、リピートグリッドにします
- リピートグリッドを下に広げて2行表示されるようにします
- 行間のマージンを広げて、記事リストの下に2行目が来るまで移動します
このレシピだと、選択中のページを示すため番号を1つ色替えしたとき、上下のUI両方に反映されます。個別に修正する手間が無く便利です。
重なりのあるカードUIやページネーションのUIような使い方ができるのは、リピートグリッドに次のような性質があるためです。これらの性質を覚えておくと、より自由にリピートグリッドを扱えるようになります。
- 生成された順にレイヤーが重なります
- マージンを変更してもリピートグリッド内のアイテム数は増減しません
- マージンを変更すると、自動的にリピートグリッドの幅・高さが新しいマージンに追随して変更されます
- リピートグリッドのマージンは、リピートグリッドを選択したときだけ認識されます
レシピ7：シェイプと合成してグラフィックパーツ
リピートグリッドは、矩形や楕円、パスで書くシェイプと同じ性質がもあります。そのためリピートグリッドとシェイプを合成したり切抜いたりできます。
- リピートグリッドとシェイプを用意します
- シェイプとリピートグリッドが重なるよう位置を整えます
- プロパティインスペクタのパスの合成アイコンをクリックします
//www.youtube.com/embed/w_ZnOttPbdc
アイコンやイラストなどのグラフィックパーツを作るときに応用しやすいレシピです。Adobe XDでは、シェイプの合成を行うとき下にあるシェイプのスタイルが採用されるので、イメージするスタイルを持つシェイプを下にしておくとイメージ通りの合成になりやすい傾向があります。
レシピ8：アイコンフォントでつくるメニュー
最近はワイヤーフレームの工程でも、FontAwesomeのようなアイコンフォントを使って、よりブラウザの表示に近い状態を表現することがよくありますが、リピートグリッドはアイコンフォントの活用も簡単です。
テキストエディタでアイコンフォントのリストを作成して、リピートグリッドに流し込みたいので、まずは、FontAwesomeフォントを使える環境を用意します。ここではBracketsを使う場合を示します。必要な作業は、以下の2点です。
- FontAwesomeのOTFフォントが入っていることを確認する
- BracketsでFontAwesomeのアイコンがアイコンとして表示されるようにしておく。
FontAwesomeのOTFフォントは、FontAwesomeをダウンロードすると一緒に取得できます。
http://fontawesome.io/
BracketsでFontAwesomeフォントを表示する設定は、以下の通りです。
- Bracketsのメニューで環境設定を開きます
-
- Mac：「Brackets＞環境設定」を選択します
- Windows：「デバッグ＞環境設定ファイルを開く」を選択します
- “fonts.fontFamily”の「, monospace」の前に「, FontAwesome」を追加します
{
"fonts.fontSize": "12px",
"fonts.fontFamily": "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', FontAwesome, monospace"
}
これでエディタ内にFontAwesomeフォントが表示されるようになります。
フォントファミリーにFontAwesomeを指定した状態のBrackets
それでは、テキストファイルとして用意したアイコンフォントをリピートグリッドに流し込んでみましょう。
- テキストを作成しフォントファミリーをFontAwesomeにします
- 作成したテキストを選択しリピートグリッドにします
- メニューで使うアイコンをFontAwesomeのチートシートからテキストファイルにコピー＆ペーストします
- 必要なアイコンを揃えたら、アイコンごとに改行しておきます
- テキストファイルを適当な名前で保存します
- リピートグリッドのテキストに保存したファイルをドラッグ＆ドロップします
//www.youtube.com/embed/V6ERIEe29IQ
このレシピなら、メニュー項目の追加や修正も簡単です。
最後に
今回紹介したレシピは特殊な使い方ばかりかもしれませんが、リピートグリッドはもともと多彩な使い方が想定されていたもののようです。Adobe MAX 2016で参加したセッションで知ったのですが、リピートグリッドの原型は、リスト表示に特化したグリッドスタイルだけでなく、円形にオブジェクトが繰り返される描画ツールも検討されてたそうです。
このセッションは今もAdobe MAX 2016 の動画で確認できますので、興味のある方はぜひ「Behind the Scenes of Designing Adobe XD」の21:20〜22:35をご覧ください。この円形の繰り返しツールは用途は違っても十分魅力的です。Adobe XDもしくはIllustratorに導入されたりしたら楽しい機能になると思うのですが、いつか実装されたりしないのでしょうか。
リピートグリッドは、リスト表示のレイアウトだけでなく、いろんなUIやグラフィック作成にも利用できます。Adobe XDを使ったデザインの幅が広がりますので、ぜひ普段とちょっと視点を変えた使い方をお試しください。