お疲れ様です制作部のナカムラです。
ついに重い腰を上げてデザインツールをAdobeXDに変えました。
まだまだひよこにもなれないたまご状態ですが、従来使用していたPhotoshopとはまた違った魅力的な機能が沢山備わってますので備忘がてらブログにしたためようと思います。
(アイキャッチは拡大され過ぎてガビガビになったジェフです)
まだ全然充分に使いこなせていないですが、使い心地はフォトシとイラレの中間のような気がしています。
イラレとフォトショに馴染みのある方は抵抗感そんなに無く直感的に操作ができそうな気がします。
そして私がXDを使おうと思うキッカケになったひとつが↓これ
リピートグリッド
こういうデザイン↓
非常にシンプル。いつでもどこでも誰でも見たことあるくらいシンプルなレイアウトです。
これがリピートグリッドを使うとすごい速さで作れます。
まずは
起点になるジェフ(仮名)を長方形ツールやらテキストツールやらを駆使して作ります。
そしてXDの画面右側にある「リピートグリッド」のボタンをぽち。
そうするとジェフの右と下に小さい丸いハンドルが現れますので、リピートしたい方向にずいーっとドラッグ。
ジェフが量産されていきます。量産型ジェフ。
でも4人目のジェフが見切れています。
3人にしたいです。
そんな時はジェフとジェフの間にそっとカーソルを持っていくと隙間がピンクになります。
ドラッグして隙間を調整します。
一ヶ所調整するだけですべてのマージンが均等に変わります。
丁度ジェフが3人分になるようにします。
さて、ジェフばかり量産しても仕方がないのでここで画像を変えます。
お好みの画像を該当箇所にドラッグ&ドロップするだけ。
アンディとケンが現れました。
(UIFacesというプラグインを使用して顔写真を充てています。ダミー顔写真のプラグインです。一気に好みの顔が選べて便利です。ジェフもプラグインの人です。
ちなみに名前は適当です)
ここで、ちょっと名前を大きくしようと、ジェフの名前の大きさを変えました。
アンディとケンの名前の大きさも勝手に変わります。
フォトショップだとこうはいかない。
ちなみに「JEFF」「ANDY」「KEN」と書いた.txt(テキストファイル）があればドラッグ&ドロップするだけで名前は一気に変えられます。
下に書いてあるダミーテキストも同様に.txtにまとめておくと一気に変更可能。
これも同様のレイアウトで繰り返されるページを作成する場合はテキストファイルにまとめておくことで一気に変更ができるようになります。
という事で今回はリピートグリッドの使い方のご紹介でした。
(多分XDの機能をブログにしたためている人は必ずと言っていいほど説明されているので、参考になる記事はめちゃくちゃに出てくると思います)
それでは、また次回。
