<?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>イラスト | ふじこLife</title>
	<atom:link href="https://fujicolife.com/tag/%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88/feed/" rel="self" type="application/rss+xml" />
	<link>https://fujicolife.com</link>
	<description>平凡な主婦による日々の記録。</description>
	<lastBuildDate>Fri, 30 Aug 2024 20:44:52 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://fujicolife.com/wp-content/uploads/2023/08/cropped-91bfe02ace532bee28130dd052a8541e-32x32.png</url>
	<title>イラスト | ふじこLife</title>
	<link>https://fujicolife.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【Procreate】簡単！GIFアニメーションの作り方</title>
		<link>https://fujicolife.com/procreate-gif-animation/</link>
		
		<dc:creator><![CDATA[ふじこ]]></dc:creator>
		<pubDate>Fri, 30 Aug 2024 12:37:58 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[イラスト]]></category>
		<category><![CDATA[ブログ運営]]></category>
		<guid isPermaLink="false">https://fujicolife.com/?p=2656</guid>

					<description><![CDATA[サイトのトップページで使用しているこのイラストたち。 ＼　あれや、／ ＼　これなど。　／ 私が描いたのですが実はこれ、簡単にGIFアニメーションにできちゃうんです！ iPadのアプリ「Procreate」を使用してイラス [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>サイトのトップページで使用しているこのイラストたち。</p>



<p class="has-text-align-center is-style-bottom-margin-0em has-bottom-margin"><span class="fz-12px">＼　あれや、／</span></p>



<figure class="wp-block-image aligncenter size-full is-resized is-style-bottom-margin-3em has-bottom-margin"><img fetchpriority="high" decoding="async" width="410" height="697" src="https://fujicolife.com/wp-content/uploads/2024/08/803d536f76556413b1a4ea01c7b324d0.gif" alt="" class="wp-image-2481" style="width:92px;height:auto"/></figure>



<p class="has-text-align-center is-style-bottom-margin-0em has-bottom-margin"><span class="fz-12px">＼　これなど。　／</span></p>



<figure class="wp-block-image aligncenter size-full is-resized"><img decoding="async" width="723" height="568" src="https://fujicolife.com/wp-content/uploads/2024/08/e2fe57c52f38152fe79204abd8385e62.gif" alt="" class="wp-image-2472" style="width:150px;height:auto"/></figure>



<p>私が描いたのですが実はこれ、簡単に<strong><span class="bold-red">GIFアニメーション</span></strong>にできちゃうんです！</p>



<p>iPadのアプリ「<strong><span class="fz-20px"><span class="marker-under">Procreate</span></span></strong>」を使用してイラストを描いているので、今回はこの「Procreate」を使ってできる簡単アニメーションの作り方をご紹介します。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><div class="toc-title">目次</div>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">「Procreate」とは？</a></li><li><a href="#toc2" tabindex="0">さっそくイラストを描いてみよう！</a><ol><li><a href="#toc3" tabindex="0">新規キャンバスを選択する</a></li><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">イラストを保存する</a></li></ol></li><li><a href="#toc10" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">「Procreate」とは？</span></h2>



<p>こちらはiPad専用のイラストアプリ。買い切り¥2,000（2024年8月現在）の有料アプリですが、デジタルイラストが好きな方は持っていて損はないです！</p>



<p>様々なブラシや機能も満載で、イラストはもちろん今回のテーマでもあるアニメーションを作成できたりと、できることはかなりあります。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://fujicolife.com/wp-content/uploads/2023/08/IMG_2543-150x150.jpg" alt="ふじこ" class="speech-icon-image"/></figure><div class="speech-name">ふじこ</div></div><div class="speech-balloon">
<p>私は今水彩画タッチのイラストを描くのにハマってます。</p>
</div></div>



<p>私自身もまだまだ使いこなせていない部分は多々ありますが、書籍やYouTubeなどでも基本的な使い方は紹介されているので、デジタルイラストを描いたことがない！という方でもすぐに始めることができますよ。</p>



<h2 class="wp-block-heading"><span id="toc2">さっそくイラストを描いてみよう！</span></h2>



<p>それでは本題のアニメーション作りへ。まずはキャンバスの設定から。</p>



<h3 class="wp-block-heading"><span id="toc3">新規キャンバスを選択する</span></h3>



<figure class="wp-block-image size-large"><img decoding="async" width="1000" height="750" src="https://fujicolife.com/wp-content/uploads/2024/08/a35418cb6b064fe62135f2cbe06c0fe3-1000x750.jpg" alt="" class="wp-image-2657" srcset="https://fujicolife.com/wp-content/uploads/2024/08/a35418cb6b064fe62135f2cbe06c0fe3-1000x750.jpg 1000w, https://fujicolife.com/wp-content/uploads/2024/08/a35418cb6b064fe62135f2cbe06c0fe3.jpg 2048w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><span class="marker-under">右上にある「＋」マークをタップするとイラストを描くためのキャンバスサイズを選択</span>できます。</p>



<p>お好きなサイズで構いませんが、用途などが決まっている場合はそのサイズに合わせてキャンバスサイズを指定しましょう。</p>



<h3 class="wp-block-heading"><span id="toc4">アニメーションアシストの設定</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1000" height="750" src="https://fujicolife.com/wp-content/uploads/2024/08/27d7fcf2389d779559f86bb1b2dd66e8-1000x750.jpg" alt="" class="wp-image-2659" srcset="https://fujicolife.com/wp-content/uploads/2024/08/27d7fcf2389d779559f86bb1b2dd66e8-1000x750.jpg 1000w, https://fujicolife.com/wp-content/uploads/2024/08/27d7fcf2389d779559f86bb1b2dd66e8.jpg 2048w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p>キャンバスを開いたら、</p>



<ul class="wp-block-list is-style-border-radius-l-solid has-border is-style-numeric-list-enclosed has-list-style">
<li>左上にある「アクション」マークをタップ<br></li>



<li>「アクション」項目から「キャンバス」をタップ<br></li>



<li>「アニメーションアシスト」をオンにする</li>
</ul>



<p>これで下の部分に「再生」「設定」「フレームを追加」というボタンがあるバーが出現します。このバーでアニメーションの動きを確認できるようになります。</p>



<h3 class="wp-block-heading"><span id="toc5">ベースとなるイラストを描く</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1000" height="750" src="https://fujicolife.com/wp-content/uploads/2024/08/32e8355b13bae2a227dd81e242e9cb07-1000x750.jpg" alt="" class="wp-image-2660" srcset="https://fujicolife.com/wp-content/uploads/2024/08/32e8355b13bae2a227dd81e242e9cb07-1000x750.jpg 1000w, https://fujicolife.com/wp-content/uploads/2024/08/32e8355b13bae2a227dd81e242e9cb07.jpg 2048w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p>キャンバスの設定ができたら、さっそくイラストを描いていくっ！</p>



<p>今回は簡単に線画のイラストにしていますが、もちろん色を塗ったりすることも可能なのでお好きなイラストを描いてみましょう。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://fujicolife.com/wp-content/uploads/2024/04/IMG_2659.png" alt="ふじこ" class="speech-icon-image"/></figure><div class="speech-name">ふじこ</div></div><div class="speech-balloon">
<p>初めてアプリを触る方は色々自分でタップしてみて操作の感覚を掴んでね</p>
</div></div>



<h3 class="wp-block-heading"><span id="toc6">フレームを追加する</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1000" height="750" src="https://fujicolife.com/wp-content/uploads/2024/08/b8588f7308c9bf399cc60a51f99b62ee-1000x750.jpg" alt="" class="wp-image-2661" srcset="https://fujicolife.com/wp-content/uploads/2024/08/b8588f7308c9bf399cc60a51f99b62ee-1000x750.jpg 1000w, https://fujicolife.com/wp-content/uploads/2024/08/b8588f7308c9bf399cc60a51f99b62ee.jpg 2048w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p>ベースのイラストが描けたら、お次は２コマ目のイラストを描くためのフレームを追加します。</p>



<p>右上の<span class="marker-under">「レイヤー」選択→「＋」ボタンで新規レイヤー追加</span>ができます。</p>



<p>もしくは先ほどアニメーションアシスト設定で出てきた下のバーにある<span class="marker-under">「フレームを追加」</span>でもオッケー。<br><span class="fz-14px">※こちらは連動しているのでどちらでも可</span></p>



<p>１枚目のイラストが透けて見えるのでそのまま線をなぞってもいいし、どのように動かしたいかを考えながら描いていきましょう。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1000" height="750" src="https://fujicolife.com/wp-content/uploads/2024/08/4e95e89b9ee755c68cae5d2f7ff5eb79-1000x750.jpg" alt="" class="wp-image-2662" srcset="https://fujicolife.com/wp-content/uploads/2024/08/4e95e89b9ee755c68cae5d2f7ff5eb79-1000x750.jpg 1000w, https://fujicolife.com/wp-content/uploads/2024/08/4e95e89b9ee755c68cae5d2f7ff5eb79.jpg 2048w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p>そして出来上がった２枚目のイラストがこちら。</p>



<p>しゃがんでベーっと舌を出したおちゃらけた表情にチェンジ。ちょっとだけ髪をなびかせたり微調整はしていますがそこまで大幅には変えず。</p>



<p>この要領でフレームを追加し、変化をつけたイラストをどんどん描いていきます。</p>



<h3 class="wp-block-heading"><span id="toc7">アニメーションを再生してみる</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1000" height="750" src="https://fujicolife.com/wp-content/uploads/2024/08/d4ee1c721f373487aec1b897d2d6f076-1000x750.jpg" alt="" class="wp-image-2663" srcset="https://fujicolife.com/wp-content/uploads/2024/08/d4ee1c721f373487aec1b897d2d6f076-1000x750.jpg 1000w, https://fujicolife.com/wp-content/uploads/2024/08/d4ee1c721f373487aec1b897d2d6f076.jpg 2048w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p>イラストを描き終えたら、アニメーションで動くかチェックしてみましょう！</p>



<ul class="wp-block-list is-style-border-radius-l-solid has-border is-style-numeric-list-enclosed has-list-style">
<li>「設定」を開く<br></li>



<li>「ループ」にチェック<br></li>



<li>「フレーム/秒」で好みのスピードに変更</li>
</ul>



<p>今回私は２コマのみなので「ループ」にしましたが、再生の動きには<span class="marker-under">３種類</span>あるのでお好きな動きで動かしてみましょう。</p>



<ol class="wp-block-list has-medium-font-size is-style-icon-list-check-valid has-list-style">
<li><strong><span class="fz-20px">ループ</span></strong><br><span class="fz-16px">フレームを最初から最後まで再生し繰り返します。</span></li>



<li><strong>ピンポン</strong><br><span class="fz-16px">フレームを最初から最後まで再生→最後から最初まで再生を繰り返します。</span></li>



<li><strong>ワンショット</strong><br><span class="fz-16px">フレームを最初から最後まで1回再生し停止します。</span></li>
</ol>



<h3 class="wp-block-heading"><span id="toc8">イラストを透過させる</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1000" height="750" src="https://fujicolife.com/wp-content/uploads/2024/08/73113257192a819a4a25c7bffa413dd5-1000x750.jpg" alt="" class="wp-image-2665" srcset="https://fujicolife.com/wp-content/uploads/2024/08/73113257192a819a4a25c7bffa413dd5-1000x750.jpg 1000w, https://fujicolife.com/wp-content/uploads/2024/08/73113257192a819a4a25c7bffa413dd5.jpg 2048w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p>「レイヤー」を選択すると、一番下に「背景色」というレイヤーがあるので、そこのチェックを外すと線だけになり周りは透過されます。</p>



<p>※最初のキャンバスサイズ設定時に背景色を無くす項目もありますが、イラストを描くのに白の背景があった方が描きやすいと思うので、イラストが完成した時点でチェックを外すことをおすすめします。</p>



<h3 class="wp-block-heading"><span id="toc9">イラストを保存する</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1000" height="750" src="https://fujicolife.com/wp-content/uploads/2024/08/1dce287e935471e98ee6d2f651eb8529-1000x750.jpg" alt="" class="wp-image-2666" srcset="https://fujicolife.com/wp-content/uploads/2024/08/1dce287e935471e98ee6d2f651eb8529-1000x750.jpg 1000w, https://fujicolife.com/wp-content/uploads/2024/08/1dce287e935471e98ee6d2f651eb8529.jpg 2048w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p>それではいよいよ描いたイラストを保存していきましょう！</p>



<ul class="wp-block-list is-style-border-radius-l-solid has-border is-style-numeric-list-enclosed has-list-style">
<li>「アクション」を開く<br></li>



<li>「共有」をタップ<br></li>



<li>「アニメーションGIF」を選択</li>
</ul>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1000" height="750" src="https://fujicolife.com/wp-content/uploads/2024/08/a49b88506c33f33e00b0d72e1f219333-1000x750.jpg" alt="" class="wp-image-2667" srcset="https://fujicolife.com/wp-content/uploads/2024/08/a49b88506c33f33e00b0d72e1f219333-1000x750.jpg 1000w, https://fujicolife.com/wp-content/uploads/2024/08/a49b88506c33f33e00b0d72e1f219333.jpg 2048w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p>この画面では「アニメーションGIFの細かい設定が可能」と記載していますが、私はほぼいじってません！<br>いじるとすれば「フレーム/秒」でコマの動く速さを調節したり。一応の今回の設定としては、</p>



<ul class="wp-block-list is-style-border-radius-l-solid has-border is-style-icon-list-check has-list-style">
<li>最大解像度</li>



<li>フレーム/秒：２</li>



<li>ディザ合成：チェックあり</li>



<li>フレームごとのカラーパレット：チェックなし</li>



<li>透明な背景：チェックあり</li>



<li>アルファのしきい値：38％</li>
</ul>



<p>このような設定で保存。</p>



<p>設定が完了すれば右上の「書き出し」ボタンでGIFを保存するだけ！</p>



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



<p>今回、ipadのイラストアプリ「Procreate」を使ったGIFアニメーションの作り方をご紹介しました。</p>



<p>イラストなんて描いたことがないよ…って方でも、まずは棒人間とかを描いて動かしてみるのも楽しいですよ！</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://fujicolife.com/wp-content/uploads/2023/08/IMG_2543-150x150.jpg" alt="ふじこ" class="speech-icon-image"/></figure><div class="speech-name">ふじこ</div></div><div class="speech-balloon">
<p>昔教科書の角にパラパラ漫画みたく落書きしてたなあ</p>
</div></div>



<p>ぜひ自分だけのGIFアニメーションを作ってみて下さいね。</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
