皆様、ベジェ曲線についてご存知でしょうか？

曲線を描くときに便利な機能です。

多くのドローソフトでおなじみのベジェ曲線はInkscapeでも利用可能で、この記事ではその基本的な使い方について紹介します。

ベジェ曲線はさまざまなシーンで非常に役立つツールであり、適切にハンドルを操作すれば多くのことが実現できます。

是非、参考にしてみてください。

はじめに

みなさん、こんにちは！Nくまです。

今回は、Inkscapeの説明第２弾！ということで、ベジェ曲線について書いてみます。

ドローソフト Inkscape について

かんたんに特徴を書いてみます。

この記事を書いたときの環境を書いておきます。

• Windows10
• Dell ノートパソコン
• Inkscape 1.3

Inkscape Ver 1.3で確認しました。自分が初めて触ったときは Ver0.4 くらいだったので随分とアップデートされているのですね。

Inkscape で 取り扱いしているフォーマットの一例です

基本はSVGファイルで編集を続けて、画像として出力する場合はPNGファイルやPDFファイルにすれば良さそうです。

インポートにSVGファイルがあるので、素材ファイルでSVGのものを使うことが出来ます。

また、EPSファイルはLatexで取り扱いする場合に便利かもしれません。

実際に Inkscape を使ってみたい方は公式ホームページでダウンロード、お使いのPCにインストールを行ってください。

Draw Freely | Inkscape

Inkscape is professional quality vector graphics software wh...

inkscape.org

ベジェ曲線の描き方の流れ

おおまかなベジェ曲線の描き方は次の通りです。

1. ペンツールでベジェ曲線を作成
2. ノードツールでノードとハンドルを調整・編集

ペンツールでベジェ曲線を作成

ベジェ曲線の描き方について説明していきます。

直線の作成と同様に、ペンツール（ベジェ曲線/直線を描く）を選択してください。

こちらを使用してベジェ曲線を描いていきます。

ベジェ曲線の基本はこちらになります。

ベジェ曲線の構成要素

• ノード（四角の点。曲線は必ずここを通過する）
• ハンドル（ノードについている線。長さと方向を変えられる。曲線の編集に使用する）

直線の場合は、クリックしてノードを追加していきました。

曲線の場合はハンドル付きのノードを追加していきます。

方法は簡単で、クリックしてノードを置いたらそのままマウスをドラッグしてください。

ドラッグした量と方向にハンドルが追加されます。

これを繰り返していきます。

狙ったとおりにうまくできなくても、後述する「ノード/ハンドルの調整」で直せまるので、ご安心ください。

「ノード」と「ハンドル」について覚えておきましょう。

このハンドルの長さや向きを設定して曲線を作っていくわけなんですね。

次にベジェ曲線の描き方の例です。

続けて別の場所で同じ操作をすることで、ノードとハンドルを追加します。

続けて

また、閉じた図形も可能です。

こんな感じでベジェ曲線を描くことができます。

ノードツールで曲線を編集・調整する

ベジェ曲線を描いたけど、イメージと違うとか調整したいということは多いにあるものです。

そのためにはノードツールを使います。これにより点（ノード）を選択することができます。

また、必要に応じて画面上部メニューバー付近にあるノード編集を使っていきます。

ノード、ハンドルの調整

まずはノードとハンドルの調整方法についてです。

ノードツールを選択し、オブジェクトを選択してみましょう。

そうすると、ノードとハンドルが表示されます。

マウス操作でノードの位置や、ハンドルを調整できます。

一例を示します。

ハンドルの長さや向きを変えることで直感的に曲線具合を調整することができます。

新しくノードを追加する

ここのボタンを使用します。

こちらはノードを挿入する一例です

次にノードの削除例です。

このように、ノードを追加したり削除することで自由度が上がるわけなんですね。

ノード間の編集

ノードを選択した状態で、これらのボタンを押すことでノード間を編集することができます。

たとえば、端点同士を１つのノードに連結する例を示します。

他にもアイコン通りの動作をしますので、試してみてください。

ノードの種類を変更

これらの機能を使えば、直線や曲線を切り替えることができますね。

「シャープにする」ボタンにより、ハンドルを追加したスムーズなノードからハンドルを削除できます。

次に「スムーズにする」ボタンにより、直線ノードにハンドルを追加することにも使えます。

直線から曲線にすることができるんですね。

そこで、最初はハンドル無しで直線で書いておいてあとで曲線にする方法でもできるわけなんですね。

次に「ハンドル左右対称」ボタンは、ハンドルを左右対称にする機能があります。

そういうときもありますので必要に応じて使用してください。

ちなみに、ノードの形状が

• 菱形であればシャープノード
• 四角であればスムーズノードか対称ノード
• 円であれば自動スムーズノード

です。

ノード間を直線、曲線にする

ノードを2個以上選択し、直線にしたり、曲線にすることができます。

曲線にした場合、ハンドルで調整することも可能です。

こちらはやってみた例です。

これらノードツールの機能を使うことで、直線や曲線を調整、編集することができます。

書き直すのも良いのですが、このようにノードの編集で微修正する方法もありますので、使ってみましょう。

補足:ノード点の作成について

補足としてノード（直線の描き方）について簡単に説明します。

ツールボックスからペンツール（ベジェ曲線/直線を描く）を選択し、始点をクリックした後、別の場所にクリックすることでその間が直線になります。

それを繰り返すことで単純ながら図形を描くことができます。

別の例も示します。

クリックを繰り返し、線を作っていきます

ちなみに、こちらの方法は「ノード」を順に追加して直線にしており、ハンドルは無い状態です。

ノードを編集してハンドルを追加することによって、曲線に変えることが出来ます。

また、ハンドルを削除して直線にすることもできます。

ハンドルを編集して狙い通りの形にしていきましょう。

応用例：テキストをパスに沿わせる方法

おまけとして、テキストをパスに沿わせる方法を紹介します。

この図のようにテキストとベジェ曲線を準備します。

この２つを選択した状態でメニューから

「テキスト」ー＞「テキストをパス上に配置」とすることでテキストをパスに沿わせて配置することができます。

文字の位置を調整するために、文字列の前にスペース（空行）を入れております。

ベジェ曲線に慣れてくるとこういう応用例もありますので、紹介させていただきました。

地図を描くときに通りの名前を入れたりできますね。

まとめ

ベジェ曲線は大変便利なツールです。

私の経験上、 Inkscape 以外にもドローツールではよく使うベジェ曲線の描き方ついて少しでも参考になれば嬉しいです。

この機会に是非、使い方を覚えていただければと思います。

長々と書いてしまいましたが、ここまで読んでいただきましてありがとうございました。

参考文献：Inkscapeパーフェクトガイド　（著・水上淳嗣　Windows100%編集部監修）

関連サイト

Learn | Inkscape

Tutorials, how-tos, FAQ, and other important resources to le...

inkscape.org

Inkscape 公式サイトの Learn にいくつかチュートリアルがあります。

英語ですけどためになる内容です。

英語が苦手な方はGoogle翻訳を使いながら見てみるといいでしょう。

また、直線を書く方法について書いてみた記事です。

ドローソフトInkscape使い方(1) シンプルに線を引く方法

ドローソフト Inkscape 使い方(1) フリーのドローソフトInkscapeで線・図形を描く基本的な使い方を解説。ペンツールの操作、グリッド・スナップ設定、PNG出力まで、初心者でも地図やシステム図が手軽に作れます。

read-nonbiri.com

2026.04.07

他にInkscapeに関する記事を作ってみたので、良かったら御覧ください。

ドローソフトInkscape使い方(3)画像の切り抜きトリミング

ドローソフトInkscape使い方 インポートした画像を切り抜く(トリミングする)方法について説明します。クリップとマスクを使用して画像の切り抜きを行います。

read-nonbiri.com

2024.05.26

あとがき

もともとは、大学でAdobe Illustrator を使ったことがあるのですが、プライベートで使うときに値段が高いことが気になってました。

そこで、このフリーソフトに行き着いたわけです。

学生の時のレポートの作図のみならず、仕事に置いてもパワポやエクセルの図より、細かく作り込む場合はやりやすいかなと感じてます。

作る図の複雑さにもよるのでしょうが、複雑になるにつれて、こういうソフトのほうが作り込みしやすいです。

いろいろと端折って記事を書いてしまいましたが、なにかの参考に慣れば幸いです。

パソコンで手軽に図形を書いたり、地図を書きたい

そういうことありませんか？

そんなときは、フリーソフトの Inkscape がお役に立ちます。

Inkscape は、 Adobe のイラストレータに近いソフトでして、細かい図形を書きたいときや、幾何学的な模様を描いたりするのにオススメです。

パソコンで地図や図形をサクッと作りたいと思ったこと、ありませんか？

「手書きは苦手」「Illustratorは高い」——そんな悩みを解決してくれるのが、フリーのドローソフト Inkscape です。

Inkscape は Adobe Illustrator に近い機能を持ちながら、無料で使えるベクター形式の作図ソフト。直線・曲線・図形をきれいに描けるので、地図やシステム図、イベント資料の作成にも重宝します。

私自身、Canva でイベントポスターを作っていたときに「会場の地図をどう描くか」で詰まったのがきっかけです。

Canva だと直線を何本も引くのが難しく、昔使っていた Inkscape を引っ張り出してみたところ、思いのほかスムーズに作れました。

この記事では、そのときのシンプルな使い方をそのままご紹介します。

はじめに

この記事はこんな方にオススメ

• パソコンで簡単な図を作りたい
• ドローソフト Inkscape の基本的な使い方を知りたい

自分が使ってたのは10年くらい前なのですが、継続的に更新されているソフトなのでInkscapeすごいです。

ドローソフト Inkscape について

かんたんに特徴を書いてみます。

この記事を書いたときの環境を書いておきます。

• Windows10
• Dell ノートパソコン
• Inkscape 1.3

Inkscape Ver 1.3で確認しました。自分が初めて触ったときは Ver0.4 くらいだったので随分とアップデートされているのですね。

Inkscape で 取り扱いしているフォーマットの一例です

基本はSVGファイルで編集を続けて、画像として出力する場合はPNGファイルやPDFファイルにすれば良さそうです。

インポートにSVGファイルがあるので、素材ファイルでSVGのものを使うことが出来ます。

また、EPSファイルはLatexで取り扱いする場合に便利かもしれません。

実際に Inkscape を使ってみたい方は公式ホームページでダウンロード、お使いのPCにインストールを行ってください。

Draw Freely | Inkscape

Inkscape is professional quality vector graphics software wh...

inkscape.org

申し訳ございませんが、ダウンロードやインストール方法については割愛させていただきます。

簡単！図形作成の流れ

新規ファイル 起動

まずは新規でファイル作成します。

デスクトップ画面のアイコンか、スタートメニューからInkscapeを起動してみましょう。

デフォルトで、こんな感じでA4サイズのキャンパス作成されます。

オススメ設定

まず最初にこの設定を行うのがオススメです。

• グリッド表示
• スナップON

この２つを初めに行います。

表示メニューから「ページグリット」のところチェックを入れます（キーボードですと Shift+#）。

これを使うことで縦と横の方向が分かりやすくなりますので、真っ直ぐな線や棒を描くときに便利です。

次にスナップを有効化します。

この画面ですと右上にスナップボタンがあります（少々分かりにくいですね……）

スナップさせることで、カーソルの移動をグリッドに吸着させます。

作図を大雑把にすることができ、　横一直線、縦一直線が書きやすくなります。

キーボードでは「%」ボタンでスナップON/OFFの切り替えができます。

作り方は人それぞれですが、自分の場合は最初に大まかに作っておいてから、微調整は後で細かく行っていく流れです。

1. 最初は拡大しない表示と、スナップONで大雑把に描いてく。
2. 次に細かいところを調整。拡大表示(キーボードだと+)してスナップOFFで調整していきます。

拡大縮小表示は、キーボードの Ctrl ボタンを押しながらマウスのホイールボタンで切り替えできます。

他に、Ctrl ボタンを押しながらキーボードの矢印ボタンで表示移動させれます。

ペンツール：ベジェ曲線・直線を描く

こちら、ペンツールを使って描いてます。

こちらのアイコンをクリックしてください。

自分の場合、ほとんどこれを使ってます。

左側メニューからペンツールを選択→左クリックでポイント（ノード）を設定していく→パスが作られていき図形が作成されていきます→線の描画を終了したいときはEnterボタンを押してください。

三角形や四角形といった閉じた図形でもいいですし、単純な直線でもすぐに作れます。

話は変わりますが、これ以外にも左側のツールに「四角形」や「星」や「らせん」もあるので、簡単に描くことができますよ。

こちらは私が適当にやってみた例です。

話を戻します。

線や中身の色を変えることができます。

線や図形にフィルとストロークがあります。ここの色や太さを変更することができます。

メニュー表示の「オブジェクト」から「フィル/ストローク」を押すと設定画面が表示されます。

• フィル：図形の内側
• ストローク：図形の線

フィルやストロークを任意のものに変えていきましょう。

フィルとストロークの塗りスタイルがあるので、こちらも必要に応じて設定してみてください。

簡単には図形(オブジェクト)を選択した状態で、画面下部にある色のところ（グラデーションになっている箇所）をクリックすると、フィルの色を変更することが出来ます。　

一方で、Shiftキーを押しながら色をクリックするとストロークの色を変更することが出来ます。

また、線の種類（太さ、点線、矢印）はストロークのスタイルによって変更します。

この画面例にあるように、ストロークのスタイルで、線種やマーカーを設定します。

これでいうと右の図は矢印を入れたり丸いマーカーを追加したものになります。

線の先を矢印にしたり、途中を●にしたり、設定できますよ。

オブジェクト選択

既に作った線や四角形といったオブジェクトを選択する場合、左側メニューの矢印ボタンを押してからオプジェクトを選択していきます。

選択したオブジェクトの大きさを調整したり移動したりします。

選択した状態にして色やストロークを変更したり、変形もできます。

ちなみにひとつ下にあるこのアイコンはもっと細かくポイント（ノードと呼ばれるパスの各点）を選択するときに使います。

ポイントの位置を調整したり、ノードの調整、追加・削除ができます。

細かい位置調整するときに重宝します。

テキスト入力

追加で文字を入れたい場合は、左側メニューのテキスト入力から行ってください。

テキストの色について注意点がありまして、

「ストロークは無色」

に設定するようにしてください。文字が妙に太くなります……

また、星とか円形を入れることでなんとなく地図っぽくなります。

ファイル(PNG)出力

PNGファイルでエクスポート可能です。

メニューにある「ファイル」→「エキスポート」から可能です。

私の場合、いつも PNG ファイルにしているのですが、背景の色がデフォルトだと透明になっています。

透明のままでもいいのですが、背景を白色にしたいとか、設定を変えたい場合は、エキスポート設定の右下の方に表示されている背景色の設定を変更しましょう。

また、エキスポートの範囲を指定したい場合、必要に応じて「ドキュメント」「選択範囲」あたりを変更してみてください。「選択範囲」は選択したオブジェクトのみエキスポートされるようになります。

パソコンのドキュメントフォルダなどに png ファイルをエキスポートした後に、そのファイルを好きなように使います（みなさんにお馴染みのPNGファイルです）。

例えば Canva にアップロードしてポスターやロゴに追加したり、パワーポイントのスライドに追加して使うことができますよ。

最後に、編集し直すことを考えて svg ファイルを保存しておくことを忘れないようにしてください。

拡張子 svg に馴染みがあまりないため、私の場合は別途、Inkscapeフォルダを作成しそこに保存するようにしています。

マウスで描ける手書き風カリグラフィー機能

直線向きではありませんが、マウスで直感的に描く機能（カリグラフィー）があります。

それについてもご興味があればご確認ください。

プリセットの設定でやってみるだけでも楽しいですよ。

ドローソフトInkscapeの使い方(5) カリグラフィで手軽に手書き風デザイン

ドローソフト Inkscapeの使い方(5) カリグラフィで手軽に手書き風デザインの方法や例を書いてみました。なにかの参考になれば嬉しいです。

read-nonbiri.com

2025.11.09

まとめ

フリーソフトのInkscapeを使って、簡単な図を作る方法を記事に書いてみました。

自分の場合、ポスターに載せたい地図や、レポートの図（システム図やブロック構成図）を書くことに使ってました。

相手に説明するための簡単な図、イラストもこれなら作れます。

自分は手書きで描くのが少々苦手なので、こういうソフトのほうが図を描きやすいです。

フリーソフトとはいえ、かなり高機能ですので、なにかと便利ですよ。

気になる方はぜひ使ってみてください。

それではまた🐧

おまけ:作成例

ちなみに私が作ってみた地図を参考例として載せておきます。こういうものが作れるわけなんですね。

関連サイト

Learn | Inkscape

Tutorials, how-tos, FAQ, and other important resources to le...

inkscape.org

公式サイトの Learn にいくつかチュートリアルがあります。

英語ですけどためになる内容です。

英語が苦手な方はGoogle翻訳を使いながら見てみるといいでしょう。

また、ベジェ曲線について記事を作ってみました。

ドローソフトInkscapeの使い方(2) ベジェ曲線を描く

ドローソフトInkscapeの使い方(2) ベジェ曲線を描く方法についてです。曲線を書くときに便利な機能です。

read-nonbiri.com

2024.05.21

他にもInkscapeの使い方について記事を作ったので良かったらご覧ください。

ドローソフトInkscape使い方(3)画像の切り抜きトリミング

ドローソフトInkscape使い方 インポートした画像を切り抜く(トリミングする)方法について説明します。クリップとマスクを使用して画像の切り抜きを行います。

read-nonbiri.com

2024.05.26

ドローソフトInkscape使い方(4) 中抜き曜日アイコン作成

中抜き曜日アイコンをフリーのドローソフトInkscapeで作る方法例

read-nonbiri.com

2024.05.26

あとがき

もともとは、私は大学でAdobe Illustrator を使ったことがあるのですが、プライベートで使うときに値段が高いことが気になってました。

そこで、このフリーソフトに行き着いたわけです。

学生の時のレポートの作図のみならず、仕事に置いてもパワポやエクセルの図より細かく作り込む場合はやりやすいかなと感じてます。

作る図の複雑さにもよるのでしょうが、複雑になるにつれて、こういうソフトのほうが作り込みしやすいです。

いろいろと端折って記事を書いてしまいましたが、なにかの参考に慣れば幸いです。