<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ベクター | のんびり書評ブログ</title>
	<atom:link href="https://read-nonbiri.com/tag/%E3%83%99%E3%82%AF%E3%82%BF%E3%83%BC/feed/" rel="self" type="application/rss+xml" />
	<link>https://read-nonbiri.com</link>
	<description>実用書/ビジネス書の紹介や知識について紹介したり、便利グッズを紹介してきます。皆さまの何かお役に立てれば幸いです（理系サラリーマン）</description>
	<lastBuildDate>Tue, 07 Apr 2026 13:45:30 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://read-nonbiri.com/wp-content/uploads/2022/04/cropped-本の無料アイコン素材21-32x32.png</url>
	<title>ベクター | のんびり書評ブログ</title>
	<link>https://read-nonbiri.com</link>
	<width>32</width>
	<height>32</height>
</image> 
<atom:link rel="hub" href="https://pubsubhubbub.appspot.com"/>
<atom:link rel="hub" href="https://pubsubhubbub.superfeedr.com"/>
<atom:link rel="hub" href="https://websubhub.com/hub"/>
<atom:link rel="self" href="https://read-nonbiri.com/tag/%E3%83%99%E3%82%AF%E3%82%BF%E3%83%BC/feed/"/>
	<item>
		<title>ドローソフトInkscapeの使い方(5) カリグラフィで手軽に手書き風デザイン</title>
		<link>https://read-nonbiri.com/inkscape_calligraphy/</link>
					<comments>https://read-nonbiri.com/inkscape_calligraphy/#respond</comments>
		
		<dc:creator><![CDATA[Nくま]]></dc:creator>
		<pubDate>Sun, 23 Feb 2025 12:10:13 +0000</pubDate>
				<category><![CDATA[パソコン]]></category>
		<category><![CDATA[趣味]]></category>
		<category><![CDATA[PC]]></category>
		<category><![CDATA[ソフト]]></category>
		<category><![CDATA[フリーソフト]]></category>
		<category><![CDATA[ベクター]]></category>
		<category><![CDATA[商品紹介]]></category>
		<category><![CDATA[手書き風]]></category>
		<category><![CDATA[遊び]]></category>
		<guid isPermaLink="false">https://read-nonbiri.com/?p=6103</guid>

					<description><![CDATA[Inkscape の隠れた魅力、それはカリグラフィ機能です。 ペイントなどのフリーハンド・手書き機能では難しい繊細な線や曲線も、Inkscape なら素早く美しく描けてしまいます。 ベクター形式だから、拡大しても美しさそ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p></p>



<p><a rel="noopener" target="_blank" href="https://inkscape.org/">Inkscape</a> の隠れた魅力、それはカリグラフィ機能です。</p>



<p>ペイントなどのフリーハンド・手書き機能では難しい繊細な線や曲線も、<a rel="noopener" target="_blank" href="https://inkscape.org/">Inkscape</a> なら素早く美しく描けてしまいます。</p>



<p>ベクター形式だから、拡大しても美しさそのまま。</p>



<p><a rel="noopener" target="_blank" href="https://inkscape.org/">Inkscape</a> に慣れている人なら、直感的な操作で本格的なカリグラフィデザインを楽しめます。</p>



<p>今回は、このパワフルな機能の使い方と魅力をご紹介します。</p>



<p></p>



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-check-circle block-box has-background has-border-color has-icon-color has-watery-yellow-background-color has-grey-border-color has-indigo-icon-color"><div class="iconlist-title">この記事を読んで分かること</div>
<ul class="wp-block-list">
<li>フリーのドローソフト <a rel="noopener" target="_blank" href="https://inkscape.org/">Inkscape</a> のカリグラフィー描画機能の基本
<ul class="wp-block-list">
<li>筆やペンで書いたような手書き風の線を書くことができます</li>
</ul>
</li>
</ul>
</div>



<p></p>



<p></p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">はじめに</a></li><li><a href="#toc2" tabindex="0">ドローソフト Inkscape について</a></li><li><a href="#toc3" tabindex="0">カリグラフィツールとは</a><ol><li><a href="#toc4" tabindex="0">カリグラフィツールの特徴</a></li></ol></li><li><a href="#toc5" tabindex="0">カリグラフィー使用方法</a><ol><li><a href="#toc6" tabindex="0">設定項目</a></li><li><a href="#toc7" tabindex="0">設定一例</a><ol><li><a href="#toc8" tabindex="0">ドリッピング</a></li><li><a href="#toc9" tabindex="0">脳神経ニューロ？</a></li><li><a href="#toc10" tabindex="0">習字風</a></li></ol></li></ol></li><li><a href="#toc11" tabindex="0">まとめ</a><ol><li><a href="#toc12" tabindex="0">参考サイト</a></li><li><a href="#toc13" tabindex="0">関連記事</a></li><li><a href="#toc14" tabindex="0">あとがき</a></li></ol></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">はじめに</span></h2>



<p></p>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="768" src="https://read-nonbiri.com/wp-content/uploads/2024/05/alvaro-felipe-7G6IS_arLLg-unsplash-1024x768.jpg" alt="パソコン" class="wp-image-5795" srcset="https://read-nonbiri.com/wp-content/uploads/2024/05/alvaro-felipe-7G6IS_arLLg-unsplash-1024x768.jpg 1024w, https://read-nonbiri.com/wp-content/uploads/2024/05/alvaro-felipe-7G6IS_arLLg-unsplash-300x225.jpg 300w, https://read-nonbiri.com/wp-content/uploads/2024/05/alvaro-felipe-7G6IS_arLLg-unsplash-768x576.jpg 768w, https://read-nonbiri.com/wp-content/uploads/2024/05/alvaro-felipe-7G6IS_arLLg-unsplash-1536x1152.jpg 1536w, https://read-nonbiri.com/wp-content/uploads/2024/05/alvaro-felipe-7G6IS_arLLg-unsplash-2048x1536.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



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



<p>今回は、<a rel="noopener" target="_blank" href="https://inkscape.org/">Inkscape</a> の説明第5弾！ということで、手書き風に描けるカリグラフィー(calligraphy)について書いてみます。</p>



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box has-border-color has-cyan-bluish-gray-border-color"><div class="iconlist-title">この記事はこんな人向き</div>
<ul class="wp-block-list">
<li>マウスのフリーハンドみたいに手軽に書いてみたい</li>



<li>独自の書体で文字を書いてみたい</li>
</ul>
</div>



<p></p>



<p></p>



<p></p>



<h2 class="wp-block-heading"><span id="toc2">ドローソフト Inkscape について</span></h2>



<p>かんたんにドローソフト Inkscape についての特徴を書いてみます。</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box has-border-color has-grey-border-color"><div class="iconlist-title">ドローソフト Inkscape の特徴</div>
<ul class="wp-block-list">
<li>フリーのドローソフト
<ul class="wp-block-list">
<li>ベクター形式での保存</li>



<li>ラスター形式(ビットマップ形式)では無い</li>
</ul>
</li>



<li>Adobe Illustrator みたいな機能</li>



<li>マルチプラットフォーム(自分はWindowsとLinuxで動作することを確認)</li>



<li>日本語に対応している</li>
</ul>
</div>



<p></p>



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



<ul style="background-color:#c8e8fe" class="wp-block-list has-background">
<li>Windows10</li>



<li>Dell ノートパソコン</li>



<li>Inkscape 1.4</li>



<li>ペンタブレットは無くマウスで描画</li>
</ul>



<figure class="wp-block-image size-full"><img decoding="async" width="751" height="618" src="https://read-nonbiri.com/wp-content/uploads/2025/02/inkscape1_4loro.png" alt="inkscape1.4 logo" class="wp-image-6234" srcset="https://read-nonbiri.com/wp-content/uploads/2025/02/inkscape1_4loro.png 751w, https://read-nonbiri.com/wp-content/uploads/2025/02/inkscape1_4loro-300x247.png 300w" sizes="(max-width: 751px) 100vw, 751px" /></figure>



<p></p>



<p><a rel="noopener" target="_blank" href="https://inkscape.org/ja/" data-type="link" data-id="https://inkscape.org/ja/">Inkscape</a> で 取り扱いしているフォーマットの一例です</p>



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box has-border-color has-cyan-bluish-gray-border-color"><div class="iconlist-title">対応している主な画像フォーマット</div>
<ul class="wp-block-list is-style-icon-list-info has-list-style">
<li>インポート
<ul class="wp-block-list">
<li>SVG, AI, EPS, PDF, PS, PNG</li>
</ul>
</li>



<li>保存、エクスポート
<ul class="wp-block-list">
<li>SVG, PDF, EPS, PNG, JPG</li>
</ul>
</li>
</ul>
</div>



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



<p></p>



<p></p>



<h2 class="wp-block-heading"><span id="toc3">カリグラフィツールとは</span></h2>



<p>Inkscapeの<strong>カリグラフィツール</strong>を使うと、筆やペンで書いたような特徴的な線を描くことができます。</p>



<p>左のメニューバーから、カリグラフィを選択してください。</p>



<figure class="wp-block-image size-full is-resized"><img decoding="async" width="441" height="123" src="https://read-nonbiri.com/wp-content/uploads/2025/02/calli01.png" alt="カリグラフィーツールの選択" class="wp-image-6236" style="width:581px;height:auto" srcset="https://read-nonbiri.com/wp-content/uploads/2025/02/calli01.png 441w, https://read-nonbiri.com/wp-content/uploads/2025/02/calli01-300x84.png 300w" sizes="(max-width: 441px) 100vw, 441px" /><figcaption class="wp-element-caption">カリグラフィツールの選択</figcaption></figure>



<p></p>



<p>プリセットされているものがありますので、その一例を示します。</p>



<p>（６パターンあるようです）</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-check-circle block-box has-border-color has-grey-border-color"><div class="iconlist-title">プリセットされているパターン</div>
<ul class="wp-block-list">
<li>つけペン</li>



<li>マーカー</li>



<li>ブラシ</li>



<li>うねり</li>



<li>Splotch</li>



<li>トレーシング</li>
</ul>
</div>



<p>ためしに、私がマウスで書いてみました。</p>



<p></p>



<p></p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img loading="lazy" decoding="async" width="579" height="1024" src="https://read-nonbiri.com/wp-content/uploads/2025/01/karigurafi_04-579x1024.png" alt="プリセットの例" class="has-border-color has-grey-border-color wp-image-6226" style="border-width:1px;width:701px;height:auto" srcset="https://read-nonbiri.com/wp-content/uploads/2025/01/karigurafi_04-579x1024.png 579w, https://read-nonbiri.com/wp-content/uploads/2025/01/karigurafi_04-170x300.png 170w, https://read-nonbiri.com/wp-content/uploads/2025/01/karigurafi_04.png 757w" sizes="(max-width: 579px) 100vw, 579px" /><figcaption class="wp-element-caption">マウスで適当に書いたカリグラフィの例</figcaption></figure>



<p></p>



<p>フィルに灰色とストロークに黒色を付けている状態なんですが、「つけペン」あるいは「マーカー」が、無難な感じがしますね。</p>



<p>これだけでも十分な機能ではあります。</p>



<p>これをベーツに使いつつ、必要に応じて設定パラメータを変更して使用することが簡単です。</p>



<p></p>



<h3 class="wp-block-heading"><span id="toc4">カリグラフィツールの特徴</span></h3>



<ul class="wp-block-list">
<li><strong>幅のある線</strong>: 通常の線ツールとは異なり、カリグラフィツールは指定した幅を持つパスを描くことができます</li>



<li><strong>筆致の再現</strong>: ドラッグに沿って、つけペンやブラシで描いたような自然な線を作成できます。 <strong>華麗な表現</strong>: このツールを使いこなすことで、華麗な筆致を表現することが可能です</li>
</ul>



<p>一方で、正確な線が欲しい場合は<strong>ベジエツール</strong>がオススメです。</p>



<p></p>



<h2 class="wp-block-heading"><span id="toc5">カリグラフィー使用方法</span></h2>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="683" src="https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-1024x683.jpg" alt="パソコン" class="wp-image-4991" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-1024x683.jpg 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-300x200.jpg 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-768x512.jpg 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-1536x1024.jpg 1536w, https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-2048x1365.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>カリグラフィツールを使用するには、Inkscapeのツールボックスからカリグラフィツールのアイコンを選択します。</p>



<p>その後、キャンバス上でドラッグすることで、つけペンやブラシで描いたような線を作成できます。 </p>



<p>このツールは手書き風の文字やデザインを作成する際に特に有用です。</p>



<p>線の太さや形状を調整することで、様々な筆記具や書体の特徴を再現することができます。</p>



<p> Inkscapeのカリグラフィツールは、ベクターグラフィックスの特性を活かしながら、手書きの温かみや個性を表現できる強力な機能の一つと言えるでしょう。</p>



<p></p>



<p></p>



<h3 class="wp-block-heading"><span id="toc6">設定項目</span></h3>



<p></p>



<p>Inkscapeのカリグラフィツールには、以下の主要なパラメータがあります：</p>



<ol class="wp-block-list is-style-border-radius-s-solid has-border">
<li>幅(width)：1〜100pxの範囲で線の太さを設定します。px以外の単位も設定できます。</li>



<li>幅変化(thinning)：-100〜100の範囲で、マウスの移動速度に応じた線幅の変化を指定します。0だと速度変化なし。0以上だと早く動くときに細くなります。マイナスだと太くなります。</li>



<li>質量(Mass)：0〜100の範囲でペンのドラッグへの反応の遅れを設定します。慣性のイメージです。</li>



<li>角度(angle)：-90°〜90°の範囲でペンの角度を指定します。</li>



<li>固定度(fixation)：0〜100の範囲で設定。0でペン運びの方向に合わせて傾き、100で角度を固定します。</li>



<li>キャップ(cap)：0.0〜5.0の範囲で線の両端の盛り上がりを指定します。</li>



<li>震え(tremor)：0〜100の範囲で横方向の震えを設定します。</li>



<li>うねり(wiggle)：0〜100の範囲でペンの波状やうねり幅を指定します。</li>
</ol>



<p></p>



<p>実際の数値は個人の好みや描きたい効果によって異なるため、これらのパラメータを様々に組み合わせて実験してみることをお勧めします。</p>



<p></p>



<h3 class="wp-block-heading"><span id="toc7">設定一例</span></h3>



<p></p>



<p>設定の一覧を表にしてみました。</p>



<p>あくまで参考にお願いします。</p>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>名前</th><th>幅[px]</th><th>幅変化</th><th>質量</th><th>角度</th><th>固定度</th><th>キャップ</th><th>震え</th><th>うねり</th></tr></thead><tbody><tr><td>つけペン</td><td>50</td><td>10</td><td>2</td><td>30</td><td>90</td><td>0</td><td>0</td><td>0</td></tr><tr><td>マーカー</td><td>50</td><td>0</td><td>2</td><td>90</td><td>0</td><td>1.00</td><td>0</td><td>0</td></tr><tr><td>ブラシ</td><td>50</td><td>-40</td><td>2</td><td>45</td><td>16</td><td>0.10</td><td>0</td><td>25</td></tr><tr><td>うねり</td><td>50</td><td>-30</td><td>0</td><td>30</td><td>16</td><td>0.10</td><td>18</td><td>50</td></tr><tr><td>Splotch(斑点)</td><td>100</td><td>30</td><td>0</td><td>30</td><td>0</td><td>1.00</td><td>10</td><td>0</td></tr><tr><td>トレーシング</td><td>50</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td>ドリッピング？</td><td>100</td><td>100</td><td>2</td><td>30</td><td>0</td><td>0</td><td>70</td><td>80</td></tr><tr><td>神経細胞？</td><td>100</td><td>100</td><td>2</td><td>30</td><td>90</td><td>0</td><td>0</td><td>0</td></tr><tr><td>習字風</td><td>50</td><td>40</td><td>10</td><td>30</td><td>90</td><td>0.20</td><td>5</td><td>10</td></tr></tbody></table><figcaption class="wp-element-caption">パラメータの一覧表</figcaption></figure>



<p>パラメータは、随時調整してお使いください。</p>



<p>メモ：</p>



<p>　つけペンの設定で、固定度を100にすると Times のフォントに近くになります。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="576" height="330" src="https://read-nonbiri.com/wp-content/uploads/2025/02/caligraffi_koteido100.png" alt="つけペンをベースに固定度100にした例" class="wp-image-6288" srcset="https://read-nonbiri.com/wp-content/uploads/2025/02/caligraffi_koteido100.png 576w, https://read-nonbiri.com/wp-content/uploads/2025/02/caligraffi_koteido100-300x172.png 300w, https://read-nonbiri.com/wp-content/uploads/2025/02/caligraffi_koteido100-120x68.png 120w" sizes="(max-width: 576px) 100vw, 576px" /><figcaption class="wp-element-caption">つけペンをベースに固定度100にした例</figcaption></figure>



<p></p>



<p></p>



<h4 class="wp-block-heading"><span id="toc8">ドリッピング</span></h4>



<p>Inkscape のカリグラフィツール でドリッピング（滴り落ちる）効果を出すには、以下のパラメータ設定が効果的です(perplexityに聞いてみました)：</p>



<ol class="wp-block-list is-style-border-radius-s-solid has-border">
<li>幅：50-100の範囲で設定し、太めの線を作ります。</li>



<li>幅変化：100に近い値を設定し、動きが遅いほど線が太くなるようにします。</li>



<li>固定度：0-10の低い値に設定し、ペンの角度が自由に変化するようにします。</li>



<li>震え：50-80の高めの値に設定し、不規則な線を作ります。</li>



<li>うねり：70-100の高い値に設定し、大きな曲がりを作ります。</li>



<li>質量：80-100の高い値に設定し、慣性のある動きを再現します。</li>
</ol>



<p>これらのパラメータを組み合わせて調整することで、ドリッピングのような不規則で流動的な線を描くことができます。実際に描く際は、マウスやペンタブレットを使って、上から下へ向かってゆっくりと不規則な動きで描くと、より自然なドリッピング効果が得られます。</p>



<p>私の方で試してみました。</p>



<p>マウスの移動速度を変えてみることで線幅の変化を出すことができます。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="603" src="https://read-nonbiri.com/wp-content/uploads/2025/02/cariguri_ドリッピングに近い設定-1024x603.png" alt="ドリッピングみたいな設定。色分けしてみた" class="wp-image-6272" srcset="https://read-nonbiri.com/wp-content/uploads/2025/02/cariguri_ドリッピングに近い設定-1024x603.png 1024w, https://read-nonbiri.com/wp-content/uploads/2025/02/cariguri_ドリッピングに近い設定-300x177.png 300w, https://read-nonbiri.com/wp-content/uploads/2025/02/cariguri_ドリッピングに近い設定-768x452.png 768w, https://read-nonbiri.com/wp-content/uploads/2025/02/cariguri_ドリッピングに近い設定.png 1126w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">ドリッピング？みたいな設定</figcaption></figure>



<p></p>



<p>最近読んだ本にジャクソン・ポロックのことが書かれていたので、気になりました。</p>



<p>ジャクソン・ポロックの画風とは、また違うものな気がしますが、アートっぽくなって面白いですね。</p>



<p></p>



<h4 class="wp-block-heading"><span id="toc9">脳神経ニューロ？</span></h4>



<p>幅を100px, 幅変化を100にしただけでも、脳神経のニューロみたいな？ものを描くことが出来ます。</p>



<p>カーソルのスピードに緩急をつけることで細くなったり太くなったりして楽しいですよ。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="726" height="722" src="https://read-nonbiri.com/wp-content/uploads/2025/02/carigurafi_幅100px幅変化100.png" alt="幅変化100の設定" class="wp-image-6267" srcset="https://read-nonbiri.com/wp-content/uploads/2025/02/carigurafi_幅100px幅変化100.png 726w, https://read-nonbiri.com/wp-content/uploads/2025/02/carigurafi_幅100px幅変化100-300x298.png 300w, https://read-nonbiri.com/wp-content/uploads/2025/02/carigurafi_幅100px幅変化100-150x150.png 150w" sizes="(max-width: 726px) 100vw, 726px" /><figcaption class="wp-element-caption">幅変化100で適当に描いてみました</figcaption></figure>



<p></p>



<p></p>



<h4 class="wp-block-heading"><span id="toc10">習字風</span></h4>



<p>習字風な感じでやってみました。パラメータは上記の通りです。</p>



<p>Inkscape である程度、描画できることが面白いですね。</p>



<p></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="560" height="496" src="https://read-nonbiri.com/wp-content/uploads/2025/02/karigurafi_shuuji.png" alt="習字風" class="wp-image-6274" srcset="https://read-nonbiri.com/wp-content/uploads/2025/02/karigurafi_shuuji.png 560w, https://read-nonbiri.com/wp-content/uploads/2025/02/karigurafi_shuuji-300x266.png 300w" sizes="(max-width: 560px) 100vw, 560px" /><figcaption class="wp-element-caption">習字風になりましたかね</figcaption></figure>



<p></p>



<p></p>



<h2 class="wp-block-heading"><span id="toc11">まとめ</span></h2>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="615" src="https://read-nonbiri.com/wp-content/uploads/2023/10/laptop-1205256_1280-1024x615.jpg" alt="パソコン" class="wp-image-4900" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/laptop-1205256_1280-1024x615.jpg 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/laptop-1205256_1280-300x180.jpg 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/laptop-1205256_1280-768x461.jpg 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/laptop-1205256_1280.jpg 1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>今回は、カリグラフィーについて記事を作ってみました。</p>



<p>独自の文字を作ったり、アートの活用に有効な方法です。</p>



<p>また、ペンタブレットが無くてもマウスで作れてしまうことも便利ですよ。</p>



<p>ご興味があれば試してみることをおすすめします。</p>



<p></p>



<h3 class="wp-block-heading"><span id="toc12">参考サイト</span></h3>



<p>Inkscapeのカリグラフィーについて参考にしたサイトを記載しておきます。</p>



<p>大変ためになります。ありがとうございます。</p>



<p></p>



<p></p>





<a rel="noopener" target="_blank" href="https://inkscape.paix.jp/manual/tools/calligraphic-tool" title="カリグラフィツール" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://read-nonbiri.com/wp-content/uploads/cocoon-resources/blog-card-cache/8a6bf6885073ddfb449e1cd407662f71.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">カリグラフィツール</div><div class="blogcard-snippet external-blogcard-snippet">カリグラフィを描くには、ツールバーから カリグラフィツールを選択するか、ショートカットキーのCtrl+F6（またはC）で...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://inkscape.paix.jp/manual/tools/calligraphic-tool" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">inkscape.paix.jp</div></div></div></div></a>






<a rel="noopener" target="_blank" href="https://inkscape.org/ja/doc/tutorials/calligraphy/tutorial-calligraphy.html" title="Inkscape tutorial: &#12459;&#12522;&#12464;&#12521;&#12501;&#12451; | Inkscape" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://media.inkscape.org/static/images/inkscape-og-image.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Inkscape tutorial: &#12459;&#12522;&#12464;&#12521;&#12501;&#12451; | Inkscape</div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://inkscape.org/ja/doc/tutorials/calligraphy/tutorial-calligraphy.html" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">inkscape.org</div></div></div></div></a>






<a rel="noopener" target="_blank" href="https://ja.wikibooks.org/wiki/Inkscape#" title="Wikimedia Error" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Fja.wikibooks.org%2Fwiki%2FInkscape%23?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Wikimedia Error</div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://ja.wikibooks.org/wiki/Inkscape#" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">ja.wikibooks.org</div></div></div></div></a>




<p></p>



<p></p>



<h3 class="wp-block-heading"><span id="toc13">関連記事</span></h3>



<p></p>



<p>関連記事としてInkscapeで線を書く方法について書いてみた記事もあります。</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-n wp-block-embed-n"><div class="wp-block-embed__wrapper">

<a href="https://read-nonbiri.com/inkscape-simple-method1" title="ドローソフトInkscape使い方(1) シンプルに線を引く方法" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="160" height="90" src="https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法.png 1366w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドローソフトInkscape使い方(1) シンプルに線を引く方法</div><div class="blogcard-snippet internal-blogcard-snippet">ドローソフト Inkscape 使い方(1) フリーのドローソフトInkscapeで線・図形を描く基本的な使い方を解説。ペンツールの操作、グリッド・スナップ設定、PNG出力まで、初心者でも地図やシステム図が手軽に作れます。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://read-nonbiri.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">read-nonbiri.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2026.04.07</div></div></div></div></a>
</div></figure>



<p></p>



<p>ベジェ曲線を書く方法についても記載いたしました。</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-n wp-block-embed-n"><div class="wp-block-embed__wrapper">

<a href="https://read-nonbiri.com/inkscape-2-draw-a-bezier-curve" title="ドローソフトInkscapeの使い方(2) ベジェ曲線を描く" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="160" height="90" src="https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1.png 1366w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドローソフトInkscapeの使い方(2) ベジェ曲線を描く</div><div class="blogcard-snippet internal-blogcard-snippet">ドローソフトInkscapeの使い方(2) ベジェ曲線を描く方法についてです。曲線を書くときに便利な機能です。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://read-nonbiri.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">read-nonbiri.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2024.05.21</div></div></div></div></a>
</div></figure>



<p></p>



<figure class="wp-block-embed is-type-wp-embed is-provider-n wp-block-embed-n"><div class="wp-block-embed__wrapper">

<a href="https://read-nonbiri.com/inkscape-3-image-clip/" title="ドローソフトInkscape使い方(3)画像の切り抜きトリミング" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="160" height="90" src="https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング.png 1366w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドローソフトInkscape使い方(3)画像の切り抜きトリミング</div><div class="blogcard-snippet internal-blogcard-snippet">ドローソフトInkscape使い方 インポートした画像を切り抜く(トリミングする)方法について説明します。クリップとマスクを使用して画像の切り抜きを行います。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://read-nonbiri.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">read-nonbiri.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2024.05.26</div></div></div></div></a>
</div></figure>



<p></p>



<p></p>



<h3 class="wp-block-heading"><span id="toc14">あとがき</span></h3>



<p>本ブログの Inkscape の記事が予想以上に見ていただいているようなので、関連記事を作ってみました。</p>



<p>Windows標準のペイントのようなソフトでもいいんですが、面白い線、独自の文字を作れるのが魅力的なのでご紹介させていただきました。</p>



<p>何かしらの参考になれば幸いです。</p>



<p></p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-1024x576.png" alt="ありがとうございました" class="wp-image-5157" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1.png 1366w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>読んでいただきまして、ありがとうございました！</p>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://read-nonbiri.com/inkscape_calligraphy/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>ドローソフトInkscape使い方(4) 中抜き曜日アイコン作成</title>
		<link>https://read-nonbiri.com/week-icons-in-inkscape/</link>
					<comments>https://read-nonbiri.com/week-icons-in-inkscape/#respond</comments>
		
		<dc:creator><![CDATA[Nくま]]></dc:creator>
		<pubDate>Mon, 20 May 2024 21:45:24 +0000</pubDate>
				<category><![CDATA[パソコン]]></category>
		<category><![CDATA[商品紹介]]></category>
		<category><![CDATA[趣味]]></category>
		<category><![CDATA[inkscape]]></category>
		<category><![CDATA[アイコン]]></category>
		<category><![CDATA[イラスト]]></category>
		<category><![CDATA[ソフト]]></category>
		<category><![CDATA[ドローソフト]]></category>
		<category><![CDATA[フリー]]></category>
		<category><![CDATA[ベクター]]></category>
		<category><![CDATA[中抜き]]></category>
		<category><![CDATA[遊び]]></category>
		<guid isPermaLink="false">https://read-nonbiri.com/?p=5537</guid>

					<description><![CDATA[ポスターやイベントチラシを作成してたりしますでしょうか。 今回は、そんなときに活躍できる中抜きの曜日アイコン（金、土、日など）の作り方についてまとめてみました。 フリーのドローソフトInkscapeで作成可能で、この記事 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p></p>



<p>ポスターやイベントチラシを作成してたりしますでしょうか。</p>



<p>今回は、そんなときに活躍できる<span class="bold-red">中抜きの曜日アイコン</span>（金、土、日など）の作り方についてまとめてみました。</p>



<p>フリーのドローソフトInkscapeで作成可能で、この記事ではその基本的な使い方について紹介します。</p>



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-check-circle block-box has-background has-border-color has-icon-color has-watery-yellow-background-color has-grey-border-color has-indigo-icon-color"><div class="iconlist-title">この記事を読んで分かること</div>
<ul class="wp-block-list">
<li>フリーのドローソフト Inkscape で中抜き曜日アイコン作成方法の基礎</li>
</ul>
</div>



<p>単なる文字ではなく、曜日を彩る方法として応用できますので<span class="marker-under-red"></span>、是非、参考にしてみてください。</p>



<p></p>



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-chevron-circle-right block-box has-border-color has-grey-border-color"><div class="iconlist-title">Inkscapeで中抜き曜日アイコン作成の流れ</div>
<ol class="wp-block-list">
<li>円を描き、その前面に文字を配置する</li>



<li>中抜きを行う
<ul class="wp-block-list">
<li>方法1: パスー＞差分</li>



<li>方法2: シェイプビルダー</li>
</ul>
</li>



<li>画像の保存（エクスポート）</li>
</ol>
</div>



<p></p>



<p></p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-4" checked><label class="toc-title" for="toc-checkbox-4">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">はじめに</a></li><li><a href="#toc2" tabindex="0">ドローソフト Inkscape について</a></li><li><a href="#toc3" tabindex="0">曜日アイコン作成例</a><ol><li><a href="#toc4" tabindex="0">手順1: 円と文字を作成</a></li><li><a href="#toc5" tabindex="0">手順2:文字の部分を中抜き</a><ol><li><a href="#toc6" tabindex="0">方法1: パスの差分を使った方法</a></li><li><a href="#toc7" tabindex="0">方法2: シェイプビルダーを使った方法</a><ol><li><a href="#toc8" tabindex="0">おまけ：中抜き形状</a></li></ol></li></ol></li><li><a href="#toc9" tabindex="0">手順3: 画像のエクスポート</a></li></ol></li><li><a href="#toc10" tabindex="0">まとめ</a><ol><li><a href="#toc11" tabindex="0">関連記事</a></li><li><a href="#toc12" tabindex="0">あとがき</a></li></ol></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">はじめに</span></h2>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="683" src="https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-1024x683.jpg" alt="パソコン" class="wp-image-4991" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-1024x683.jpg 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-300x200.jpg 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-768x512.jpg 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-1536x1024.jpg 1536w, https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-2048x1365.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



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



<p>今回は、<a rel="noopener" target="_blank" href="https://inkscape.org/">Inkscape</a> の説明第4弾！ということで、曜日アイコン使用に使える文字の形の中抜きについて書いてみます。</p>



<p>曜日を入れるときにオシャレな感じがしていいですよ。</p>



<p></p>



<h2 class="wp-block-heading"><span id="toc2">ドローソフト Inkscape について</span></h2>



<figure class="wp-block-image size-full"><a href="https://read-nonbiri.com/wp-content/uploads/2023/08/image.png"><img loading="lazy" decoding="async" width="794" height="738" src="https://read-nonbiri.com/wp-content/uploads/2023/08/image.png" alt="inkscape" class="wp-image-4330" srcset="https://read-nonbiri.com/wp-content/uploads/2023/08/image.png 794w, https://read-nonbiri.com/wp-content/uploads/2023/08/image-300x279.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/08/image-768x714.png 768w" sizes="(max-width: 794px) 100vw, 794px" /></a><figcaption class="wp-element-caption">inkscape</figcaption></figure>



<p>かんたんにドローソフト Inkscape についての特徴を書いてみます。</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box has-border-color has-grey-border-color"><div class="iconlist-title">ドローソフト Inkscape の特徴</div>
<ul class="wp-block-list">
<li>フリーのドローソフト
<ul class="wp-block-list">
<li>ベクター形式での保存</li>



<li>ラスター形式(ビットマップ形式)では無い</li>
</ul>
</li>



<li>Adobe Illustrator みたいな機能</li>



<li>マルチプラットフォーム(自分はWindowsとLinuxで動作することを確認)</li>



<li>日本語に対応している</li>
</ul>
</div>



<p></p>



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



<ul style="background-color:#c8e8fe" class="has-background wp-block-list">
<li>Windows10</li>



<li>Dell ノートパソコン</li>



<li>Inkscape 1.3</li>
</ul>



<p></p>



<p></p>



<p><a rel="noopener" target="_blank" href="https://inkscape.org/ja/" data-type="link" data-id="https://inkscape.org/ja/">Inkscape</a> で 取り扱いしているフォーマットの一例です</p>



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box has-border-color has-cyan-bluish-gray-border-color"><div class="iconlist-title">対応している主な画像フォーマット</div>
<ul class="is-style-icon-list-info has-list-style wp-block-list">
<li>インポート
<ul class="wp-block-list">
<li>SVG, AI, EPS, PDF, PS, PNG</li>
</ul>
</li>



<li>保存、エクスポート
<ul class="wp-block-list">
<li>SVG, PDF, EPS, PNG, JPG</li>
</ul>
</li>
</ul>
</div>



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



<p></p>



<h2 class="wp-block-heading"><span id="toc3">曜日アイコン作成例</span></h2>



<p></p>



<figure class="wp-block-image size-full"><a href="https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape.png"><img loading="lazy" decoding="async" width="1366" height="768" src="https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape.png" alt="曜日アイコン作成例Inkscape" class="wp-image-5563" srcset="https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape.png 1366w, https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape-320x180.png 320w" sizes="(max-width: 1366px) 100vw, 1366px" /></a><figcaption class="wp-element-caption">曜日アイコン作成例です</figcaption></figure>



<p></p>



<p>以下に作例を載せます。</p>



<p>Inkscape で作成しpngファイルを Canva にアップロードして使用しております。</p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2024/05/曜日アイコン作成例Inkscape1.png"><img loading="lazy" decoding="async" width="1024" height="576" src="https://read-nonbiri.com/wp-content/uploads/2024/05/曜日アイコン作成例Inkscape1-1024x576.png" alt="曜日アイコン作例inkscape" class="wp-image-5840" srcset="https://read-nonbiri.com/wp-content/uploads/2024/05/曜日アイコン作成例Inkscape1-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/05/曜日アイコン作成例Inkscape1-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/05/曜日アイコン作成例Inkscape1-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/05/曜日アイコン作成例Inkscape1-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2024/05/曜日アイコン作成例Inkscape1-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2024/05/曜日アイコン作成例Inkscape1-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2024/05/曜日アイコン作成例Inkscape1.png 1366w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">作例です。わかりにくいですが、文字の部分は背景色になっています。</figcaption></figure>



<p></p>



<p>以下に作成手順について記載いたします。</p>



<h3 class="wp-block-heading"><span id="toc4">手順1: 円と文字を作成</span></h3>



<p>丸を作り、その上に文字を配置します。</p>



<p>丸は、円/弧ツールから作成可能です。　また文字についてはテキストツールで追加します。</p>



<figure class="wp-block-image size-full"><a href="https://read-nonbiri.com/wp-content/uploads/2024/05/phase01.png"><img loading="lazy" decoding="async" width="957" height="872" src="https://read-nonbiri.com/wp-content/uploads/2024/05/phase01.png" alt="円と文字" class="wp-image-5832" srcset="https://read-nonbiri.com/wp-content/uploads/2024/05/phase01.png 957w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase01-300x273.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase01-768x700.png 768w" sizes="(max-width: 957px) 100vw, 957px" /></a><figcaption class="wp-element-caption">円と文字を書いたところ</figcaption></figure>



<p></p>



<p></p>



<p><span class="marker-red">オブジェクトー＞整列</span>　を使えば、中心を合わせやすいです。</p>



<p></p>



<p></p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2024/05/phase02.png"><img loading="lazy" decoding="async" width="1024" height="526" src="https://read-nonbiri.com/wp-content/uploads/2024/05/phase02-1024x526.png" alt="オブジェクトの上に文字を配置" class="wp-image-5833" srcset="https://read-nonbiri.com/wp-content/uploads/2024/05/phase02-1024x526.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase02-300x154.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase02-768x394.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase02-1536x789.png 1536w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase02.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">円（オブジェクト）の全面に文字を配置したところ。中心を合わせています</figcaption></figure>



<p></p>



<p></p>



<h3 class="wp-block-heading"><span id="toc5">手順2:文字の部分を中抜き</span></h3>



<h4 class="wp-block-heading"><span id="toc6">方法1: パスの差分を使った方法</span></h4>



<p></p>



<p>円と文字の両方を選択した状態で</p>



<p>メニューの「パス」ー＞<span class="marker-red">「差分」</span></p>



<p>を押します。</p>



<p></p>



<figure class="wp-block-image size-full is-resized"><a href="https://read-nonbiri.com/wp-content/uploads/2024/05/phase04.png"><img loading="lazy" decoding="async" width="959" height="876" src="https://read-nonbiri.com/wp-content/uploads/2024/05/phase04.png" alt="差分ボタン" class="wp-image-5830" style="width:840px;height:auto" srcset="https://read-nonbiri.com/wp-content/uploads/2024/05/phase04.png 959w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase04-300x274.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase04-768x702.png 768w" sizes="(max-width: 959px) 100vw, 959px" /></a><figcaption class="wp-element-caption">メニューから「パス」ー＞「差分」を選択します</figcaption></figure>



<p></p>



<p>こうするところで、重なり部分を削除することが出来ます。</p>



<p></p>



<p></p>



<figure class="wp-block-image size-full"><a href="https://read-nonbiri.com/wp-content/uploads/2024/05/phase05.png"><img loading="lazy" decoding="async" width="961" height="882" src="https://read-nonbiri.com/wp-content/uploads/2024/05/phase05.png" alt="差分で中抜きした結果" class="wp-image-5831" srcset="https://read-nonbiri.com/wp-content/uploads/2024/05/phase05.png 961w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase05-300x275.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase05-768x705.png 768w" sizes="(max-width: 961px) 100vw, 961px" /></a><figcaption class="wp-element-caption">中抜きした結果</figcaption></figure>



<p></p>



<h4 class="wp-block-heading"><span id="toc7">方法2: シェイプビルダーを使った方法</span></h4>



<p>似たような方法としまして、<span class="marker-red">「シェイプビルダー」</span>を使う方法もあります。</p>



<p>「シェイプビルダー」は、重なった領域を作ったり、削除したりするのに便利です（論理演算ツール）。</p>



<p>左のアイコンから「シェイプビルダーツール」を選択してください。</p>



<p></p>



<figure class="wp-block-image size-full"><a href="https://read-nonbiri.com/wp-content/uploads/2024/05/phase14.png"><img loading="lazy" decoding="async" width="959" height="875" src="https://read-nonbiri.com/wp-content/uploads/2024/05/phase14.png" alt="シェイプビルダーツールを押します" class="wp-image-5827" srcset="https://read-nonbiri.com/wp-content/uploads/2024/05/phase14.png 959w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase14-300x274.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase14-768x701.png 768w" sizes="(max-width: 959px) 100vw, 959px" /></a><figcaption class="wp-element-caption">シェイプビルダーを押しましょう</figcaption></figure>



<p>シェイプビルダーツールにすると、以下のような画面になります。あとは、左上の「＋」「ー」のどちらかにして、各領域をクリックすれば有効化したり無効化することができます。</p>



<p>終わったら完成ボタン「✓」を押しましょう。</p>



<figure class="wp-block-image size-full"><a href="https://read-nonbiri.com/wp-content/uploads/2024/05/phase14-2.png"><img loading="lazy" decoding="async" width="961" height="878" src="https://read-nonbiri.com/wp-content/uploads/2024/05/phase14-2.png" alt="シェイプビルダーにした画面" class="wp-image-5836" srcset="https://read-nonbiri.com/wp-content/uploads/2024/05/phase14-2.png 961w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase14-2-300x274.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase14-2-768x702.png 768w" sizes="(max-width: 961px) 100vw, 961px" /></a><figcaption class="wp-element-caption">シェイブビルダーにした画面。各領域を選択できます</figcaption></figure>



<p></p>



<figure class="wp-block-image size-full"><a href="https://read-nonbiri.com/wp-content/uploads/2024/05/phase15.png"><img loading="lazy" decoding="async" width="960" height="874" src="https://read-nonbiri.com/wp-content/uploads/2024/05/phase15.png" alt="シェイプビルダーツールの使用例。土曜" class="wp-image-5829" srcset="https://read-nonbiri.com/wp-content/uploads/2024/05/phase15.png 960w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase15-300x273.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase15-768x699.png 768w" sizes="(max-width: 960px) 100vw, 960px" /></a><figcaption class="wp-element-caption">＋やーにして、領域をクリックすることで任意のオブジェクトを作成できます</figcaption></figure>



<p>ここでは、文字の「土」をーにしてクリック。それ以外の円の中身を「＋」にしてクリックしました。</p>



<p>これにより、同様の結果を得ることが出来ました。</p>



<p>最後にPNGファイルでエクスポートすれば完了です。</p>



<p></p>



<h5 class="wp-block-heading"><span id="toc8">おまけ：中抜き形状</span></h5>



<p>上記のように、パスの差分や、シェイプビルダーを使用すれば中抜き形状の作成ができます。</p>



<p>ちなみにシェイプビルダーは新しい機能のようですね。私が Inkscapeを始めたときには、このような機能はありませんでした。</p>



<p>重なり合った領域を削ったり有効化したりするのに使えるようです。</p>



<p></p>



<figure class="wp-block-image size-full"><a href="https://read-nonbiri.com/wp-content/uploads/2024/05/phase21.png"><img loading="lazy" decoding="async" width="793" height="591" src="https://read-nonbiri.com/wp-content/uploads/2024/05/phase21.png" alt="中抜き形状の作成例" class="wp-image-5861" srcset="https://read-nonbiri.com/wp-content/uploads/2024/05/phase21.png 793w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase21-300x224.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase21-768x572.png 768w" sizes="(max-width: 793px) 100vw, 793px" /></a><figcaption class="wp-element-caption">中抜き形状の作成例</figcaption></figure>



<p></p>



<p>同じ手順で、このような単純な中抜けの形状をいくつか作れました。</p>



<p></p>



<p>そういえば、起動時にシェイプビルダー用のテンプレートを選べるものがあるので、それで試してみるのも良さそうです。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="698" height="704" src="https://read-nonbiri.com/wp-content/uploads/2024/05/phase22.png" alt="シェイプビルダーの例" class="wp-image-5866" srcset="https://read-nonbiri.com/wp-content/uploads/2024/05/phase22.png 698w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase22-297x300.png 297w, https://read-nonbiri.com/wp-content/uploads/2024/05/phase22-150x150.png 150w" sizes="(max-width: 698px) 100vw, 698px" /><figcaption class="wp-element-caption">起動時のシェイプビルダー選択時画面</figcaption></figure>



<p></p>



<p></p>



<h3 class="wp-block-heading"><span id="toc9">手順3: 画像のエクスポート</span></h3>



<p>背景色を透明にしつつ、pngファイル をエキスポートすればOKです。</p>



<p></p>



<p></p>



<p></p>



<h2 class="wp-block-heading"><span id="toc10">まとめ</span></h2>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="663" src="https://read-nonbiri.com/wp-content/uploads/2023/10/bram-naus-n8Qb1ZAkK88-unsplash-1024x663.jpg" alt="パソコン" class="wp-image-4992" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/bram-naus-n8Qb1ZAkK88-unsplash-1024x663.jpg 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/bram-naus-n8Qb1ZAkK88-unsplash-300x194.jpg 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/bram-naus-n8Qb1ZAkK88-unsplash-768x497.jpg 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/bram-naus-n8Qb1ZAkK88-unsplash-1536x995.jpg 1536w, https://read-nonbiri.com/wp-content/uploads/2023/10/bram-naus-n8Qb1ZAkK88-unsplash-2048x1327.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p></p>



<p>今回はかなりニッチですが、自分の経験を元に中抜きの曜日アイコンについて記事を書いてみました。</p>



<p>検索してもよくわからず、無料素材もあるのですが、Inkscapeで簡単に作れたのでその作例です。</p>



<p>なにかの参考になれば幸いです。</p>



<p></p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-1024x576.png" alt="ありがとうございました" class="wp-image-5157" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1.png 1366w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p></p>



<p></p>



<h3 class="wp-block-heading"><span id="toc11">関連記事</span></h3>



<figure class="wp-block-embed is-type-wp-embed is-provider-n wp-block-embed-n"><div class="wp-block-embed__wrapper">

<a href="https://read-nonbiri.com/inkscape-simple-method1" title="ドローソフトInkscape使い方(1) シンプルに線を引く方法" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="160" height="90" src="https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法.png 1366w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドローソフトInkscape使い方(1) シンプルに線を引く方法</div><div class="blogcard-snippet internal-blogcard-snippet">ドローソフト Inkscape 使い方(1) フリーのドローソフトInkscapeで線・図形を描く基本的な使い方を解説。ペンツールの操作、グリッド・スナップ設定、PNG出力まで、初心者でも地図やシステム図が手軽に作れます。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://read-nonbiri.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">read-nonbiri.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2026.04.07</div></div></div></div></a>
</div></figure>



<p></p>



<p></p>



<figure class="wp-block-embed is-type-wp-embed is-provider-n wp-block-embed-n"><div class="wp-block-embed__wrapper">

<a href="https://read-nonbiri.com/inkscape-2-draw-a-bezier-curve" title="ドローソフトInkscapeの使い方(2) ベジェ曲線を描く" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="160" height="90" src="https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1.png 1366w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドローソフトInkscapeの使い方(2) ベジェ曲線を描く</div><div class="blogcard-snippet internal-blogcard-snippet">ドローソフトInkscapeの使い方(2) ベジェ曲線を描く方法についてです。曲線を書くときに便利な機能です。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://read-nonbiri.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">read-nonbiri.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2024.05.21</div></div></div></div></a>
</div></figure>



<p></p>



<p></p>



<figure class="wp-block-embed is-type-wp-embed is-provider-n wp-block-embed-n"><div class="wp-block-embed__wrapper">

<a href="https://read-nonbiri.com/inkscape-3-image-clip" title="ドローソフトInkscape使い方(3)画像の切り抜きトリミング" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="160" height="90" src="https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング.png 1366w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドローソフトInkscape使い方(3)画像の切り抜きトリミング</div><div class="blogcard-snippet internal-blogcard-snippet">ドローソフトInkscape使い方 インポートした画像を切り抜く(トリミングする)方法について説明します。クリップとマスクを使用して画像の切り抜きを行います。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://read-nonbiri.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">read-nonbiri.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2024.05.26</div></div></div></div></a>
</div></figure>



<p></p>



<h3 class="wp-block-heading"><span id="toc12">あとがき</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="683" src="https://read-nonbiri.com/wp-content/uploads/2024/05/priscilla-du-preez-SSh9O_-sTzg-unsplash-1024x683.jpg" alt="読書メモ" class="wp-image-5790" srcset="https://read-nonbiri.com/wp-content/uploads/2024/05/priscilla-du-preez-SSh9O_-sTzg-unsplash-1024x683.jpg 1024w, https://read-nonbiri.com/wp-content/uploads/2024/05/priscilla-du-preez-SSh9O_-sTzg-unsplash-300x200.jpg 300w, https://read-nonbiri.com/wp-content/uploads/2024/05/priscilla-du-preez-SSh9O_-sTzg-unsplash-768x512.jpg 768w, https://read-nonbiri.com/wp-content/uploads/2024/05/priscilla-du-preez-SSh9O_-sTzg-unsplash-1536x1024.jpg 1536w, https://read-nonbiri.com/wp-content/uploads/2024/05/priscilla-du-preez-SSh9O_-sTzg-unsplash-2048x1365.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>今回は、フリーのドローソフト Inkscape を使った曜日アイコン作成について記事を書いてみました。</p>



<p>これはですね、Canva でポスターやチラシを作ろうとしたときに 土曜日か日曜日のアイコンというか、青い丸と赤い丸で作られたアイコンがあるんですけど、よく見かけるので自分でも作ってみようかなと思ったんですね。 </p>



<p>Canva で作ろうと思ったら簡単に作るのが難しそうだったので、Inkscape ならどうかなと思ってやってみたら意外と簡単にできたので ここに書かせていただきました。</p>



<p>なかなかニッチな内容だと思うんですけど、何かの参考になれば嬉しいです。</p>



<p>というわけで、自分がいろいろやってみてわかったことなので 忘れないように備忘のためにも書いてみました。 </p>



<p>ここまで読んでいただきまして誠にありがとうございました。</p>



<p></p>



<p></p>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://read-nonbiri.com/week-icons-in-inkscape/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>ドローソフトInkscape使い方(3)画像の切り抜きトリミング</title>
		<link>https://read-nonbiri.com/inkscape-3-image-clip/</link>
					<comments>https://read-nonbiri.com/inkscape-3-image-clip/#respond</comments>
		
		<dc:creator><![CDATA[Nくま]]></dc:creator>
		<pubDate>Tue, 30 Apr 2024 07:33:09 +0000</pubDate>
				<category><![CDATA[パソコン]]></category>
		<category><![CDATA[商品紹介]]></category>
		<category><![CDATA[趣味]]></category>
		<category><![CDATA[inkscape]]></category>
		<category><![CDATA[イラスト]]></category>
		<category><![CDATA[ソフト]]></category>
		<category><![CDATA[ドローソフト]]></category>
		<category><![CDATA[フリー]]></category>
		<category><![CDATA[ベクター]]></category>
		<category><![CDATA[切り抜き]]></category>
		<category><![CDATA[画像]]></category>
		<guid isPermaLink="false">https://read-nonbiri.com/?p=5706</guid>

					<description><![CDATA[ドローソフト Inkscape 使用中に写真などの画像を埋め込みたいこととかありますよね。 そういうときに、画像の切り抜き（トリミング）もしたいことあるため、この記事ではその基本的な使い方について紹介します。 是非、参考 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p></p>



<p>ドローソフト <a rel="noopener" target="_blank" href="https://inkscape.org/">Inkscape</a> 使用中に写真などの画像を埋め込みたいこととかありますよね。</p>



<p>そういうときに、画像の切り抜き（トリミング）もしたいことあるため、この記事ではその基本的な使い方について紹介します。</p>



<p>是非、参考にしてみてください。</p>



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-check-circle block-box has-background has-border-color has-icon-color has-watery-yellow-background-color has-grey-border-color has-indigo-icon-color"><div class="iconlist-title">この記事を読んで分かること</div>
<ul class="wp-block-list">
<li>フリーのドローソフト <a rel="noopener" target="_blank" href="https://inkscape.org/">Inkscape</a> でインポート画像を切り抜く方法</li>
</ul>
</div>



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-chevron-circle-right block-box has-border-color has-grey-border-color"><div class="iconlist-title">Inkscapeで画像を切り抜き(トリミング)する流れ</div>
<ol class="wp-block-list">
<li>画像のインポート（取り込み）</li>



<li>切り抜き形状の作成</li>



<li>切り抜きの実行</li>
</ol>
</div>



<p></p>



<p></p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-6" checked><label class="toc-title" for="toc-checkbox-6">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">はじめに</a></li><li><a href="#toc2" tabindex="0">ドローソフト Inkscape について</a></li><li><a href="#toc3" tabindex="0">画像を切り抜く手順</a><ol><li><a href="#toc4" tabindex="0">手順1: 画像のインポート（取り込み）</a></li><li><a href="#toc5" tabindex="0">手順2: 切り抜く形の作成</a></li><li><a href="#toc6" tabindex="0">手順3: 切り抜き実行</a><ol><li><a href="#toc7" tabindex="0">方法1: クリップ</a></li><li><a href="#toc8" tabindex="0">方法2: マスク</a></li></ol></li><li><a href="#toc9" tabindex="0">補足:切り抜く境界のぼかし方</a></li></ol></li><li><a href="#toc10" tabindex="0">まとめ</a><ol><li><a href="#toc11" tabindex="0">関連サイト</a></li><li><a href="#toc12" tabindex="0">あとがき</a></li></ol></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">はじめに</span></h2>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="615" src="https://read-nonbiri.com/wp-content/uploads/2023/10/laptop-1205256_1280-1024x615.jpg" alt="パソコン" class="wp-image-4900" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/laptop-1205256_1280-1024x615.jpg 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/laptop-1205256_1280-300x180.jpg 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/laptop-1205256_1280-768x461.jpg 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/laptop-1205256_1280.jpg 1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



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



<p>今回は、<a rel="noopener" target="_blank" href="https://inkscape.org/">Inkscape</a> の説明第３弾！ということで、写真など画像の切り抜き（トリミング）について書いてみます。</p>



<p>写真を組み込むときに便利ですよ。</p>



<p></p>



<h2 class="wp-block-heading"><span id="toc2">ドローソフト Inkscape について</span></h2>



<p>かんたんにドローソフト Inkscape についての特徴を書いてみます。</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box has-border-color has-grey-border-color"><div class="iconlist-title">ドローソフト Inkscape の特徴</div>
<ul class="wp-block-list">
<li>フリーのドローソフト
<ul class="wp-block-list">
<li>ベクター形式での保存</li>



<li>ラスター形式(ビットマップ形式)では無い</li>
</ul>
</li>



<li>Adobe Illustrator みたいな機能</li>



<li>マルチプラットフォーム(自分はWindowsとLinuxで動作することを確認)</li>



<li>日本語に対応している</li>
</ul>
</div>



<p></p>



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



<ul style="background-color:#c8e8fe" class="has-background wp-block-list">
<li>Windows10</li>



<li>Dell ノートパソコン</li>



<li>Inkscape 1.3</li>
</ul>



<p></p>



<p></p>



<p><a rel="noopener" target="_blank" href="https://inkscape.org/ja/" data-type="link" data-id="https://inkscape.org/ja/">Inkscape</a> で 取り扱いしているフォーマットの一例です</p>



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box has-border-color has-cyan-bluish-gray-border-color"><div class="iconlist-title">対応している主な画像フォーマット</div>
<ul class="is-style-icon-list-info has-list-style wp-block-list">
<li>インポート
<ul class="wp-block-list">
<li>SVG, AI, EPS, PDF, PS, PNG</li>
</ul>
</li>



<li>保存、エクスポート
<ul class="wp-block-list">
<li>SVG, PDF, EPS, PNG, JPG</li>
</ul>
</li>
</ul>
</div>



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



<p></p>



<h2 class="wp-block-heading"><span id="toc3">画像を切り抜く手順</span></h2>



<h3 class="wp-block-heading"><span id="toc4">手順1: 画像のインポート（取り込み）</span></h3>



<p>最初に写真やイラストなど画像の取り込みを行います。</p>



<p>対応フォーマットは様々ありますが、ここでは写真に用いられる jpgファイルをインポートいたします。</p>



<p>メニューの「ファイル」-&gt;「インポート」をクリックします。</p>



<p></p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_01.png"><img loading="lazy" decoding="async" width="1024" height="644" src="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_01-1024x644.png" alt="画像ファイルのインポート" class="wp-image-5725" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_01-1024x644.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_01-300x189.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_01-768x483.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_01.png 1151w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">画像ファイルのインポート</figcaption></figure>



<p></p>



<p>そうするとどのファイルを選択するかウインドウが出てきますので、インポートしたい画像を選択します。</p>



<p>すると、次のような画面が出てきます。</p>



<p></p>



<figure class="wp-block-image size-full"><a href="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_02.png"><img loading="lazy" decoding="async" width="455" height="303" src="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_02.png" alt="インポートするときのオプション" class="wp-image-5731" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_02.png 455w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_02-300x200.png 300w" sizes="(max-width: 455px) 100vw, 455px" /></a><figcaption class="wp-element-caption">インポートするときのオプション</figcaption></figure>



<p>基本的には、そのままでOKです（インポート形式：埋め込み、画像DPI：ファイルから、レンダリングモード：なし）。</p>



<p></p>



<p>この記事での画像は、素材サイト Unsplash の<a rel="noopener" target="_blank" href="https://unsplash.com/ja/%E5%86%99%E7%9C%9F/%E6%98%BC%E9%96%93%E3%81%AE%E7%B7%91%E3%81%AE%E6%9C%A8%E3%80%85-iRpJ7sk7kTQ" data-type="link" data-id="https://unsplash.com/ja/%E5%86%99%E7%9C%9F/%E6%98%BC%E9%96%93%E3%81%AE%E7%B7%91%E3%81%AE%E6%9C%A8%E3%80%85-iRpJ7sk7kTQ">こちら</a>のものを使用させていただきました。</p>



<p>Teta様、ありがとうございます。</p>



<p></p>



<p>そして、画像をインポートしてみた結果がこちら</p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_bofore-03.png"><img loading="lazy" decoding="async" width="1024" height="897" src="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_bofore-03-1024x897.png" alt="写真をインポートしたときの画面" class="wp-image-5766" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_bofore-03-1024x897.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_bofore-03-300x263.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_bofore-03-768x673.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_bofore-03.png 1125w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">写真をインポートしたときの画面</figcaption></figure>



<p></p>



<p>画面に対して取り込んだ画像が大きすぎたので、縮小させます。</p>



<p>画像を選択してマウスでも小さく出来ますが、このようにメニューの<strong>「オブジェクト」-&gt;「変形」-&gt;「拡大縮小」</strong>のところから小さくすることが可能です。縦横の比率を維持して拡大縮小するときに便利です。</p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_03.png"><img loading="lazy" decoding="async" width="1024" height="526" src="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_03-1024x526.png" alt="オブジェクトの変形から拡大縮小が選べます。" class="wp-image-5727" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_03-1024x526.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_03-300x154.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_03-768x394.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_03-1536x789.png 1536w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_03.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">オブジェクトの変形から拡大縮小が選べます</figcaption></figure>



<p>ここでは、10%に縮小（1/10倍）させたところです。</p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_04.png"><img loading="lazy" decoding="async" width="1024" height="526" src="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_04-1024x526.png" alt="縮小した結果がこちら" class="wp-image-5728" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_04-1024x526.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_04-300x154.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_04-768x394.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_04-1536x789.png 1536w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_04.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">縮小した結果がこちら</figcaption></figure>



<p>適切な大きさにすることが出来ました。</p>



<h3 class="wp-block-heading"><span id="toc5">手順2: 切り抜く形の作成</span></h3>



<p>次に画像の上層（前面）に切り抜く形状（オブジェクト）作成を行います。</p>



<p>たとえば、四角形、円、星などです。もちろん、ベジェ曲線で囲んだ領域でもOKです。</p>



<p>画像を配置してから形状を作成すれば良いです。</p>



<p>（複数領域になる場合は、切り抜く形状のグループ化を行ってください）</p>



<p>今回は、このような図形を作ってみました。</p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_05s.png"><img loading="lazy" decoding="async" width="1024" height="823" src="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_05s-1024x823.png" alt="切り抜き形状の作例" class="wp-image-5736" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_05s-1024x823.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_05s-300x241.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_05s-768x617.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_05s.png 1227w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">切り抜き形状の作例（画像の前面に配置）</figcaption></figure>



<p></p>



<h3 class="wp-block-heading"><span id="toc6">手順3: 切り抜き実行</span></h3>



<h4 class="wp-block-heading"><span id="toc7">方法1: クリップ</span></h4>



<p></p>



<p>「画像」と「切り抜き形状」の両方を選択した状態で、クリップを実行します。</p>



<p>メニュー画面のこちらになります。</p>



<p><strong>「オブジェクト」-&gt;「クリップ」-&gt;「クリップを設定」</strong></p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_06s.png"><img loading="lazy" decoding="async" width="1024" height="824" src="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_06s-1024x824.png" alt="クリップの実行" class="wp-image-5738" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_06s-1024x824.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_06s-300x241.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_06s-768x618.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_06s.png 1226w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">クリップの実行</figcaption></figure>



<p></p>



<p>実行した結果がこちらになります。このように指定された領域が切り出されていることが分かります。</p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_clip_s.png"><img loading="lazy" decoding="async" width="1024" height="822" src="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_clip_s-1024x822.png" alt="クリップを実行した結果" class="wp-image-5740" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_clip_s-1024x822.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_clip_s-300x241.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_clip_s-768x617.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_clip_s.png 1228w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">実行した結果（クリップ）</figcaption></figure>



<p></p>



<h4 class="wp-block-heading"><span id="toc8">方法2: マスク</span></h4>



<p>クリップと似た機能にマスクがあります。</p>



<p>これも、先ほどのクリップ同様に画像と切り抜く形状の療法を選択した上で実行します。</p>



<p><strong>「オブジェクト」-&gt;「マスク」-&gt;「マスクを設定」</strong></p>



<p></p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_mask-s.png"><img loading="lazy" decoding="async" width="1024" height="927" src="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_mask-s-1024x927.png" alt="マスクを実行した結果" class="wp-image-5744" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_mask-s-1024x927.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_mask-s-300x272.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_mask-s-768x695.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_mask-s.png 1089w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">実行した結果（マスク）</figcaption></figure>



<p>こちらはクリップと違い、切り抜き形状の<span class="marker-red">濃淡が反映されます。</span></p>



<p>（わかりにくいのは申し訳ございません）</p>



<p></p>



<p><span class="marker-red">切り抜き形状のフィル色が黒いほど白っぽく画像が抜かれます。</span></p>



<p>これがクリップとの違いですね</p>



<p></p>



<p>左右に並べてみます。</p>



<div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-2-1-1 layout-box is-style-bottom-margin-2em has-bottom-margin">
<div class="wp-block-cocoon-blocks-column-left column-left">
<figure class="wp-block-image size-full"><a href="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_clip_s2.png"><img loading="lazy" decoding="async" width="889" height="527" src="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_clip_s2.png" alt="クリップ結果" class="wp-image-5746" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_clip_s2.png 889w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_clip_s2-300x178.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_clip_s2-768x455.png 768w" sizes="(max-width: 889px) 100vw, 889px" /></a><figcaption class="wp-element-caption">クリップ設定した結果</figcaption></figure>
</div>



<div class="wp-block-cocoon-blocks-column-right column-right">
<figure class="wp-block-image size-full"><a href="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_mask-s2.png"><img loading="lazy" decoding="async" width="892" height="525" src="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_mask-s2.png" alt="マスクした結果" class="wp-image-5747" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_mask-s2.png 892w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_mask-s2-300x177.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_07_mask-s2-768x452.png 768w" sizes="(max-width: 892px) 100vw, 892px" /></a><figcaption class="wp-element-caption">マスクした結果</figcaption></figure>
</div>
</div>



<p></p>



<p>必要に応じて使い分けてくださいね。</p>



<p></p>



<p>ちなみに、今回使用したグラディエーションは</p>



<p>左メニューバーにあります。</p>



<figure class="wp-block-image size-full is-resized"><a href="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_gradhi-14.png"><img loading="lazy" decoding="async" width="386" height="134" src="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_gradhi-14.png" alt="グラデーションツールの選択" class="wp-image-5763" style="width:487px;height:auto" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_gradhi-14.png 386w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_gradhi-14-300x104.png 300w" sizes="(max-width: 386px) 100vw, 386px" /></a><figcaption class="wp-element-caption">左メニューバーにあるグラデーションツール</figcaption></figure>



<p>こちらにありますので、これを使えばフィル色（オブジェクトの色）をグラディエーションできます。</p>



<p></p>



<h3 class="wp-block-heading"><span id="toc9">補足:切り抜く境界のぼかし方</span></h3>



<p></p>



<p>こちらは、おまけになります。</p>



<p><span class="bold-red">切り抜き形状をぼかすことで、切り抜き画像の境界もぼけます。</span></p>



<p>実例を示します。</p>



<p>切り抜き形状を選択し、メニューの「フィルター」から<span class="bold-red">「ぼかし」機能</span>を使います。</p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-3.png"><img loading="lazy" decoding="async" width="1024" height="897" src="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-3-1024x897.png" alt="フィルターからぼかしを選択" class="wp-image-5759" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-3-1024x897.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-3-300x263.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-3-768x673.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-3.png 1126w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">フィルタからぼかしを選択</figcaption></figure>



<p>これをすることで、切り抜き形状が、ぼんやりとした感じに変形させることができます。</p>



<p>ぼかしてみた結果がこちらです。</p>



<p></p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-2.png"><img loading="lazy" decoding="async" width="1024" height="896" src="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-2-1024x896.png" alt="切り抜き形状をぼかしてみました" class="wp-image-5760" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-2-1024x896.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-2-300x262.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-2-768x672.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-2.png 1127w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">切り抜き形状をぼかしてみました</figcaption></figure>



<p></p>



<p>この状態でマスクを設定すると、次のような結果になりました。</p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi.png"><img loading="lazy" decoding="async" width="1024" height="828" src="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-1024x828.png" alt="境界をぼかして切り抜き結果" class="wp-image-5761" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-1024x828.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-300x243.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi-768x621.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/04/ink_image_10_bokashi.png 1120w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">境界をぼかした感じの切り抜き（トリミング）結果</figcaption></figure>



<p></p>



<p>切り抜いた画像の境界がボケました！</p>



<p>ちょっと幻想的な感じになりましたね。</p>



<p></p>



<h2 class="wp-block-heading"><span id="toc10">まとめ</span></h2>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="663" src="https://read-nonbiri.com/wp-content/uploads/2023/10/bram-naus-n8Qb1ZAkK88-unsplash-1024x663.jpg" alt="パソコン" class="wp-image-4992" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/bram-naus-n8Qb1ZAkK88-unsplash-1024x663.jpg 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/bram-naus-n8Qb1ZAkK88-unsplash-300x194.jpg 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/bram-naus-n8Qb1ZAkK88-unsplash-768x497.jpg 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/bram-naus-n8Qb1ZAkK88-unsplash-1536x995.jpg 1536w, https://read-nonbiri.com/wp-content/uploads/2023/10/bram-naus-n8Qb1ZAkK88-unsplash-2048x1327.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>今回は、Inkscapeでインポートした画像を切り抜く（トリミング）する方法についてかんたんに説明いたしました。</p>



<p>整理すると、次のような流れです。</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-chevron-circle-right block-box has-background has-border-color has-watery-red-background-color has-grey-border-color"><div class="iconlist-title">Inkscapeで画像を切り抜く(トリミング)する流れ</div>
<ul class="wp-block-list">
<li>画像のインポート</li>



<li>切り抜き形状の作成</li>



<li>切り抜きの実行</li>
</ul>
</div>



<p></p>



<p>切り抜きについては、以下の２種類を用いました。</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box has-background has-border-color has-watery-green-background-color has-grey-border-color"><div class="iconlist-title"></div>
<ul class="wp-block-list">
<li>クリップ</li>



<li>マスク</li>
</ul>
</div>



<p>一連の流れについて、私のパソコンの操作画面を載せました。参考になれば幸いです。</p>



<p></p>



<p></p>



<p></p>



<p>ここまで読んでいただきましてありがとうございました！</p>



<p></p>



<p></p>



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



<h3 class="wp-block-heading"><span id="toc11">関連サイト</span></h3>





<a rel="noopener" target="_blank" href="https://inkscape.org/learn" title="Learn | Inkscape" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://media.inkscape.org/static/images/inkscape-og-image.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Learn | Inkscape</div><div class="blogcard-snippet external-blogcard-snippet">Tutorials, how-tos, FAQ, and other important resources to le...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://inkscape.org/learn" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">inkscape.org</div></div></div></div></a>




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



<p>英語ですけどためになる内容です。</p>



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



<p></p>



<p>また、線を書く方法について書いてみた記事です。</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-n wp-block-embed-n"><div class="wp-block-embed__wrapper">

<a href="https://read-nonbiri.com/inkscape-simple-method1" title="ドローソフトInkscape使い方(1) シンプルに線を引く方法" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="160" height="90" src="https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法.png 1366w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドローソフトInkscape使い方(1) シンプルに線を引く方法</div><div class="blogcard-snippet internal-blogcard-snippet">ドローソフト Inkscape 使い方(1) フリーのドローソフトInkscapeで線・図形を描く基本的な使い方を解説。ペンツールの操作、グリッド・スナップ設定、PNG出力まで、初心者でも地図やシステム図が手軽に作れます。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://read-nonbiri.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">read-nonbiri.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2026.04.07</div></div></div></div></a>
</div></figure>



<p></p>



<p>ベジェ曲線を書く方法についても記載いたしました。</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-n wp-block-embed-n"><div class="wp-block-embed__wrapper">

<a href="https://read-nonbiri.com/inkscape-2-draw-a-bezier-curve" title="ドローソフトInkscapeの使い方(2) ベジェ曲線を描く" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="160" height="90" src="https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1.png 1366w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドローソフトInkscapeの使い方(2) ベジェ曲線を描く</div><div class="blogcard-snippet internal-blogcard-snippet">ドローソフトInkscapeの使い方(2) ベジェ曲線を描く方法についてです。曲線を書くときに便利な機能です。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://read-nonbiri.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">read-nonbiri.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2024.05.21</div></div></div></div></a>
</div></figure>



<p></p>



<h3 class="wp-block-heading"><span id="toc12">あとがき</span></h3>



<p>本ブログの Inkscape の記事が予想以上に見ていただいているようなので、関連記事を作ってみました。</p>



<p>もともとは私が困ったことをきっかけに画像のトリミングについて備忘を兼ねて書いてみました。</p>



<p>写真を埋め込んで切り抜きしたいことがあったからなんですよね！</p>



<p>何かしらの参考になれば幸いです。</p>



<p></p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-1024x576.png" alt="ありがとうございました" class="wp-image-5157" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1.png 1366w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>読んでいただきまして、ありがとうございました！</p>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://read-nonbiri.com/inkscape-3-image-clip/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>ドローソフトInkscapeの使い方(2) ベジェ曲線を描く</title>
		<link>https://read-nonbiri.com/inkscape-2-draw-a-bezier-curve/</link>
					<comments>https://read-nonbiri.com/inkscape-2-draw-a-bezier-curve/#respond</comments>
		
		<dc:creator><![CDATA[Nくま]]></dc:creator>
		<pubDate>Sat, 04 Nov 2023 23:31:23 +0000</pubDate>
				<category><![CDATA[パソコン]]></category>
		<category><![CDATA[商品紹介]]></category>
		<category><![CDATA[趣味]]></category>
		<category><![CDATA[inkscape]]></category>
		<category><![CDATA[PC]]></category>
		<category><![CDATA[イラスト]]></category>
		<category><![CDATA[ソフト]]></category>
		<category><![CDATA[ドローソフト]]></category>
		<category><![CDATA[フリー]]></category>
		<category><![CDATA[ベクター]]></category>
		<category><![CDATA[ベジェ曲線]]></category>
		<category><![CDATA[曲線]]></category>
		<category><![CDATA[線画]]></category>
		<guid isPermaLink="false">https://read-nonbiri.com/?p=4381</guid>

					<description><![CDATA[皆様、ベジェ曲線についてご存知でしょうか？ 曲線を描くときに便利な機能です。 多くのドローソフトでおなじみのベジェ曲線はInkscapeでも利用可能で、この記事ではその基本的な使い方について紹介します。 ベジェ曲線はさま [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p></p>



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



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



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



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-check-circle block-box has-background has-border-color has-icon-color has-watery-yellow-background-color has-grey-border-color has-indigo-icon-color"><div class="iconlist-title">この記事を読んで分かること</div>
<ul class="wp-block-list">
<li>フリーのドローソフト Inkscape で<strong>ベジェ曲線</strong>を書いていく方法の基礎</li>
</ul>
</div>



<p><span class="marker-under-red">ベジェ曲線</span>はさまざまなシーンで非常に役立つツールであり、適切にハンドルを操作すれば多くのことが実現できます。</p>



<p>是非、参考にしてみてください。</p>



<p></p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-8" checked><label class="toc-title" for="toc-checkbox-8">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">はじめに</a></li><li><a href="#toc2" tabindex="0">ドローソフト Inkscape について</a></li><li><a href="#toc3" tabindex="0">ベジェ曲線の描き方の流れ</a><ol><li><a href="#toc4" tabindex="0">ペンツールでベジェ曲線を作成</a></li><li><a href="#toc5" tabindex="0">ノードツールで曲線を編集・調整する</a><ol><ol><li><a href="#toc6" tabindex="0">ノード、ハンドルの調整</a></li><li><a href="#toc7" tabindex="0">新しくノードを追加する</a></li><li><a href="#toc8" tabindex="0">ノード間の編集</a></li><li><a href="#toc9" tabindex="0">ノードの種類を変更</a></li><li><a href="#toc10" tabindex="0">ノード間を直線、曲線にする</a></li></ol></li></ol></li><li><a href="#toc11" tabindex="0">補足:ノード点の作成について</a></li></ol></li><li><a href="#toc12" tabindex="0">応用例：テキストをパスに沿わせる方法</a></li><li><a href="#toc13" tabindex="0">まとめ</a><ol><li><a href="#toc14" tabindex="0">関連サイト</a></li><li><a href="#toc15" tabindex="0">あとがき</a></li></ol></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">はじめに</span></h2>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="615" src="https://read-nonbiri.com/wp-content/uploads/2023/10/laptop-1205256_1280-1024x615.jpg" alt="パソコン" class="wp-image-4900" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/laptop-1205256_1280-1024x615.jpg 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/laptop-1205256_1280-300x180.jpg 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/laptop-1205256_1280-768x461.jpg 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/laptop-1205256_1280.jpg 1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



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



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



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-check-circle block-box has-background has-border-color has-watery-green-background-color has-cyan-bluish-gray-border-color"><div class="iconlist-title">この記事は、こんな人にオススメ</div>
<ul class="wp-block-list">
<li>Inkscape で曲線を描きたい方</li>



<li>ベジェ曲線の描き方について知りたい方</li>
</ul>
</div>



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-check-circle block-box has-background has-border-color has-watery-yellow-background-color has-cyan-bluish-gray-border-color"><div class="iconlist-title">この記事を読むメリット</div>
<ul class="wp-block-list">
<li>Inkscapeを使った ベジェ曲線の簡単な使い方や例が分かります</li>
</ul>
</div>



<p></p>



<p></p>



<h2 class="wp-block-heading"><span id="toc2">ドローソフト Inkscape について</span></h2>



<p>かんたんに特徴を書いてみます。</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box has-border-color has-grey-border-color"><div class="iconlist-title">ドローソフト Inkscape の特徴</div>
<ul class="wp-block-list">
<li>フリーのドローソフト
<ul class="wp-block-list">
<li>ベクター形式での保存</li>



<li>ラスター形式(ビットマップ形式)では無い</li>
</ul>
</li>



<li>Adobe Illustrator みたいな機能</li>



<li>マルチプラットフォーム(自分はWindowsとLinuxで動作することを確認)</li>



<li>日本語に対応している</li>
</ul>
</div>



<p></p>



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



<ul style="background-color:#c8e8fe" class="has-background wp-block-list">
<li>Windows10</li>



<li>Dell ノートパソコン</li>



<li>Inkscape 1.3</li>
</ul>



<p></p>



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



<figure class="wp-block-image size-full"><a href="https://read-nonbiri.com/wp-content/uploads/2023/08/image.png"><img loading="lazy" decoding="async" width="794" height="738" src="https://read-nonbiri.com/wp-content/uploads/2023/08/image.png" alt="Inkscape1.3" class="wp-image-4330" srcset="https://read-nonbiri.com/wp-content/uploads/2023/08/image.png 794w, https://read-nonbiri.com/wp-content/uploads/2023/08/image-300x279.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/08/image-768x714.png 768w" sizes="(max-width: 794px) 100vw, 794px" /></a><figcaption class="wp-element-caption">今回、使用したバージョン</figcaption></figure>



<p></p>



<p><a rel="noopener" target="_blank" href="https://inkscape.org/ja/" data-type="link" data-id="https://inkscape.org/ja/">Inkscape</a> で 取り扱いしているフォーマットの一例です</p>



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box has-border-color has-cyan-bluish-gray-border-color"><div class="iconlist-title">対応している主な画像フォーマット</div>
<ul class="is-style-icon-list-info has-list-style wp-block-list">
<li>インポート
<ul class="wp-block-list">
<li>SVG, AI, EPS, PDF, PS, PNG</li>
</ul>
</li>



<li>保存、エクスポート
<ul class="wp-block-list">
<li>SVG, PDF, EPS, PNG, JPG</li>
</ul>
</li>
</ul>
</div>



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



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



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



<p></p>



<p></p>



<p></p>



<p>実際に <a rel="noopener" target="_blank" href="https://inkscape.org/ja/" data-type="link" data-id="https://inkscape.org/ja/">Inkscape</a> を使ってみたい方は公式ホームページでダウンロード、お使いのPCにインストールを行ってください。</p>



<p></p>





<a rel="noopener" target="_blank" href="https://inkscape.org/ja" title="Draw Freely | Inkscape" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://media.inkscape.org/static/images/inkscape-og-front.svg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Draw Freely | Inkscape</div><div class="blogcard-snippet external-blogcard-snippet">Inkscape is professional quality vector graphics software wh...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://inkscape.org/ja" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">inkscape.org</div></div></div></div></a>




<p></p>



<p></p>



<h2 class="wp-block-heading"><span id="toc3">ベジェ曲線の描き方の流れ</span></h2>



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



<ol class="is-style-border-radius-s-solid has-border wp-block-list">
<li>ペンツールでベジェ曲線を作成</li>



<li>ノードツールでノードとハンドルを調整・編集</li>
</ol>



<p></p>



<p></p>



<h3 class="wp-block-heading"><span id="toc4">ペンツールでベジェ曲線を作成</span></h3>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="290" height="100" src="https://read-nonbiri.com/wp-content/uploads/2023/10/beje_icon.png" alt="" class="wp-image-5117"/></figure>



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



<p>直線の作成と同様に、<span class="marker-under-red">ペンツール（ベジェ曲線/直線を描く）</span>を選択してください。</p>



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



<p></p>



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



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex" style="border-width:1px">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="407" height="212" src="https://read-nonbiri.com/wp-content/uploads/2023/10/beje_kihon.png" alt="" class="wp-image-5118" style="width:503px;height:auto" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/beje_kihon.png 407w, https://read-nonbiri.com/wp-content/uploads/2023/10/beje_kihon-300x156.png 300w" sizes="(max-width: 407px) 100vw, 407px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-chevron-circle-right block-box"><div class="iconlist-title">ベジェ曲線の構成要素</div>
<ul class="is-style-numeric-list-enclosed has-list-style wp-block-list">
<li>ノード（四角の点。曲線は必ずここを通過する）</li>



<li>ハンドル（ノードについている線。長さと方向を変えられる。曲線の編集に使用する）</li>
</ul>
</div>
</div>
</div>



<p></p>



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



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



<p>方法は簡単で、クリックしてノードを置いたらそのままマウスを<span class="marker-under-blue">ドラッグ</span>してください。</p>



<p><span class="marker-under-blue">ドラッグした量と方向にハンドルが追加されます。</span></p>



<p>これを繰り返していきます。</p>



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



<p></p>



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



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="583" height="451" src="https://read-nonbiri.com/wp-content/uploads/2023/10/beje_kihon1-1.png" alt="ノードとハンドル" class="wp-image-5172" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/beje_kihon1-1.png 583w, https://read-nonbiri.com/wp-content/uploads/2023/10/beje_kihon1-1-300x232.png 300w" sizes="(max-width: 583px) 100vw, 583px" /></figure>



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



<p>次にベジェ曲線の描き方の例です。</p>



<figure class="wp-block-image size-full has-custom-border"><img loading="lazy" decoding="async" width="384" height="242" src="https://read-nonbiri.com/wp-content/uploads/2023/10/curve_01.png" alt="" class="wp-image-5176" style="border-width:1px" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/curve_01.png 384w, https://read-nonbiri.com/wp-content/uploads/2023/10/curve_01-300x189.png 300w" sizes="(max-width: 384px) 100vw, 384px" /><figcaption class="wp-element-caption">左クリックをしたままマウスを動かします（ドラッグ）。ドラッグした分、ハンドルになります。</figcaption></figure>



<p></p>



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



<p></p>



<figure class="wp-block-image size-full has-custom-border"><img loading="lazy" decoding="async" width="523" height="345" src="https://read-nonbiri.com/wp-content/uploads/2023/10/curve_02.png" alt="" class="wp-image-5177" style="border-width:1px" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/curve_02.png 523w, https://read-nonbiri.com/wp-content/uploads/2023/10/curve_02-300x198.png 300w" sizes="(max-width: 523px) 100vw, 523px" /><figcaption class="wp-element-caption">続けて別の場所で同じ操作（クリックしたままドラッグしてハンドルを追加）</figcaption></figure>



<p>続けて</p>



<p></p>



<figure class="wp-block-image size-full has-custom-border"><img loading="lazy" decoding="async" width="523" height="425" src="https://read-nonbiri.com/wp-content/uploads/2023/10/curve_03-1.png" alt="" class="wp-image-5178" style="border-width:1px" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/curve_03-1.png 523w, https://read-nonbiri.com/wp-content/uploads/2023/10/curve_03-1-300x244.png 300w" sizes="(max-width: 523px) 100vw, 523px" /><figcaption class="wp-element-caption">３点追加した例です。曲線になってます。</figcaption></figure>



<p></p>



<p></p>



<figure class="wp-block-image size-full has-custom-border"><img loading="lazy" decoding="async" width="468" height="430" src="https://read-nonbiri.com/wp-content/uploads/2023/10/curve_04-2.png" alt="" class="wp-image-5180" style="border-width:1px" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/curve_04-2.png 468w, https://read-nonbiri.com/wp-content/uploads/2023/10/curve_04-2-300x276.png 300w" sizes="(max-width: 468px) 100vw, 468px" /><figcaption class="wp-element-caption">３点の例としてこんな感じです</figcaption></figure>



<p></p>



<p>また、閉じた図形も可能です。</p>



<figure class="wp-block-image size-full has-custom-border"><img loading="lazy" decoding="async" width="503" height="408" src="https://read-nonbiri.com/wp-content/uploads/2023/10/curve_05-1.png" alt="" class="wp-image-5182" style="border-width:1px" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/curve_05-1.png 503w, https://read-nonbiri.com/wp-content/uploads/2023/10/curve_05-1-300x243.png 300w" sizes="(max-width: 503px) 100vw, 503px" /><figcaption class="wp-element-caption">閉じた形状の一例</figcaption></figure>



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



<p></p>



<p></p>



<p></p>



<h3 class="wp-block-heading"><span id="toc5">ノードツールで曲線を編集・調整する</span></h3>



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



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



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="290" height="100" src="https://read-nonbiri.com/wp-content/uploads/2023/11/node1.png" alt="ノードツール選択" class="wp-image-5219" style="aspect-ratio:2.9;width:429px;height:auto"/></figure>



<p></p>



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



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="557" height="44" src="https://read-nonbiri.com/wp-content/uploads/2023/11/node1_menu_bar.png" alt="" class="wp-image-5220" style="aspect-ratio:12.659090909090908;width:861px;height:auto" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/node1_menu_bar.png 557w, https://read-nonbiri.com/wp-content/uploads/2023/11/node1_menu_bar-300x24.png 300w" sizes="(max-width: 557px) 100vw, 557px" /><figcaption class="wp-element-caption">ノード編集機能ボタン</figcaption></figure>



<p></p>



<h5 class="wp-block-heading"><span id="toc6">ノード、ハンドルの調整</span></h5>



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



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="290" height="100" src="https://read-nonbiri.com/wp-content/uploads/2023/11/node1.png" alt="ノードツール選択" class="wp-image-5219" style="aspect-ratio:2.9;width:429px;height:auto"/></figure>



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



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



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



<p>一例を示します。</p>



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex" style="border-width:1px">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full is-resized has-custom-border"><img loading="lazy" decoding="async" width="450" height="301" src="https://read-nonbiri.com/wp-content/uploads/2023/11/henshu1_1.png" alt="" class="wp-image-5225" style="border-width:1px;aspect-ratio:1.495016611295681;width:401px;height:auto" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/henshu1_1.png 450w, https://read-nonbiri.com/wp-content/uploads/2023/11/henshu1_1-300x201.png 300w" sizes="(max-width: 450px) 100vw, 450px" /><figcaption class="wp-element-caption">楕円を例にしてみます。ノードやハンドルを表示させています。上の点（ノード）を選択しています。（楕円作成の後、オブジェクトをパス化しています）</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full has-custom-border"><img loading="lazy" decoding="async" width="423" height="319" src="https://read-nonbiri.com/wp-content/uploads/2023/11/henshu1_2.png" alt="" class="wp-image-5226" style="border-width:1px" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/henshu1_2.png 423w, https://read-nonbiri.com/wp-content/uploads/2023/11/henshu1_2-300x226.png 300w" sizes="(max-width: 423px) 100vw, 423px" /><figcaption class="wp-element-caption">ノードを選択し移動させたり、ハンドルを選択して長さや向きを調整することができます。それによって曲線を変更、調整することができます。</figcaption></figure>
</div>
</div>



<p></p>



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



<p></p>



<h5 class="wp-block-heading"><span id="toc7">新しくノードを追加する</span></h5>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="571" height="86" src="https://read-nonbiri.com/wp-content/uploads/2023/11/menu_insert.png" alt="" class="wp-image-5228" style="aspect-ratio:6.6395348837209305;width:862px;height:auto" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/menu_insert.png 571w, https://read-nonbiri.com/wp-content/uploads/2023/11/menu_insert-300x45.png 300w" sizes="(max-width: 571px) 100vw, 571px" /></figure>



<p>ここのボタンを使用します。</p>



<p>こちらはノードを挿入する一例です</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex" style="border-width:1px">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="446" height="343" src="https://read-nonbiri.com/wp-content/uploads/2023/11/edit01.png" alt="" class="wp-image-5249" style="aspect-ratio:1.3002915451895043;width:407px;height:auto" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/edit01.png 446w, https://read-nonbiri.com/wp-content/uploads/2023/11/edit01-300x231.png 300w" sizes="(max-width: 446px) 100vw, 446px" /><figcaption class="wp-element-caption">例えば、こんな感じの曲線があるとします。</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="477" height="369" src="https://read-nonbiri.com/wp-content/uploads/2023/11/edit02.png" alt="" class="wp-image-5250" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/edit02.png 477w, https://read-nonbiri.com/wp-content/uploads/2023/11/edit02-300x232.png 300w" sizes="(max-width: 477px) 100vw, 477px" /><figcaption class="wp-element-caption">2点のノードを選択して「挿入」をすることで、選択した２点のノードの間に、新たなノードが追加されています。</figcaption></figure>
</div>
</div>



<p></p>



<p>次にノードの削除例です。</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex" style="border-width:1px">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="446" height="343" src="https://read-nonbiri.com/wp-content/uploads/2023/11/edit01-1.png" alt="" class="wp-image-5251" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/edit01-1.png 446w, https://read-nonbiri.com/wp-content/uploads/2023/11/edit01-1-300x231.png 300w" sizes="(max-width: 446px) 100vw, 446px" /><figcaption class="wp-element-caption">例えば、こんな感じの曲線があるとします。</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="417" height="371" src="https://read-nonbiri.com/wp-content/uploads/2023/11/edit03.png" alt="" class="wp-image-5252" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/edit03.png 417w, https://read-nonbiri.com/wp-content/uploads/2023/11/edit03-300x267.png 300w" sizes="(max-width: 417px) 100vw, 417px" /><figcaption class="wp-element-caption">真ん中のノードを選択して「削除」すると、３点のうち真ん中の１点のノードが削除されました。</figcaption></figure>
</div>
</div>



<p></p>



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



<p></p>



<p></p>



<h5 class="wp-block-heading"><span id="toc8">ノード間の編集</span></h5>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="547" height="117" src="https://read-nonbiri.com/wp-content/uploads/2023/11/menu_node_edito.png" alt="" class="wp-image-5231" style="aspect-ratio:4.6752136752136755;width:839px;height:auto" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/menu_node_edito.png 547w, https://read-nonbiri.com/wp-content/uploads/2023/11/menu_node_edito-300x64.png 300w" sizes="(max-width: 547px) 100vw, 547px" /></figure>



<p></p>



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



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



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex" style="border-width:1px">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="476" height="259" src="https://read-nonbiri.com/wp-content/uploads/2023/11/edit11.png" alt="" class="wp-image-5254" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/edit11.png 476w, https://read-nonbiri.com/wp-content/uploads/2023/11/edit11-300x163.png 300w" sizes="(max-width: 476px) 100vw, 476px" /><figcaption class="wp-element-caption">例えば、このような直線があるとします。</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="401" height="261" src="https://read-nonbiri.com/wp-content/uploads/2023/11/edit12.png" alt="" class="wp-image-5255" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/edit12.png 401w, https://read-nonbiri.com/wp-content/uploads/2023/11/edit12-300x195.png 300w" sizes="(max-width: 401px) 100vw, 401px" /><figcaption class="wp-element-caption">端点を２点選んだ状態で連結してみました。</figcaption></figure>
</div>
</div>



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



<p></p>



<p></p>



<h5 class="wp-block-heading"><span id="toc9">ノードの種類を変更</span></h5>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="547" height="99" src="https://read-nonbiri.com/wp-content/uploads/2023/11/menu_sharp_smooth.png" alt="" class="wp-image-5229" style="aspect-ratio:5.525252525252525;width:840px;height:auto" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/menu_sharp_smooth.png 547w, https://read-nonbiri.com/wp-content/uploads/2023/11/menu_sharp_smooth-300x54.png 300w" sizes="(max-width: 547px) 100vw, 547px" /></figure>



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



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



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex" style="border-width:1px">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="469" height="384" src="https://read-nonbiri.com/wp-content/uploads/2023/11/edit21.png" alt="" class="wp-image-5259" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/edit21.png 469w, https://read-nonbiri.com/wp-content/uploads/2023/11/edit21-300x246.png 300w" sizes="(max-width: 469px) 100vw, 469px" /><figcaption class="wp-element-caption">こういう画像があったとします</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="379" height="382" src="https://read-nonbiri.com/wp-content/uploads/2023/11/edit22.png" alt="" class="wp-image-5260" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/edit22.png 379w, https://read-nonbiri.com/wp-content/uploads/2023/11/edit22-298x300.png 298w, https://read-nonbiri.com/wp-content/uploads/2023/11/edit22-150x150.png 150w, https://read-nonbiri.com/wp-content/uploads/2023/11/edit22-100x100.png 100w" sizes="(max-width: 379px) 100vw, 379px" /><figcaption class="wp-element-caption">上のノードからハンドルを削除してみました</figcaption></figure>
</div>
</div>



<p></p>



<p></p>



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



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



<p>そこで、<span class="marker-red">最初は</span><span class="marker-red">ハンドル</span><span class="marker-red">無し</span><span class="marker-red">で</span><span class="marker-red">直線で書いておいてあとで曲線にする</span>方法でもできるわけなんですね。</p>



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex" style="border-width:1px">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="377" height="327" src="https://read-nonbiri.com/wp-content/uploads/2023/11/edit23.png" alt="" class="wp-image-5261" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/edit23.png 377w, https://read-nonbiri.com/wp-content/uploads/2023/11/edit23-300x260.png 300w" sizes="(max-width: 377px) 100vw, 377px" /><figcaption class="wp-element-caption">こういう図形があるとします</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="376" height="338" src="https://read-nonbiri.com/wp-content/uploads/2023/11/edit24.png" alt="" class="wp-image-5262" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/edit24.png 376w, https://read-nonbiri.com/wp-content/uploads/2023/11/edit24-300x270.png 300w" sizes="(max-width: 376px) 100vw, 376px" /><figcaption class="wp-element-caption">上のノードにハンドルを追加することができました</figcaption></figure>
</div>
</div>



<p></p>



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



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



<p></p>



<p>ちなみに、ノードの形状が</p>



<ul class="is-style-border-dotted has-border wp-block-list">
<li>菱形であればシャープノード</li>



<li>四角であればスムーズノードか対称ノード</li>



<li>円であれば自動スムーズノード</li>
</ul>



<p>です。</p>



<p></p>



<h5 class="wp-block-heading"><span id="toc10">ノード間を直線、曲線にする</span></h5>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="601" height="103" src="https://read-nonbiri.com/wp-content/uploads/2023/11/menu_node_Tyokusen.png" alt="" class="wp-image-5244" style="aspect-ratio:5.834951456310679;width:878px;height:auto" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/menu_node_Tyokusen.png 601w, https://read-nonbiri.com/wp-content/uploads/2023/11/menu_node_Tyokusen-300x51.png 300w" sizes="(max-width: 601px) 100vw, 601px" /></figure>



<p></p>



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



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



<p>こちらはやってみた例です。</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex" style="border-width:1px">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="347" height="310" src="https://read-nonbiri.com/wp-content/uploads/2023/11/edit41b.png" alt="" class="wp-image-5264" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/edit41b.png 347w, https://read-nonbiri.com/wp-content/uploads/2023/11/edit41b-300x268.png 300w" sizes="(max-width: 347px) 100vw, 347px" /><figcaption class="wp-element-caption">このような図形があるとします。</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="294" height="291" src="https://read-nonbiri.com/wp-content/uploads/2023/11/edit42.png" alt="" class="wp-image-5265" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/edit42.png 294w, https://read-nonbiri.com/wp-content/uploads/2023/11/edit42-100x100.png 100w" sizes="(max-width: 294px) 100vw, 294px" /><figcaption class="wp-element-caption">上の２点のノードを選択して「直線」にしてみた例です。ハンドルがなくなりました。</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="274" height="286" src="https://read-nonbiri.com/wp-content/uploads/2023/11/edit44.png" alt="" class="wp-image-5266"/><figcaption class="wp-element-caption">さらに曲線にするボタンを押すことでハンドルを追加することができました。わかりにくいですが・・・ここからハンドルを調整してみてください</figcaption></figure>
</div>
</div>



<p></p>



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



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



<p></p>



<p></p>



<p></p>



<p></p>



<h3 class="wp-block-heading"><span id="toc11">補足:ノード点の作成について</span></h3>



<p>補足として<span class="marker-red">ノード</span>（直線の描き方）について簡単に説明します。</p>



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



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="290" height="100" src="https://read-nonbiri.com/wp-content/uploads/2023/10/beje_icon.png" alt="ペンツールのアイコン" class="wp-image-5117" style="aspect-ratio:2.9;width:519px;height:auto"/><figcaption class="wp-element-caption">ツールボックスの選択</figcaption></figure>



<p></p>



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



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex" style="border-width:1px">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="392" height="282" src="https://read-nonbiri.com/wp-content/uploads/2023/10/tyokusen1.png" alt="" class="wp-image-5138" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/tyokusen1.png 392w, https://read-nonbiri.com/wp-content/uploads/2023/10/tyokusen1-300x216.png 300w" sizes="(max-width: 392px) 100vw, 392px" /><figcaption class="wp-element-caption">点をつないで図形にしてきます</figcaption></figure>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="409" height="300" src="https://read-nonbiri.com/wp-content/uploads/2023/10/tyokusen2.png" alt="" class="wp-image-5139" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/tyokusen2.png 409w, https://read-nonbiri.com/wp-content/uploads/2023/10/tyokusen2-300x220.png 300w" sizes="(max-width: 409px) 100vw, 409px" /><figcaption class="wp-element-caption">開始点をクリックすることで閉じた図形になります</figcaption></figure>
</div>
</div>



<p></p>



<p>別の例も示します。</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex" style="border-width:1px">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="398" height="296" src="https://read-nonbiri.com/wp-content/uploads/2023/10/tyokusen3.png" alt="" class="wp-image-5144" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/tyokusen3.png 398w, https://read-nonbiri.com/wp-content/uploads/2023/10/tyokusen3-300x223.png 300w" sizes="(max-width: 398px) 100vw, 398px" /></figure>



<p>クリックを繰り返し、線を作っていきます</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="362" height="503" src="https://read-nonbiri.com/wp-content/uploads/2023/10/tyokusen4.png" alt="" class="wp-image-5145" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/tyokusen4.png 362w, https://read-nonbiri.com/wp-content/uploads/2023/10/tyokusen4-216x300.png 216w" sizes="(max-width: 362px) 100vw, 362px" /><figcaption class="wp-element-caption">書いてみた一例です。色を塗ってみたり、ノードを●に表示してみました。</figcaption></figure>
</div>
</div>



<p></p>



<p></p>



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-check-circle block-box has-border-color has-cyan-bluish-gray-border-color"><div class="iconlist-title">ノード（ベジェ直線）のポイント</div>
<ul class="wp-block-list">
<li>「Ctrl」キーを押しながら線を引いていくと、15度間隔で角度がスナップした線を引くことができる</li>



<li>線を閉じずにやめるときは「Enter」キーを押すことで描画を終了できる（単なる直線のときはこれを使用）</li>
</ul>
</div>



<p></p>



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



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



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



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



<p></p>



<p></p>



<p></p>



<h2 class="wp-block-heading"><span id="toc12">応用例：テキストをパスに沿わせる方法</span></h2>



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



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



<p></p>



<p></p>



<figure class="wp-block-image size-full has-custom-border"><img loading="lazy" decoding="async" width="628" height="350" src="https://read-nonbiri.com/wp-content/uploads/2023/11/text01.png" alt="" class="wp-image-5237" style="border-width:1px" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/text01.png 628w, https://read-nonbiri.com/wp-content/uploads/2023/11/text01-300x167.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/11/text01-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/11/text01-160x90.png 160w" sizes="(max-width: 628px) 100vw, 628px" /></figure>



<p></p>



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



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



<p></p>



<figure class="wp-block-image size-full has-custom-border"><a href="https://read-nonbiri.com/wp-content/uploads/2023/11/text02.png"><img loading="lazy" decoding="async" width="666" height="296" src="https://read-nonbiri.com/wp-content/uploads/2023/11/text02.png" alt="" class="wp-image-5236" style="border-width:1px" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/text02.png 666w, https://read-nonbiri.com/wp-content/uploads/2023/11/text02-300x133.png 300w" sizes="(max-width: 666px) 100vw, 666px" /></a></figure>



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



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



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



<p></p>



<p></p>



<h2 class="wp-block-heading"><span id="toc13">まとめ</span></h2>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="683" src="https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-1024x683.jpg" alt="パソコン" class="wp-image-4991" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-1024x683.jpg 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-300x200.jpg 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-768x512.jpg 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-1536x1024.jpg 1536w, https://read-nonbiri.com/wp-content/uploads/2023/10/alejandro-escamilla-yC-Yzbqy7PY-unsplash-2048x1365.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p></p>



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



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



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



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



<p></p>



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



<h3 class="wp-block-heading"><span id="toc14">関連サイト</span></h3>





<a rel="noopener" target="_blank" href="https://inkscape.org/learn" title="Learn | Inkscape" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://media.inkscape.org/static/images/inkscape-og-image.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Learn | Inkscape</div><div class="blogcard-snippet external-blogcard-snippet">Tutorials, how-tos, FAQ, and other important resources to le...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://inkscape.org/learn" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">inkscape.org</div></div></div></div></a>




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



<p>英語ですけどためになる内容です。</p>



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



<p></p>



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



<figure class="wp-block-embed is-type-wp-embed is-provider-n wp-block-embed-n"><div class="wp-block-embed__wrapper">

<a href="https://read-nonbiri.com/inkscape-simple-method1" title="ドローソフトInkscape使い方(1) シンプルに線を引く方法" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="160" height="90" src="https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/08/Inkscapeで線を書くシンプル方法.png 1366w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドローソフトInkscape使い方(1) シンプルに線を引く方法</div><div class="blogcard-snippet internal-blogcard-snippet">ドローソフト Inkscape 使い方(1) フリーのドローソフトInkscapeで線・図形を描く基本的な使い方を解説。ペンツールの操作、グリッド・スナップ設定、PNG出力まで、初心者でも地図やシステム図が手軽に作れます。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://read-nonbiri.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">read-nonbiri.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2026.04.07</div></div></div></div></a>
</div></figure>



<p></p>



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



<figure class="wp-block-embed is-type-wp-embed is-provider-n wp-block-embed-n"><div class="wp-block-embed__wrapper">

<a href="https://read-nonbiri.com/inkscape-3-image-clip" title="ドローソフトInkscape使い方(3)画像の切り抜きトリミング" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="160" height="90" src="https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング.png 1366w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドローソフトInkscape使い方(3)画像の切り抜きトリミング</div><div class="blogcard-snippet internal-blogcard-snippet">ドローソフトInkscape使い方 インポートした画像を切り抜く(トリミングする)方法について説明します。クリップとマスクを使用して画像の切り抜きを行います。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://read-nonbiri.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">read-nonbiri.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2024.05.26</div></div></div></div></a>
</div></figure>



<h3 class="wp-block-heading"><span id="toc15">あとがき</span></h3>



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



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



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



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



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



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-1024x576.png" alt="ありがとうございました" class="wp-image-5157" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1.png 1366w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://read-nonbiri.com/inkscape-2-draw-a-bezier-curve/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>ドローソフトInkscape使い方(1) シンプルに線を引く方法</title>
		<link>https://read-nonbiri.com/inkscape-simple-method1/</link>
					<comments>https://read-nonbiri.com/inkscape-simple-method1/#respond</comments>
		
		<dc:creator><![CDATA[Nくま]]></dc:creator>
		<pubDate>Sun, 20 Aug 2023 02:13:27 +0000</pubDate>
				<category><![CDATA[パソコン]]></category>
		<category><![CDATA[商品紹介]]></category>
		<category><![CDATA[趣味]]></category>
		<category><![CDATA[inkscape]]></category>
		<category><![CDATA[イラスト]]></category>
		<category><![CDATA[ソフト]]></category>
		<category><![CDATA[フリー]]></category>
		<category><![CDATA[ベクター]]></category>
		<category><![CDATA[線画]]></category>
		<guid isPermaLink="false">https://read-nonbiri.com/?p=4319</guid>

					<description><![CDATA[パソコンで手軽に図形を書いたり、地図を書きたい そういうことありませんか？ そんなときは、フリーソフトの Inkscape がお役に立ちます。 Inkscape は、 Adobe のイラストレータに近いソフトでして、細か [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p></p>



<p><span class="bold-red">パソコンで手軽に図形を書いたり、地図を書きたい</span></p>



<p>そういうことありませんか？</p>



<p>そんなときは、フリーソフトの <strong><a rel="noopener" target="_blank" href="https://inkscape.org/ja/" data-type="link" data-id="https://inkscape.org/ja/">Inkscape</a> </strong>がお役に立ちます。</p>



<p><a rel="noopener" target="_blank" href="https://inkscape.org/ja/" data-type="link" data-id="https://inkscape.org/ja/">Inkscape</a> は、 Adobe のイラストレータに近いソフトでして、細かい図形を書きたいときや、幾何学的な模様を描いたりするのにオススメです。</p>



<p></p>



<p><span class="bold-red">パソコンで地図や図形をサクッと作りたい</span>と思ったこと、ありませんか？</p>



<p>「手書きは苦手」「Illustratorは高い」——そんな悩みを解決してくれるのが、フリーのドローソフト <strong><strong><a rel="noopener" target="_blank" href="https://inkscape.org/ja/" data-type="link" data-id="https://inkscape.org/ja/">Inkscape</a> </strong></strong> です。</p>



<p><strong><a rel="noopener" target="_blank" href="https://inkscape.org/ja/" data-type="link" data-id="https://inkscape.org/ja/">Inkscape</a> </strong> は Adobe Illustrator に近い機能を持ちながら、<strong>無料で使えるベクター形式の作図ソフト</strong>。直線・曲線・図形をきれいに描けるので、地図やシステム図、イベント資料の作成にも重宝します。</p>



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-check-circle block-box has-background has-border-color has-icon-color has-watery-yellow-background-color has-grey-border-color has-indigo-icon-color"><div class="iconlist-title">この記事を読んで分かること</div>
<ul class="wp-block-list">
<li>Inkscape のペンツールで線・図形を描く基本操作</li>



<li> グリッド・スナップを使った作図の効率化</li>



<li>PNG ファイルへの書き出し方法</li>
</ul>
</div>



<p></p>



<p>私自身、<a rel="noopener" target="_blank" href="https://www.canva.com/">Canva</a> でイベントポスターを作っていたときに「会場の地図をどう描くか」で詰まったのがきっかけです。</p>



<p><a rel="noopener" target="_blank" href="https://www.canva.com/">Canva</a> だと直線を何本も引くのが難しく、昔使っていた <a rel="noopener" target="_blank" href="https://inkscape.org/ja/" data-type="link" data-id="https://inkscape.org/ja/">Inkscape</a> を引っ張り出してみたところ、思いのほかスムーズに作れました。</p>



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



<p></p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-10" checked><label class="toc-title" for="toc-checkbox-10">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">はじめに</a></li><li><a href="#toc2" tabindex="0">ドローソフト Inkscape について</a></li><li><a href="#toc3" tabindex="0">簡単！図形作成の流れ</a><ol><li><a href="#toc4" tabindex="0">新規ファイル 起動</a></li><li><a href="#toc5" tabindex="0">オススメ設定</a></li><li><a href="#toc6" tabindex="0">ペンツール：ベジェ曲線・直線を描く</a></li><li><a href="#toc7" tabindex="0">オブジェクト選択</a></li><li><a href="#toc8" tabindex="0">テキスト入力</a></li><li><a href="#toc9" tabindex="0">ファイル(PNG)出力</a></li></ol></li><li><a href="#toc10" tabindex="0">マウスで描ける手書き風カリグラフィー機能</a></li><li><a href="#toc11" tabindex="0">まとめ</a><ol><li><a href="#toc12" tabindex="0">おまけ:作成例</a></li><li><a href="#toc13" tabindex="0">関連サイト</a></li><li><a href="#toc14" tabindex="0">あとがき</a></li></ol></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">はじめに</span></h2>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape07.png"><img loading="lazy" decoding="async" width="1024" height="576" src="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape07-1024x576.png" alt="" class="wp-image-4323" srcset="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape07-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape07-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape07-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape07-1536x864.png 1536w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape07-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape07-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape07-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape07.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">こんな感じの図形作成できます</figcaption></figure>



<p></p>



<p>この記事はこんな方にオススメ</p>



<ul class="wp-block-list has-watery-red-background-color has-background">
<li>パソコンで簡単な図を作りたい</li>



<li>ドローソフト Inkscape の基本的な使い方を知りたい</li>
</ul>



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



<p></p>



<p></p>



<h2 class="wp-block-heading"><span id="toc2">ドローソフト Inkscape について</span></h2>



<p>かんたんに特徴を書いてみます。</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box has-border-color has-grey-border-color"><div class="iconlist-title">ドローソフト Inkscapeの特徴</div>
<ul class="wp-block-list">
<li>フリーのドローソフト
<ul class="wp-block-list">
<li>ベクター形式での保存</li>



<li>ラスター形式(ビットマップ形式)では無い</li>
</ul>
</li>



<li>Adobe Illustrator みたいな機能</li>



<li>マルチプラットフォーム(自分はWindowsとLinuxで動作することを確認)</li>



<li>日本語に対応している</li>
</ul>
</div>



<p></p>



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



<ul style="background-color:#c8e8fe" class="wp-block-list has-background">
<li>Windows10</li>



<li>Dell ノートパソコン</li>



<li>Inkscape 1.3</li>
</ul>



<p></p>



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



<figure class="wp-block-image size-full"><a href="https://read-nonbiri.com/wp-content/uploads/2023/08/image.png"><img loading="lazy" decoding="async" width="794" height="738" src="https://read-nonbiri.com/wp-content/uploads/2023/08/image.png" alt="Inkscape1.3" class="wp-image-4330" srcset="https://read-nonbiri.com/wp-content/uploads/2023/08/image.png 794w, https://read-nonbiri.com/wp-content/uploads/2023/08/image-300x279.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/08/image-768x714.png 768w" sizes="(max-width: 794px) 100vw, 794px" /></a><figcaption class="wp-element-caption">今回、使用したバージョン</figcaption></figure>



<p></p>



<p><a rel="noopener" target="_blank" href="https://inkscape.org/ja/" data-type="link" data-id="https://inkscape.org/ja/">Inkscape</a> で 取り扱いしているフォーマットの一例です</p>



<p></p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box has-border-color has-cyan-bluish-gray-border-color"><div class="iconlist-title">対応している主な画像フォーマット</div>
<ul class="wp-block-list is-style-icon-list-info has-list-style">
<li>インポート
<ul class="wp-block-list">
<li>SVG, AI, EPS, PDF, PS, PNG</li>
</ul>
</li>



<li>保存、エクスポート
<ul class="wp-block-list">
<li>SVG, PDF, EPS, PNG, JPG</li>
</ul>
</li>
</ul>
</div>



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



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



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



<p></p>



<p></p>



<p></p>



<p>実際に <a rel="noopener" target="_blank" href="https://inkscape.org/ja/" data-type="link" data-id="https://inkscape.org/ja/">Inkscape</a> を使ってみたい方は公式ホームページでダウンロード、お使いのPCにインストールを行ってください。</p>



<p></p>





<a rel="noopener" target="_blank" href="https://inkscape.org/ja" title="Draw Freely | Inkscape" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://media.inkscape.org/static/images/inkscape-og-front.svg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Draw Freely | Inkscape</div><div class="blogcard-snippet external-blogcard-snippet">Inkscape is professional quality vector graphics software wh...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://inkscape.org/ja" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">inkscape.org</div></div></div></div></a>




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



<p></p>



<h2 class="wp-block-heading"><span id="toc3">簡単！図形作成の流れ</span></h2>



<p></p>



<h3 class="wp-block-heading"><span id="toc4">新規ファイル 起動</span></h3>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape01.png"><img loading="lazy" decoding="async" width="1024" height="576" src="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape01-1024x576.png" alt="新規ファイルで起動" class="wp-image-4321" srcset="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape01-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape01-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape01-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape01-1536x864.png 1536w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape01-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape01-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape01-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape01.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption class="wp-element-caption">起動直後の画面</figcaption></figure>



<p>まずは新規でファイル作成します。</p>



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



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



<p></p>



<h3 class="wp-block-heading"><span id="toc5">オススメ設定</span></h3>



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



<ul class="wp-block-list has-watery-red-background-color has-background">
<li>グリッド表示</li>



<li>スナップON</li>
</ul>



<p></p>



<p>この２つを初めに行います。</p>



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



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



<p></p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape02.png"><img loading="lazy" decoding="async" width="1024" height="576" src="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape02-1024x576.png" alt="ページグリッド" class="wp-image-4322" srcset="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape02-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape02-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape02-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape02-1536x864.png 1536w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape02-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape02-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape02-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape02.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<p></p>



<p>次にスナップを有効化します。</p>



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



<p></p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape03.png"><img loading="lazy" decoding="async" width="1024" height="576" src="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape03-1024x576.png" alt="" class="wp-image-4325" srcset="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape03-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape03-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape03-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape03-1536x864.png 1536w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape03-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape03-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape03-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape03.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<p></p>



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



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



<p>キーボードでは<span class="marker-red">「%」</span>ボタンでスナップON/OFFの切り替えができます。</p>



<p></p>



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



<ol class="wp-block-list has-watery-green-background-color has-background">
<li>最初は拡大しない表示と、スナップONで大雑把に描いてく。</li>



<li>次に細かいところを調整。拡大表示(キーボードだと+)してスナップOFFで調整していきます。</li>
</ol>



<p></p>



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



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



<p></p>



<h3 class="wp-block-heading"><span id="toc6">ペンツール：ベジェ曲線・直線を描く</span></h3>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape04.png"><img loading="lazy" decoding="async" width="1024" height="576" src="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape04-1024x576.png" alt="ベジェ曲線、直線を描く" class="wp-image-4326" srcset="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape04-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape04-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape04-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape04-1536x864.png 1536w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape04-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape04-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape04-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape04.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<p></p>



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



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



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="290" height="100" src="https://read-nonbiri.com/wp-content/uploads/2023/10/beje_icon.png" alt="ペンツールのアイコン" class="wp-image-5117" style="aspect-ratio:2.9;width:421px;height:auto"/></figure>



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



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



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



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-check-circle block-box has-border-color has-cyan-bluish-gray-border-color"><div class="iconlist-title">ベジェ直線のポイント</div>
<ul class="wp-block-list">
<li>「Ctrl」キーを押しながら線を引いていくと、15度間隔で角度がスナップした線を引くことができる</li>



<li>線を閉じずにやめるときは「Enter」キーを押すことで描画を終了できる（単なる直線のような始点と終点が違う場合はこちら）</li>
</ul>
</div>



<p></p>



<p></p>



<p></p>



<p></p>



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



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



<figure class="wp-block-image size-full has-custom-border"><img loading="lazy" decoding="async" width="772" height="658" src="https://read-nonbiri.com/wp-content/uploads/2023/10/四角お試したち.png" alt="Inkscape お試し図形　遊び" class="wp-image-5132" style="border-width:1px;border-radius:11px" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/四角お試したち.png 772w, https://read-nonbiri.com/wp-content/uploads/2023/10/四角お試したち-300x256.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/四角お試したち-768x655.png 768w" sizes="(max-width: 772px) 100vw, 772px" /><figcaption class="wp-element-caption">遊びで作ってみたお試し図形</figcaption></figure>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p></p>



<p>話を戻します。</p>



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



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape05.png"><img loading="lazy" decoding="async" width="1024" height="576" src="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape05-1024x576.png" alt="フィルとストローク" class="wp-image-4329" srcset="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape05-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape05-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape05-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape05-1536x864.png 1536w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape05-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape05-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape05-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape05.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<p></p>



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



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



<ul class="wp-block-list has-watery-green-background-color has-background">
<li>フィル：図形の内側</li>



<li>ストローク：図形の線</li>
</ul>



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



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



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



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



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



<p></p>



<p></p>



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape06.png"><img loading="lazy" decoding="async" width="1024" height="576" src="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape06-1024x576.png" alt="ストロークのスタイル" class="wp-image-4331" srcset="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape06-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape06-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape06-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape06-1536x864.png 1536w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape06-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape06-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape06-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape06.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<p></p>



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



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



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



<p></p>



<p></p>



<h3 class="wp-block-heading"><span id="toc7">オブジェクト選択</span></h3>



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



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="36" height="34" src="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape10-3_arrow-1.png" alt="選択矢印" class="wp-image-4365" style="aspect-ratio:1.0588235294117647;width:76px;height:auto"/><figcaption class="wp-element-caption">このアイコンでオブジェクト選択します</figcaption></figure>



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



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



<p></p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="36" height="37" src="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape10-3_arrow-2.png" alt="" class="wp-image-4367" style="aspect-ratio:0.972972972972973;width:79px;height:auto"/><figcaption class="wp-element-caption">このアイコンはポイント（ノード）選択に使います</figcaption></figure>



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



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



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



<p></p>



<h3 class="wp-block-heading"><span id="toc8">テキスト入力</span></h3>



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



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



<p>「ストロークは無色」</p>



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



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



<p></p>



<h3 class="wp-block-heading"><span id="toc9">ファイル(PNG)出力</span></h3>



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



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



<figure class="wp-block-image size-large"><a href="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape08.png"><img loading="lazy" decoding="async" width="1024" height="576" src="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape08-1024x576.png" alt="ファイル出力" class="wp-image-4337" srcset="https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape08-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape08-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape08-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape08-1536x864.png 1536w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape08-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape08-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape08-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/08/inkscape08.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<p></p>



<p></p>



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



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



<p></p>



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



<p></p>



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



<p>例えば <a rel="noopener" target="_blank" href="https://www.canva.com/">Canva</a> にアップロードしてポスターやロゴに追加したり、パワーポイントのスライドに追加して使うことができますよ。</p>



<p></p>



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



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



<p></p>



<p></p>



<h2 class="wp-block-heading"><span id="toc10">マウスで描ける手書き風カリグラフィー機能</span></h2>



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



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



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



<p></p>



<figure class="wp-block-embed is-type-wp-embed is-provider-n wp-block-embed-n"><div class="wp-block-embed__wrapper">

<a href="https://read-nonbiri.com/inkscape_calligraphy/" title="ドローソフトInkscapeの使い方(5) カリグラフィで手軽に手書き風デザイン" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="160" height="90" src="https://read-nonbiri.com/wp-content/uploads/2025/02/Inkscapeのカリグラフィー-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://read-nonbiri.com/wp-content/uploads/2025/02/Inkscapeのカリグラフィー-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2025/02/Inkscapeのカリグラフィー-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2025/02/Inkscapeのカリグラフィー-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2025/02/Inkscapeのカリグラフィー-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2025/02/Inkscapeのカリグラフィー-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2025/02/Inkscapeのカリグラフィー-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2025/02/Inkscapeのカリグラフィー.png 1366w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドローソフトInkscapeの使い方(5) カリグラフィで手軽に手書き風デザイン</div><div class="blogcard-snippet internal-blogcard-snippet">ドローソフト Inkscapeの使い方(5) カリグラフィで手軽に手書き風デザインの方法や例を書いてみました。なにかの参考になれば嬉しいです。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://read-nonbiri.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">read-nonbiri.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2025.11.09</div></div></div></div></a>
</div></figure>



<p></p>



<h2 class="wp-block-heading"><span id="toc11">まとめ</span></h2>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="681" src="https://read-nonbiri.com/wp-content/uploads/2023/10/cup-of-coffee-1280537_1280-1024x681.jpg" alt="パソコンとコーヒー" class="wp-image-5046" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/cup-of-coffee-1280537_1280-1024x681.jpg 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/cup-of-coffee-1280537_1280-300x199.jpg 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/cup-of-coffee-1280537_1280-768x511.jpg 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/cup-of-coffee-1280537_1280.jpg 1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>フリーソフトの<a rel="noopener" target="_blank" href="https://inkscape.org/ja/" data-type="link" data-id="https://inkscape.org/ja/">Inkscape</a>を使って、簡単な図を作る方法を記事に書いてみました。</p>



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



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



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



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



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



<p></p>



<p>それではまた🐧</p>



<p></p>



<h3 class="wp-block-heading"><span id="toc12">おまけ:作成例</span></h3>



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



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="602" height="687" src="https://read-nonbiri.com/wp-content/uploads/2023/11/地図-皆鶴姫の2F_作図例.png" alt="地図の作成例" class="wp-image-5276" srcset="https://read-nonbiri.com/wp-content/uploads/2023/11/地図-皆鶴姫の2F_作図例.png 602w, https://read-nonbiri.com/wp-content/uploads/2023/11/地図-皆鶴姫の2F_作図例-263x300.png 263w" sizes="(max-width: 602px) 100vw, 602px" /><figcaption class="wp-element-caption">Inkscapeでの地図作図例。無料素材も使ってみてます。</figcaption></figure>



<p></p>



<p></p>



<p></p>



<p></p>



<h3 class="wp-block-heading"><span id="toc13">関連サイト</span></h3>





<a rel="noopener" target="_blank" href="https://inkscape.org/learn" title="Learn | Inkscape" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://media.inkscape.org/static/images/inkscape-og-image.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Learn | Inkscape</div><div class="blogcard-snippet external-blogcard-snippet">Tutorials, how-tos, FAQ, and other important resources to le...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://inkscape.org/learn" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">inkscape.org</div></div></div></div></a>




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



<p>英語ですけどためになる内容です。</p>



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



<p></p>



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



<figure class="wp-block-embed is-type-wp-embed is-provider-n wp-block-embed-n"><div class="wp-block-embed__wrapper">

<a href="https://read-nonbiri.com/inkscape-2-draw-a-bezier-curve" title="ドローソフトInkscapeの使い方(2) ベジェ曲線を描く" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="160" height="90" src="https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/10/Inkscapeでベジェ曲線-1.png 1366w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドローソフトInkscapeの使い方(2) ベジェ曲線を描く</div><div class="blogcard-snippet internal-blogcard-snippet">ドローソフトInkscapeの使い方(2) ベジェ曲線を描く方法についてです。曲線を書くときに便利な機能です。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://read-nonbiri.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">read-nonbiri.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2024.05.21</div></div></div></div></a>
</div></figure>



<p></p>



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



<p></p>



<figure class="wp-block-embed is-type-wp-embed is-provider-n wp-block-embed-n"><div class="wp-block-embed__wrapper">

<a href="https://read-nonbiri.com/inkscape-3-image-clip" title="ドローソフトInkscape使い方(3)画像の切り抜きトリミング" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="160" height="90" src="https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2024/04/Inkscapeで画像切り抜き-トリミング.png 1366w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドローソフトInkscape使い方(3)画像の切り抜きトリミング</div><div class="blogcard-snippet internal-blogcard-snippet">ドローソフトInkscape使い方 インポートした画像を切り抜く(トリミングする)方法について説明します。クリップとマスクを使用して画像の切り抜きを行います。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://read-nonbiri.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">read-nonbiri.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2024.05.26</div></div></div></div></a>
</div></figure>



<p></p>



<figure class="wp-block-embed is-type-wp-embed is-provider-n wp-block-embed-n"><div class="wp-block-embed__wrapper">

<a href="https://read-nonbiri.com/week-icons-in-inkscape/" title="ドローソフトInkscape使い方(4) 中抜き曜日アイコン作成" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img loading="lazy" decoding="async" width="160" height="90" src="https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/12/曜日アイコン作成例Inkscape.png 1366w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドローソフトInkscape使い方(4) 中抜き曜日アイコン作成</div><div class="blogcard-snippet internal-blogcard-snippet">中抜き曜日アイコンをフリーのドローソフトInkscapeで作る方法例</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://read-nonbiri.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">read-nonbiri.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2024.05.26</div></div></div></div></a>
</div></figure>



<h3 class="wp-block-heading"><span id="toc14">あとがき</span></h3>



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



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



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



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



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



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1024x576.png" alt="ありがとうございました" class="wp-image-5155" srcset="https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-1024x576.png 1024w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-300x169.png 300w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-768x432.png 768w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-120x68.png 120w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-160x90.png 160w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました-320x180.png 320w, https://read-nonbiri.com/wp-content/uploads/2023/10/ありがとうございました.png 1366w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p></p>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://read-nonbiri.com/inkscape-simple-method1/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
