ブラウザで無料お絵かき「おえかきスタジオ」レイヤー・ベクター図形・SVG書き出しまで、はじめての使い方ガイド

お絵かきアプリを使いたいけれど、「アプリのインストールが必要」「会員登録やログインが面倒」「子どもに使わせるのは個人情報の面で少し不安」——そんな理由で、なかなか始められないことはありませんか。

「おえかきスタジオ」は、まなびパレットのブラウザだけで動く無料のお絵かきツールです。インストール不要・登録不要で、パソコンでもタブレットでも、ページを開いたらすぐに描き始められます。しかも、描いた絵のデータはお使いの端末の外には送られません。すべてブラウザの中だけで処理されるので、お子さまの作品や写真を安心して扱えます。

そして「おえかきスタジオ」がユニークなのは、こうしたやさしさと、本格的な機能を両立している点です。メニューをまるごとひらがなに切り替えられる「ひらがなモード」で、小さなお子さまでも自分で操作できる一方、大人向けのデザインソフト並みのノード（ベジェ）編集や集中線、ベクター（SVG）書き出し、グラデーションまで、ぜんぶ無料でそろっています。子ども向けなのに、ここまでできる——これが、おえかきスタジオの いちばんの押しです。

この記事では、保護者の方や先生に向けて「おえかきスタジオ」でできることを紹介しながら、はじめての方向けに基本的な使い方をひととおりご案内します。

🎨

おえかきスタジオ

ブラウザで お絵かき・ベクター図形・SVG書き出し

→ ひらいて つかう

「おえかきスタジオ」でできること

おえかきスタジオは、ペンで自由に描く「お絵かき」と、まる・しかく・ほしなどの形をきれいに置く「ベクター図形」の、両方を1つの画面で扱えるのが特徴です。おもな機能を挙げると、次のようになります。

ペン・ブラシ・けしゴム

ふつうのペンのほか、マーカー・えんぴつ・ふでのブラシがあり、iPadとApple Pencilなら筆圧にも対応します。

ベクター図形（20種類以上）

しかく・まる・さんかく・ほし・ハート・矢印・吹き出し・集中線など。あとから色や大きさ、角の丸みを自由に変えられます。

レイヤー（重ね描き）

背景・人物・文字などを別々の層に分けて描けます。順番の入れ替えや、一部だけの修正がかんたんです。

文字入れ

フォント・大きさ・色・ふちどり・行間・そろえを選んで、パワーポイントのように文字を配置できます。

グラデーション

直線・放射（円形）・フリーフォームの3種類。2〜8色を混ぜた、本格的な色づかいができます。

ノード編集（かたちの微調整）

図形を「点」で編集して、オリジナルの形に作り替えられます。曲線もあつかえます。

画像の読み込み・白背景の切り抜き

写真やイラストを取り込み、白い背景をワンクリックで透明にできます。

PNG・SVGで書き出し

作品は画像（PNG）としても、拡大してもきれいなベクター形式（SVG）としても保存できます。

こんな場面で使えます

おえかきスタジオは、お子さまの「自由に描きたい」という気持ちにも、学習や制作の道具としての用途にも応えます。

• おうちで、お子さまが自由にお絵かきを楽しむ（作品はPNGで保存して印刷もできます）
• 図工・美術の下描きや、色の組み合わせを試す練習
• 掲示物やプリントに使う、吹き出し・アイコン・見出しの飾りづくり
• 4コマまんがや紙芝居の背景・キャラクターづくり
• ロゴやワンポイントの図形を、拡大してもきれいなSVGで書き出して資料に貼る
• 写真の背景を切り抜いて、コラージュや素材づくりに使う

基本の3つの「かきかた」

まずは、上のツールバーにある3つの道具を覚えれば、だいたいのことができます。

① ペン

フリーハンドで線を描きます。図形レイヤーではあとから編集できる線に、ペイントレイヤーでは連続して塗るように描けます。太さは「ふとさ」スライダーで変えられます。

② ずけい（図形）

しかく・まる・ほしなどのボタンを選んで、キャンバスをドラッグすると図形が置けます。置いたあとに、色（ぬり・わく）や角の丸みを何度でも変えられます。

③ もじ

「A」ボタンを押してキャンバスをクリックすると、その場で文字が打てます。ダブルクリックすればいつでも打ち直せます。

まちがえたら、いつでも「もどす」ボタン（Ctrl+Z）でやり直せます。

漢字が読めなくても大丈夫 ― ひらがなモード

おえかきスタジオの大きな特徴のひとつが「ひらがなモード」です。画面右上の「あ ひらがな」ボタンを押すと、メニューや設定の表示がまるごとひらがなに切り替わります。「背景」は「はいけい」、「透明」は「とうめい」、「スナップ」は「ピタッと そろえる」というように、漢字がまだ読めない小学校低学年のお子さまでも、自分で読んで操作できます。下は、同じ設定パネルの「かんじ」表示と「ひらがな」表示をならべた比べ図です。

ふりがなを付けるのではなく、表示そのものがひらがなになるので、はじめて絵を描くお子さまでも、大人がつきっきりにならずに、自分のペースで操作を覚えられます。もちろん、いつでも同じボタンで、もとの表示に戻せます。おうちでも教室でも、「自分でできた！」を後押しする機能です。

キャンバスの大きさと背景は、さいしょに決められる

「モード」タブでは、描く前にキャンバス（絵をかく面）の大きさと背景を選べます。大きさは 512／768／1024／1080／1440ピクセル の5段階から選べて、おすすめは1024×1024です。数字が大きいほど絵がくっきり仕上がり（そのぶんファイルは少し重め）、SNS用・印刷用など、用途に合わせて選べます。

背景は「透明」「白」「すきな色」の3つから選べます。透明にしておくと、PNGで書き出したときに背景がぬけた画像になるので、そのままスタンプ・アイコン・コラージュの素材として、ほかの絵に重ねて使えます。白や好きな色を選べば、その色で塗りつぶした背景として保存されます。透明かどうかは、キャンバスの後ろに市松（チェッカー）模様が見えるかどうかで分かります。

あわせて「モード」では、なめらかに描けるじゆうモードと、マス目にそって描くドット絵モードも切り替えられます。ドット絵づくりを楽しみたいときに便利です。

アイコンの見かた（道具と図形の一覧）

ツールバーのアイコンは、それぞれ次のような意味です。はじめは全部覚えなくても大丈夫。よく使うものからで十分です。マウスを重ねる（タブレットは長押し）と、名前の説明も出ます。

レイヤーで「重ねて」描く

おえかきスタジオの大きな特徴が「レイヤー（層）」です。透明なシートを何枚も重ねるイメージで、たとえば「背景」「人物」「文字」を別々のレイヤーに分けて描けます。

レイヤーを分けておくと、あとから「人物だけ動かす」「背景の色だけ変える」といった修正が、ほかの部分にふれずにできます。右側のパネルで、表示・非表示の切り替え、順番の入れ替え、濃さ（不透明度）の調整ができます。

「レイヤーは難しそう」と感じる方も、最初は1枚のまま描いてかまいません。慣れてきたら、背景と主役を分けてみると、ぐっと編集がらくになります。

この「重ねてつくる」という考え方は、じつはアニメーションのセル画やデジタル作画、写真編集、デザインソフトなど、さまざまな創作の世界に共通する基本です。小さいうちからレイヤーの構造に親しんでおくと、将来いろいろなツールを使うときの理解の土台になります。

図形とノード編集で、自由なかたちを作る

置いた図形は、色や大きさを変えるだけでなく、2つ以上の図形を「結合（合体）」「型抜き（くりぬき）」「交差（重なりだけ残す）」して、新しい形を作れます。パワーポイントの「図形の結合」と同じ考え方です。

さらに「ノード編集」を使うと、図形を輪郭の「点」で編集できます。点を動かす・増やす・減らすだけでなく、「丸く（ハンドル）」を使えばなめらかな曲線もあつかえます。星やハートを少しいびつにしたり、オリジナルのキャラクターの形を作ったり——お子さまの「こういう形にしたい」に応えられます。

「中心点」で、反転・回転・ミラー・万華鏡を自由自在に

図形をひとつ選ぶと、まん中あたりに小さな十字の「中心点」が出ます。これは左右・上下の反転の「折り返しの軸」、回転の中心、そしてミラー・万華鏡の中心になる、とても大事な点です。中心点はドラッグで好きな位置へ動かせて、図形の端やまん中でピタッと吸いつくので、ねらった位置に置きやすくなっています。

左右反転・上下反転

中心点を軸に、鏡のように図形をひっくり返します。中心点の場所を変えれば「どこを軸に返すか」が変わるので、思いどおりの位置で反転できます。

中心点をまわる回転

回転も中心点が中心になります。中心点を図形の外に置けば、その点をぐるりと回る「公転」のような動きもできます。

ミラー複製（左右／上下）

元の図形はそのままに、中心点を軸に反転したコピーをつくります。ちょうちょ・顔・もようなど、左右対称の絵が一発で作れます。

万華鏡（放射状コピー）

中心点のまわりに、決めた個数だけ回転コピーを放射状に並べます。数を変えるだけで、雪の結晶・花・幾何学もようがかんたんにできます。

反転すると「ノード」もいっしょに反転

反転のとき、輪郭の点（ノード）もいっしょにひっくり返るので、左右非対称の形でも思ったとおりにきれいに返ります。

直線・矢印は「両端の点」で引き直し

直線や矢印を選ぶと、線の両端に点が出ます。その点をドラッグすれば、線の長さや向きを後からかんたんに引き直せます。

カッター（きりわけ）で切り分ける ― 土星の輪も作れる

図形を選んで「きりわけ」（✂）を押し、図形の上を線でひとなぞりすると、その線で図形が2つに分かれます。「型抜き」が“重ねてくりぬく”のに対して、カッターは“1つを2つに割る”道具です。切ったあとはそれぞれ別の図形になるので、色を変えたり、前後の重なり順を入れかえたりできます。

これを使うと、平面のお絵かきでも「土星」のような立体的な表現ができます。手順はこうです。

1. 大きい楕円から小さい楕円を「型抜き」して、うすい輪っか（リング）を作ります。
2. その上に、惑星になる丸を重ねます。
3. 輪っかを選んで「きりわけ」で、惑星のまん中あたりを横にひとなぞりして切ります（上半分・下半分の2つになります）。
4. レイヤーで、上半分を惑星の「前」、下半分を「後ろ」に並べかえます。

すると、輪が惑星の後ろに回り込んで見え、ぐっと立体感のある土星になります。切る線はななめでもよく、Shiftを押しながらなぞると水平・垂直にまっすぐ切れます。

グラデーションで、いろどりを豊かに

色は単色だけでなく、グラデーション（色のうつり変わり）も使えます。おえかきスタジオのグラデーションは3種類です。

直線グラデ

左から右へ、上から下へなど、まっすぐ色が変わります。「むき」ボタンでななめ方向もかんたんに選べます。

放射（円形）グラデ

中心から外へ、丸く色が広がります。太陽やボールのような立体感が出せます。

フリーフォームグラデ

色の点を図形の上に自由に置いて、にじませるように混ぜられます。夕焼けや虹のような、やわらかい多色の表現ができます。

色は2色から8色まで増やせます。気に入った配色は「★お気に入りグラデ」に名前をつけて保存でき、次からワンタップで呼び出せます。お気に入りはJSONファイルとして書き出し・読み込みもできるので、バックアップや共有にも便利です。

集中線で、マンガのような「迫力」をひと押しで

おえかきスタジオには、まんがでおなじみの集中線が図形のひとつとして入っています。ふつうは描くのが大変な集中線も、ここでは「集中線」を選んでキャンバスをドラッグするだけで、下のような放射状の線がいっぺんに出来上がります。おどろき・スピード感・「ここに注目！」を伝えたい場面にぴったりです。

置いたあとの調整も、とても直感的です。オレンジ色の点をドラッグすると線が集まる中心を自由に動かせ（上の例では右上に寄せています）、青い点をドラッグすると中心のあいた丸（スポットライト）の大きさを変えられます。この「あいた丸」の中に主役を置くのがコツです。さらに、線の形は「ふつう」と「とがり」の2種類から選べ、本数や太さもスライダーで調整できます。色を変えれば、白背景に黒い集中線（王道のまんが風）から、やわらかいパステル調まで自由自在です。これだけ細かく作れる集中線が最初から入っているツールは、無料ではなかなか見当たりません。

写真の白背景を、ワンクリックで切り抜き

写真やイラストを読み込んだあと、白い（または薄い一色の）背景を「背景切り抜き」ボタンでワンクリック透明にできます。ふちから背景の色をたどって透明にするしくみなので、被写体の中の白い部分は残したまま、まわりの背景だけをきれいに抜けます。切り抜いた画像は、そのままコラージュや素材づくりに使えます。

作品の保存 ― PNGとSVG、そしてプロジェクト

描いた作品は、目的に合わせて3つの形で保存できます。

PNG（画像）

いちばん一般的な画像形式。印刷したり、資料に貼ったり、SNSに載せたりできます。背景を透明のまま書き出すこともできます。

SVG（ベクター）

拡大してもぼやけない、きれいなベクター形式。ロゴや図形、文字を大きく引きのばして使いたいときに向いています。

プロジェクト（.json）

レイヤーや図形の情報をそのまま保存する形式。あとで開けば、続きから編集できます。

ファイルには、日本語（ひらがな）で名前をつけて保存できます。「ねこのえ」「おはなばたけ」のように、お子さま自身が読める名前で保存できるので、あとから見つけやすくなります。

安心して使うための工夫

おえかきスタジオは、お子さまが使うことを前提に、いくつかの配慮をしています。

• データは端末の外に出ません。描いた絵や読み込んだ写真は、ブラウザの中だけで処理され、サーバーに送信されません。
• 登録・ログインは不要。個人情報を入力せずに、すぐに使えます。
• ひらがなモード。メニューをすべてひらがなに切り替えられます。漢字が読めないお子さまでも、自分で操作できます。
• タブレット対応。指やApple Pencilでの操作に対応。iPadでもなめらかに描けます。
• 自動保存。作業中の内容はブラウザに自動で一時保存され、うっかりページを閉じても、開き直したときに復元できます。

なお、大切な作品は、PNGやプロジェクト(.json)として手元に保存しておくことをおすすめします（自動保存はあくまで一時的なものです）。

もっと楽しむための、ちょっとしたコツ

最後に、知っておくと便利な使い方をいくつか紹介します。

• 吹き出しに文字を入れる：吹き出しをダブルクリックすると、その中に文字を打てます。まんが風のセリフがかんたんに作れます。
• 集中線で「マンガ風」に：図形の「集中線」を置くと、まんがのような迫力ある効果がすぐ作れます。線の形は「ふつう」と「とがり」から選べ、中心の位置・本数・とがり具合も自由に調整できます。おどろき・スピード感・強調したい場面にぴったりで、無料ツールでは意外とめずらしい機能です。
• カクカクした形を丸くする：ノード編集の「ぜんぶ まるく」を押すと、多角形や星、そして手描きのペン線までもが、やわらかい曲線の形に変わります（「ぜんぶ かくばる」でいつでも元に戻せます）。
• パーツを作って読み込む：「目」だけ、「花」だけを作って書き出し、別の絵に読み込んで組み合わせられます。
• すばやく複製：選んだものを Alt を押しながらドラッグすると、複製しながら動かせます。同じ図形をいくつも並べたいときに便利です。
• ドット絵モード：モードを「ドット絵」に切り替えると、マス目に沿ったドット絵が描けます。

ショートカットを覚えなくても、さわるだけで使える

高機能なグラフィックソフトは、たくさんの機能を覚えないと使いこなせないことがあります。おえかきスタジオは、そうした「覚える負担」をできるだけ減らし、画面を見て、さわればわかることを大切に作っています。とくに次のような工夫があります。

専門的な機能を、専門知識なしでも触って使える——ここが、おえかきスタジオがとくに力を入れているところです。お子さまや、ふだんデザインソフトを使わない方でも、気軽に本格的な表現を楽しめます。

パソコンで使うときの便利なショートカットキー

マウスとキーボードのパソコンで使うときは、ショートカットキーを覚えるとさらに快適です（もちろん、すべてボタンからも操作できます）。よく使うものをまとめました。

Macをお使いの場合は、Ctrlのかわりに⌘（Command）でも同じように操作できます。

よくある質問（FAQ）

おえかきスタジオは無料ですか？

はい、完全無料です。登録・ログインもインストールも不要で、ブラウザを開くだけですぐに使えます。追加料金や課金要素もありません。

会員登録やアカウントは必要ですか？

必要ありません。メールアドレスなどの個人情報を入力せずに、そのまま描き始められます。

iPadやタブレットでも使えますか？

はい。指やApple Pencilでの操作に対応しており、iPadやAndroidタブレットのブラウザでもなめらかに描けます。パソコン（Windows・Mac・Chromebook）でも使えます。

描いた絵のデータは安全ですか？どこに保存されますか？

作業中のデータは端末の外（サーバー）に送信されず、ブラウザ内だけで処理されます。作品はPNG画像・SVG（ベクター）・プロジェクト（.json）として手元の端末に保存できます。うっかり閉じても復元できる自動一時保存もあります。

ベクター（SVG）で書き出せますか？

はい。図形・パス・文字・ペン線は、拡大してもきれいなベクター形式（SVG）として書き出せます。ロゴやアイコン、カッティングマシン用のデータづくりにも使えます。

集中線や吹き出しなど、マンガ風の表現はできますか？

はい。集中線・吹き出し・もくもく（雲）などが図形として用意されています。集中線は中心の位置・本数・太さ・線の形（ふつう／とがり）を細かく調整できます。

写真の背景を透明にできますか？

はい。写真やイラストを読み込んで、白い（または薄い一色の）背景を「背景切り抜き」でワンクリック透明にできます。背景透過のPNGとして書き出せるので、スタンプやコラージュの素材づくりに便利です。

子どもでも使えますか？

はい。メニューをすべてひらがなに切り替えられる「ひらがなモード」があり、漢字が読めないお子さまでも自分で操作できます。データが端末の外に出ないので、保護者の方も安心して使わせられます。

まとめ

「おえかきスタジオ」は、インストールも登録もいらず、ブラウザを開くだけで使える無料のお絵かきツールです。ペンでの自由なお絵かきから、レイヤー・ベクター図形・ノード（ベジェ）編集・グラデーション・集中線・SVG書き出しといった、大人のデザインソフト並みの本格機能まで、1つの画面でそろっています。しかもそれを、ひらがなモードで小さなお子さまでも操作できる——子ども向けなのに、ここまでできるのが、いちばんの魅力です。データが端末の外に出ない安心設計とタブレット対応で、お子さまから大人まで、はじめての方でも気軽に楽しめます。

まずは一度、開いて何か描いてみてください。きっと「こんなこともできるんだ」という発見があるはずです。

🎨

おえかきスタジオを ひらく

登録不要・完全無料・ブラウザだけで お絵かき

→ つかってみる

🔨

ほかの「つくる」ツールも見る

3Dこうさく（3Dモデリング・STL/3MF書き出し）など

→ つくる 一覧