Aumframe 公式ガイド

Aumframe は WordPress 用のビジュアルデザインツールです。特定のテーマも、 追加のプラグインも必要としません。

1. Aumframe の仕組み

多くのページビルダーは、レイアウトを投稿に紐づけます。Aumframe はデザインを ルールに紐づけ、そのルールがフロントエンドのどの URL をそのデザインで置き換えるかを 決定します。

このルーティングモデルには、実用上 2 つの効果があります。

• 1 つのデザインを、すべてのブログ投稿、すべてのカテゴリーアーカイブ、 404 ページ、あるいはルールで定義した任意の URL 群に適用できます。
• デザインが URL を置き換えると、そのテーマが本来その URL に対して出力する内容を 置き換えます。そのため以下の例では、テーマのヘッダーとフッターが存在しません。

インターフェース上のルールの説明は次のとおりです： “The rules decide which front-end URLs this design takes over.”

2. インストール

追加の設定は不要です。プラグインをインストールして有効化します。

1. Aumframe が有効化されており、このテストサイトで唯一インストールされている プラグインです。
2. Aumframe が追加するトップレベルメニューは1 つだけです。その下の項目 （Forms、Inquiries、Content Model、Translate layouts）は後の章で説明します。

3. Aumframe の画面

1. New blank design：ルートフレームのみを含むデザインを作成し、デザイナーで開きます。 ゼロからデザインを作成する場合に使用します。
2. Saved templates：保存済みのすべてのデザインを、種別・ルール・優先度とともに 一覧表示します。新規サイトではこの一覧は空です。
3. Import a scene：scene の JSON を受け取ります。ブラウザーが送信前に scene を HTML と CSS へコンパイルします。PHP はノードツリーをコンパイルしないため、 本製品の描画実装は 1 つだけです。本章の手順で scene のインポートは必要ありません。

4. デザインを作成する

New blank design を押すと、デザイナーが開きます。

1. INSERT：11 種類のプリミティブ。クリックするとページの末尾に挿入され、 キャンバスへドラッグすることもできます。その下の LAYERS がツリーを表示します。 空のデザインは、縦方向のスタックとして配置された Page ノード 1 つから始まります。
2. 中央がキャンバスです。破線の枠がルートフレームを示します。
3. 右側が INSPECTOR です。要素を選択するまでは空です。
4. Save。その隣に Preview と ▶ Live があります。
5. Desktop / Tablet / Mobile：キャンバスに表示するブレークポイントを選択します。 個々のブレークポイントに対する値は inspector 側で別途設定します（§5 参照）。

4.1 見出しを追加する

INSERT で Heading をクリックします。キャンバスに挿入され、選択状態になります。 inspector は Style で開くため、Content に切り替えて入力します。

1. Content：テキストそのもの。
2. Tag：h1 … h6。これは文書アウトライン上の見出しレベルであり、 見た目の大きさとは独立しています。まず正しいレベルを選び、サイズは Style で設定します。

4.2 本文テキストを追加する

Text をクリックし、Content に切り替えて一文入力したうえで、inspector を確認します。

1. Content / Style / Motion / Data：選択中の要素に対する 4 つのタブ。
2. Default / Hover / Pressed / Focus / Open / Scrolled …：現在編集している値が 属する状態。Default は「通常時」を表します。
3. Desktop / Tablet / Mobile：それらの値が属するブレークポイント。

各値は特定の状態 × ブレークポイントの組み合わせに属します。変更が期待どおりに 反映されない場合は、選択中の状態とブレークポイントを確認してください。

その下の Style は、Layout（表示／非表示）、Size（Width/Height。それぞれ Fixed · % · Fill · Hug と min/max の制限）、Position （In flow · Absolute · Sticky · Fixed）、Spacing などにグループ分けされています。

4.3 デザインのルーティングを設定する

ルーティングが設定されていないデザインは、サイト上に表示されません。 ⋯ → Template settings を開きます。

1. Name：管理画面専用です。訪問者には表示されません。
2. Type：6 つの選択肢があり、そのデザインが置き換えられる URL を決定します。

A single page を選び、続いてページを選択します。

1. Page：“You have to pick one. Left empty, this design never appears on any URL.”

Save settings を押し、上部バーの Save を押します。

4.4 フロントエンドの結果を確認する

紐づけたページを開きます。

テーマのヘッダーとフッターは存在せず、文書全体がこのデザインになっています。

ヘッダーとフッターを複数のデザインで共有する場合は、各デザインに複製するのではなく Site shell 種別を使用してください。§7 を参照。

5. ページレイアウトを組み立てる

ここまでの章では、インターフェースのどこに何があるかを説明しました。Aumframe の レイアウトは入れ子になったコンテナーで構成されます。各コンテナーが、 その子要素の方向・間隔・サイズを定義します。

本章では、テキストと画像を横並びにした 2 カラムのレイアウトを作成し、 Mobile ブレークポイントでは縦方向のスタックに変更します。

5.1 セクション用のコンテナーを作成する

Container を挿入し、選択した状態で Style を開きます。

1. Arrangement：Stack · Grid · Free · Merge into parent。Stack は子要素を 一列に並べるもので、ほとんどの線形レイアウトに適しています。
2. Direction：Horizontal · Vertical（および反転）。子要素を並べる方向を制御します。
3. Gap：子要素どうしの間隔。兄弟要素間の間隔は、各子要素に margin を付けるのでは なく、親コンテナー側で制御します。
4. Padding：コンテナーの内側、内容の周囲の余白。⛓ のトグルで四辺が連動し、 連動した状態で Top に値を入力すると四辺すべてに適用されます。

Direction: Horizontal、Gap: 48、Padding: 56 を設定します。

5.2 要素を入れ子にする

INSERT パネルは、現在の選択状態に応じて、次の要素がどこに挿入されるかを示します。

コンテナーの内側に要素を挿入するには、先にそのコンテナーを選択します。 別途ドロップ領域を狙う必要はありません。

セクションのコンテナーを選択した状態で、もう 1 つ Container を挿入します。 これはセクションの内側に追加され、テキストカラムとして使用します。 Width: Fill、Direction: Vertical、Gap: 16 を設定し、その中に Heading と Text を挿入します。

LAYERS ツリーが現在のノード階層を示します。この例では次のとおりです： Page → Container → Container → Heading, Text。

5.3 Fill、Hug、Fixed のサイズ指定

すべての要素の Width と Height は、4 つのモードのいずれかを使用します。 パネルには選択中のモードの説明が表示されます。

Width · limits（Min / Max）で最終的なサイズを制限します。Fill かつ Max 480 を 設定した画像は、レイアウトに応じて拡大しますが 480px を超えません。

5.3b その他の arrangement モード

arrangement コントロールには 4 つのモードがあります。Stack は線形レイアウトを扱い、 残りの 3 つはグリッド、自由配置、親への統合をそれぞれ扱います。 エディターは各モードについて 1 行の説明を表示します。

Merge into parent はコンテナー自身のボックスを取り除きます。パネルの記載は 次のとおりです：“Background, border, padding and radius stop working — there is no box left to paint.” 子要素を祖父要素のレイアウトに直接参加させたい場合に使用してください。

5.4 2 つ目のカラムを追加する

外側のセクションコンテナーを選択し直します。入れ子になったテキストカラムと 区別するため、LAYERS の行から選択してください。

テキストカラムが選択されたままの場合、次に挿入する要素は隣ではなく カラムの内側に配置されます。2 つ目のカラムを挿入する前に、 LAYERS で選択中のノードを確認してください。

続いて Image を挿入します。セクション内、テキストカラムの後ろに配置され、 2 つ目のカラムになります。Width: Fill を設定します。

最終的な構造は、セクションに水平方向のコンテナー、各カラムに垂直方向のコンテナーを使い、 内容の要素をカラム内に配置したものになります。

5.5 Mobile ブレークポイントを設定する

上部バーを Mobile に切り替え、セクションのコンテナーを選択して Direction: Vertical を設定します。

1. Direction は Mobile に対してのみ変更されます。Desktop は Horizontal のままです。

ブレークポイントごとの値は、別のレイアウトではなく上書きです。この例で Mobile 用に 上書きされているのは Direction だけで、Mobile の上書きがない値は引き続き Desktop の 値を使用します。

コンパイル後のスタイルシートの内容は次のとおりです。

.af-n_1 { display: flex; flex-direction: row; }
@media (max-width: 640px) { .af-n_1 { flex-direction: column; } }

5.6 保存・紐づけ・検証

⋯ → Template settings で名前を入力し、Type: A single page を選択してページを選び、 Save settings、続いて Save を押します。

公開ページで実測したレイアウトは次のとおりです。

5.7 1 つの URL に 2 つのデザインが一致する場合

2 つのデザインが同じ URL に一致した場合、描画されるのは一方だけです。優先度が等しい 場合、どちらが選ばれたかはフロントエンドからは判別できません。Saved templates の 表には各デザインのルールと優先度が表示されるため、ルーティングの競合を調べる際に 使用できます。

5.8 完成したモジュールを組み立てる

これまでの例では、レイアウトの仕組みを明確に示すために最小限のスタイルを使用しました。 以下のヒーローセクションは同じコントロールのみを使い、scene をインポートせずに デザイナー上で直接作成したものです。

使用している要素はすべて前の各章に登場したものです。水平方向のコンテナー 1 つ （濃色の塗り、padding 96、gap 64）の中に垂直方向のテキストカラム （eyebrow は 13px・字間広め・大文字、見出しは 58px / ウェイト 700 / 行送り 1.04、 本文は 19px / 行送り 1.62）を配置し、その横に画像（Fill、max 560、角丸 18）を 置いています。

新しく挿入した Text は、直前の兄弟要素のタイポグラフィーを引き継ぎます。 上の例では、本文の段落が eyebrow から uppercase + tracking 2.4 + weight 600 を 引き継いでいました。挿入後は、引き継ぐべきでないプロパティを明示的にリセットして ください（Letter case: unchanged、Tracking 0、Weight: regular）。 Heading は別のプリセットを使用するため、この挙動の影響を受けません。

6. デザインをコンテンツに紐づける

デザインに直接入力した固定テキストは、そのデザイン専用の内容になります。 バインディングはノードを、現在表示中のコンテンツのフィールドに接続する仕組みで、 1 つのデザインで多数の投稿やコンテンツ項目を描画できるようにします。

6.1 Data タブ

任意のテキストノードを選択して Data を開きます。

1. Content：テキストの取得元。Not bound は「入力した内容を使う」という意味です。 それ以外の場合はフィールドを選択します。

| | | |---|---| | post.title | 投稿のタイトル | | post.excerpt | 抜粋 | | post.content | 本文（リッチテキスト） | | post.date | 日付 | | post.url · post.author.name · post.author.url | | | post.thumbnail.url · .alt · .hasImage | アイキャッチ画像 | | site.title · site.description · site.url · site.logo … | サイト単位の値 |

1. Link URL：要素のリンク先を、表示内容とは別にバインドします。タイトルが post.title、リンクが post.url のカードは、それだけで「投稿カード」として成立します。
2. Let a field decide whether it shows：条件付き表示。post.thumbnail.hasImage に バインドすると、アイキャッチ画像のない投稿ではその要素全体が非表示になり、 空白が残りません。

バインディングを追加すると 4 つ目のコントロールが表示されます： Show when there is nothing. バインディングが空に解決された場合、ここに入力した値が 描画されます。空欄のままにすると、そのノードに対する代替コンテンツは出力されません。

タイトル・日付・本文の 3 つを作成します。

キャンバスには引き続きノードのプレースホルダーが表示されます。そこでは特定の投稿が 描画されていないためです。バインディングはフロントエンドで解決されます。

6.2 コンテンツタイプにデザインを適用する

バインド済みのデザインをコンテンツタイプ全体に適用するには、 ⋯ → Template settings → Type: Content template を開きます。

• “Every post, or everything of one content type.”
• Content type：投稿なら post、固定ページなら page、またはカスタムタイプの slug。
• “One rule takes over every piece of content of that type. With no specific ID it applies site-wide.”

この設定が書き出すルールは {"kind":"singular","post_type":"post"} です。

6.3 コンテンツテンプレートを確認する

別々の 2 つの投稿、同じデザイン、ほかには何も記述していません。

デザインが表示方法を定義し、WordPress がバインドされたコンテンツを供給します。 ルールに一致する新規投稿は、デザイナーでの追加作業なしに同じデザインを使用します。

6.4 リスト：query と Loop

バインドされたノードは、現在のコンテンツ項目のフィールドを表示します。 ブログ一覧、「関連する実績」、注目 3 件といったリストには 2 つの要素が必要です。

1. Data query：どのコンテンツを取得するかを指定します。
2. Loop：その query を参照します。最初の子要素が 1 行分のテンプレートとなり、 Loop が結果の件数だけそれを繰り返します。

Loop を挿入します。inspector での名称は Repeater で、INSERT パネルには “Laid out as a 3-column grid” と表示されます。つまり Loop は、Grid 配置が既定で 有効になっているコンテナーです。

その Data タブには Loop source セクションがありますが、初期状態では 選択できる項目がありません：“This loop has nothing to repeat over yet.”

query を作成する

Data → Data queries → ＋ New.

1. Data source：Content · Terms · This page’s query · A field on this content · Breadcrumb。Content は「投稿を取得する」という意味です。This page’s query は、 WordPress が現在の URL に対してすでに解決済みの結果を再利用します： “Search result pages must use it, and archives need it to paginate.”
2. Content type：Posts · post、Pages · page、またはサイト上の任意のカスタムタイプ。
3. How many：件数。
4. Order by：Publish date · Title · Manual order · Random · Comment count · Custom field、 および別項目の Direction。

その下には Filter by taxonomy、Exclude the current post（「関連記事」では 有効にします。そうしないと閲覧中の記事がその一覧に表示されます）、 Only where a field is…、Follow the current term があります。

「公開日順で 3 件」に設定します。

Loop と query を接続する

Loop を選択し直し、Repeat over にその query を設定します。

• Repeat over：未設定の場合、Loop はフロントエンドに何も出力しません。 リストが表示されない場合は、この項目が意図した query を参照しているか確認してください。
• Name for one row：既定は post です。子要素のバインディングはこの名前を使用します。 バインディング作成後に変更する場合は、それらのバインディングも更新が必要です。

行テンプレートを作成する

Loop の内側に Container を挿入し、post.title にバインドした Heading と post.excerpt にバインドした Text を追加します。バインドの手順は §6.1 と同じです。 最初の子要素が行テンプレートとなり、Loop が結果ごとにそれを繰り返します。

デザインを保存してページに紐づけると、結果は次のようになります。

保存されるデータは次のとおりです。

queries:  { "q1": { "postType": "post", "limit": 3, "orderby": "date", "order": "DESC" } }
Loop:     { "as": "post", "queryId": "q1" }
children: post.title · post.excerpt

既知の不具合、1.21.0 で修正済み。 それ以前のバージョンでは、Loop を選択して Data タブを開くとデザイナーがクラッシュしました。Loop source のパネルが存在せず、 loop の query は scene JSON のインポートでしか設定できませんでした。 古いビルドは、本章の手順に進む前に更新してください。

6.5 アーカイブと現在のページの query

§6.4 ではカスタム query でコンテンツを取得しました。アーカイブの動作は異なります。 カテゴリー、タグ、投稿一覧などのページでは、WordPress が現在の URL に対する投稿を すでに解決しています。デザインはその既存の query を描画すべきです。別途コンテンツ query を作成すると、現在のアーカイブの文脈が無視され、ページネーションも壊れます。

そこで query の Data source を This page's query に設定します。

“Uses this page's own query results. Search result pages must use it, and archives need it to paginate.”

続いて ⋯ → Template settings → Type: Archive template を設定します。

1. Taxonomy：category、post_tag、またはカスタムのもの。 *“Leave it empty for the post list page.”*
2. Content type：指定しない場合は空のままにします。

両方を空にすると、そのデザインはサイト上のすべてのアーカイブを対象とします。 いずれかを指定すると、その対象のみになります。

ページネーション

40 件のうち 10 件を表示するアーカイブには、残り 30 件への導線が必要です。 Form / shortcode プリミティブを挿入し、[aum_pagination] を設定します。

投稿 4 件のカテゴリーで「ブログページは最大 2 件表示」に設定して実測した結果は 次のとおりです。

2 ページ目では、デザインは変わらないまま Loop が別の投稿群を表示します。 これは Loop が現在のページの query を使用していることを示します。

投稿数が 1 ページに収まる場合、WordPress はページネーションのリンクを出力せず、 ショートコードも何も描画しません。

サイトのルートはアーカイブではありません。 Settings → Reading が 「Your latest posts」の場合、/ は自身をアーカイブではなくフロントページとして 報告するため、アーカイブテンプレートの対象になりません。ルートには Type: Front page で専用のデザインを割り当ててください（1.24.0 で追加。 それ以前は、エンジンがルールに対応していたにもかかわらず選択肢が一覧に ありませんでした）。

7. Site shell：共通のヘッダーとフッター

デザインが URL を置き換えると、テーマのヘッダーとフッターは描画されません。 Site shell は、それらのデザインを囲む共通の構造を提供します。

shell 自体はどの URL にも一致しません。代わりに、各ページのデザインがその内側で 描画されます。設定ページでは次のように説明されています：“A shell takes part in no URL matching. Drop in a ‘slot’ primitive and the content template’s output fills it. It works under any theme — the header and footer come from here, not from the theme.”

7.1 Site shell を作成する

新規デザイン → ⋯ → Template settings → Type: Site shell → Save settings。

続いて、ページが読まれる順に構築します。

1. ヘッダー用の Container：Direction: Horizontal を設定し、padding を与え、 Heading を配置します。
2. Content slot（Primitives、左下）。
3. フッター用の Container。

完成した shell のレイヤー構造は次のとおりです。

Page
  Container      ← ヘッダー
    Heading
  Content slot   ← 各ページ自身のデザインがここに入る
  Container      ← フッター
    Text

Save を押します。shell に設定すべきルーティングはありません。

7.2 Site shell を確認する

§5 と §6 のデザインは変更していません。shell を保存すると、各デザインがその内側で 描画されます。

コンテンツテンプレートで描画された投稿、Loop で構築した一覧、単発の固定ページ。 この 3 つの異なるデザインすべてに、同じヘッダーが上に、同じフッターが下に付きます。 有効なテーマは依然として Twenty Twenty-Five ですが、これらはいずれもテーマ由来では ありません。

7.3 Site shell の要件

content slot を含まない shell は、ページ側のデザインを伴わずに描画されます。 shell は保存した時点でサイト全体に適用されるため、shell を公開する前に必要な content slot を追加してください。

shell 1 つにつき slot は 1 つにしてください。 slot には名前があり（既定は content）、 ページの出力はその名前の slot に描画されます。

1.22.0 以降が必要です。 それ以前は Content slot プリミティブが存在せず、 設定パネルはインターフェースから挿入できない slot を要求していました。さらに Save settings を押すと、次の Save が「This design was changed elsewhere after you opened it」で失敗しました。古いビルドの場合は先に更新してください。いずれも修正済みです。

8. 再利用：composites、components、instances

INSERT パネルは、動作の異なる 3 つの再利用の仕組みを提供します。

8.1 Composites：組み立て済みのノードツリー

Site header、Button、Section、Row は、あらかじめ配置されたノードツリーです。 挿入後、それらのノードは元の composite とは独立します。挿入した 1 つの複製を編集しても、 ほかの複製には影響しません。

8.2 Components：1 つのマスター、複数の instance

Components タブには2 つのグループがあります。サイトに同梱される共有ライブラリ （中空のアイコン）と、ユーザーが作成したコンポーネント（塗りつぶし）です。 ユーザー作成のコンポーネントを保存していない場合、表示されるのは共有ライブラリのみです。

コンポーネントを作成するには、まず通常のコンテナーとして一度組み立て、 レイヤーツリーでそのコンテナーを選択し、Save as component を押します。

その場で名前の入力を求められます。

コンポーネントには、再利用を前提とした内容ベースの名前を付けてください。 例えば Contact band という名前は、お問い合わせページ、フッター、 ランディングページのいずれで使っても正確なままです。

保存するとライブラリに追加されてユーザー作成として表示され、グリッド下の注記も “Instances follow the component. Edit it once and every use changes.” に変わります。

8.3 コンポーネントの instance

2 回目を配置して選択します。inspector の表示は Frame ではなく `Instance` になります。

• `Contact band · used in 2 places`：この件数はリアルタイムで、現在のデザイン内 だけでなくサイト全体の使用箇所を数えます。
• Component content：各 instance は構成部分のテキストを上書きできます （ここでは Heading と Text）。“Left empty, it follows the component default.” 構造とスタイルは共有したまま、内容は instance ごとに変えられます。
• Edit component でマスターが開きます。 “Structure and styles changed there reach every instance.”

コンポーネントを保存すると、その変更はそのコンポーネントの instance を使用している サイト上のすべてのテンプレートに反映されます。コンポーネントの編集は、 サイト全体での再利用を踏まえて確認してください。

1.22.0 以前： ユーザー作成のコンポーネントが 1 つも保存されていない場合、 パネルは共有ライブラリを一覧表示しつつ、そのすぐ下に「No components yet」と 表示していました。一覧は正しく、このメッセージがユーザー作成分のみを数えていました。 1.23.0 で修正済みです。

9. Motion

Motion タブは、独立した 4 つのドライバーと、調整済みのテキストエフェクト一式を 提供します。同じ要素上で複数のドライバーを有効にできます。

9.1 キャンバス上のアニメーション状態

登場アニメーションを多用したデザインでは、キャンバスが不可視の要素だらけになります。 そのためキャンバスは各アニメーションが完了した状態を表示し、確認用に ▶ Play once ボタンを提供します： “otherwise the element is transparent and impossible to select.”

つまりキャンバスが示すのは、初期状態ではなく最終状態です。

9.2 Entrance を設定する

• Entrance style：From below ほか。
• Springiness：“Left is crisp, right is soft and bouncy.”
• Trigger point：“How much of the element has to be visible before it starts.” 0.2 は要素の 5 分の 1 が見えた時点を意味します。

9.3 一定のビューポート幅より下でモーションを無効にする

ドライバーの上にある Only from width → Minimum viewport width は、 モーションを無効にするビューポート幅の下限を定義します。

“Below this width the element has no motion at all and simply shows its final state — the way to keep a wall or a tilt off phones without building a second copy of the section.”

これにより、2 つ目のデザインを作らずに、小さいビューポートでモーションを無効にできます。

9.4 Effects

1 つだけ選択します：None、Letter by letter、Liquid text。 “The parameters are already tuned — strength is the only knob left to you.” これらはプロパティのアニメーションではなく要素全体への処理であるため、 4 つのドライバーとは別枠に配置されています。

9.5 Scroll driver

Scroll driver を有効にすると Effect コントロールが表示され、4 つのプリセット （Parallax rise、Fade in on scroll、Shrink on scroll、Rotate on scroll）から 選択できます。既定は Parallax rise です。

このドライバーは、折りたたみ時の説明のとおり、ページ位置に応じて連続的に動作します： “Interpolates with the scroll position every frame — not ‘fires once at a point’.” したがって要素はページのスクロールに合わせて効果が進行し、逆方向にスクロールすると 巻き戻ります。この点が、トリガー条件を満たしたあと 1 回だけ再生される Entrance との 違いです。

このセレクトには Custom が表示されることもあります。これは、保存されている値が どのプリセットにも一致しなくなった状態を示すもので、kit や旧バージョンで作成された デザインなどが該当します。直接選択できるプリセットではありません。

9.6 Pointer tracking

1. Effect：3D tilt、Magnetic pull、Horizontal shift。
2. Measured against：Itself、Parent、Window。“Whether the cursor position is measured against the element itself or the whole window.” Itself は要素上に カーソルがあるときだけ反応し、Window はページ全体でのカーソル移動に反応し続けます。
3. Springiness：“Left is crisp, right is soft and bouncy.” このスライダーは、剛性と減衰を個別に露出させるのではなく、ばね応答全体を制御します。

3D tilt を有効にすると、選択中の要素の親に perspective が追加されることがあります。 パネルの説明は次のとおりです：“Needs perspective on the parent — the panel adds it for you.” 親に perspective の値がない場合、Aumframe は perspective: 900 を追加します。 rotateX と rotateY が 3D として見えるためには、この perspective が必要です。

9.7 Continuous motion

1. Effect：Float up and down、Breathing scale、Pulsing brightness、 Drift side to side、Slow spin。
2. One cycle：“In seconds. The longer, the quieter.” 付属のプリセットは、 パルス 2.4 秒、フロート 4 秒、ドリフト 7 秒、スロースピン 24 秒の周期を使用します。

Continuous motion にトリガーはありません：“it moves from the moment the page loads.” そのため、選択したモーションはページが動作している間ずっと再生されます。

9.8 複数のドライバーを組み合わせる

Entrance、Scroll、Pointer、Continuous motion は互いに独立したドライバーです。 異なるプロパティを制御する場合は組み合わせられます。たとえば Scroll が垂直方向の オフセットを、Continuous motion がスケールを制御することは可能です。transform の 各成分が別々に扱われるためです。

2 つのドライバーが同じプロパティに書き込むと競合が発生します。その場合、 後からバインドされたドライバーの値が有効になり、先の値はデータとして保持されます。 バインド順は Scroll、Loop、Pointer であるため、プロパティが重なった場合は この順序で後のドライバーが優先されます。

エディターはこうした競合に対して警告を表示します。

たとえば既定の Parallax rise（Scroll）と既定の Float up and down （Continuous motion）は、どちらも垂直方向のオフセットに書き込みます。両方を有効にすると この警告が表示され、上書きされた側のドライバーから重複プロパティを取り除く操作が 提示されます。

同じ警告形式を使う競合がほかに 3 種類あります。

これらの競合は描画エラーにはなりません。上書きされた設定はパネル上に残りますが、 効果は適用されません。競合の警告を手がかりに、重なっているプロパティを取り除いてください。

10. Content Model：コードを書かないコンテンツタイプ

サイトでは、投稿や固定ページ以外の構造化コンテンツが必要になることがよくあります。 自転車、事例、求人、FAQ などです。Aumframe → Content Model は、コードや追加の プラグインなしに、こうしたコンテンツタイプとそのフィールドを定義します。

“Definitions live in the database, not in code — so you can export them as a model pack and import it into the next site in the same industry.”

10.1 コンテンツタイプを作成する

• Singular / Plural name と Identifier。識別子は、別のタイプを作ることなしには 変更できません：“changing it means a different type, and existing content is orphaned.” コンテンツを作成する前に、短く小文字の識別子を決めてください。
• URL prefix と Menu icon。
• Visible on the front end (has its own URL) と Has a listing page (archive)： “The listing page is the URL an Aumframe archive template can take over. Data-only types such as FAQ or downloads do not need it.” ほかのページの内部にのみ表示されるものは、 一覧ページをオフにします。
• Built-in areas：Title、Content、Excerpt、Featured image、Order、Comments。 そのタイプに存在しないものをオフにすると、編集画面にも表示されなくなります。
• Use this type as a product catalog：“Lets layouts bind price and a call-to-action through the same paths an e-commerce or inquiry site uses, so one product card works on every kind of site.” この設定により、同じカードのデザインをショップにも 問い合わせ型サイトにも使えます。

10.2 フィールド

+ Add field でそのタイプ独自のデータを追加します。17 種類あります。

各フィールドタイプは、デザイナーの Data タブ（§6.1）でバインドできるようになります。 たとえば自転車の Frame size フィールドは、Text ノードで表示できます。

フィールドを削除しても、コンテンツは削除されません： “Existing content is not deleted, but the front end will no longer be able to read it.”

10.3 タクソノミー

+ Add taxonomy はコンテンツのグループ分けを定義します。動作は Hierarchical 設定で決まります：“‘Hierarchical’ behaves like categories (one bike belongs to one series). Unchecked behaves like tags (many per item).”

10.4 Model pack

Export はモデル全体（タイプ、フィールド、タクソノミー）を JSON として書き出します。 同じ業種の次のサイトでは、それを Import に貼り付けます。

• インポートは既定では追加のみ：すでに存在するタイプは、現在の定義のまま残ります。
• Replace everything も利用でき、dangerous: overwrites current definitions と 表示されます。既存の定義を置き換えるべき場合にのみ使用してください。

11. フォームと問い合わせ

Aumframe → Forms はフォームビルダー、Inquiries は送信内容の保存先です。

11.1 フォームを作成する

Aumframe → Forms は既存のフォームを、各フォームの送信件数とともに一覧表示します。

Add new でビルダーが開きます。

タイトルを入力し、フィールドを追加して、送信時の動作を設定します。

11.2 フォームをページに追加する

サイドバーにショートコード [aum_form id="12"] が表示され、使用できる場所も示されます。

“Works in the block editor, the classic editor and widgets. On a page built with Aumframe, drop in a ‘Form’ node instead.”

Aumframe のデザイン内では、Form / shortcode プリミティブを使ってフォームを選択します。 ブロックエディター、クラシックエディター、ウィジェットでは、ショートコードを挿入します。

11.3 Inquiries

送信内容はメール送信に加えて Aumframe 内にも保存されます。保存された送信内容は フォームごとに絞り込め、通知メールが拒否されたり迷惑メールに分類されたりした場合でも 引き続き参照できます。

12. Translate layouts

空の状態の表示が、Aumframe と多言語プラグインの役割分担を示しています。

“No languages are available. Install and configure a multilingual plugin first — this screen translates the layout; that plugin translates your content.”

Aumframe は投稿の内容を翻訳しません。デザインの中に入力されたテキスト （見出し、ボタンのラベル、埋め込みの同意文など）を抽出し、設定済みの多言語プラグインが 利用できるようにします。これにより、翻訳されたページも同じ Aumframe のレイアウトを 維持できます。

12.1 利用可能な言語の供給元

言語の一覧は、インストール済みプラグインの走査ではなく aumframe/translatable_languages フィルターを通じて取得されます。このフィルターに 何も応答しない場合は空の配列が返り、画面は上記の空の状態のままになります。

サイトに既定の言語が 1 つと、追加の言語が少なくとも 1 つある場合、その言語が利用可能に なります。翻訳の完了は条件ではありません。この画面が一覧表示するのは利用可能な言語で あり、翻訳の進捗ではありません。

言語の検出とレイアウト文字の翻訳

言語の検出とレイアウト文字の翻訳は、別個の機能です。WPML や Polylang を使うサイトでは、 それぞれ異なるプラグインが担当することがあります。

そのため WPML や Polylang では、レイアウト文字そのものを翻訳できる構成要素が インストールされていなくても、画面に設定済みの言語が一覧表示されることがあります。 画面上部の通知がその状況を伝えます。WPML と Polylang が翻訳するのは投稿と固定ページの 内容であり、デザイン内部に保存されたテキストはその範囲外です。

翻訳リクエストが翻訳済み文字列を 1 つも返さなかった場合、Aumframe は処理を中止し、 変更のない翻訳を作成して最新として記録することはしません。「利用可能なレイアウト 翻訳機能がない」場合と、「翻訳機能はあるが結果を返さなかった」場合（キーの期限切れや 割り当て超過など）を区別します。部分的な結果は保存され、返らなかった文字列は 原文のまま残ります。

12.2 Translate layouts の実際の画面

言語が利用可能な場合、この画面は選択した言語ごとに各デザインを一覧表示します。

1. Language：この表が対象とする言語を選択します。
2. Translate everything out of date：その言語について、期限切れのデザインすべてに 対して翻訳を実行します。

各行が 1 つのデザインを表し、その slug とともに次の値を示します。

Translate everything out of date は期限切れのレイアウトを一括で更新するため、 複数のデザインに影響する変更のあとに便利です。

13. その他のプリミティブ

6 つのプリミティブは、ここまで参照のみでした。本章でそれぞれを説明します。 引用符内の文言は、対応する Aumframe のパネルの表示をそのまま記載しています。

13.1 Icon

1. Pick one：29 種類の組み込みアイコンを提供します。説明は “29 built in, all following the text color.” これらは currentColor を使用する インライン SVG であるため、周囲のテキストの色を継承し、色の個別設定を必要としません。
2. Custom SVG：独自の SVG 内容を受け付けます。“Write only what goes inside `<svg>`, drawn on a 24×24 grid. Fill this in and the icon picked above is ignored; clear it to go back.”

カスタムのパスは 24×24 の座標系を使用してください。カスタム SVG が入力されている場合は、 上で選択した組み込みアイコンより優先されます。カスタム欄を空にすると、選択したアイコンに 戻ります。

13.2 Shape

Shape はカスタム SVG 内容のために 3 つの項目を提供します。

1. viewBox：“Defines the internal coordinate system — it decides how the numbers inside the SVG convert.” たとえば 0 0 300 70 は、要素の描画サイズとは独立した 300×70 の内部座標空間を定義します。
2. Scaling：Stretch to fill、Keep proportions · centered、 Keep proportions · top left。パネルは使い分けを次のように説明しています： “‘Stretch to fill’ suits things that may deform, like a line chart; ‘keep proportions’ suits artwork.”
3. SVG contents：“Write only what goes inside `<svg>`. Use currentColor to follow the text color.”

Icon とは異なり、Shape は自身で viewBox を定義します。そのため 24×24 以外の座標空間、 たとえば横長のチャートや全幅の区切り図形にも対応できます。

13.3 Canvas

Canvas にはこのプリミティブ固有の Content 項目がありません。空の <canvas> 要素を 描画し、すべての要素に共通するコントロールだけを保持します。

Canvas は、Aumframe 通常のサイズ指定の仕組みに乗せたまま、コンポーネントの挙動や カスタムスクリプトのための描画面として使うことを想定しています。それ自体は何も 描画しません。

新しく挿入した Canvas は、既定で高さ 260px、Fill に設定されています。 canvas には本来の内容の高さがないため、高さに Hug を使うと 0 に解決されることがあります。

Motion パネルの WebGL エフェクト（Cursor ripple、Liquid warp）は Canvas では 使用できません。画像、動画、コンテナーでのみ利用できます。

13.4 Audio

1. Source：メディアライブラリから項目を選択します。パネルの注記は “Inside a loop, bind it to an audio field instead — one clip per row.” Loop の内側でソースをバインドすると、各結果が独自のプレーヤーを描画できます（§6.4）。
2. URL：同じソースをテキスト形式で指定するもので、外部ホストのファイル向けです。
3. Controls：Native または None。“Off when a behaviour (Audio list) supplies its own play button.”
4. Preload：None、Metadata、Auto。既定は None です。1 ページに多数の プレーヤーがある場合に、再生前から複数の音声ファイルを要求することを避けられます。

13.5 Embed

1. URL：地図、動画、予約カレンダーなどのサービスを受け付けます。“Map, video, booking calendar. Paste the whole `<iframe>` snippet if that is what you were given — the address is taken out of it.”
2. Shape：16:9、4:3、3:2、1:1、21:9、Fill the box。
3. Ask before loading：既定で有効です。“On: a placeholder the visitor clicks. A third-party frame contacts that third party and may set cookies as the page loads, so this is both the privacy-safe and the fast default.”
4. 同意ゲートを有効にすると、Button text と Small print が設定できるようになります。 既定値はそれぞれ “Load this content” と “Loading it contacts a third party and may set cookies.” です。

これらのコントロールの下に Raw HTML (advanced) があり、 “used only when no URL is set above” と説明されています。URL が入力されている場合、 raw HTML の値は使用されません。

13.6 Form / shortcode

このプリミティブの項目は 1 つで、[aum_form id="1"] があらかじめ入力されています。 サイトにフォームがある場合は一覧から選択できます。1 つもない場合、パネルには “No forms yet. Create one under ‘AumCreate → Forms’, or just type another shortcode here.” と表示されます。

この項目は他の WordPress プラグインが提供するショートコードも受け付けるため、 ショートコードによる出力を Aumframe のデザイン内に配置できます。

13.7 すべての要素に共通するコントロール

次のセクションは、選択したすべての要素に表示されます。

Site header 以外の composite は、Button（“Frame + Text + a hover state”）、 Section（“A full-width band with a centred content column that follows the theme's content width”）、Row（“A horizontal container with two equal-width cells”）です。

14. WordPress が管理し続けるページ情報

デザインが置き換えるのは、フロントエンドの描画出力です。そのページは依然として WordPress のページであり、次の情報は WordPress が管理し続けます。

• 投稿タイトルとパーマリンク。
• SEO 用の description と og:description。表示されなくなった本文から、 引き続きこれらが生成されます。
• そのほか投稿に紐づくすべて（作成者、日付、リビジョン、コメント設定）。

前述の例では、表示されている本文はすべてデザインが描画したものですが、 <meta name="description"> には元のページ本文が入ったままです。

Aumframe のデザインがフロントエンドの描画を置き換えたという理由だけで、 WordPress ページの本文を削除しないでください。 その内容は表示されなくなりますが、 検証したこの構成では、description の生成元として使われ続けます。

15. トラブルシューティング

「Found unsaved changes from just now — the last session probably ended unexpectedly. [Restore] [Discard]」 デザインの編集中、Aumframe はローカルの下書きを保持します。タブが閉じた、ブラウザーが 予期せず終了した、保存前に画面を移動した、といった場合、次にそのデザインを開いたときに 下書きが提示されます。Restore は未保存の下書きを読み込みます。Discard は 下書きを削除し、データベース上の版を残します。Discard は取り消せません。 下書きの内容が不確かな場合は、まず復元して内容を確認してから、破棄するかどうかを 判断してください。

変更が反映されていないように見える。 inspector の状態の行とブレークポイントの行を確認してください（§4.2）。 Hover × Mobile に設定した値は、Default × Desktop を選択している間は表示されません。

デザインがサイトに表示されない。 ⋯ → Template settings を開いてルーティングを確認してください。ページが紐づいておらず、 一致するルールもないデザインは、フロントエンドに描画されません。

16. 任意の連携

本章の連携はすべて任意です。本ガイドのすべての手順は、標準の WordPress テーマの下で Aumframe のみをインストールした状態で検証しています。

AumCreate テーマ

デザインが覆うのは、そのルールが一致する URL です。それ以外（404、カート、 アカウントページ、著者ページ）は引き続きテーマの担当です。このサイトで同じ 2 つの URL を両方のテーマで実測した結果は次のとおりです。

AumCreate テーマは、すでに Aumframe が置き換えている URL の出力を変更しません。 デザインに一致しない URL については、自身の header.php と footer.php を通じて shell を描画し、サイト全体で一貫した外枠を提供します。

AumKit

kit は Aumframe のデザイン、コンテンツモデル、メディアをまとめたものです。 インストール前に、AumKit はその kit が宣言している要件を確認し、 各項目を missing · inactive · too old · ok として報告します。

AumNexCart と AumReserva

どちらも独立したプラグインで、いずれも Aumframe を直接参照していません （検証したビルドでは、両プラグインとも言及するファイルは 0 件）。連携は §10 の “Use this type as a product catalog” オプションを通じて行われます。コンテンツタイプを この設定にすると、データをどちらのプラグインが供給していても、カードのデザインは 同じ経路で価格と行動喚起のデータをバインドできます。

多言語プラグイン

§12 を参照してください。Aumframe はデザイン内に保存されたテキストを公開し、 多言語プラグインは投稿の内容を翻訳します。両者の役割は分離されたままです。

17. Preview、Live、隠れた枝

上部バーには、プレビューと編集の用途に応じた 3 つのコントロールがあります。

モーションと操作の確認には Live、保存済みのフロントエンドの結果を開くには Preview、条件により隠れている枝をキャンバス上に表示するには ◌ を使用します。