こんにちは、デザイナーのMHです。
引き続き、Adobe XDの絶対に覚えておきたい機能について解説していきます。
今回は「リピートグリッドへの画像とテキストの流し込み」です。
お恥ずかしながら失敗例とその改善策も記載しておきますので、参考にしていただければ幸いです。
Adobe XDのリピートグリッドに画像を流し込む方法
まずリピートグリッド機能を使って画像とテキストを流し込むフォーマットを作成します。（テキストの流し込みについては後ほどご説明します）
リピートグリッドの使い方については以下の記事で詳細に解説していますので、まだの方はどうぞ。
>>Adobe XDではリピードグリッドを活用しよう【絶対に覚えておきたいXD】
さて、フォーマットですがこんな感じです。
続いて、流し込む画像をまとめて用意します。
それらをまとめてドラッグ、埋め込みたいオブジェクトの上にドロップすることで、グリッドのオブジェクト全てに画像が自動で流し込まれます。
オブジェクト埋め込みについて、詳細は以下の記事で解説しています。
さて、流し込みが完了したものがこちら。
ここで注意したいのが、画像は名称昇順に流し込まれるということ。
あらかじめフォルダの時点で流し込みたい順になるよう名前を変更しておくといいでしょう。
Adobe XDのリピートグリッドにテキストを流し込む方法
次にテキストの流し込みを行います。
テキストはテキストエディットなどで作成した文章を、リピートグリッドで作成されたテキストボックス部分に上から改行順に流し込むことができます。
ここでの注意点ですが、テキストデータは「.txt」形式で保存しましょう。
例として流し込みたいテキストはこんな感じで用意しました。
保存したファイルをドラッグ、グリッドのテキストボックス上にドロップで、流し込みが完了になります。
…とここで問題発生です。
流し込んだテキストが文字化け!改善方法は？
流し込みはできたのですが、テキストが以下のように文字化けしてしまいました。拡張子は.txtで作成したのですが…原因は何なのでしょうか…
調べてみたところ、文字コードを「UTF-8」に変更すれば文字化けしないようです。
macのテキストエディットでは通常保存の際文字コードが変更できませんので、以下の方法で変更します。
- 「ファイル」
- 「複製」→新しいウィンドウがでてくる
- 「複製したファイルを保存」
- 「標準テキストのエンコーディング」でコードの種類を「UTF-8」に
- 保存する
文字コードを変更したテキストファイルを、改めてドラッグ&ドロップしてみると…
テキストも流し込みが成功しました！
慣れるまでは少し煩わしい手順もありますが、テキストの埋め込み箇所が多い時は圧倒的に楽な手法です。
最後に画像の表示範囲やグリッドの幅を調整して、見栄えを整えましょう。
スピーディかつ効率的！リピートグリッドをフル活用しよう
リピートグリッドに画像とテキストを流し込む方法について解説しましたが、いかがでしたでしょうか。
テキストに関してはもっと効率的な方法があるかもしれませんので、今後も研究していきたいと思います。
ただ画像やテキストを１件１件埋め込むことを考えれば、リピートグリッドを使っての流し込みは非常に効率的です。
リピートグリッドを保持していれば流し込んだ後でもマージンの調節ができますし、個別の変更も可能です。
ワイヤーフレームは修正を前提として、それも含め効率的に編集できるデータの作成を目指すといいですね。
それでは今回はここまでになります。
次回もまたよろしくお付き合いくださいませ。