内蔵エディタの全機能リファレンス

1. エディタの起動と保存

エディタは /editor（新規作成）または /editor/{slug}（既存編集）の URL で起動します。 通常はコンテンツライブラリの 「新規デザイン作成」 や、公開済みカードの 「編集」 ボタンから起動します。

保存は 自動保存 方式です。構造的な変更（ページ追加/削除/改名/並べ替え/インポート）は約 2 秒のデバウンスで自動的にサーバへ保存されます。 保存状態はヘッダの右側に 「保存中...」「自動保存 HH:mm:ss」「自動保存 ON」 として表示されます。

2. ヘッダバー

画面最上部のヘッダバーには、以下の要素が左から順に並びます。

• Signact ロゴ＋「エディタ」ラベル: コンテンツライブラリへの戻り導線
• 自動保存ステータス: 「保存中...」/「自動保存 HH:mm:ss」/「自動保存 ON」のいずれか
• タイトル入力欄: コンテンツ名。コンテンツライブラリと端末割当時の選択肢に表示される
• 「プレビュー」ボタン: 配信時と同じビューを新しいタブで表示

3. ＋ボタン（追加メニュー）

ページタブバー左端の ＋ ボタンをクリックすると、追加メニューが展開されます。 3 種類の追加方法から選択できます。

• ページを追加: 空の新規ページを末尾に追加
• PDF から追加: PDF ファイルをページ単位で取り込み（後述）
• メディアファイルから追加: 画像／動画をアップロードしてキャンバスに配置（後述）

4. ページタブ操作

複数のページを 1 つのデザインに含められます。ページタブは以下の操作に対応します。

• 並べ替え: タブをドラッグ＆ドロップ。先頭ページがホーム＝サムネイル撮影の対象
• 名前変更: タブをダブルクリックでインライン編集
• 削除: タブにマウスをホバーすると右側に × ボタン。複数ページ時のみ表示
• リンク挿入: タブをキャンバス上にドロップすると、そのページへのリンク <a target="_top"> を挿入

5. デバイス切替・ズーム・パン

キャンバス上部のコマンドバーには、配信先デバイスのプレビュー切替アイコン（PC・タブレット・スマートフォン）と、ズーム・パン・リセットなどのコントロールが並びます。

• デバイス切替: 用途に応じた表示サイズを選択。選択中の寸法は保存時にデザインの公開設定にも書き戻されます（§9 参照）
• カスタム寸法（右上の斜め矢印アイコン）: 任意の幅・高さを指定（§9 参照）
• ズームスライダー: 10〜200% の範囲で調整。「100%」ラベルをクリックすると等倍に戻る
• パントグル（手のひらアイコン）: ON にするとドラッグで紙をつかむようにパン移動できる
• リセット（戻る矢印アイコン）: ズームと位置をまとめて初期化

主なキーボード・マウスショートカット:

右パネルとキャンバスの境界はドラッグで右パネルの幅を変えられます。

6. 右パネル（ブロック・スタイル・トレイト・レイヤー）

エディタ右側のパネルは、上部の 4 つのタブで切り替えできます。配置や編集はすべてこの右パネルとキャンバスの組み合わせで完結します。

• ブロック: 見出し・段落・画像・矩形・カラムなどの要素を、ドラッグ＆ドロップでキャンバスに配置
• スタイル: 配置済み要素を選択すると、文字色・背景色・余白・サイズ・配置などを GUI で調整できる
• トレイト: 要素ごとの属性（リンクの href、画像の alt など）を編集
• レイヤー: ページ内の要素ツリーを階層表示。選択や並べ替えに使う

パネルおよびスタイル設定項目は完全に日本語化されています。 右パネルの幅は、キャンバスとの境界をドラッグして自由に変えられます。

7. PDF からページ追加

チラシ・お知らせ・メニュー PDF をそのままページとして取り込めます。 ＋ボタン → 「PDF から追加」 でモーダルを開き、ファイル選択後に解像度を指定して取り込みます。

• 解像度: 150 DPI（標準）／300 DPI（高画質）から選択。300 DPI はファイルサイズが大きくなる代わりに表示時の精細さが向上
• 日本語フォント対応: ブラウザ側で PDF をレンダリングするため、サーバの日本語フォント設定に依存せず、日本語の脱落が発生しない
• 取り込み単位: PDF の各ページを 1 つのエディタページに変換

8. メディアファイル追加

画像・動画ファイルをアップロードして、キャンバスに配置できます。 ＋ボタン → 「メディアファイルから追加」 でモーダルを開き、ファイル選択（複数可・ドラッグ＆ドロップ可）後に追加します。

• 対応形式: 画像（PNG / JPG / WebP など）、動画（MP4 など）
• アップロード先: サーバの内部ファイルストレージに保存され /media/{id} で参照される
• プラン上限: 合計ストレージ容量はプランごとに上限あり（Free 100 MB / Pro 5 GB）

9. キャンバス寸法と配信時の表示

キャンバスの寸法は、コマンドバーの デバイス切替アイコン（PC / タブレット / スマートフォン）から定型サイズを選ぶか、 「カスタム寸法」モーダル で任意の幅・高さ（ピクセル）を指定します。 カスタム寸法では、高さに 0 を指定するとコンテンツに応じた自動高さになります。

保存時に、選択中のキャンバス寸法がデザインの公開設定（CanvasWidth / CanvasHeight）に書き戻されます。 配信時には、端末の WebView の <body> がキャンバスと同じ寸法でラップされ、画面中央にセンタリングされます。 エディタで見たままの状態が端末でも再現される設計です。

10. プレビュー

ヘッダ右側の 「プレビュー」 ボタンをクリックすると、配信時と同じビューを新しいタブで表示します。 複数ページがある場合は、URL の末尾を変えることで任意のページを直接開くこともできます。 配信側の端末からも同じ URL を読み込むため、プレビューと配信の見た目は一致します。