7. ブロック管理
特集ページに「ブロック機能」が追加されました。複数のパーツをブロック化することで、関連するコンテンツをまとめて管理し、作業効率を大幅に向上させることができます。
ブロック機能とは？
ブロック機能は、複数のパーツを論理的にまとめて管理するための機能です。例えば、「ヘッダーセクション」「商品紹介エリア」「お客様の声セクション」など、関連するパーツをブロック化することで、ページ構成を整理整頓できます。
ブロック機能のメリット
⚡ 効率的な操作
ブロックの展開/折りたたみで必要な部分だけを表示し、作業効率が向上します。
🔄 再利用可能
保存したブロックを他のフィーチャーページでも使用でき、統一感のあるデザインを実現します。
👥 チーム共有
よく使うレイアウトをブロックとして保存し、チーム内で共有できます（今後実装予定）。ブロックの作成
基本的な作成手順
-
ブロックを追加したいエリアを選択 ヘッダー、ボディ、サイドメニュー、フッターのいずれかのエリアで「ブロックを追加」ボタンをクリックします。
(各エリアの下部にある「ブロックを追加」ボタンのスクリーンショット) -
ブロックテンプレートを選択 用意されているブロックテンプレートから適切なものを選択します。
例：
- マルチカラム: 複数の列を並べて表示するレイアウト
- ヘッダーブロック: ロゴやナビゲーションを含むヘッダー
- 商品紹介: 商品画像と説明文のセット
- お客様の声: レビューやテストモニアルのセクション
(ブロックテンプレートの選択ダイアログのスクリーンショット) -
作成完了 テンプレートを選択すると、ブロックがエリアに追加されます。必要に応じてパーツの内容を編集できます。
ブロック作成時のポイント
- 命名規則: ブロックの内容がすぐわかる名前を付けましょう
- 適切なサイズ: 3〜8個程度のパーツでブロックを作ると管理しやすい
- 論理的なまとまり: 関連性の高いパーツをブロック化する
ブロックの表示と操作
ブロックの見た目
ブロックは以下のような特徴的な表示になります：
- ブロックアイコン: ブロックであることを示すフォルダーアイコン
- ブロック名: 設定した名前が表示されます
- パーツ数表示: 「(3 パーツ)」のように、含まれるパーツ数が表示されます
- 展開/折りたたみ矢印: クリックで内容の表示/非表示を切り替えます
(展開されたブロックと折りたたまれたブロックの表示例)
基本操作
展開/折りたたみ
ブロック名の左側にある矢印（▶ または ▼）をクリックすることで、ブロック内のパーツを表示/非表示にできます。
- 展開時（▼）: ブロック内のすべてのパーツが表示されます
- 折りたたみ時（▶）: ブロック名とパーツ数のみ表示されます
ブロックの並び替え
ブロックは同じエリア内でドラッグ&ドロップで並び替えできます。
- ブロック名の左側にあるドラッグハンドルをクリック
- 同じエリア内の目的の位置までドラッグ
- マウスボタンを離して配置
ブロック名の変更
- ブロック名を右クリック
- 「ブロック名変更」を選択
- 新しい名前を入力
- Enterキーまたは「OK」ボタンで確定
ブロックの削除
ブロックを削除すると、ブロックとその中に含まれるすべてのパーツが削除されます。
- ブロックを右クリック
- 「ブロック削除」を選択
- 確認ダイアログで「削除」をクリック
パーツの追加と削除
ブロックへのパーツ追加
ブロックに新しいパーツを追加する方法は、画面の場所によって異なります。
パーツリスト（左メニュー）での追加
- ブロックを展開して内容を表示
- ブロックの先頭にある「+ パーツを追加」ボタンをクリック
- 追加したいパーツの種類を選択
- パーツがブロックの末尾に追加されます
(パーツリストのブロック先頭にある「+ パーツを追加」ボタンを示すスクリーンショット)
ライブプレビューでの追加（詳細な位置指定）
ライブプレビュー画面では、より細かい位置指定でパーツを追加できます：
- 追加したい位置の近くのパーツにマウスカーソルを合わせる
- パーツの上部または下部に表示される「＋」ボタンをクリック
- 上部の「＋」ボタン：そのパーツの前に新しいパーツを追加
- 下部の「＋」ボタン：そのパーツの後に新しいパーツを追加
- 追加したいパーツの種類を選択
- 指定した位置にパーツが追加されます
(ライブプレビューでパーツにマウスを合わせた時に表示される「＋」ボタンを示すスクリーンショット)
パーツの並び替え
パーツは同じブロック内でのみドラッグ&ドロップで並び替えできます。
- ブロックを展開
- 移動したいパーツのドラッグハンドルをクリック
- 同じブロック内の目的の位置までドラッグ
- マウスボタンを離して配置
ブロック間でのパーツ移動
異なるブロック間でパーツを移動したい場合：
- 元のブロックからパーツを削除（削除ボタンをクリック）
- 移動先のブロックで新しくパーツを追加
- 必要に応じて設定をコピー
ブロックの保存と読み込み
ブロックの保存
作成したブロックは保存して、他のフィーチャーページでも再利用できます。
- 保存したいブロックを右クリック
- 「ブロックを保存」を選択
- 保存ダイアログで以下を設定：
- ブロック名（既存の名前が表示されます）
- 説明（オプション）
- 共有設定（今後実装予定）
- 「保存」ボタンをクリック
(ブロック保存ダイアログのスクリーンショット)
ブロックの読み込み
保存したブロックを新しいページや既存のページに読み込むことができます。
- パーツリストの上部にある「ブロックを読み込む」ボタンをクリック
- 保存済みブロックの一覧から選択
- プレビューで内容を確認できます
- 作成日時や使用回数も表示されます
- 読み込みオプションを選択：
- ☑ コンテンツ設定を読み込む
- ☑ スタイル設定を読み込む
- ☑ メニュー設定を読み込む
- 「読み込む」ボタンをクリック
活用例
例1: ヘッダーブロック
会社のロゴ、ナビゲーションメニュー、お知らせバナーをブロック化して「標準ヘッダー」として保存。すべてのフィーチャーページで統一されたヘッダーを簡単に適用できます。
例2: 商品紹介ブロック
商品画像、商品説明テキスト、価格表示、購入ボタンをブロック化。商品ごとにブロックを作成し、カテゴリページで再利用します。
例3: レビューセクション
お客様の声のタイトル、複数のレビューパーツ、もっと見るボタンをブロック化。複数のランディングページで同じレビューセクションを使用できます。
よくある質問
Q: ブロック内のパーツの順序は変更できますか？
A: はい、ブロックを展開した状態で、同じブロック内でパーツをドラッグ&ドロップすることで順序を変更できます。
Q: パーツを他のブロックに移動できますか？
A: 直接ドラッグ&ドロップでの移動はできません。パーツを他のブロックに移動したい場合は、一度削除してから目的のブロックで再度追加する必要があります。
Q: ブロックを他のエリアに移動できますか？
A: いいえ、ブロックは同じエリア内でのみ移動可能です。例えば、ヘッダーのブロックをボディに移動することはできません。
Q: なぜドラッグ&ドロップに制限があるのですか？
A: この制限により、ページ構造の整合性が保たれ、誤操作によるレイアウトの崩れを防ぐことができます。また、データの一貫性も保証されます。
Q: ライブプレビューで表示される「＋」ボタンが見つかりません
A: 「＋」ボタンはパーツにマウスカーソルを合わせた時にのみ表示されます。パーツの上にマウスを移動すると、上部と下部に「＋」ボタンが現れます。ただし、ブロックに含まれていない古いパーツではこの機能は利用できません。
Q: パーツリストとライブプレビューでの追加方法の違いは？
A: パーツリストでは、ブロックの先頭にある「+ パーツを追加」ボタンから追加でき、パーツは常にブロックの末尾に追加されます。ライブプレビューでは、各パーツの上下に表示される「＋」ボタンを使って、特定の位置に正確にパーツを挿入できます。
Q: ブロックはいくつまで作成できますか？
A: ブロック数に制限はありませんが、管理のしやすさを考慮して適切な数に留めることをお勧めします。
Q: ブロックを入れ子（ブロックの中にブロック）にできますか？
A: 現在のバージョンでは、ブロックの入れ子はサポートしていません。
Q: 保存したブロックは他のメンバーと共有できますか？
A: 現在は同じ組織内での共有のみ可能です。将来的には、共有設定の拡張を予定しています。
今後の機能拡張予定
- 共通ブロック: 管理者が作成した全員共通のブロック
- ブロックテンプレート: 業界別・用途別のブロックテンプレート
- サムネイル表示: ブロック選択時のビジュアルプレビュー
- エクスポート/インポート: ブロック設定の外部ファイル化
ブロック機能を活用して、効率的で整理されたフィーチャーページ作成を実現しましょう。 次は「8. 公開（デプロイ）」で、完成したページを公開する方法を学びます。