2026年9月10日木曜日

【WEB】WebCanvas


 WebCanvasの使い方

WebCanvasは、画像・テキスト・図形・表・手描きを自由に組み合わせて、配信のサムネイルやバナー、告知画像などをブラウザだけでサクッと作れるツールです。インストールは不要で、作った画像がどこかに送信されることもありません。すべての処理はお使いの端末の中だけで完結します。6言語対応。


1. まずはキャンバスのサイズを決める

画面上部の「サイズ選択」から、作りたい画像の用途を選びます。YouTubeのサムネイル、Instagramの投稿・ストーリーズ、TikTok、Twitch、X(Twitter)、Facebookなど、主要なSNS・配信サービスの定番サイズがあらかじめ用意されているので、選ぶだけで最適なキャンバスサイズになります。決まったサイズがない場合は、数値を直接入力してオリジナルのサイズを指定することもできます。


2. 画像を置く

キャンバスが空の状態だと、真ん中に「画像をドラッグ&ドロップ/クリックしてファイルを選択」という案内が表示されます。パソコンなら手元の画像ファイルをそのままドラッグして落とすだけ、スマホやタブレットならタップしてファイルを選ぶだけで画像を配置できます。画像を追加したあとは、四隅のハンドルをつまんで大きさを変えたり、上のハンドルを回して角度を変えたりできます。もちろん、画像そのものをつかんで好きな位置に動かすことも可能です。


3. テキストを入れる

左側のツールから「テキスト」を選ぶと、キャンバスの中央に文字が追加されます。追加された文字をダブルクリック(スマホならダブルタップ)すると、その場で文字を打ち替えられます。フォントはゴシック・丸ゴシック・明朝・手書き風・ポップなインパクト系・レトロなドット文字まで、19種類から用途に合わせて選べます。色や縁取り、影、カーブ(弧を描くように文字を配置する機能)なども設定できるので、配信のタイトルロゴのような凝った文字装飾も作れます。


4. 図形を使う

「図形」からは、四角形・丸四角形・左右だけ丸い四角形(ピル型)・楕円・三角形・ひし形・五角形・六角形・星・ハート・平行四辺形など、豊富な形を選んで配置できます。図形は塗りつぶし色や枠線の色・太さを自由に変えられるほか、図形の上に画像をドラッグ&ドロップすると、その画像が図形の形にぴったり収まります(はみ出しません)。また、図形をダブルクリックすれば、図形の中に直接文字を入れることもできます。ニュース番組風のテロップや、配信画面のフレーム装飾を作るときに便利です。


5. 表を使う

「表」を選ぶと、行と列を自由に決められる表が追加されます。セルをダブルクリックすれば文字を入力でき、罫線をドラッグすれば行の高さ・列の幅を個別に調整できます。行や列を右クリック(スマホは長押し)すると、行・列の追加や削除、並べ替えのメニューが出てきます。同じメニューから、選んだセルの中にだけ画像を入れることもできるので、スケジュール表や対戦カード表のようなレイアウトも簡単に組めます。


6. 手描きで書き込む

「手描き」を選ぶとペンモードになり、キャンバスに直接線を描き込めます。太さや色を変えたり、消しゴムで消したりできます。手描きは常に一番手前のレイヤーとして扱われ、実際に何か描いた時だけレイヤー一覧に表示されます。表示・非表示の切り替えや、描いた内容の消去もレイヤー一覧から行えます。


7. レイヤーの重なり順を整える

右側の「レイヤー」パネルには、追加した要素が一覧で並びます。ここでドラッグして順番を入れ替えたり、右クリック(長押し)メニューから「最前面へ」「最背面へ」などを選んで、要素の重なり順を調整できます。「あの画像がテキストの後ろに隠れてしまう」といったときは、ここで前後関係を直してください。


8. 完成したらPNGでダウンロード

配置が終わったら、左下の「PNGでダウンロード」ボタンを押すだけで、画像ファイルとして保存できます。手描きの内容も含めて、画面に見えているとおりの状態がそのまま書き出されます。


ちょっとしたコツ


操作を間違えたときは、通常のショートカット(Ctrl+Zで元に戻す、Ctrl+Shift+ZまたはCtrl+Yでやり直す)が使えます。

選択した要素を消したいときは、Deleteキーか、右クリック(長押し)メニューの「削除」からどうぞ。

スマホ・タブレットでも一通りの操作に対応しています。右クリックの代わりに長押しでメニューが開きます。


難しい操作は特になく、「置く → 動かす・変える → 重なり順を整える → 書き出す」という流れさえ覚えてしまえば、誰でも直感的に使えるはずです。


【WEB版】

https://daigorou-addon.github.io/webcanvas/