2016年6月20日にAdobe初のプロトタイピングおよびデザインツールであるAdobe Experience Design（以下 Adobe XD）に待望の日本語UIが登場しました。同年3月の登場以来、リピートグリッドで繰り返し要素が簡単に作れることと、大量のアートボードを扱っても不便を感じない軽快な動作で一部の話題になっていましたが、UIやドキュメントが日本語化されて今こそ試してみようという方も多いのではないでしょうか？
今回は、リピートグリッドをもっと便利にする「テキストファイルをドラッグ」機能を紹介します。
リピートグリッドをもっと便利に
リピートグリッドは選択した要素をまとめて繰り返し表示させる機能で、横方向にも縦方向にも自由に数を増やすことができます。Finderから画像を選択してドラッグすれば画像がそこのフィットした大きさで挿入されますし、テキストは自由に手で書き換えることができます。人気のあるカード型レイアウトにとてもフィットした機能です。
リピートグリッドにも弱点がある
普通に使っていて大変便利で面白いリピートグリッドですが、これにも幾つか弱点があります。
例えば単純なリピートグリッドでもう少し見てみましょう。注目したいのは、リピートグリッドの領域を広げた時と縮めた時のテキストの変化です。
リピートグリッドは広げる方向でコピーソースが決まる
リピートグリッドは領域を右に広げた時は一番右の列を、下に向かって広げた時は一番下の行を複製してくれます。ただ、縮めた時にテキストが保持されていないことに気がついたでしょうか？リピートグリッドでは領域が広がった時にその瞬間のソースでデータが作られ、縮めてた時にすべて捨てられています。
リピートグリッドのほとんどない弱点の一つは、レイアウトを縦並びから横並びに変えたいとなったときに、文字を打ち直さなければいけないことでした。プロトタイピングなどで試行している時にデザインとは無関係な作業で時間がかかってしまうのはもったいないことです。
テキストファイルのドラッグで解決
Adobe XDを紹介する動画やヘルプにさらっと掲載されていますが、4月のアップデートで導入された「リピートグリッドにテキストファイルをドラッグ」する機能があります。これはテキストを一瞬で変えてくれるものと認識されやすいですが、実はリピートグリッドの弱点も一つ解決してくれます。
実際に単純な要素を準備して実際の動きを見てみましょう。
テキストデータを挿入した場合領域を変化させてもデータソースは消えない
リピートグリッドの領域を右に広げても下に広げても一定のルールでテキストが削除されず並び替えできるのがわかります。
この機能のもう一つの良い所は、準備するのは「挿入したいテキストを改行してで並べただけ」のテキストファイルということです。JSONやXMLに比べると複雑なデータをまとめて挿入することはできませんが、3つの魅力があります。
- 誰でも簡単にデータを準備できる
- 挿入位置の設定がシンプルでわかりやすい
- 「1〜10くらいまでの数字」、「人名」、「住所」など準備さえしておけば組み合わせて使える
リピートグリッドにテキストをドラッグ機能を使えば、Adobe XD上でテキストを手打ちする手間が省け、レイアウト変更に強いデザインができます。これは、プロトタイピングやデザインに集中するためにとても有効な機能です。
リピートグリッドでUIを作ると非常に便利
カード型レイアウトだけでない、リピートグリッドとテキストを組み合わせた例としてカレンダー作成を紹介します。この動画では2016年6月20日版からの機能を使用していますので、同じことを試す場合には最新版のAdobe XD（preview）をインストールしてください。
▶ カレンダーのxdファイルとテキストファイルをダウンロードする
このように作っておけばドラッグするファイルを変えれば何月のカレンダーでも簡単に作れるので、いろんな条件でデザインを確認することができます。
最後に
リピートグリッドにテキストをドラッグ機能はAdobe XDの初出時（project comet）から英語版の公式ブログで紹介されていたリアルデータをつかったデザインの一部です。そのブログでは他には検討中のものとして、データ挿入パネルからの挿入、Google docsのスプレッドシートからの挿入や、ウェブサイトからの挿入が紹介されています。それらが今後提供されるかどうかはわかりませんが、毎月便利で実用的になっていくAdobe XDから目が離せない状態は続きそうです。
Adobe では、引き続きAdobe XDに対するフィードバックをuservoiceで募集中とのこと。ぜひ、興味を持った機能へのvote、そして欲しい機能のリクエストをしてみてはいかがでしょうか？ 著者は、PSDファイルエクスポートを全力で応援しています。（よかったらvoteを！）
