[2026/9/25]

[WEB App] Paint Core Studio v1.0 — 筆圧対応ペイントアプリの使い方ガイド

[WEB App] Paint Core Studio v1.0 — 筆圧対応ペイントアプリの使い方ガイド

概要

Paint Core Studio は、ブラウザだけで動く筆圧対応のペイントアプリです。インストールやアカウント登録は不要で、描いた絵がサーバーへ送られることもありません。

ペンタブレットの筆圧で線の太さが変わる6種類のブラシ、レイヤー、手ぶれ補正を備えています。液タブの ExpressKey を模した浮遊パッドと、右クリックのパイメニューでツールをすばやく切り替えられます。作品は PSD（レイヤー付き）で保存でき、PNG / JPEG / WEBP での書き出しにも対応しています。

Paint Core Studio を起動する

以下、リンクを開くと起動します。

スタートメニューから起動

トップページのスタートメニューからも起動できます。

Paint Core Studio — スタートメニュー

画面構成

場所内容
上部バーPSD保存、画像書き出し、開く、左右反転、戻る / 進む、設定、ヘルプ。右端はキャンバスサイズ・ズーム率・回転角度
左ツールバーブラシ、消しゴム、直線、四角形、円形、描画色
浮遊パッド1〜8のボタンとリング。ツールバー上部の :::: を掴んで好きな位置へ移動できます
右パネル（上）レイヤー一覧と、追加・削除・上へ・下へ・結合ボタン
右パネル（下）ブラシプリセット、ブラシサイズ、手ぶれ補正

右パネルの中央にあるバーを上下にドラッグすると、レイヤー一覧の高さを変えられます。

基本操作

操作動作内容
左ドラッグ / ペン描画
ホイール回転カーソル位置を中心に拡大・縮小
Space + ドラッグ / 中ボタンドラッグキャンバスの移動（パン）
R + ドラッグキャンバスの回転
Alt + クリックスポイト（ドラッグで連続取得）
Ctrl + Alt + 左右ドラッグブラシサイズの連続変更
右クリックパイメニュー
Ctrl + Z / Ctrl + Shift + Z（Ctrl + Y）元に戻す / やり直し

Mac では Ctrl の代わりに Cmd も使えます。操作の一覧は、上部バーの「❓ ヘルプ」からいつでも確認できます。

ブラシ

右パネルのプリセットから選びます。ペンで描くと、どのブラシも筆圧で太さや濃さが変わります（マウスでは常に最大の筆圧として扱います）。

プリセット描き味
Gペンくっきりした均一な線。基本のペン
毛筆斜めの平筆。速く払うとかすれが出ます
ソフトエアブラシ。重ねるほど濃くなります
水彩筆1ストロークの中では均一な半透明。ストロークを重ねた部分が濃くなります
鉛筆ざらついた粒子状の線
消しゴム筆圧で太さが変わる消しゴム

左ツールバーの 📏 🔲 ⚪ で、直線・四角形・円形も描けます。ドラッグ中はプレビューが表示され、離した位置で確定します。

  • ブラシサイズ：0.5〜500px。[ / ] キーで段階的に変更できます。
  • 手ぶれ補正：0（オフ）〜10。強くするほど線は滑らかになりますが、ペン先に対して線が遅れてついてきます。補正が強いと速い払いは短めに止まるので、払いをきれいに出したいときは補正を弱めるか、ゆっくり筆圧を抜きながら離してください。

レイヤー

操作方法
追加 / 削除「＋ 追加」「－ 削除」ボタン
並べ替え一覧の項目をドラッグ＆ドロップ、または「▲ 上へ」「▼ 下へ」
下のレイヤーと結合「⬇ 結合」
表示 / 非表示左端のチェックボックス
ブレンドモードプルダウン（通常・乗算・スクリーン・オーバーレイなど16種類）
不透明度右端のスライダー

表示・ブレンド・不透明度の変更も含めて、レイヤー操作はすべて「戻る」で取り消せます。非表示のレイヤーには描けません。

浮遊パッドとパイメニュー

浮遊パッドとパイメニュー

浮遊パッドの各ボタンは、割り当てられたキーを押したのと同じ動作をします。キーボードで操作すると、対応するパッドのボタンが光ります。

ボタン初期キー動作
1Ctrl + Z元に戻す
2F2パイメニューを画面中央に表示
3Bブラシに戻す
4H表示の左右反転
5 / 6[ / ]ブラシサイズ − / ＋
7Eペン ⇄ 消しゴム 切替
8Delete選択中レイヤーの全消去
リング ▲ / ▼W / Sズームイン / ズームアウト
リング ◀ / ▶A / D左回転 / 右回転
リング ●X位置・回転・ズームのリセット

右クリック（または F2）でパイメニューが開きます。カーソルを項目の方向へ動かしてボタンを離すかクリックすると、ペン・消しゴム・サイズ変更・全消去・位置リセットを実行できます。

左右反転（H）は表示だけの反転です。描いたデータは反転しないので、デッサンの狂いの確認に使えます。

キー割り当ての変更

設定画面

上部バーの「⚙️ 設定」で、浮遊パッドの各ボタンに割り当てるキーを変更できます。

  1. 変更したいボタンの行の、右側のキー表示をクリック
  2. 割り当てたいキー（Ctrl / Shift / Alt との組み合わせも可）を押す
  3. 取り消すときは Esc

各行には、そのキーで実行される機能が表示されます。「このキーに機能なし」と表示された場合、そのボタンを押しても何も起きません。

  • 📤 出力 / 📥 読込：割り当てを JSON ファイルで保存・復元できます
  • 🔄 リセット：初期の割り当てに戻します

割り当てはブラウザ内（localStorage）に保存されます。

ファイルの読み込みと保存

ボタン内容
📁 開くPNG / JPEG などの画像、または PSD を開きます
💾 PSD保存レイヤー構成を保ったまま PSD で保存します
🖼️ 画像書き出し左のプルダウンで選んだ形式（PNG / JPEG / WEBP）で、合成した1枚の画像を保存します
  • 画像を開く：新しいレイヤーとして追加されます。キャンバスより大きい画像は、縦横比を保ったまま縮小して中央に配置されます。
  • PSD を開く：今の作業は PSD の内容に置き換わり、キャンバスサイズも PSD に合わせて変わります（「戻る」で開く前に戻せます）。グループは展開され、「グループ名 / レイヤー名」の個別レイヤーになります。調整レイヤーなど、ピクセルを持たないレイヤーは読み込まれません。
  • PSD 保存：各レイヤーの表示状態・不透明度・ブレンドモードに加えて、合成画像とサムネイルも保存します。
  • 画像書き出し：背景は白で書き出されます（透過 PNG にはなりません）。

注意事項

  • 自動保存はありません。 ページを再読み込みしたり閉じたりすると、描いた内容は消えます。こまめに PSD で保存してください。
  • 「戻る」で戻れるのは最大100手までです。大きな変更が続くとメモリ節約のため、それより少なくなることがあります。
  • 新規キャンバスのサイズは 2048 × 2048px 固定です。別のサイズで描きたい場合は、そのサイズの PSD を開いてください。
  • 筆圧は、PC の Chrome とワコムのペンタブレットで動作を確認しています。ほかのブラウザやデバイスでは、筆圧が取れない場合があります。

よくある質問 (FAQ)

Q. 描いた絵や読み込んだ画像はサーバーに送られますか？
A. いいえ。すべての処理はブラウザの中で完結していて、外部に送信されるデータはありません。

Q. 筆圧が効きません
A. マウスやタッチパッドには筆圧がありません。ペンタブレットで効かない場合は、ドライバ設定で Windows Ink（またはブラウザでのペン入力）が有効になっているか確認してください。

Q. キー割り当てを初期状態に戻したい
A. 「⚙️ 設定」を開き、「🔄 リセット」を押してください。

技術解説

実装の詳細（筆圧入力、手ぶれ補正、水彩ブラシ、差分 Undo、ag-psd による PSD 入出力など）は、技術記事にまとめています。

▶ [JavaScript] 筆圧対応ペイントアプリを作る