貼って、切って、
すぐ保存。ブラウザで動く、手早い画像の切り出し・変換ツール
画面のキャプチャや写真を貼り付けて、必要な範囲だけを切り出し、サイズを整えて保存する。そんな日常の「ちょっとした作業」を、インストール不要・ブラウザだけで素早く済ませるためのアプリです。明るさや色の調整、画像の重ね合わせ、文字のウォーターマーク、マニュアル作りに便利な矢印や枠の図形、PSDのレイヤー読み書きにも対応しています。アプリ本体はHTMLファイル1つ、約178KB。スマートフォンのモバイル回線でも、開いてすぐに使えます。
- 開ける形式7種類＋PSB
- アプリ本体約178KB・1ファイル
- 色空間sRGB
- 階調8bit／ch
特長Features
開く、切る、整える、保存する。よく使う操作を、少ない手数で行えるようにまとめました。
軽くて、すぐ起動
アプリ本体は HTML ファイル1つで約178KB。一般的な Web の画像編集ツールが数MB以上を読み込むのに比べてごく小さく、モバイル回線でもすぐに開けます。インストールもアカウントも不要です。
3通りの開き方
クリップボードからの貼り付け（⌘V／Ctrl+V）、ドラッグ＆ドロップ、ファイル選択のどれでも開けます。スクリーンショットをそのまま貼り付けて加工できます。
縦横比を保った切り出し
画像上をドラッグして枠を描くほか、1:1・4:3・16:9 などの縦横比を固定したまま「画像の50％」のように割合で枠を作れます。
％・ピクセルでサイズ変更
「50％」や「幅 900px」のように指定できます。幅か高さの片方だけを入れれば、もう片方は縦横比を保って自動で決まります。
回転
左90°・180°・右90° をワンクリックで。重ねた画像レイヤーも一緒に回転します。
調整レイヤー
露出・明るさ・コントラスト・レベル補正・トーンカーブ・色相・彩度・自然な彩度・色温度・白黒。元の画像を変えずに重ね、いつでもオン／オフ・再調整できます。
画像レイヤーと合成
2枚目の画像をレイヤーとして重ね、不透明度と合成方法（比較（明）・比較（暗）・乗算・スクリーンなど17種類）を選べます。
ウォーターマーク
著作権表示などの文字を、9か所の配置・自由配置・斜めの繰り返し（タイル）で入れられます。フォント・色・不透明度・合成方法も設定でき、設定は次回も使えます。
図形（マニュアル作りに）
ライン・矢印・楕円・長方形（角丸）を、実線・破線・点線、好きな太さと色で描けます。塗りつぶしやドロップシャドウも。PSD では Photoshop のシェイプレイヤーになります。
図形をマスクに
楕円や長方形を、画像レイヤー・調整レイヤーのマスクとして使えます。「この部分だけ白黒に」「この範囲だけ画像を見せる」といった加工が簡単に。PSD では Photoshop のベクトルマスクになります。
6つの形式で保存
JPEG・PNG・WebP・PSD・PDF・SVG。PSD はレイヤーを保ったまま保存でき、Photoshop でも開けます。PNG でクリップボードにコピーもできます。
戻す・進める
クリックで1つずつ。ボタンを長押しすると、サムネイル付きの履歴から「どこまで戻すか・進めるか」を選べます。
活用例Use cases
貼り付けて、切って、書き込んで、保存する。日常の画像づくりから開発現場の資料づくりまで、よくある用途をまとめました。
一般ユーザー向け
SNS・ブログ・写真の加工に
SNS 投稿用の画像を作る
- 写真を貼り付けるか開き、トリミングの縦横比を選んで切り出します
- サイズ変更のピクセル指定で幅を 1080px などにそろえます
- テキストで見出しや著作権表示を入れ、JPEG で保存します
| Instagram 正方形 | 1080×1080 | 1:1 |
| Instagram 縦長 | 1080×1350 | 4:5 ※ |
| ストーリーズ・リール | 1080×1920 | 9:16 |
| X（横長） | 1600×900 | 16:9 |
| YouTube サムネイル | 1280×720 | 16:9 |
| OGP・Facebook のリンク画像 | 1200×630 | 1.91:1 ※ |
※ 4:5 と 1.91:1 は縦横比の一覧にないため、「自由」を選んで枠の幅・高さを数値で入力します。推奨サイズは各サービスの変更で変わることがあります。
スクリーンショットに注釈を入れる
画面を ⌘V／Ctrl+V で貼り付け、見せたい部分を枠や矢印で示し、文字で説明を添えます。キャプチャから保存まで、このアプリだけで完結します。
使う機能：貼り付け・図形（枠・矢印）・テキスト・PNG 保存／コピー
ブログ掲載用の画像を作る
記事の幅に合わせて「幅 900px」などで縮小し、ファイルサイズの小さい JPEG・WebP で保存。アイキャッチは 16:9 で切り出して見出しを入れれば完成です。
使う機能：トリミング・サイズ変更・テキスト・JPEG／WebP
写真を円形や角丸に切り抜く
同じ写真を「新しいレイヤーとして追加」し、背景を非表示にして、楕円や角丸の長方形をその画像レイヤーのマスクにします。PNG で保存すれば、まわりが透明のアイコンやプロフィール画像になります。
使う機能：画像レイヤー・図形のマスク・トリミング・PNG
ウォーターマークを追加する
著作権表示を四隅などに置いたり、「SAMPLE」を斜めに繰り返して入れたりできます。設定は記憶されるので、次の写真にも同じ表示をすぐ入れられます。
使う機能：テキスト（配置・繰り返し・不透明度）
切り抜きに使える形は、楕円（正円）・長方形・角丸の長方形です。自由な形のパスには対応していません。
開発者・技術者向け
開発現場でよくある画像作業にソフトウェアの操作マニュアルを作る
操作画面のキャプチャに、角丸の枠・矢印・番号や説明の文字を入れます。図形の色や太さは記憶されるので、何枚作っても見た目がそろいます。
使う機能：貼り付け・図形・テキスト・PNG／PDF
PSD ファイルを軽く修正する
Photoshop を起動するまでもない修正に。テキストレイヤーの文字の差し替え、調整レイヤーの再調整、レイヤーの表示切り替えをして、PSD のまま保存できます。
使う機能：PSD の読み書き・テキスト・調整レイヤー
スクリーンショットから説明資料を作る
必要な部分だけを切り出し、注釈を入れて PDF で保存すれば、そのまま配れる資料になります。日本語の文字も PDF の中で文字として残ります。
使う機能：トリミング・図形・テキスト・PDF
UI デザイン案に注釈を追加する
デザイン案の画像に、変更したい箇所を点線の楕円や枠で囲み、指示を書き込みます。PSD で保存すれば、注釈は図形・テキストのレイヤーのまま渡せます。
使う機能：図形（破線・点線）・テキスト・PSD
バグ報告用の画像を作る
不具合の画面を貼り付け、問題の箇所を赤い枠で囲んで矢印で示します。個人情報が写った部分は切り出しで外し、クリップボードにコピーしてそのまま課題管理ツールへ貼り付けられます。
使う機能：貼り付け・図形・トリミング・クリップボードにコピー
SVG・PDF 対応を活かした用途
他の手軽な画像編集ツールにない強みベクトル品質の説明図を作る
SVG・PDF で保存すると、図形はパス、文字は文字のまま書き出されます。拡大しても線や文字の輪郭がにじみません。
使う機能：図形・テキスト・SVG／PDF 保存
SVG で保存して Web サイトに載せる
注釈の図形と文字がベクターのまま入った SVG を、そのままページに掲載できます。高解像度の画面でもくっきり表示され、文字は Illustrator や Inkscape で直せます。
使う機能：SVG 保存
PDF の配布資料を作る
日本語の文字は Noto フォントを埋め込んで PDF にするので、相手の環境に関係なく同じ見た目で開け、文字の検索・コピーもできます。
使う機能：PDF 保存
図形・文字を劣化させずに印刷する
印刷で拡大しても、枠・矢印・文字はベクターのためシャープなままです。下地の写真は元の画像の解像度で印刷されます。
使う機能：PDF／SVG 保存
SVG・PDF では、写真や調整レイヤーを合成した部分は画像として埋め込まれます（透明部分がなければ JPEG）。そのため、写真が大きいとファイルサイズも大きくなります。
使い方How to use
基本は4ステップです。たとえば、画面のキャプチャからグラフの部分だけを切り出して、幅 900px の PNG にする場合。
-
画像を開く
起動すると何も開いていない画面になります。画像をドロップするか、⌘V／Ctrl+V で貼り付けるか、「画像を開く」を押します。
- すでに編集中の画像があるときは、「破棄して開く」か「レイヤーとして追加」かを選べます。
-
切り出す範囲を決める
画像上をドラッグして枠を描きます。枠の中をドラッグすると移動、四隅をドラッグすると拡大縮小。Enter で確定します。
-
サイズを整える
「ピクセル」を選んで幅に 900 を入れると、高さは縦横比から自動で計算されます。「サイズを変更」で確定します。
-
保存する
ヘッダーの「保存」を押し、ファイル名と形式を選んで保存します。⌘S／Ctrl+S でも開けます。そのまま他のアプリに貼るなら「クリップボードにコピー」が便利です。
切り出しCrop
ドラッグで自由に、または縦横比と割合を指定して正確に。数値で位置とサイズを入力することもできます。
縦横比
次の比率で枠を固定できます。
自由元画像と同じ1 : 14 : 33 : 43 : 22 : 316 : 99 : 16枠サイズ（％）
縦横比を保ったまま、画像に対する割合で枠を作ります。25・50・75・100％のボタンのほか、数値も入力できます。縦横比が「自由」のときは元画像と同じ比率になります。枠はいまの位置を中心に大きさが変わります。
操作
- 枠の外をドラッグ：新しい枠を描く
- 枠の中をドラッグ：枠を移動
- 四隅をドラッグ：拡大縮小（縦横比を固定中はその比率のまま）
- Enter：トリミングを実行／Esc：枠を解除
サイズ変更と回転Resize & Rotate
サイズは％かピクセルで指定します。大きく縮小するときは段階的に縮めるので、細い線もギザギザになりにくくなっています。
パーセント指定
25・50・75％のボタン、または任意の値（1〜1000％）で拡大縮小します。縦横比は常に保たれます。
ピクセル指定
- 幅だけ、または高さだけを入れると、もう片方は縦横比から自動で計算
- 幅 640・900・1280・1920 のプリセットボタン
- 「縦横比を保つ」を外すと、幅と高さを自由に指定
- 変更前と変更後のサイズを、実行前に確認できます
回転
左90°・180°・右90° の3つです。画像レイヤーも位置関係を保ったまま一緒に回転します。
表示の拡大縮小・移動
- マウスホイール（カーソル位置が中心）、トラックパッドやスマホのピンチ（つまんだ位置が中心）で拡大縮小
- ドラッグ・スワイプで表示を移動
- ダブルクリックで「全体表示」と「原寸」を切り替え
調整レイヤーAdjustment layers
「調整レイヤー」ボタンで調整ツールバーを表示し、使いたい調整を選ぶとフローティングウィンドウが開きます。閉じると画像の上部にバッジとして並び、元の画像を変えずにいつでもやり直せます。
使える調整（10種類）
| 調整 | 設定できる項目 |
|---|---|
| 露出 | 露光量（−3〜+3 EV）、オフセット、ガンマ |
| 明るさ | 中間調を中心に明るく・暗く（−100〜+100） |
| コントラスト | 明暗の差を強める・弱める（−100〜+100） |
| レベル補正 | 入力のシャドウ・中間調（ガンマ）・ハイライト、出力のシャドウ・ハイライト |
| トーンカーブ | RGB・レッド・グリーン・ブルーのカーブ |
| 色相 | 色合いの回転（−180°〜+180°） |
| 彩度 | 鮮やかさ（−100〜+100） |
| 自然な彩度 | くすんだ色ほど強く効く彩度調整 |
| 色温度 | 青 ↔ 黄、緑 ↔ マゼンタ |
| 白黒 | レッド・グリーン・ブルーの配合を変えてモノクロ化 |
どの調整にも「不透明度」があり、効き具合を弱められます。スライダー横のラベルをダブルクリックすると初期値に戻ります。
バッジの操作
| 操作 | 働き |
|---|---|
| クリック | オン／オフ（画像レイヤーと背景は表示／非表示） |
| ダブルクリック・長押し | ウィンドウを開いて再調整 |
| ドラッグ | 順番を入れ替え。左から順に重なり、調整はそれより左（下）にあるものすべてに効きます |
| 「元画像」ボタン | 押している間だけ、調整前の背景画像を表示 |
| 「統合」ボタン | すべてのレイヤーを1枚の画像にまとめる |
追加・変更・オン／オフ・並べ替えはすべて「戻す／進める」の履歴に残ります。
画像レイヤーと合成Image layers
画像を編集中に別の画像を開くと、そのまま差し替えるか、新しいレイヤーとして重ねるかを選べます。透かしやロゴを重ねたり、2枚の画像を比較（明）で合成したりできます。
合成方法（17種類）
通常比較（暗）乗算焼き込みカラー比較（明）スクリーン覆い焼きカラー加算（覆い焼きリニア）オーバーレイソフトライトハードライト差の絶対値除外色相彩度カラー輝度ウォーターマークText watermark
ヘッダーの「テキスト」（スマートフォンでは「文字」）で、文字のレイヤーを追加します。写真をSNSに載せる前の著作権表示や、資料の「SAMPLE」の透かしなどに使えます。
設定できる項目
- 文字（改行して複数行も可）
- フォント：ゴシック・明朝・丸ゴシック・Sans・Serif・等幅・筆記体
- 色・太字・縦書き
- 影：色・不透明度・角度・距離・ぼかし
- サイズ・余白：画像の短辺に対する％で指定。サイズ変更やトリミングをしても見た目の大きさが保たれます
- 配置：9か所＋ドラッグで自由配置
- 回転・不透明度・合成方法（スクリーン、乗算など17種類）
- 繰り返し（タイル）と、その間隔
最後に使った設定は、このブラウザに記憶され、次に追加するときの初期値になります。フォントは端末に入っているものを使うため、ファイルサイズは増えません。PSD に保存すると、Photoshop で文字を編集できるテキストレイヤーになり、影はレイヤー効果の「ドロップシャドウ」として書き出されます。
図形Shapes
ヘッダーの「図形」で、ライン・楕円・長方形のレイヤーを追加します。画面キャプチャに枠や矢印を入れて、操作マニュアルや説明資料の画像を手早く作れます。
設定できる項目
- 種類：ライン・楕円・長方形
- 線：色・太さ・種類（実線・破線・点線）
- 塗りつぶし（楕円・長方形）
- 矢印：ラインの始点・終点
- 角丸（長方形）・回転
- 不透明度・合成方法
- 影：色・不透明度・角度・距離・ぼかし
- マスクとして使う：画像レイヤー・調整レイヤーを選択（楕円・長方形）
Shift キーで形を固定
描くときや角をドラッグするときに Shift を押すと、正方形・正円になります。ラインは水平・垂直・45° 単位にそろいます。
線の色・太さ・種類などは記憶され、次に描く図形の初期値になります。
図形をマスクとして使う
使い方
- 図形のウィンドウの「マスクとして使う」で、画像レイヤーか調整レイヤーを選びます
- 画像レイヤーは図形の内側だけが表示され、調整レイヤーは図形の内側だけに効きます
- マスクのバッジは、対象レイヤーのバッジのすぐ後ろに点線でくっつきます。順序を変えるとマスクも一緒に移動し、対象レイヤーを削除するとマスクも削除されます
- 画像レイヤーを動かすと（画像上のドラッグ、X・Y の入力、「中央に配置」）、マスクも同じだけ一緒に移動します。切り抜いた形のまま位置を調整できます
- マスクのバッジをクリックすると、マスクだけをオン／オフできます
- マスクにできるのは楕円と長方形（角丸・回転も可）です
PSD に保存すると、対象レイヤーの Photoshop のベクトルマスクになります。マスクをオフにしたものは「ベクトルマスクを使用しない」状態で保存されます。
対応形式File formats
開いた画像は、どの形式でも sRGB・8bit のデータとして扱います。
| 形式 | 開く | 保存 | 備考 |
|---|---|---|---|
| JPEG | ○ | ○ | 画質を 10〜100 で指定。透明部分は白で塗りつぶします |
| PNG | ○ | ○ | 劣化なし・透明を保持。クリップボードへのコピーも PNG |
| WebP | ○ | ○ | 画質を指定。透明を保持。アニメーションはフレームを選んで開く |
| GIF | ○ | — | アニメーションGIFは、スライダーで見ながら取り込むフレームを選べます |
| TIFF | ○ | — | 複数ページの場合は1ページ目 |
| SVG | ○ | ○ | 回転・トリミング・サイズ変更をしてもベクターのまま保持。シェイプ・テキストがあれば、写真などは画像、シェイプ・テキストはベクターの SVG で保存できます |
| PSD／PSB | ○ | ○ | レイヤーを読み書き。保存は PSD（8bit）。詳しくはこちら |
| — | ○ | SVG 由来ならベクターのまま。シェイプ・テキストはベクター（日本語は Noto フォントを埋め込み）、写真などは画像で埋め込み |
PDF の書き出しと、Safari 以外での TIFF の読み込みには外部ライブラリを使うため、初回のみインターネット接続が必要です。
PSD のレイヤー読み書きPhotoshop files
このアプリで保存した PSD は、背景・画像レイヤー・調整レイヤー・テキストレイヤー・図形・マスクの構成と設定値をそのまま保持し、開き直すと元どおりに再現されます。Photoshop でもレイヤー付きのファイルとして開けます。
Photoshop で作った PSD を開くと
- 画像レイヤーは、位置・不透明度・合成方法・表示状態を保って読み込みます
- 次の調整レイヤーはバッジとして再現します：レベル補正、トーンカーブ、露光量、色相・彩度、明るさ・コントラスト、自然な彩度、白黒、階調の反転
- 16bit・32bit の文書のレイヤーも読み込めます（8bit に変換）
- テキストレイヤー（横書き・縦書き・回転・行揃え）は、文字を編集できるテキストレイヤーとして読み込みます。ドロップシャドウのレイヤー効果も再現します
- シェイプレイヤー（長方形・角丸長方形・楕円・ライン・矢印）は、図形として読み込みます。複雑な形のシェイプは画像として読み込みます
- 画像レイヤー・調整レイヤーのベクトルマスクは、形が長方形・角丸長方形・楕円なら、マスクの図形として読み込みます
- グループは展開して読み込みます
再現できないもの（カラーバランスなどの未対応の調整、レイヤー効果、クリッピングマスク、未対応の描画モードなど）があると、開いたときに一覧で知らせます。
このアプリで保存した PSD を Photoshop で開いたとき
| このアプリの調整 | Photoshop での表示 |
|---|---|
| レベル補正・トーンカーブ・露出 | 同じ種類の調整レイヤー |
| 色相・彩度 | 「色相・彩度」の調整レイヤー（計算方法の違いで少しずれることがあります） |
| 自然な彩度 | 「自然な彩度」の調整レイヤー（近似） |
| 明るさ・コントラスト・色温度 | 見た目が合うようにトーンカーブとして書き出し |
| 白黒 | 「色相・彩度」の彩度 −100 で近似 |
| テキスト（ウォーターマーク） | 文字を編集できるテキストレイヤー（フォント・サイズ・色・位置・回転・縦書き）。影はドロップシャドウのレイヤー効果。「繰り返し（タイル）」だけは文字を描いた画像レイヤー |
| 図形 | シェイプレイヤー（パス・塗り・線の太さと種類）。影はドロップシャドウのレイヤー効果。Photoshop 上でも図形として編集できます |
| 図形のマスク | 対象の画像レイヤー・調整レイヤーのベクトルマスク（パスとして編集でき、オン／オフの状態も保持） |
色空間と階調についてColor space & bit depth
処理は sRGB・8bit で行います
このアプリは、画像を手早く切り出したり形式を変換したりすることを目的にしています。動作の軽さを優先し、すべての画像を sRGB の色空間、1チャンネルあたり 8bit（256階調）で処理します。
- 16bit・32bit の画像（PSD・TIFF など）は、開いた時点で 8bit に変換されます。保存した PSD も 8bit です。
- Adobe RGB などのカラープロファイルは変換に使いません。sRGB 以外の画像は、色が変わって見えることがあります。
- 強いトーンカーブや大きな明るさの変更をすると、なだらかなグラデーションに縞（トーンジャンプ）が出ることがあります。
16bit の階調や広い色域が必要な作業（天体写真の画像処理、印刷用の写真の仕上げなど）には、Photoshop などの専用ソフトをお使いください。
操作一覧Shortcuts
Mac は ⌘、Windows は Ctrl を使います。
| 操作 | キー・マウス |
|---|---|
| 貼り付けて開く | ⌘V |
| ファイルを開く | ⌘O |
| 保存パネルを開く | ⌘S |
| 戻す／進める | ⌘Z／⌘⇧Z（Ctrl+Y）。ボタンの長押しで履歴を選択 |
| トリミングを実行／解除 | Enter／Esc |
| 全体表示 | ⌘0、または画像をダブルクリック |
| 拡大／縮小 | ⌘+／⌘−、ホイール、ピンチ |
| 表示の移動（トリミング中） | Space＋ドラッグ、右ドラッグ、2本指 |
| 調整ウィンドウを閉じる | 「完了」または ×（確定）／Esc（キャンセル） |
| 図形の描画・変形 | 図形のウィンドウを開いている間に画像上をドラッグ。Shift で正方形・正円・45° 単位 |
| テキストの移動 | テキストのウィンドウを開いている間に画像上をドラッグ |
| バッジの再調整／並べ替え | バッジを選んで F2／Alt＋←→ |
スマートフォン・タブレットMobile
スマートフォンでは、画像をなるべく大きく見せる専用のレイアウトになります。タブレットとパソコンは同じ画面です。
画面の構成
- 1行目：タイトル・開く・貼付・保存（画像を開くと上へスクロールして隠れます。「▲」でいつでも戻せます）
- 2行目：調整レイヤー・▲・戻す・進める（常に表示）
- 下のタブ：回転・サイズ・トリミング。タップしたものだけが下からせり出し、もう一度タップで閉じます
- 調整のウィンドウは画面の下側に開くので、画像を見ながら調整できます
タッチ操作
- 1本指のドラッグで表示を移動（指の動きと同じだけ動きます）
- ピンチで拡大縮小。つまんだ位置を中心に拡大されます
- 2本指で動かしながらのピンチにも追従します
- トリミング枠を表示している間は、1本指は枠の操作、2本指で表示の移動・拡大縮小
- バッジは長押しで再調整のウィンドウが開きます
- 保存した画像は iPhone・iPad では「ファイル」アプリのダウンロードに入ります