概要
モジュールは、サイトを構成する独立したコンテンツブロック（レゴブロックのようなもの）です。ヒーローセクション、横並び画像、カードギャラリー、FAQ、主要指標、YouTube動画などはすべて個別のモジュールです。ページ上に複数のモジュールを積み重ね、それぞれ背景色、カードスタイル、間隔、ボタン位置をカスタマイズすることで、視覚的に深みのあるリッチなページを作成できます。
利用可能なすべてのモジュールについては、「」をご覧ください。
モジュールの追加、並べ替え、管理
1. モジュールの追加（AI支援またはテンプレートから）
- エディター上部のツールバーから「モジュール」パネルを開きます。モジュールは目的別に分類されています（「おすすめ」、「ビジュアル」、「画像とテキスト」、「テキスト」、「情報」、「ストア」、「連携」）。システムがブランドを分析済みの場合、「おすすめ」モジュールが上部に表示されます。
- 追加したいモジュールカードをクリックします。
- AI対応のコンテンツモジュールの場合、「AI支援」（要件を入力してAIでドラフトを生成、AIクレジットを2消費）または「テンプレートから編集」を選択できます。
- ストアモジュール（商品表示、商品カタログ、価格表）やオンラインフォームは、バックエンドから直接データを取得します。追加後にドロップダウンメニューから紐付けを行ってください。
- モジュールをページの上部に追加するか、既存のモジュールの下に追加するかを選択します。内容を確認したら、パネル下部の「サイトに追加」をクリックしてドラフトとして保存します。
ヒント: ヘッダーとフッターはサイト全体に共通するフレームであり、「モジュール」ディレクトリには含まれません。これらは上部ツールバーの「レイアウト」から編集してください。リンクインバイオページは単一ページレイアウトであり、標準モジュールの混在はサポートされていません。
2. キャンバスまたは「レイアウト」パネルでのモジュールの並べ替え、複製、移動
プレビューキャンバス上のモジュールにカーソルを合わせるか（モバイルではモジュールをタップして下部のフローティングバーを表示）、上部の「レイアウト」リストを開きます。「編集」および「⋯」オプションを使用して、以下の操作を行えます（変更はすべて自動的にドラフトに保存されます）。
- ドラッグして並べ替え / 上下移動: 「レイアウト」リストのドラッグハンドルを長押しして、モジュールの順序を調整します。
- 非表示と表示（目のアイコン）: イベント前や準備中のコンテンツは「非表示」に設定できます（「復元」プロンプトが表示され、削除せずにいつでも再表示可能です）。
- 複製: モジュールの同一コピーを作成します。一貫性のあるセクションを素早く構築するのに最適です。
- 他のページへ移動: サイトに複数の標準ページがある場合、モジュールを別のページへ直接移動できます。
- 削除: モジュールを削除します（上部の「元に戻す」をクリックするか、から復元可能です）。
モジュールファミリーのワンクリックレイアウト変換
モジュールを選択し直すために削除して最初からやり直す必要はありません！構造が似ているモジュールファミリーの場合、モジュール右上の「⋯」アイコン（または「レイアウト」メニュー内）をクリックし、「レイアウトを変換」を選択すると、同じファミリー内の別のモジュールに即座に切り替えられます。
| モジュールファミリー | 相互変換可能なモジュールタイプ | 損失なく保持されるコンテンツ |
|---|
| カード＆ギャラリーファミリー | テキストカードギャラリー ↔ 画像テキストカードギャラリー ↔ 画像テキストカードカルーセル ↔ マルチ画像ギャラリー | モジュールのタイトル、説明、サブ見出し、背景色、列数、カードスタイル、および各カードのタイトル、本文、画像、フォーカルポイント、アイコン、バッジ、箇条書き、ボタンがすべて保持されます。 |
| ヒーロー＆レイアウトファミリー | ページヒーロー ↔ 全幅画像 ↔ サイドバイサイドレイアウト | タイトル、説明、サブ見出し、メイン画像とフォーカルポイント、箇条書き、指標、ボタン、フッター注釈がすべて保持されます。 |
- データを保持したまま切り替え: 「画像とテキストのカードギャラリー」を写真を表示しない「テキストのみのカードギャラリー」に変換しても、システムはアップロードされた画像とフォーカスポイントをバックグラウンドで保持します。元に戻すと、写真は元の状態で再表示されます。
テキストの書式設定、見出しレベル、折りたたみ可能な長文
「見出し」または「説明」の入力フィールドをクリックすると、フィールドヘッダーの右側に「リッチテキストツールバー」と「AIライティング」ボタンが表示されます。
1. 見出しのセマンティックレベル（H1 / H2 / H3）
ツールバーの「H1」/「H2」/「H3」ボタンをクリックして、見出しのセマンティクスとデフォルトのフォントサイズを切り替えます。
- H1（ページメイン見出し）: 最上部のモジュール（例：「ヒーローセクション」）のみに使用することを推奨します。これにより、GoogleやAI検索エンジンがページトピックを即座に理解しやすくなります。
- H2（セクション見出し）: 標準コンテンツモジュールのデフォルトレベルで、ページの主要セクションを表します。
- H3（小見出し）: 補足情報やカードタイトルに最適です。
2. 部分的なフォントサイズ、色、書式設定
見出しや説明ボックス内のテキストの一部をハイライトして、そのテキストだけに特定のスタイルを適用できます。
- 部分的なフォントサイズ: 9種類のフォントサイズから選択し、見出し内の特定のキーワードを強調または縮小できます。
- テキストの色とハイライト: テキストの色を切り替えたり、ソフトなハイライト背景を追加してオファーや主要数値を強調したりできます。
- テキストの書式設定と構造: 太字、斜体、下線、取り消し線、箇条書きリスト、番号付きリスト、引用、インラインリンク、「書式をクリア」ボタンをサポートしています。
3. 折りたたみ可能な長文（長すぎるページを防止）
モジュールの説明に150文字以上入力すると、入力ボックスの下部に「折りたたみテキスト」設定バーが表示されます。
- 「すべて表示」（デフォルト）、「3 / 5 / 10 / 15行を表示」（超過分は自動的にフェードアウトし、「続きを読む」ボタンが追加されます）、「固定高さのスクロールエリア」から選択できます。
- カードやリストモジュール（画像とテキストカード、テキストカード、FAQ、価格表、マイルストーン、マルチメディアなど）では、カードセクション下部の「カードテキストの折りたたみ（すべて表示 / 3行 / 5行）」を使用して、テキストの長さによるカードの高さの不揃いを修正できます。
見出しアクセサリー：アイブロウ、特徴、ハイライト
フォームをすっきりと保つため、高度なアクセサリーは見出しや説明フィールドの右上に格納されており、クリックすると展開されます。
- ＋アイブロウ: メイン見出しの上に表示される小さなラベルです。アイコンと短いテキスト（例：
✦ 選ばれる理由、🔥 限定オファー）を選択できます。
- ＋特徴: ヒーロー、横並び、CTAモジュールで、ブランドチェックマークアイコン
✓ 付きの箇条書きを最大8つまで追加できます。
- ＋ハイライト: ヒーロー、横並び、CTAモジュールで、目を引くデータポイントを最大4つ表示できます（例：
10年以上の経験、顧客満足度99%）。
レイアウトと外観：背景、配置、列数、カードスタイル
モジュールエディターパネルの「レイアウトと外観」セクションまでスクロールして、視覚的な表示を調整します（中央のプレビューがリアルタイムで更新されます）。
1. モジュールの背景（6つの表面カラー、テキストとボタンは自動的に明確なコントラストを維持）
| 背景オプション（ライトモード／ダークモード名） | 視覚効果と使用例 |
|---|
| 自動交互（デフォルト） | 隣接するモジュールがライトとライトグレーで自動的に交互に切り替わり、セクションを自然に区切ります。 |
| ピュアホワイト／ディープブラック | モジュールの順序に関係なく一貫性を保つ、クリーンなプライマリ背景色を使用します。 |
| マットグレー／チャコールグレー | 白い3Dカードを強調するのに最適な、柔らかなセカンダリ背景色を使用します。 |
| ブランドソフトライト | 背景に繊細なブランドカラーの色合いを適用し、重要なセクションを優しく強調します。 |
| ブランドプライマリ | 全幅の高彩度ブランドカラーブロック。テキストと塗りつぶしボタンは自動的に白に反転し、重要なCTAや主要な指標に最適です。 |
| マットブラック／ソフトチャコール | ポートフォリオやコントラストの強い強調エリアに最適な、緊張感のあるダークな全幅背景です。 |
2. 見出し位置、デバイス配置、列数
- 見出し位置: ほとんどのモジュールで、見出しを「上揃え」、「左列」、「右列」に配置できます（左または右を選択すると、デスクトップで雑誌風のレイアウトになります）。
- 見出しの配置（デスクトップ/タブレット/モバイルで個別に設定）: 見出しが上部にある場合、フィールド横のデバイスアイコンをクリックして、各デバイスの配置を「中央」または「左」に設定します（クリックすると中央のプレビューがそのデバイス表示に切り替わります）。
- 1行あたりの列数（3つのデバイスで個別に設定）: カードギャラリー、画像ギャラリー、主要指標、オーディオ、動画モジュールでは、デスクトップ（1～6）、タブレット、モバイルの列数を指定できます。
- 垂直方向の間隔: デフォルトは「サイト全体に従う」ですが、「コンパクト」、「標準」、「広め」に上書き可能です。
3. カードの配置、4つのカードスタイル、画像比率
カードや商品リストモジュールでは、グリッドとカードの外観を自由に組み合わせることができます。
- グリッド配置: 「等幅グリッド」（デフォルト）、「注目カード（最初）」（最初のカードが2列分を占有するモダンな弁当スタイル）、「水平リスト」（1列、左に画像、右にテキスト）。
- 4つのカードスタイル:
- シャドウ: クラシックな浮き上がる白いカード（画像とテキストカードのデフォルト）。
- アウトライン: クリーンな構造の枠線（テキストカードと主要指標のデフォルト）。
- ソフト背景: 枠線や影のないソフトなカラーブロック。
- ミニマリスト: 透明、枠線なし、背景なし、画像の角が丸いデザイン。ポートフォリオ、ファッション、雑誌風レイアウトに最適。
- 画像比率とメディア幅: 画像とテキスト、画像ギャラリー、商品モジュールは、「元の比率（切り抜きなし）」、「16:9」、「4:3」、「1:1（正方形）」、「3:4（縦長/ファッション）」をサポートしています。単一の動画、PDF、大きな画像は表示幅（コンパクト/標準/ワイド）を切り替えられます。
4. 完全に交換可能なカードスロット
「画像とテキストのカードギャラリー」、「テキストカードギャラリー」、「画像とテキストのカルーセル」では、各カードをカスタマイズできます。
- ビジュアル: 写真をアップロード（フォーカスポイント調整と「クリックして拡大」ライトボックスをサポート）するか、ブランドアイコンを選択します。
- 右上のバッジ: コーナーに短いラベルを追加します（例：
人気、ステップ1、NEW）。
- 見出し、説明、特徴リスト。
- 個別のカードボタン: 各カードの下部にカスタムボタンを紐付けます（同じ行のボタンは自動的に下部で揃えられます）。
モジュールボタン（最大3ボタン×3スタイル）とインプレース追加
モジュールフォーム下部の「カスタムボタンを追加」セクションでは、各モジュールに最大3つのアクションボタンを配置できます。
- 選択またはインプレースで追加: ドロップダウンからサイト全体のボタンを選択するか、ヘッダー右側の「＋ボタンを追加」をクリックして即座に新しいボタンを作成します（パネルを離れることなく、サイト全体のブランド設定に同期されます）。
- 3つのボタンスタイルを切り替え（選択したボタンカードを展開してモジュールごとに指定）：
- プライマリ（塗りつぶし）: 最も目立つアクションボタン（例：「今すぐ予約」）。
- デフォルト（ニュートラルな枠線）: プライマリボタンの横に置く二次的なアクションに最適（例：「価格を見る」）。
- テキスト矢印（→）: 背景や枠線のない軽量なリンク。スライドする矢印付きで、カードやセクションの下部に最適。
- ボタン位置とフッター注釈: ボタンを選択したら、「見出しの下」または「モジュールコンテンツの下」に配置するかを選択します。「＋フッター注釈」をクリックして、ボタンの下に小さなテキスト行を追加します（例：「契約不要、いつでもキャンセル可能」）。
サイト全体で共有されるモジュールとページ内「#アンカー」設定
ほとんどのモジュールフォームの下部（「サイト全体および詳細設定」セクション）には、2つの便利な機能があります。
- サイト全体で共有されるモジュールとして設定: 有効にすると、他のページでこのモジュールをコピーまたは参照した場合、1つのページで内容を更新すると、この共有モジュールを使用しているすべてのページで同期されます（お客様の声、FAQ、サイト全体のCTAに最適）。
- セクションアンカーID（ページ内ナビゲーション用）: ハイフンを含む短い小文字の英文字列を入力します（例：
pricing や faq）。設定後、やカスタムボタンでそのページを選択する際に #pricing を紐付けると、訪問者がクリックした際にそのセクションへスムーズにスクロールできるようになります！
