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