ステップ1：デザインアセットを準備する
文字数に応じたダイナミックレイアウト表示を有効にするには、2種類のデザインアセットを準備する必要があります。これらのアセットによって、お客様が入力した文字に応じてどのレイアウトを表示するかが決まります。
a. 大きなアルファベット画像（メインの文字）
このアセットセットは、レイアウトに表示されるメインの大きな文字を制御します。
ファイルの順序の構成：
- ファイル1 → 空の画像（必須のプレースホルダー）
- ファイル2～27 → 小文字
a–z - ファイル28～54 → 大文字
A–Z - ファイル55～64 → 数字
0–9（任意）
b. 引用文のレイアウトフォルダ
パート1と同じ考え方で、54通りの文字パターンに対応する54個のフォルダを準備します：
- 小文字
a–z用の27個のフォルダ - 大文字
A–Z用の27個のフォルダ
各フォルダは、特定の1文字に対応する引用文のレイアウトを表します。
ステップ2：テンプレートに要素を追加する
すべてのデザインアセットを準備したら、次にこれらの要素をテンプレートに追加し、レイアウトを設定します。
a. アセットライブラリにアセットをアップロードする
- 準備したファイルとフォルダをすべてアセット → 画像にアップロードします
- フォルダの構成（背景、アルファベット、引用文）が正しくアップロードされていることを確認してください
b. サンプルテンプレートを作成する
新しいテンプレートを作成して要素を追加していきます。最初の要素は、青、赤、黒の3色の背景です。
次に、アルファベットのレイヤーを3つ追加し、サイズを変更して、デザイン内の目的の位置に配置します。
その後、同じ3色に対応する引用文のレイヤーを3つ追加し、こちらもアルファベットのレイヤーとの位置関係に合わせて整列、配置します
c. レイアウトを作成する
6つのレイヤーをすべて選択し、レイアウトを作成アイコンをクリックして、レイアウト1にグループ化します。
レイアウト1をクリックし、Ctrl + C and Ctrl + Vのショートカットキーを押して、同じ構造のレイアウト2を複製します
次に、レイアウト2を展開して、1文字目に対応する6つのレイヤーを選択します。同じくCtrl + C and Ctrl + Vのショートカットキーを使って、2文字目用に6つのレイヤーを追加で作成します。下の参考画像のようになります。
次の設定ステップに進む前に、テンプレートを保存して現在の構成を維持します
ステップ3：オプションセットのマッピングとロジック
このステップでは、お客様が入力したテキストに応じて、レイアウト、アルファベット、引用文が自動的に切り替わるように、オプションセットとロジックを設定します。
a. テキストフィールドのオプションを追加する
- オプションセット → 追加 → テキストフィールドに移動します
- このフィールドは、お客様がテキスト（例：名前）を入力するために使われます
b. 文字ごとのスウォッチを有効にする
テキストフィールドの設定で文字ごとにスウォッチを表示を有効にし、次のように割り当てます：
- Blue Alphabet → 1文字目
- Blue Alphabet 2 → 2文字目
c. テキストの長さに応じたレイアウトの切り替えを有効にする
テキストの長さに応じてレイアウトのスウォッチを表示を有効にします。これにより、お客様が入力した文字数に応じて、レイアウトが自動的に切り替わるようになります。
- テキストの長さ = 1文字 → レイアウト1を表示
- テキストの長さ = 2文字 → レイアウト2を表示
d. 文字の同期のためにグローバルIDを設定する
次に、お客様が入力する1文字目の影響を受けるすべてのレイヤーに、グローバルIDを設定します：
- Blue Alphabet
- Black Alphabet
- Red Alphabet
- Blue Quotes
- Black Quotes
- Red Quotes
⚠️ Quoteのオプションセット内のネストされたオプション値は選択せず、グローバルID = 1に設定してください
Blue Alphabetが文字Aに切り替わると、グローバルID = 1を持つ他のすべてのレイヤーも、対応するAの値に自動的に切り替わります。2文字目についても、同じ手順を繰り返します。
e. 背景色に応じた表示条件を設定する
色が正しく一致するように、Blackのレイヤー（Alphabet + Quotes）をすべて選択し、次の条件を追加します：Background = Blackのときのみ表示
赤と青の文字についても、同じ設定を繰り返します。これにより、選択された背景に応じて、対応する色のアセットだけが表示されます。
f. 不要なオプションを非表示にする
最終結果
お客様が1文字（例：c）を入力すると、レイアウト1だけが表示され、Cの引用文とアルファベットが表示されます
お客様が2文字（例：cd）を入力すると、レイアウト2が表示され、CとDの引用文とアルファベットがそれぞれ表示されます。
更新日：2026/08/18