Software Manual / ソフトウェア解説

マイ編集工房

テキスト・画像・表・図形を自由にレイアウトできる
万能ページデザインソフトウェアです。
縦書き・多ページ・印刷まで、すべて一つのアプリで。

Version 1.0.0 / HTML + CSS + JavaScript

📝
01

マイ編集工房とは

「パーソナル編集長」にインスパイアされた、ブラウザで動く万能ページレイアウトエディタです。
チラシ・ニュースレター・ハガキ・冊子など、あらゆる紙面を自由に作成できます。

📝
テキスト枠
横書き・縦書きに対応。フォント・サイズ・色・行間・文字間隔を自由に設定できます。
🖼
イメージ枠
画像ファイルを読み込んで配置。枠内で自動リサイズされます。
表枠
行・列数を指定して表を作成。セルの内容を直接編集できます。
図形・線
四角形・円・直線を描画。塗りつぶし色・枠線色・太さを設定できます。
📄
多ページ管理
ページタブで複数ページを管理。A4・A3・ハガキなど用紙サイズも選択可能です。
💾
保存・出力
JSONファイルで保存・読み込み。HTMLエクスポートや印刷にも対応しています。
02

主要機能の解説

マイ編集工房が持つ主な機能を詳しく紹介します。

T
B
I
U
🖼
テキスト・書式

豊富な文字書式で
表現力を高める

テキスト枠では、フォントの種類・サイズ・太さ・色・背景色をそれぞれ個別に設定できます。行間・文字間隔の微調整も可能で、プロフェッショナルな紙面に仕上げることができます。

縦書きモードにも対応。テキスト枠を選択して左パネルの「縦書き」ボタンを押すだけで、日本語縦組みレイアウトに切り替えられます。

💡 ヒント: テキスト枠をダブルクリックすると編集モードになり、直接文字を入力・修正できます。
図形・デザイン

図形でレイアウトを
視覚的に彩る

四角形・円形・直線の3種類の図形を配置できます。それぞれ塗りつぶし色・枠線色・線の太さを設定可能です。枠線のスタイル(実線・破線・点線・二重線)も選べます。

角丸・透過度・影などのスタイルを組み合わせることで、デザイン性の高いレイアウトが実現できます。左右・上下の反転も1クリックで行えます。

📄
+
PAGE
📄 P.1
📄 P.2
📄 P.3
+
ページ 1
🖼
ページ管理

多ページ対応で
冊子も簡単作成

画面下部のタブで複数ページを管理できます。「+」ボタンでページを追加、タブの「×」で削除が可能。各ページは独立したレイアウトを持ちます。

ページ設定メニューでは用紙サイズ(A4・A3・A5・B5・ハガキ・カスタム)と向き(縦・横)を選択できます。

⚠ 注意: ページを切り替えると、そのページの枠が表示されます。各ページの作業は自動的にブラウザに保存されます。
💾
🌐
🖨
💾 .ped ファイルとして保存
🌐 HTML として書き出し
🖨 ブラウザ印刷ダイアログ
保存・出力

3種類の方法で
データを保存・出力

作成したレイアウトは3つの形式で保存・出力できます。

1
💾 ファイル保存(.ped)
すべてのレイアウト情報をJSONファイルとして保存します。後で再編集できます。
2
🌐 HTMLエクスポート
レイアウトをHTMLファイルとして書き出します。Webブラウザで閲覧できます。
3
🖨 印刷
ブラウザの印刷ダイアログを使ってPDF出力や紙への印刷ができます。
03

基本的な使い方

初めて使う方のための基本操作の流れです。

📌 枠を作る

1
ツールを選ぶ
左側のツールパネルから作りたい枠の種類(テキスト・画像・表・図形)を選びます。
2
ドラッグして配置
キャンバス上でマウスをドラッグすると、その大きさで枠が作成されます。クリックだけでもデフォルトサイズで配置されます。
3
内容を編集
テキスト枠はダブルクリックで編集モードに。画像枠はダブルクリックまたは「画像を追加」をクリックしてファイルを選択します。

🎨 枠を整える

1
枠を選択する
選択ツール(↖)でクリックすると枠が選択されます。Shiftキーを押しながらクリックで複数選択もできます。
2
移動・リサイズ
選択した枠をドラッグして移動。枠の四隅・辺のハンドルをドラッグしてサイズを変更します。矢印キーでも微調整できます。
3
書式を設定する
上部ツールバーや右側プロパティパネルで、フォント・色・枠線・透過度などを設定します。
04

ツール一覧

左側ツールパネルの各ツールの説明です。

アイコン ツール名 説明 主な操作
選択ツール
デフォルト
枠を選択・移動・リサイズするための基本ツール。ドラッグで範囲選択(マーキー選択)も可能。 クリック・ドラッグ
T
テキスト枠
文章を入力できる枠を作成。フォント・サイズ・色・行間・縦書きなど豊富な書式設定が可能。 ドラッグして作成
ダブルクリックで編集
🖼
イメージ枠
画像ファイル(JPG・PNG・GIF・WebP)を読み込んで配置する枠。 ドラッグして作成
クリックで画像選択
表枠
行・列数を指定した表を作成。セルを直接クリックして内容を編集できる。 ドラッグして作成
セルをクリックで編集
四角形
長方形・正方形の図形を描画。塗りつぶし・枠線・角丸などを設定できる。 ドラッグして描画
円形
楕円・円の図形を描画。塗りつぶし色と枠線色を設定できる。 ドラッグして描画
直線
水平線・区切り線などに使える直線を描画。枠の高さで線の位置を調整。 ドラッグして描画
縦書き切替
選択中のテキスト枠を縦書き/横書きに切り替える。テキスト枠のみ有効。 テキスト枠を選択してクリック
🔍
ズームイン
キャンバスの表示を25%拡大する。上部セレクトボックスでも倍率変更可能。 クリック
🔎
ズームアウト
キャンバスの表示を25%縮小する。50%〜400%の範囲で調整可能。 クリック
05

キーボードショートカット

作業を素早く進めるためのショートカットキー一覧です。

📂 ファイル操作
新規作成
Ctrl+N
保存
Ctrl+S
印刷
Ctrl+P
✏️ 編集操作
元に戻す
Ctrl+Z
やり直し
Ctrl+Y
コピー
Ctrl+C
切り取り
Ctrl+X
貼り付け
Ctrl+V
すべて選択
Ctrl+A
削除
Delete
選択解除
Esc
🅐 文字書式
太字
Ctrl+B
イタリック
Ctrl+I
下線
Ctrl+U
🖱 枠の移動
1px移動
10px移動
Shift+矢印
拡大
Ctrl++
縮小
Ctrl+
06

使いこなしTips

作業をスムーズにするためのヒントです。

📐 グリッドで整列
「表示」メニューの「グリッド表示」をオンにすると、20pxグリッドが表示されます。枠を等間隔に並べる際に便利です。
🗂 レイヤーパネルを活用
右パネルの「レイヤー」欄に、すべての枠が一覧表示されます。クリックで選択、👁アイコンで表示・非表示の切り替えができます。
📋 右クリックメニュー
キャンバス上で右クリックするとコンテキストメニューが表示されます。コピー・貼り付け・削除・Z順序変更が素早く行えます。
↔ 複数選択と整列
Shiftキーを押しながら複数の枠をクリックすると、右パネルの「整列」ボタンで一括整列できます。
🔍 検索・置換
「ツール」メニューの「検索・置換」で、全テキスト枠内の文字をまとめて検索・置換できます。
📱 QRコード挿入
「挿入」メニューまたは右パネルの「クイック挿入」からQRコードを作成できます。URLやテキストを入力して挿入するだけです。
💾 自動バックアップ
作業内容はブラウザに自動保存されます。ページを閉じても次回開いたときに復元されます(同じブラウザ・端末の場合)。
㊤ 縦書きのコツ
縦書きには縦長のテキスト枠が適しています。枠を選択して「㊤ 縦書き」ボタンをクリック。もう一度押すと横書きに戻ります。