ツールさん

How to

画像編集ツールの使い方

画像の追加から保存までを、実際の作業順と目的に沿って案内します。キャンバスと画像の大きさ、色補正、背景透過、文字、図形・線、枠線・影、複数選択、整列、レイヤー、履歴、書き出しまで、編集画面で迷いやすい操作を確認できます。各手順は実際に押すボタンと確認するポイントをセットで説明しているため、初めて画面を開いた場合でも操作に迷いません。

画像編集 のサムネイル画像画像編集 のサムネイル画像

Use Cases

こんな時に使います

  • 画像編集ソフトを開かずに簡単な加工をしたい
  • 画像をキャンバス上で調整したい
  • SNS や資料向けに画像を整えたい
  • 既存の画像ツールをまとめて使い分けたい
  • ブラウザ上で画像編集の下準備をしたい
  • 画像の編集結果をその場で確認したい

Capabilities

このツールでできること

  • 画像編集キャンバスの利用
  • 画像素材の追加
  • キャンバス上での配置調整
  • 編集内容の確認
  • 画像編集結果の保存
  • ブラウザ上での画像編集

Guide

画面ごとの使い方

設定、入力、プレビュー、結果、保存など、画面内のエリアごとに操作方法を説明します。

01 HOWTO

写真を追加して完成サイズに合わせる

編集する写真を追加し、完成画像を使う場所に合うキャンバスサイズへ変更して、写真の位置と大きさを整えるまでを順番に説明します。プリセット、任意サイズ、複数画像、空のキャンバスから始める方法も確認できます。

写真を追加して完成サイズに合わせるの操作位置と周辺UIスマホの写真を追加して完成サイズに合わせるの操作位置と周辺UI

この要素でできること

  • 追加した画像がキャンバスに表示され、個別に選択できる
  • サイズカードの選択とキャンバスの縦横比が一致している
  • 見せたい部分と周囲の空白が意図した配置になっている

操作する場所

01
01 「画像を追加」を押す

上部の「画像を追加」を押して写真を選びます。JPEG・PNG・WebP・BMP・GIFを読み込めます。追加した写真はキャンバス内に表示されます。

01 「画像を追加」を押すの操作位置と周辺UIスマホの01 「画像を追加」を押すの操作位置と周辺UI
02
02 追加した写真を確認する

選んだ写真がキャンバスに表示され、写真の外周に選択枠とハンドルが表示されれば追加完了です。

02 追加した写真を確認するの操作位置と周辺UIスマホの02 追加した写真を確認するの操作位置と周辺UI
03
03 「キャンバスサイズ」を開く

上部の「キャンバスサイズ」を押します。スマホは「キャンバス」から「キャンバスサイズ」を選びます。サイズ設定はPCでは右側、スマホでは下部に開きます。

03 「キャンバスサイズ」を開くの操作位置と周辺UIスマホの03 「キャンバスサイズ」を開くの操作位置と周辺UI
04
04 サイズの種類を確認する

「SNS・動画」「写真」「印刷の比率」から用途と寸法を確認します。「横長 1280×720」はYouTubeサムネイル向けです。現在の寸法と選択チェックも確認できます。

04 サイズの種類を確認するの操作位置と周辺UIスマホの04 サイズの種類を確認するの操作位置と周辺UI
05
05 プリセットサイズを選ぶ

使いたいサイズのカードを押します。ここでは「正方形 1080x1080」を選びます。カードの選択表示が変わり、キャンバスへ反映されます。

05 プリセットサイズを選ぶの操作位置と周辺UIスマホの05 プリセットサイズを選ぶの操作位置と周辺UI
06
06 変更後のキャンバスを確認する

設定欄の閉じるボタンでキャンバスへ戻ります。横長の写真に対してキャンバスが正方形へ変わり、写真の周りに空白ができていることを確認します。

06 変更後のキャンバスを確認するの操作位置と周辺UIスマホの06 変更後のキャンバスを確認するの操作位置と周辺UI
07
07 写真でキャンバスいっぱいに配置する

写真を選び、四隅のハンドルで縦横比を保ったまま拡大して、キャンバスの端まで写真で覆います。ドラッグで位置を動かし、見せたい部分を残します。キャンバスの外に出た部分は保存画像に含まれません。写真全体を見せて余白を残す配置は、必要な場合に選びます。

07 写真でキャンバスいっぱいに配置するの操作位置と周辺UIスマホの07 写真でキャンバスいっぱいに配置するの操作位置と周辺UI
08
08 任意サイズを指定する

「キャンバスサイズ」の末尾にある「任意サイズ」を押し、幅と高さを入力して「適用」を押します。キャンバス寸法の変更と、配置した写真のサイズ変更は別の操作です。

08 任意サイズを指定するの操作位置と周辺UIスマホの08 任意サイズを指定するの操作位置と周辺UI
09
09 複数の写真を追加する

同じ「画像を追加」から、続けて別の写真を読み込みます。追加した写真は別々の要素として選択・移動できます。2枚が重なっている場合は、ドラッグして見やすい位置へ動かします。

09 複数の写真を追加するの操作位置と周辺UIスマホの09 複数の写真を追加するの操作位置と周辺UI
10
10 空のキャンバスから始める

写真を追加する前に「キャンバスサイズ」を開き、完成用途に合うサイズを選びます。設定欄を閉じて空のキャンバスを確認した後、写真、文字、図形、線を必要な順に追加できます。

10 空のキャンバスから始めるの操作位置と周辺UIスマホの10 空のキャンバスから始めるの操作位置と周辺UI

02 HOWTO

見せたい範囲に画像を合わせる

写真の位置と大きさを整え、必要な場合はトリミングで残す範囲を選びます。背景にする写真はキャンバス全体を覆うように配置します。

見せたい範囲に画像を合わせるの操作位置と周辺UIスマホの見せたい範囲に画像を合わせるの操作位置と周辺UI

この要素でできること

  • 主役が文字や図形で隠れない位置にある
  • 画像の端に意図しない余白が残っていない
  • 縦方向の見える範囲が完成イメージに合っている

操作する場所

01
01 画像を選ぶ

写真を押して選択します。外周の枠とハンドルで選択中の写真を確認します。設定を閉じている場合は右上の「設定を開く」を押します。

01 画像を選ぶの操作位置と周辺UIスマホの01 画像を選ぶの操作位置と周辺UI
02
02 位置を変える

写真本体をドラッグして位置を調整します。キャンバス外にはみ出した部分は書き出されません。

02 位置を変えるの操作位置と周辺UIスマホの02 位置を変えるの操作位置と周辺UI
03
03 大きさを変える

四隅のハンドルで大きさを調整します。背景として使う写真は、キャンバス全体を覆う大きさに合わせます。

03 大きさを変えるの操作位置と周辺UIスマホの03 大きさを変えるの操作位置と周辺UI
04
04 トリミングを開始する

画像を選び、「設定を開く」から「画像補正」タブの「トリミング」を押します。画像の上下左右の中央ハンドルをドラッグして直接トリミングを始めることもできます。

04 トリミングを開始するの操作位置と周辺UIスマホの04 トリミングを開始するの操作位置と周辺UI
05
05 残す範囲を調整する

画像の端や四隅のハンドルをドラッグして、残したい範囲を調整します。ドラッグを離すと変更が反映されます。

05 残す範囲を調整するの操作位置と周辺UIスマホの05 残す範囲を調整するの操作位置と周辺UI
06
06 トリミングを確定する

ハンドルのドラッグを離すとトリミングが反映されます。確定ボタンを押す必要はありません。仕上がりを確認し、やり直す場合は「元に戻す」を使います。

06 トリミングを確定するの操作位置と周辺UIスマホの06 トリミングを確定するの操作位置と周辺UI
07
07 変更をキャンセルする

ドラッグ中にEscapeを押すと、その操作前の範囲に戻ります。操作を終えた後は「元に戻す」で戻せます。

07 変更をキャンセルするの操作位置と周辺UIスマホの07 変更をキャンセルするの操作位置と周辺UI
08
08 キャンバスに合わせて配置する

「配置」タブの「位置とサイズ」でX・Yを入力します。画像の幅・高さとキャンバス寸法を区別し、写真で全面を覆う場合は縦横比を保って拡大します。

08 キャンバスに合わせて配置するの操作位置と周辺UIスマホの08 キャンバスに合わせて配置するの操作位置と周辺UI
09
09 透明度と角丸を調整する

画像を選んで「見た目」タブを開き、透明度や角丸を調整します。変更はその場でキャンバスへ反映されます。

09 透明度と角丸を調整するの操作位置と周辺UIスマホの09 透明度と角丸を調整するの操作位置と周辺UI
10
10 画像を回転する

画像を選んで「配置」タブの「回転」で角度を入力します。画像上部の回転ハンドルをドラッグしても調整できます。

10 画像を回転するの操作位置と周辺UIスマホの10 画像を回転するの操作位置と周辺UI

03 HOWTO

写真の上でも読める文字を載せる

伝えたい情報の役割に合わせて、見出し、小見出し、本文、補足・キャプションから文字を追加します。文字が背景に埋もれる場合は、背景色、袋文字、枠線、影を使います。

写真の上でも読める文字を載せるの操作位置と周辺UIスマホの写真の上でも読める文字を載せるの操作位置と周辺UI

この要素でできること

  • 見出しと本文の大きさに明確な差がある
  • 写真の明暗に関係なく文字を読める
  • 文字の方向・揃え・間隔が意図した配置になっている

操作する場所

01
01 「テキストを追加」を開く

上部の「テキストを追加」を押すと、文字の見た目を選ぶパネルが開きます。

01 「テキストを追加」を開くの操作位置と周辺UIスマホの01 「テキストを追加」を開くの操作位置と周辺UI
02
02 文字プリセットを選ぶ

見出し・小見出し・本文・補足など、用途に近い見た目を選びます。追加した文字をダブルクリックすると内容を書き換えられます。

02 文字プリセットを選ぶの操作位置と周辺UIスマホの02 文字プリセットを選ぶの操作位置と周辺UI
03
03 フォントと文字サイズを選ぶ

「文字」タブのフォントを開き、書体と対応する太さを選びます。文字サイズはその下で調整します。日本語・欧文・すべての分類は表示言語に応じて初期選択されます。

03 フォントと文字サイズを選ぶの操作位置と周辺UIスマホの03 フォントと文字サイズを選ぶの操作位置と周辺UI
04
04 文字の装飾を選ぶ

文字サイズの下にある太字・斜体・下線・取り消し線を押します。選択中の表示で有効な書式が分かります。太さを切り替えられないフォントでは太字ボタンが無効になります。

04 文字の装飾を選ぶの操作位置と周辺UIスマホの04 文字の装飾を選ぶの操作位置と周辺UI
05
05 横書き・縦書きと文字揃えを設定する

「文字」タブの「文字揃え」で横・縦の揃えを選びます。横書き・縦書きは「文字のレイアウト」を開いて設定します。

05 横書き・縦書きと文字揃えを設定するの操作位置と周辺UIスマホの05 横書き・縦書きと文字揃えを設定するの操作位置と周辺UI
06
06 文字間隔・行間を調整する

「文字」タブの「文字のレイアウト」を開き、文字間隔と行間を調整します。行間の数値は文字サイズに対する倍率です。

06 文字間隔・行間を調整するの操作位置と周辺UIスマホの06 文字間隔・行間を調整するの操作位置と周辺UI
07
07 文字色を選ぶ

「色・装飾」タブの「文字色」を押して色を選びます。グラデーションは色点を追加・選択し、ドラッグや移動ボタンで順番を変えられます。選択中の色点はごみ箱ボタンで削除します。最低2色は必要です。

07 文字色を選ぶの操作位置と周辺UIスマホの07 文字色を選ぶの操作位置と周辺UI
08
08 文字の枠線を加える

「色・装飾」タブで「文字の枠線」をオンにし、色・太さ・内側/外側を調整します。

08 文字の枠線を加えるの操作位置と周辺UIスマホの08 文字の枠線を加えるの操作位置と周辺UI
09
09 文字のエフェクトを選ぶ

「色・装飾」タブの「スタイル」を開いてエフェクトを選びます。影や文字背景は同じタブの別の設定で調整します。

09 文字のエフェクトを選ぶの操作位置と周辺UIスマホの09 文字のエフェクトを選ぶの操作位置と周辺UI

04 HOWTO

見てほしい場所を囲み、矢印で示す

スクリーンショットの操作箇所や写真の注目部分は、先に「囲む」で範囲を示し、次に「指す」または「線」で視線を導き、短い補足文字を添えると伝わりやすくなります。

見てほしい場所を囲み、矢印で示すの操作位置と周辺UIスマホの見てほしい場所を囲み、矢印で示すの操作位置と周辺UI

この要素でできること

  • 何を見てほしいかが最初に分かる
  • 囲みや矢印が主役を隠していない
  • 補足文が短く、矢印の向きと対応している

操作する場所

01
01 「図形を追加」または「線を追加」を開く

上部の「図形を追加」または「線を追加」から用途別の素材パネルを開きます。

01 「図形を追加」または「線を追加」を開くの操作位置と周辺UIスマホの01 「図形を追加」または「線を追加」を開くの操作位置と周辺UI
02
02 カテゴリから探す

「基本」「囲む」「指す」「ラベル」「カード」「フレーム」「モックアップ」などから、目的のカテゴリを選びます。「すべて」で素材を一覧できます。

02 カテゴリから探すの操作位置と周辺UIスマホの02 カテゴリから探すの操作位置と周辺UI
03
03 囲むを選ぶ

角丸囲み、点線囲み、丸囲み、太枠囲みから対象の形に合うものを選び、注目してほしい範囲を囲みます。

03 囲むを選ぶの操作位置と周辺UIスマホの03 囲むを選ぶの操作位置と周辺UI
04
04 矢印や線を選ぶ

「線を追加」から線・破線・点線・矢印・両矢印・区切り線などを選びます。

04 矢印や線を選ぶの操作位置と周辺UIスマホの04 矢印や線を選ぶの操作位置と周辺UI
05
05 端点の向きを合わせる

追加した矢印や線の端点をドラッグして、示したい対象へ向きを合わせます。

05 端点の向きを合わせるの操作位置と周辺UIスマホの05 端点の向きを合わせるの操作位置と周辺UI
06
06 ラベル・カードを選ぶ

価格、セール、情報、注意など短い情報にはラベルやカードを使い、本文を直接写真へ重ねすぎないようにします。

06 ラベル・カードを選ぶの操作位置と周辺UIスマホの06 ラベル・カードを選ぶの操作位置と周辺UI
07
07 フレームを選ぶ

「フレーム」で写真フレームや角丸フレームなどを選びます。端末などに合わせる素材は「モックアップ」にあります。

07 フレームを選ぶの操作位置と周辺UIスマホの07 フレームを選ぶの操作位置と周辺UI
08
08 基本図形で強調する

四角、角丸、正方形、円、円形、三角、ひし形などの基本図形で、注目してほしい範囲を独自の形で示せます。

08 基本図形で強調するの操作位置と周辺UIスマホの08 基本図形で強調するの操作位置と周辺UI
09
09 順番を決めて配置する

先に「囲む」で範囲を示し、次に「指す」または「線」で視線を導き、最後に短い補足文字を添えると伝わりやすくなります。

09 順番を決めて配置するの操作位置と周辺UIスマホの09 順番を決めて配置するの操作位置と周辺UI
10
10 個人情報をモザイクで隠す

「図形を追加」から「モザイク」を開き、「ピクセル化」「ぼかし」「塗りつぶし」を選びます。隠したい場所へ移動し、ハンドルで大きさを調整します。「モザイク」の設定では効果の強さや境界のぼかしを変えられます。選択を解除しても隠した範囲に漏れがないか確認します。

10 個人情報をモザイクで隠すの操作位置と周辺UIスマホの10 個人情報をモザイクで隠すの操作位置と周辺UI

05 HOWTO

図形・文字・線の見た目を揃える

追加した要素を選び、色、透明度、枠線、影、光彩を調整します。同じ画像内では色数や線幅を絞ると、説明画像や資料がまとまって見えます。

図形・文字・線の見た目を揃えるの操作位置と周辺UIスマホの図形・文字・線の見た目を揃えるの操作位置と周辺UI

この要素でできること

  • 同じ役割の要素が同じ色・線幅になっている
  • 太い外側枠線や影がキャンバス端で切れていない
  • 半透明の図形でも背後の情報を読める

操作する場所

01
01 見た目を揃えたい要素を選ぶ

色や線の太さを揃えたい図形、文字、線をクリックして選択します。複数まとめて選ぶ方法は後のステップで説明します。

01 見た目を揃えたい要素を選ぶの操作位置と周辺UIスマホの01 見た目を揃えたい要素を選ぶの操作位置と周辺UI
02
02 塗り色を選ぶ

図形を選び、「見た目」タブで塗り色のボタンを押します。パレットではデザイン内の色、単色、HEX入力、グラデーションから選べます。

02 塗り色を選ぶの操作位置と周辺UIスマホの02 塗り色を選ぶの操作位置と周辺UI
03
03 塗り透明度・角丸を整える

塗り透明度と角丸を調整します。文字には背景色・透明度・余白・角丸を設定できます。

03 塗り透明度・角丸を整えるの操作位置と周辺UIスマホの03 塗り透明度・角丸を整えるの操作位置と周辺UI
04
04 枠線の色と太さを整える

文字・画像・図形は枠線の色、太さ、内側・外側の位置を選べます。

04 枠線の色と太さを整えるの操作位置と周辺UIスマホの04 枠線の色と太さを整えるの操作位置と周辺UI
05
05 線の種類と端点を整える

線を選び、「線」タブで線の種類と始点・終点を設定します。枠線や影はそれぞれの見出しの下で調整します。

05 線の種類と端点を整えるの操作位置と周辺UIスマホの05 線の種類と端点を整えるの操作位置と周辺UI
06
06 影を整える

影は色、透明度、角度、距離、ぼかしを調整します。

06 影を整えるの操作位置と周辺UIスマホの06 影を整えるの操作位置と周辺UI
07
07 光彩を整える

画像と図形では光彩の色、透明度、ぼかし、拡がりも設定できます。

07 光彩を整えるの操作位置と周辺UIスマホの07 光彩を整えるの操作位置と周辺UI
08
08 同じ役割の要素で色数と線幅を揃える

同じ画像内では色数や線幅を絞ると、説明画像や資料がまとまって見えます。

08 同じ役割の要素で色数と線幅を揃えるの操作位置と周辺UIスマホの08 同じ役割の要素で色数と線幅を揃えるの操作位置と周辺UI
09
09 太い枠線や影が切れていないか確認する

太い外側枠線や影を付けた場合は、キャンバス端で切れていないかを確認します。

09 太い枠線や影が切れていないか確認するの操作位置と周辺UIスマホの09 太い枠線や影が切れていないか確認するの操作位置と周辺UI

06 HOWTO

暗さ・色味・背景を整える

写真が暗い、色が弱い、細部がぼやけている場合は「画像調整」を使います。被写体だけを使いたい場合は「背景透過」を実行し、枠線・角丸・影で写真の見せ方を整えます。

暗さ・色味・背景を整えるの操作位置と周辺UIスマホの暗さ・色味・背景を整えるの操作位置と周辺UI

この要素でできること

  • 白い部分や暗い部分の細部がつぶれていない
  • 肌や商品など主役の色が不自然になっていない
  • 背景透過後の輪郭と枠線・影が用途に合っている

操作する場所

01
01 「画像補正」を開く

画像を選んで「設定を開く」を押し、「画像補正」タブを選びます。「明るさ」「色」「質感・効果」「トーンカーブ」から必要な分類を開いて操作します。

01 「画像補正」を開くの操作位置と周辺UIスマホの01 「画像補正」を開くの操作位置と周辺UI
02
02 自動補正から始める

「自動補正」を押してから、必要な項目だけ手動で調整します。変更した分類には件数が表示され、その分類だけをリセットできます。

02 自動補正から始めるの操作位置と周辺UIスマホの02 自動補正から始めるの操作位置と周辺UI
03
03 明るさを整える

「明るさ」を開き、明るさ・コントラスト・露出を調整します。ハイライトやシャドウなどは「明暗の詳細」を開いて調整します。

03 明るさを整えるの操作位置と周辺UIスマホの03 明るさを整えるの操作位置と周辺UI
04
04 色味を整える

「色」を開き、彩度、自然な彩度、色温度、色合い、色相を調整します。

04 色味を整えるの操作位置と周辺UIスマホの04 色味を整えるの操作位置と周辺UI
05
05 質感・効果を整える

「質感・効果」を開き、シャープネス、明瞭度、ぼかし、ビネットを調整します。変化が強すぎる場合は、その分類だけをリセットできます。

05 質感・効果を整えるの操作位置と周辺UIスマホの05 質感・効果を整えるの操作位置と周辺UI
06
06 背景透過の入口を確認する

画像を選び、「画像補正」タブの「背景透過」を押します。処理が完了するまで待ちます。

06 背景透過の入口を確認するの操作位置と周辺UIスマホの06 背景透過の入口を確認するの操作位置と周辺UI
07
07 背景透過の完了を確認する

背景透過の処理後に、元の背景が消えたことと被写体の輪郭を確認します。透明になった部分は、編集画面の白いキャンバス上では白く見えます。

07 背景透過の完了を確認するの操作位置と周辺UIスマホの07 背景透過の完了を確認するの操作位置と周辺UI
08
08 背景透過後の見た目を整える

「見た目」タブで透明度、角丸、枠線、影、光彩を調整し、切り抜いた被写体の見せ方を整えます。

08 背景透過後の見た目を整えるの操作位置と周辺UIスマホの08 背景透過後の見た目を整えるの操作位置と周辺UI
09
09 トーンカーブで細かく調整する

トーンカーブでは直線、Sカーブ、フェード、ハイキー、ローキーのプリセットから選び、入力・出力を細かく調整できます。

09 トーンカーブで細かく調整するの操作位置と周辺UIスマホの09 トーンカーブで細かく調整するの操作位置と周辺UI

07 HOWTO

複数の要素をまとめて揃える

Shift・Command・Controlを押しながらクリックするか、空白から囲んで複数選択します。単一選択の配置はキャンバス基準、複数選択の配置は選択範囲基準になります。

複数の要素をまとめて揃えるの操作位置と周辺UIスマホの複数の要素をまとめて揃えるの操作位置と周辺UI

この要素でできること

  • 選んだすべての要素に個別の選択枠が見える
  • まとめて移動しても要素同士の間隔が崩れない
  • 複数選択時は選択範囲の端・中央へ揃っている

操作する場所

01
01 選択へ追加・解除する

Shift・Command・Controlを押しながら要素をクリックすると、現在の選択へ追加または選択解除できます。

01 選択へ追加・解除するの操作位置と周辺UIスマホの01 選択へ追加・解除するの操作位置と周辺UI
02
02 範囲選択する

キャンバス外の空白からドラッグして囲むと、範囲内の要素をまとめて選べます。

02 範囲選択するの操作位置と周辺UIスマホの02 範囲選択するの操作位置と周辺UI
03
03 左・中央・右へ揃える

複数の要素を選び、「配置」タブの「オブジェクトの整列」で左・中央・右を選びます。選択した要素全体の範囲を基準に整列します。

03 左・中央・右へ揃えるの操作位置と周辺UIスマホの03 左・中央・右へ揃えるの操作位置と周辺UI
04
04 上・中央・下へ揃える

複数の要素を選び、「配置」タブの「オブジェクトの整列」で上・中央・下を選びます。

04 上・中央・下へ揃えるの操作位置と周辺UIスマホの04 上・中央・下へ揃えるの操作位置と周辺UI
05
05 同じ種類の要素をまとめて編集する

同じ種類の要素なら色や線などもまとめて変更できます。

05 同じ種類の要素をまとめて編集するの操作位置と周辺UIスマホの05 同じ種類の要素をまとめて編集するの操作位置と周辺UI
06
06 まとめて移動する

選択した要素をまとめてドラッグしても、要素同士の間隔を保ったまま移動できます。

06 まとめて移動するの操作位置と周辺UIスマホの06 まとめて移動するの操作位置と周辺UI
07
07 矢印キーで細かく位置を調整する

矢印キーで1px、Shift+矢印キーで10px、選択した要素をまとめて移動できます。

07 矢印キーで細かく位置を調整するの操作位置と周辺UIスマホの07 矢印キーで細かく位置を調整するの操作位置と周辺UI
08
08 選択枠が要素ごとに見えているか確認する

選んだすべての要素に個別の選択枠が表示されているか確認します。

08 選択枠が要素ごとに見えているか確認するの操作位置と周辺UIスマホの08 選択枠が要素ごとに見えているか確認するの操作位置と周辺UI
09
09 単一選択と複数選択の基準の違いを確認する

単一選択の配置はキャンバス基準、複数選択の配置は選択範囲基準になる違いを確認します。

09 単一選択と複数選択の基準の違いを確認するの操作位置と周辺UIスマホの09 単一選択と複数選択の基準の違いを確認するの操作位置と周辺UI

08 HOWTO

重なり順を直し、完成部分を固定する

文字が写真の後ろへ隠れた、囲みが補足文字を覆った場合は「レイヤー」で重なり順を直します。配置が決まった要素はロックすると、誤って動かしたり削除したりするのを防げます。

重なり順を直し、完成部分を固定するの操作位置と周辺UIスマホの重なり順を直し、完成部分を固定するの操作位置と周辺UI

この要素でできること

  • 文字・矢印・囲みが意図した前後関係で見える
  • 完成した背景や画像がロックされている
  • 不要な要素だけを安全に削除できる

操作する場所

01
01 レイヤーを開く

上部の「レイヤー」を押します。スマホでは「キャンバス」から「レイヤー」を選びます。一覧の上ほど手前に表示され、ドラッグで順番を入れ替えられます。

01 レイヤーを開くの操作位置と周辺UIスマホの01 レイヤーを開くの操作位置と周辺UI
02
02 前面へ移動する

レイヤー一覧の「前面へ移動」を押すと、要素を一つ前へ移動できます。最前面への移動は右クリックメニューでも行えます。

02 前面へ移動するの操作位置と周辺UIスマホの02 前面へ移動するの操作位置と周辺UI
03
03 背面へ移動する

レイヤー一覧の「背面へ移動」を押すと、要素を一つ後ろへ移動できます。文字の下に図形を置く場合などに使います。

03 背面へ移動するの操作位置と周辺UIスマホの03 背面へ移動するの操作位置と周辺UI
04
04 コピー・貼り付けする

要素を選び、Command/Control+Cでコピー、Command/Control+Vで貼り付けます。別のブラウザにも編集できる要素として貼り付けられます。画像としてコピーする操作とは異なります。

04 コピー・貼り付けするの操作位置と周辺UIスマホの04 コピー・貼り付けするの操作位置と周辺UI
05
05 複製する

要素を選び、設定欄下部の「複製」を押します。同じキャンバスに複製されます。コピーした内容は変更しません。

05 複製するの操作位置と周辺UIスマホの05 複製するの操作位置と周辺UI
06
06 完成した要素をロックする

設定欄下部、またはレイヤー一覧で「ロック」を押します。完成した要素を動かさずに、他の要素を編集できます。

06 完成した要素をロックするの操作位置と周辺UIスマホの06 完成した要素をロックするの操作位置と周辺UI
07
07 ロックを解除して再編集する

設定欄下部またはレイヤー一覧の「ロック解除」を押すと、移動や見た目の編集が再びできるようになります。

07 ロックを解除して再編集するの操作位置と周辺UIスマホの07 ロックを解除して再編集するの操作位置と周辺UI
08
08 不要な要素を削除する

「要素の管理」やレイヤー一覧の「削除」で、選択した不要な要素を取り除けます。ロック中は先にロックを解除します。

08 不要な要素を削除するの操作位置と周辺UIスマホの08 不要な要素を削除するの操作位置と周辺UI
09
09 ショートカットで重なり順を移動する

⌘/Ctrl + [ / ] で、選択した要素を背面・前面へすばやく移動できます。

09 ショートカットで重なり順を移動するの操作位置と周辺UIスマホの09 ショートカットで重なり順を移動するの操作位置と周辺UI

09 HOWTO

拡大して確認し、失敗した操作を戻す

細部は拡大表示や全画面で確認します。操作を間違えた場合は「元に戻す」「やり直し」を使い、大きく戻したい場合は履歴から以前の状態を選びます。

拡大して確認し、失敗した操作を戻すの操作位置と周辺UIスマホの拡大して確認し、失敗した操作を戻すの操作位置と周辺UI

この要素でできること

  • 文字の端、背景透過の輪郭、隠した範囲を拡大して確認した
  • Undo・Redo後も選択、位置、枠線が意図どおり残っている
  • 履歴から戻した状態がキャンバスへ反映されている

操作する場所

01
01 拡大・縮小・全画面で確認する

上部の拡大・縮小やトラックパッドのピンチで表示倍率を変えます。「全体表示」はキャンバス全体を画面内に収め、画面の広さが変わると追従します。手動で変えた倍率は維持されます。

01 拡大・縮小・全画面で確認するの操作位置と周辺UIスマホの01 拡大・縮小・全画面で確認するの操作位置と周辺UI
02
02 100%表示に戻す

⌘/Ctrl + 0で、拡大・縮小した表示を100%に戻せます。

02 100%表示に戻すの操作位置と周辺UIスマホの02 100%表示に戻すの操作位置と周辺UI
03
03 元に戻す・やり直しを使う

直前の編集を戻す、または戻した編集をやり直します。選択の解除はEscを使えます。

03 元に戻す・やり直しを使うの操作位置と周辺UIスマホの03 元に戻す・やり直しを使うの操作位置と周辺UI
04
04 ショートカットで元に戻す・やり直す

⌘/Ctrl + Zで元に戻し、⌘/Ctrl + Shift + Zでやり直せます。

04 ショートカットで元に戻す・やり直すの操作位置と周辺UIスマホの04 ショートカットで元に戻す・やり直すの操作位置と周辺UI
05
05 履歴から以前の状態に戻す

「履歴」を開き、戻したい時点の項目を選ぶと、その編集状態に戻ります。

05 履歴から以前の状態に戻すの操作位置と周辺UIスマホの05 履歴から以前の状態に戻すの操作位置と周辺UI
06
06 履歴をクリアする

履歴メニュー下部の「履歴をクリア」で、保存されている編集履歴を消去できます。戻す必要がないことを確認してから実行します。

06 履歴をクリアするの操作位置と周辺UIスマホの06 履歴をクリアするの操作位置と周辺UI
07
07 選択を解除して仕上がりを確認する

Escキーで選択を解除し、選択枠やハンドルのない状態で仕上がりを確認します。

07 選択を解除して仕上がりを確認するの操作位置と周辺UIスマホの07 選択を解除して仕上がりを確認するの操作位置と周辺UI
08
08 文字の端と背景透過の輪郭を確認する

拡大表示のまま、文字の端や背景透過の輪郭にノイズや欠けが残っていないか確認します。

08 文字の端と背景透過の輪郭を確認するの操作位置と周辺UIスマホの08 文字の端と背景透過の輪郭を確認するの操作位置と周辺UI
09
09 Undo・Redo後も位置と枠線が保たれているか確認する

元に戻す・やり直しを行った後も、要素の選択、位置、枠線が意図どおり残っているか確認します。

09 Undo・Redo後も位置と枠線が保たれているか確認するの操作位置と周辺UIスマホの09 Undo・Redo後も位置と枠線が保たれているか確認するの操作位置と周辺UI

10 HOWTO

使う場所に合う形式で保存する

共有先と画質に合わせてPNG・JPEG・WebPを選びます。すぐ別のアプリへ貼る場合は「コピー」、ファイルとして残す場合は「ダウンロード」を使います。

使う場所に合う形式で保存するの操作位置と周辺UIスマホの使う場所に合う形式で保存するの操作位置と周辺UI

この要素でできること

  • PNG・JPEG・WebPから用途に合う形式を選んだ
  • 選択枠、ハンドル、ツールバーが出力に含まれていない
  • 保存した画像で文字、背景、枠線、影、重なり順を再確認した

操作する場所

01
01 選択枠を外して完成状態を確認する

保存前に選択を解除し、選択枠やハンドルが出力に含まれない状態にします。

01 選択枠を外して完成状態を確認するの操作位置と周辺UIスマホの01 選択枠を外して完成状態を確認するの操作位置と周辺UI
02
02 出力形式を選ぶ

PCはキャンバス上部、スマホは「保存」を開いてPNG・JPEG・WebPを選びます。保存前に表示されるキャンバス寸法も確認します。

02 出力形式を選ぶの操作位置と周辺UIスマホの02 出力形式を選ぶの操作位置と周辺UI
03
03 PNG

PNGは文字や線をくっきり保存したい場合に適しています。透明背景が必要な場合は「キャンバスサイズ」の「保存時の背景」で「透明」を選びます。

03 PNGの操作位置と周辺UIスマホの03 PNGの操作位置と周辺UI
04
04 JPEGを選ぶ

写真をJPEGで保存する場合に選びます。保存時の背景で透明を選んでいても、JPEGは白背景になります。

04 JPEGを選ぶの操作位置と周辺UIスマホの04 JPEGを選ぶの操作位置と周辺UI
05
05 余白と背景を確認する

「キャンバスサイズ」の「保存時の背景」で白か透明を選びます。既定は白で、透明はPNG・WebPに対応します。配置写真のない余白や背景透過した部分が、目的の背景で保存されるか確認します。

05 余白と背景を確認するの操作位置と周辺UIスマホの05 余白と背景を確認するの操作位置と周辺UI
06
06 画像としてコピーする

「画像としてコピー」を押すとキャンバス全体を画像としてコピーします。要素の編集情報をコピーしたい場合は、対象を選びCommand/Control+Cを使います。

06 画像としてコピーするの操作位置と周辺UIスマホの06 画像としてコピーするの操作位置と周辺UI
07
07 保存する

「保存」を押してファイルをダウンロードします。スマホでは上部の「保存」を開き、形式を選んだ後に表示される「保存」を押します。

07 保存するの操作位置と周辺UIスマホの07 保存するの操作位置と周辺UI
08
08 保存した画像を再確認する

保存したファイルを開き、文字、背景、枠線、影、重なり順が意図どおりか確認します。作例では保存ファイルを画像編集へ読み込み直しています。

08 保存した画像を再確認するの操作位置と周辺UIスマホの08 保存した画像を再確認するの操作位置と周辺UI
09
09 WebPで保存し直す

WebPを選んで保存します。透明背景が必要な場合は「保存時の背景」を透明にします。保存後のファイルを開き、寸法・色・余白を確認します。

09 WebPで保存し直すの操作位置と周辺UIスマホの09 WebPで保存し直すの操作位置と周辺UI

Notes

使う時の注意

使う前に確認しておくと迷いにくいポイントを、理由つきでまとめています。

最初に

完成画像をどこで使うか決めます

元画像の比率を保つか、正方形・横長・縦長・OGP・A4などの決まった大きさにするかを先に選ぶと、後から配置をやり直しにくくなります。

編集中

選択した要素に応じて操作が切り替わります

画像、文字、図形、線を選び、画面右上の「設定を開く」を押すと、対象に合った設定が開きます。PCは右側、スマホは下部に表示されます。分類タブを選ぶと設定内容が切り替わります。

保存前

選択枠を外して完成状態を確認します

文字が読めるか、隠した部分が残っていないか、要素の重なりが正しいかを確認してから形式を選びます。キーボード操作はツール上部のヘルプで確認できます。

スマホ

設定欄の高さを変えられます

スマホの設定欄は上端のハンドルを上下へドラッグして高さを変えられます。下へ強くスワイプすると閉じ、キャンバス下の入口から再び開けます。

FAQ

画像編集 に関する質問

使う前に判断しやすい質問を先に整理します。

画像モザイクとは別のツールですか?

はい。画像モザイクは個人情報や不要部分を隠すための専用ツールで、画像編集は汎用的な画像編集の入口として扱います。

画像データは外部へ送信されますか?

画像編集はブラウザ内で扱う方針です。外部送信が必要な処理を追加する場合は、画面上で明示します。

キーボード操作はありますか?

はい。画面上部の「キーボード操作」から、削除、移動、選択の追加・解除、元に戻す・やり直し、拡大・縮小、重なり順の移動などのショートカットを確認できます。

複数の写真を1枚のキャンバスにまとめられますか?

はい。「画像を追加」を繰り返すと、複数の写真を別々の要素として同じキャンバスに配置し、それぞれ個別に位置やサイズを調整できます。

スマートフォンからも同じ操作ができますか?

はい。スマートフォンでも同じ機能を利用できます。画面幅に合わせてツールバーの表示が調整されます。

どの画像ツールと併用できますか?

画像トリミング・リサイズ、画像モザイク、画像圧縮などの画像ツールと目的に応じて使い分けられます。

次に見る使い方

関連する使い方

関連する使い方を続けて見られるように、次に確認しやすい導線をまとめています。