13 620 130 new

絵の描き方やペンタブ情報などをお届け

iPad・iPhoneでアニメーションを作成!アプリ「Folioscope」は操作が簡単

更新日:2022.08.05
Folioscopeでアニメーション制作アイキャッチ

iPadでアニメーションを作りたいけれど、操作が簡単で使いやすいアプリはないかな? iPadやiPhoneでアニメーション制作をお考えの方には、アプリ「Folioscope」がオススメです。

今回は、アニメーション制作アプリ「Folioscope」の機能や使い方をご紹介します。

業界最大手のお絵かき学習サイト!今なら無料お試し実施中

充実の講師・講座数!様々なプロのテクニックをものにして描ける自分になろう!
自宅で好きな時間に自分のペースで学習できるので空いた時間に学べる!
まずは7日間の無料お試しで体験しよう!

詳細はこちら >

業界最大手のお絵かき学習サイト!今なら無料お試し実施中

充実の講師・講座数!様々なプロのテクニックをものにして描ける自分になろう!
自宅で好きな時間に自分のペースで学習できるので空いた時間に学べる!
まずは7日間の無料お試しで体験しよう!

詳細はこちら >

iPad・iPhoneでアニメーションを作成!Folioscopeを紹介

Folioscopeの概要

FolioscopeはiPadやiPhoneで使える無料のアニメーション制作アプリです。 アニメーションの編集画面はシンプルで使いやすく、Apple Pencilを使った描画や3D Touchにも対応しています。

アプリを使用中に一定のタイミングで広告が表示されますが、アプリ内課金をすると広告を削除できます。

Folioscopeのコミュニティサイトも運営されており、他のユーザーの方が作成したアニメーションを閲覧したり、いいね・コメントをつけたりすることができます。

①Folioscopeで一枚絵を描く

※解説例では、iPadを横向きにしてFolioscopeを使用しています。 ツールバー Folioscopeの編集画面では3つのツールバーが設置されています。

描画用のツールバー、アニメーション編集用のツールバー、アンドゥ・リドゥや設定変更をするときに使うツールバーと、それぞれのツールバーで役割が決まっています。

ペンやバケツで絵を描いていく

描画用のボタン 描画用のツールバーには、ブラシ形状の変更・ブラシサイズ変更・ツール切り替え・カラー切り替え・レイヤー操作のボタンが配置されています。

ペンツールやバケツツールなどを使ってキャンバスに絵を描いていきましょう。

Folioscopeでは、下記のツールを使用できます。

  • ペン
  • ピクセルペン
  • 消しゴム
  • バケツ
  • カラースワップ(キャンバスに塗った色を別の色で置き換える機能)
  • 選択
  • パターンバケット(タイリングの機能)
  • 図形

コピーや移動・変形も活用すると制作がスムーズ

選択ツール 選択ツールの使用中には画面上部にコピー&ペーストボタンが表示されます。

同じ物を複数個描く場合などは、コピー&ペーストを活用すると便利です。

他にも、選択した領域の移動・回転・拡大・反転も行えます。

図形を簡単に描く

図形ツール 図形ツールを使用中には、画面左上に形状の変更ボタンが表示されます。

円・楕円・正方形・長方形・直線から図形の形状を選択して、キャンバスに描いていきましょう。解説例では、建物の輪郭線を直線や長方形の図形で描いています。

図形の中を塗りつぶすか、塗りつぶさないかは、画面右上のボタンで切り替えられます。

レイヤー構成を考えて作ろう

Folioscopeでは、全面レイヤーと背面レイヤーの二つのレイヤーが用意されています。

今回の解説例では、アニメーションさせたい物を全面レイヤーに描いて、静止したままの物を背面レイヤーに描いています。

作成したいアニメーションに合わせて、制作をスムーズに進められるレイヤー構成を考えてみてください。

②Folioscopeで描いた絵をアニメーションさせる

2フレーム目を作成する

フレームの複製 絵を描き終えたら、キャンバス内の雲や猫をアニメーションさせる作業に移ります。

最初に描いた1枚の絵を元にして、2フレーム目、3フレーム目……とフレームを作成していきましょう。

画面下部にある「現在のフレームを複製」ボタンを押すと、現在表示しているフレームを複製して2フレーム目を作ることができます。

2フレーム目を白紙のキャンバスから描くようなアニメーションの場合は、「空のフレームを追加」ボタンでフレームを追加していってください。

フレームとは何か?

アニメーション制作では、複数枚の静止画を連続的に表示させることで、キャラクターなどが動いているように見せています。

アニメーションを構成する1枚の静止画のことを、「コマ」や「フレーム」と呼んでいます。

雲を移動させる

雲を移動させる 選択ツールを使用して、2フレーム目の魚型の雲を1フレーム目の位置よりも少しだけ左方向へ移動させます。同様に3フレーム目の魚型の雲も、2フレーム目の位置よりも少しだけ左方向へ移動させます。

この作業を4フレーム目、5フレーム目……と繰り返すことで、魚型の雲が少しずつ動いているように見えます。

前後のフレームの描画内容は、オニオンスキンの機能によって半透明で表示されます。アニメーションを作る際は、前後のフレームの内容を確認しながら作ってみてください。

猫の尻尾を動かす

フレームの移動 猫の尻尾をアニメーションさせる際は形を変える必要があるので、ペンツール・消しゴムツールを使用して尻尾の部分だけを描き直します。2フレーム分の尻尾を描き直して、以降の尻尾を動かしたいフレームにも、コピー&ペーストで描き直した尻尾を複製していきます。

複数枚のフレームが存在する場合は、画面下部のボタンとスライダーからフレームを選択できます。

また、アニメーションの再生ボタンを押すことで、作成したフレームが連続して再生されます。再生ボタンで確認をしながら、アニメーションを作ってみてください。

作成したアニメーションをファイルに出力する

ファイルを出力する

アニメーションが完成したら、プロジェクトの選択画面に戻ってファイル出力のボタンをします。

GIFで出力する

アニメーション 今回は、GIF形式でアニメーションを出力しました。

作成したアニメーションは、Folioscopeのコミュニティサイトで公開することもできます。

他のユーザーの方が作成したアニメーションやチュートリアル動画を見たり、コンテストに参加したりすることもできるので、コミュニティサイトも活用してみてください。

クリスタでチャレンジ!厚塗り風イラスト講座

厚塗りのエッセンスを取り入れた「厚塗り風」イラストの製作工程を実演を交えて解説します。
厚塗りイラストに興味がある方、情報量の多い絵を描きたい方にオススメ!

詳細はこちら >

クリスタでチャレンジ!厚塗り風イラスト講座

厚塗りのエッセンスを取り入れた「厚塗り風」イラストの製作工程を実演を交えて解説します。
厚塗りイラストに興味がある方、情報量の多い絵を描きたい方にオススメ!

詳細はこちら >

まとめ

iPad・iPhoneでアニメーションが作成できる「Folioscope」の紹介でした。Folioscopeは操作が簡単で、アニメーションを素早く作ることができます。 アニメーション制作に挑戦してみたい方は、ぜひFolioscopeをダウンロードしてみてください。

関連講座

キャラクターの顔と立ち絵を描いて、描き方の基本を学ぼう!

イラスト制作の基礎「顔・表情」「身体」「ポーズ」「着色・カラーリング」を
はじめて絵を描く人にもわかりやすく解説します!
\ 7日間の無料お試し実施中 /

詳細はこちら >

写真から骨格を理解して、全身イラストのレベルをアップさせよう!

写真さえあれば学べるので、全くの絵の初心者でも安心♪
体の側面、腕や足の向きなどを見つけて、「身体が描けない」を卒業しよう!
今なら無料お試し実施中です。

詳細はこちら >

パースのついた美しい背景イラストを描いてみよう!

【先生特製のブラシがDLできる!】
「ざっくりとそれっぽく見える」テクニックで、初心者でも安心して背景イラストへの第一歩を踏み出せます!
今なら無料お試し実施中!!

詳細はこちら >

「影の色選び」を中心に、配色の基礎知識をサクッと学ぼう♪

NG例・OK例を参考に、実践用の課題ファイルを使ってイケてる配色に挑戦してみよう!
今なら無料お試し実施中!!

詳細はこちら >

この記事に関連するページ

記事の先頭に
もどる
記事の先頭にもどる
22 620 174

×