Adobe XD #08 リストとリピートグリッド

投稿者: | 1月 29, 2021
0件のコメント

目次

リスト作成

妄想アプリのメイン画面もいよいよ佳境だ。ついに中身をデザインする。ここはリストである。

ついにリピートグリッドやらを使う機会が到来したのだ！！

画像の用意

リストの項目は画像＋テキストの組み合わせである。よって、画像を用意しなければならない。とりあえずは無料で商用利用可能のイラストを使用する。

ダウンロードして正方形に整えた。Explorerだと透過背景が黒くつぶれて表示される。解決方法を検索してみたが分からない。個別にファイルを開くと透過されているので、無視することにする。

リスト項目の作成

まずはリスト項目を１つ作る。表示項目は下記だ。

  • 画像
  • 見出し
  • 内容
  • 日付
  • 境界線

XDでそれぞれを配置していく。

画像の配置

まずは画像の配置だ。ツールバーを見るが、それらしきアイコンがない。

どうすんねん。

XDでは配置したい画像をドラッグ＆ドロップするのが作法のようだ。Explorerからアートボードに画像をドラッグする。

配置したい位置で右ボタンから指を離してドロップする。

でかい、でかすぎる。かわいいウサギに若干の恐怖感を覚える。これでは魔獣だ。ハロウィン級だな。小さくしよう。

こんなものか。

文字の配置

ツールバーでテキストのアイコンを選ぶ。

それもいいが、私はキーボード派だ。ツールチップ「テキスト(T)」と表記されているので、Tでテキストになる。

文字を配置する位置で左クリックし、「白うさ」と入力してESCキーを押す。

プロパティインスペクタでフォントを”SF Pro Text”, サイズを”16″に設定する。

「塗り」を黒にする。これでタイトル部は完成だ。続いては内容表示。文字を一回り小さく”14”にする。色はグレーだ。UIKitで確認すると色成分は#3C3C43である。

先ほどと同じ要領でテキストを追加する。

続いて右上に日付を追加する。これはさらに小さな文字なので11ポイントにしてみる。

文字の位置を微調整してみた。

線の追加

続いては境界線である。これは楽勝だろう。Lで線画モードになる。始点で左クリックして右にドラッグする。Shiftキーを押しながらドラッグすれば水平に引ける。終点でボタンから指を離す。

こんなものか。

リピートグリッド

ついにこの時間がやってきた。XD最大のウリである「リピートグリッド」の威力を垣間見るチャンスが到来したのだ！まさに七色星団でヤマトを待ち構えていたドメル将軍の気持ちが分かるというものだ。

グループ化

まずはレイヤーパネルで追加した一群をグループ化してしまおう。選択して右クリックし、グループ化を選択する。ショートカットキーはないものだろうか。

なんてことはない。Ctrl+Gでグループ化。Shift+Ctrl+Gでグループ化解除だ。

グループ化された。

「グループ１」では名称が事務的なので「リスト項目」に名称を変えておこう。

リピートグリッド化

続いてプロパティインスペクタの「リピートグリッド」ボタンを押下する、いや、クリックする。

ん？なんだがグリップのようなパーツがグループの周りに配置された。

項目が増えた！

このグリップを引っ張ればいいのか。マウスでドラッグしてみる。

うをを！項目が増殖した！通常攻撃が全体攻撃で数回攻撃のお父さんになってしまったではないか！！！

しかし６行で画面がいっぱいだ。用意した画像は７つである。７行は必要なのだ。スクロールはさせたくない。それは別の機会に試したい。

行間のピンク色の部分でマウスをドラッグすると行間が調整できてしまう。

とても狭くしてから再びグリップを引っ張って７行にすることができた。

境界線の位置がバランス悪いので、少し上に動かしてみる。レイヤーパネルで「線1」を選択し、マウスでドラッグして調整する。

複数画像ファイルの配置

だがリピートグリッドの威力はこんなものではない。用意した画像をそれぞれの行に配置しようではないか。

Explorerで７つの画像を選択し、リピートグリッド内の画像にドラッグして投下するのだ。

ををををを！画像が一気に配置された！！！！！すごい！バディドッグ並みにすごいゾ！

選択する順番を気を付けて欲しい。選んだ順番に画像は配置される。

テキストの取り込み

リピートグリッドはテキストの取り込みにも対応している。

まずはタイトルをテキストファイルに編集して保存する。

先ほどと同じ要領で、タイトル部のテキストにファイルをドロップする。

ぎょえ？！文字化けした！（涙）

魔法式が間違っていたのか？それとも私の魔力が足りないのか？MPを確認…ではなく、文字コードを確認してみる。

ああ、シフトJISで保存していたorz

UTF-8にして保存しなおす。XDに戻り、Ctrl+Zでなかったことにする。タイムリープだ。過去に戻って再チャレンジできるとは、まさに死に戻り。

そしてやり直しだよ、スバル。

今度こそ成功だ。

同様に内容と日付も設定する。

メイン画面が完成した。

リピートグリッド、まさにマテリアルバースト、物質変換魔法級の威力である。今後とも多用することになるだろう。

次はチャット画面を作成しよう…と思っていたのだ、ここで大きな問題にぶち当たった。妄想アプリの行方はいかに？！