作ってみたの記事一覧

コミPo!で動画コンテスト入賞

動画コンテストに投稿したら
「とっても分かりやすいで賞」を受賞し、賞金5,000円頂きました。

※動画チャンネルは普段のものと違いますが、作者は私です。
目的別にチャンネルを複数作ってます。

ついつい、うれしくて昨夜つぶやいてしまいました。\(▽~\*))((*/~▽)/

ほとんどリツイートされてませんけどねww

私はコミPo!で漫画・動画を作成しています。


このブログ(漫画アニメ.com)で何度も書いてますが、
普段からコミPo!という漫画作成ツールを作っています。

メインサイトは得する情報.comというブログ↓です。
得する情報.com
得する情報への画像リンク


ニュースやお得な情報を、漫画でわかりやすく作っています。

コミポを利用する理由はただ一つ「わかりやすいから」

コミPo!の魅力を漫画で説明_001 文章でブログを書いていても、
なんとなくわかりにくい・読みにくい気がしませんか?

このブログのように、字が小さいとか。(笑)

あなたにも経験がありませんか?
  • 読みにくいブログ
  • 文字ばっかりのブログ

そんな時、ブログの訪問者は、
ほとんど読まずに帰ってしまいます。


たとえ、お得な情報が書いてあってもです。

漫画で書くと読まれやすく、わかりやすい

コミPo!で漫画を描く理由_002 漫画で話の流れを書くと、わかりやすいですよね。

私の場合は、さらにその漫画をYouTube動画として、
声や音楽を入れて投稿しています。

※作る時の所要時間が2時間以上かかりますが、
わかりやすくがモットーです。

これが今回、動画コンテストに入賞した秘訣だと思います。

賞の名前(とっても分かりやすいで賞)からも、
私のモットー(読みやすい、分かりやすい)が証明されたのだと思います。

コミPo!, 作ってみた, 漫画アニメ

動かす漫画_001

動かす漫画_001私は主に、2つのアニメーションソフトを使っています。

  • 漫画作成ツールコミPo!
  • 2Dアニメーション作成ツールCrazyTalk Animator
どちらも、3Dキャラを動かして画像を作成するソフトです。

コミPo!とCrazyTalk Animatorは何が違うのか


根本的に違うのは、
人が見た時に動きがあるかどうかです。

コミPo!の場合

漫画作成ツールなので、
漫画を作るのが一般的な使い方です。
新生活でお金がない
主に静止画ですが、gifアニメも作れます。


コミPo!は、そのままtwitterに投稿できますので便利です。

CrazyTalk Animatorの場合

動きのあるアニメーション・動画が一般的です。
test
基本的に、gifアニメ(ソーシャル投稿なし)か動画です。
動画は、いつもYouTubeに投稿しています。


ここで、ある考えが生まれました。
それは、「コミポ漫画を、動画に出来ないのか?」ということです。

コミポをYouTubeで動かすには?

動かす方法としては、二種類あります。

一つ目の方法は、漫画のコマ割を表示させる方法です。

windowsムービーメーカーでスライドショー

mihon
いつもこのパターンで作っています。
ありきたりなスライドショーです。

コミPo!+ムービーメーカーで作成した動画がコンテストで入賞しました
げん玉動画コンテストで受賞!コミPo!動画が採用された秘訣とは?

スライドショーでは、ちょっと物足りません。
しかも、結構時間がかかります。(1~2時間ほど)

そこで、2つ目の方法です。

CrazyTalk Animatorで動かす

早速作成してみました。


コミックを読むような動きで作れるのが特徴です。
動きがあるだけで、ちょっと変わった動画が作れます。

これならちょっと楽に作れる気がします。

CrazyTalk Animator 2, gifアニメ作り方, コミPo!, 作ってみた

CrazyTalk Animator 2は、簡単にgifアニメや動画形式で、
2dアニメを作ることができます。

出力の際に注意したいのが、画面の大きさです。

画面(画像)が小さいほど、
youtubeやtiwtter、vineでアップした時に画質が悪くなります。


画質が悪くなる理由は、「twitter投稿のgifアニメ画像が粗い理由と対処」で紹介しています。

今回は、CrazyTalk Animator 2での出力するときの注意事項をご紹介します。


動画はmp4形式HD1080pでエクスポート

動画エクスポートの設定数値
デフォルトでは、wmp形式のHD720pになっています。
形式はともあれ、これでは画像の大きさがちょっと小さいかもしれません。

案の定汚くなってしまいます。


mp4形式でもyoutubeには投稿できました。


ギザギザがとれ、綺麗になっています。


CrazyTalk Animator 2は1枚ずつ画像を出力するので時間がかかる

エクスポートのレンダリング
動画変換には時間が必要です。
画像のようにレンダリングという処理をしています。


あらかじめ時間に余裕を持ちましょう。

また出力前には、タイムラインで動画の終点を設定しなくてはいけません。
タイムライン区切り
設定をし忘れると、膨大な画像になりますので時間がものすごくかかります。


gifアニメの出力はCrazyTalk Animator 2使い方動画を日本語翻訳してみたをご覧ください。

CrazyTalk Animator 2, gifアニメ作り方, 作ってみた, 漫画アニメ

CrazyTalk Animator 2ロゴキャプチャ

CrazyTalk Animator 2ロゴキャプチャ
2D動画を簡単に作ることが出来るCrazyTalk Animator 2を購入しました。

CrazyTalk Animator 2は、
2Dキャラをマウスで動かしながら操作する動画作成ツールです。
youtubeなどの動画形式だけでなく、gifアニメとしても出力できるので便利です。

実際に作ったgifアニメ↓
testアニメ2
コミポの動画作成版のようなもの(ちょっと違う?)
日本で流行っているキャラミンのようなものです。


買って使おうと思ったら、
動画マニュアルは英語版しかありませんでした。

CrazyTalk Animatorの日本語マニュアルもありますが、
少しわかりにくいので、自分なりに翻訳し備忘録として残します。


今回見ながら作成した動画


※youtubeには翻訳機能がありますが、日本語訳が正しく表示されません。
試したい方はこの記事をご覧ください→youtubeの他国語音声を字幕表示し翻訳する方法


CrazyTalk Animator 2の起動画面

起動画面
コミポを使っている人ならわかりますが、

すでに作られたデータを、マウスのドラッグ(またはダブルクリック)で動かして動画を作ります。

誰でも簡単操作で組み立てることができます。
だから買ったんです(笑)


始めから使えるデータ、バリエーションは少ないですが、
追加購入することができます。

  • 動かすキャラクター
  • 背景
  • 動き(アニメモーション)
  • その他アクセサリー(文字やふきだし、小物など)

では、動画マニュアルの通りに作っていきます。

まずはシーン(背景)を設定

オフィスシーンを配置
左のシーンをマウスで移動する(もしくはダブルクリック)で表示されます。

拡大縮小は、マウスの真ん中のぐりぐり(ホイール)を動かすとできます。


CrazyTalk Animatorは、3Dデータで作られている

3Dデータ表示
シーンといっても、実は全部バラバラの3Dパーツです。
特に壁や天井を動かす時は、複数を選択して動かす必要があります。

複数を選択する2つの方法
  • 少ない場合・・・ctrl+マウスで複数を選択
  • すべてのアイテム・・・altで一括選択

※用意されたシーンだけでなくご自身の画像や写真・動画を背景にする事もできます。


アイテムの表示・非表示はシーンマネージャーで行える

シーンマネージャー
いらないアイテムや、編集時に邪魔なアイテムがあるかもしれません。

そんな時は、右下のシーンマネージャーを使うと便利です。


2Dキャラクターを配置

キャラクターを配置
アクターという表示の中に、キャラクターがあります。
移動すると、ポーズを決めることができます。


※動画では3Dモーションを使っていますが、
スタンダードには2Dモーションしかありません。

3Dモーションを使う時は、プロ版を購入する必要があります。
スタンダード5000円(今回購入したソフト)
プロ版15000円(値段が3倍)


2Dモーションでも、ある程度の表現は出来ます。
2Dモーションエディタ 上の画像では、右のキャラの手と足を動かして、蹴りポーズを作りました。

2Dモーションで座った場合 ※2Dモーションで座ったイメージも作れる。

個人で使うなら、スタンダードで問題ないと思います。


キャラに動き(2Dアニメーション)をつける

テストgifアニメ ※バックの画像が変な風に動いてますが、気にしないでください。
途中で変な風に触ったので

動かすキャラを選択しアニメーションダブルクリック

アニメーションをつける
左向きに歩くのであれば、左向きのモーションを選びます。
穂のほかにも右向き、前向き、後ろ向きとあります。


動く位置までドラッグでキャラクターを移動

スクリーンショット 2014-12-27 16.17.38
マウスで動かすだけなので、覚えることはほとんどありません。

動作をつけたらエクスポート

エクスポートでgifアニメに変換
設定状況
  • 形式:gif
  • エクスポート範囲:指定
  • ループオプション:無限
3D立体視はチェックをしなくてもOKです。
チェックを入れると左右に2枚表示されます。

CrazyTalk Animator 2, gifアニメ作り方, 作ってみた, 漫画アニメ

画像の出力順番

コミPo!が4周年記念で大幅グレードアップしました。
なんと、gifアニメと動画対応の自動生成に対応しました。

単体では普通なんですが凄いのは、
コミポから直接twitteにgifアニメを投稿できる機能です。

「twitterのgif画像が汚い!」と思ったら


↓投稿当日一番リツイートされたgifアニメ


これからは、コミPo!さえ使えば、gifアニメ作成ツールは不要です。
※コミポには、他のソフトで作った画像や写真も取り込めます。

それ以外にも京町セイカもグレードアップ!
衣装の幅が増えました。

京町セイカの全衣装がこちら↓


今回は、
コミPo!4周年記念でグレードアップされた
gifアニメツイート機能と作成方法をご紹介します。



コミPo!とは?


まずは、コミPo!を知らない方にご紹介します。
3D画像の人形をマウスで動かすだけで、漫画が作れるツールです。
コミポを漫画で説明_001

当サイト(漫画アニメ.com)でも使ってますし、
他のサイトでも使っています。
(漫画だと表現が豊かになるので読みやすくなります)


公式PV↓

公式サイト→http://www.comipo.com/
※無料で使えるお試しソフトもあります(ツイート機能なし)

一番の利点は、ポーズがあらかじめ用意されているので、
1枚の絵なら1~2分で作れるということです。
コミポポーズ一覧
しかも、全体のカメラワークや顔や手などの角度も、
自由自在に動かせるのでさまざまな表現ができます。


コミPo!は組み合わせるだけでオリジナルキャラが作れる


あらかじめキャラクターが作ってありますが、
選択するだけで、自由に作成可能です。

コミポキャラクター作成 ↑髪、目、顔、服、色、アクセサリーなど、幅が多い。


コミPo!のgifアニメ作成方法は簡単です


レイアウトの順番にgifアニメに自動変換してくれます。
作成手順を踏まえて、ご紹介します。

ページテンプレートを選択

ページテンプレート選択 すべてのテンプレートで作ることが出来ます。


漫画を作る

画像の出力順番 ※画像にある赤数字の順番で出力されます。

gifアニメ出力順番の補足

どうやらコマの形式によって、出力順番が変わるようです。
よく確かめて作ったほうが、良いかもしれません。
2014/12/23追記

やや大きいマスを使ったら、順番が違いました。
gifアニメ出力順番_002


画像形式と秒数をセットしてツイートボタンをおすだけ

コミポの漫画でツイートgifアニメ設定画面 ※秒数設定は、投稿前にプレビュー機能で確かめながら調整可能です。


gifアニメが作成される順番は「ツイート」と「動画ファイル出力」では違うので注意


ツイッターに投稿する場合には、コマ単位で生成してくれます。(プレビュー機能あり)
一方動画ファイル出力の場合は、ページ単位で生成されます。


作成方法は、間違えないようにご注意ください。

gifアニメ版ツイッター投稿機能の場合

テンプレートの「マス(レイヤーリスト)」の順番
gifアニメ自動生成の順番 コマ1→コマ2→コマ3→・・・の順番で作成されます。



動画ファイル出力(gifアニメとAVI対応動画に対応)の場合

素材リスト(漫画ページ)の順番に出力されます。
素材リストの出力順序

動画ファイル出力でgifアニメを作る方法


ちょっと面倒ですが、このような配列がベターかと思います。
※ページ複製機能を使うと、少しずつ画像を動かせるので楽に作業できます。
動画ファイル出力で作った画像
動画ファイル出力で作ったgifアニメ↓
出力テスト

ニパ子プロフィール+公式サイト紹介

「ところでこの子だれ?」という方も多い?かもしれませんのでご紹介します。
ニパ子プロフィール_002 ニッパーが好きなニパ子ちゃんです。

コミポを持っている人なら、すぐ利用できます。
詳細は公式サイトをご覧ください→http://www.28ko.jp/

gifアニメ作り方, 作ってみた, 漫画アニメ

自作したコミポ柄クレジットカード

自作したコミポ柄クレジットカード
漫画やアニメのキャラクターとタイアップをした
クレジットカードやデビットカードが数多く出てきています。

ですが、すべてのキャラがカードになることはありません。

  • お気に入りのキャラクターが出ない
  • あのコスチュームのカードが欲しい
  • イメージが違う
そんな時は、「何ででないの?」と嘆く前に、
自作しちゃいましょう。

カード画像とキャラクター画像、それにphotoshopさえあれば、
どんなカードもオリジナルで簡単に作ることが出来ます。
※ここでは作り方をご提供していますが、
 すべてご自身の責任で作成・管理・利用を行ってください。


ここではオリジナルのキャラクターカードの作り方をご紹介します。
動画版もご覧ください。

カード画像は写メで十分

楽天デビット白
画像はご自身が所持しているカードを、
カメラ付きスマホや携帯で撮影して使えばOKです。

注意しなくてはいけないのが、
社名や番号など重要な部分をあらかじめ消すことです。

※もし修正せずにネット上にアップしてしまえば、悪用されますのでご注意ください。


カメラの映りが悪いときはphotoshopの明るさ・コントラストで調整

pohotosho明るさコントラスト調整
イメージ→色調補正→明るさ・コントラストで調整
ここで調整すれば写真写りの明るさが調整できますのでお試しください。

調整後↓
photoshop明るさ調整ねじ

カード画像の編集方法

photoshop200倍画像
まずphotoshopに画像を入れたら、100~200倍に拡大しましょう。
小さな画面を見るよりも作業がしやすいです。

photoshopスポット修復ブラシツール

不要な文字や数字を消去する

photoshopの左にある「スポット修復ブラシツール」を使えば、
塗りつぶすだけで簡単に消すことができます。

photosopコンテンツに応じる設定 スポット修復ブラシツールは、「コンテンツに応じる」に設定しておきましょう

「クイック選択ツール」を使用して文字複製

photoshopクイック選択ツール クイック選択ツールの使い方 クイック選択ツールの使い方は、3ステップです
  1. コピーしたい画像を選択
  2. 右クリック後、「選択範囲をレイヤーにコピーする」
  3. 移動ツールで特定位置まで持っていく

ぼかしを入れて自然な画像に仕上げる

移動後の画像 そのままコピーレイヤーを移動すると、
数字が鮮明すぎて違和感があります。

その場合は「ぼかし」を利用して、自然な画像になるように調整します。
フォトショップぼかしを入れる方法
フィルター→ぼかし→ぼかし(ガウス)

ぼかしを入れるときは拡大するよりも、
元の画像サイズで調整したほうが、合わせやすいはずです。


不要な部分を消して、それらしい数字を入れる際の注意点

comipocard無地
これで下地ができましたが、
そのまま画像を入れると、キャラクターと文字がかぶります。

キャラクターを乗せたクレジットカード
あらかじめ別のレイヤーに入れる必要があります。

数字や文字を別レイヤーにコピーし、結合でまとめる

数字を別レイヤーに保存
やり方は深く考える必要はありません。
※面倒ですが
  1. 「クイック選択ツール」を使用して文字複製し
  2. 「レイヤーを結合」でひとつにまとめると楽に管理できます。

これで下地が完成しました。
クレカ数字なし

キャラクターをカード上に配置

comipocard3
キャラクターは、背景なし画像を「png形式」で保存しましょう。
上記画像のように透過してくれます。

この時にキャラクターの色が鮮明すぎるので、
ノイズを加えます。

photoshopノイズ機能の使い方

フォトショップノイズの使い方
フィルター→ノイズ→ノイズを加える

この手順で自動でノイズが入りますのが、
濃いと思いますので調整しましょう。

ノイズの調整方法
「量」の部分をつまみで調整しても問題ありません。

元画像を見ながら、調整出来るので便利ですね。

調整した画像がこちら↓
ノイズを入れた後のクレカ
擦り切れた感じを出せているかと思います。

さらにぼかしを入れて自然な画像に調整

ぼかし後のカード画像
ぼかしを入れると、さらに自然な画像に仕上がります。

ぼかしを入れる手順
フィルター→ぼかし→ぼかし(ガウス)

この時にVISAのマークや、数字を基準に調整すると
いい感じに仕上がるかと思います。

最後に数字レイヤーを被せれば、オリジナルカードが完成です

comipocard完成画像
いかがでしょうか?
やり方は簡単ですが、面倒かもしれませんね。

ここではデビットカードを使ってますが、
トレーディングカードなどを使う事もできそうです。

ただし、カードにもキャラクターにも著作権があります。
むやみに使うのはやめましょう。

当方では責任が一切持てませんのであらかじめご了承ください。

photoshop, コミPo!, 作ってみた, 漫画アニメ

走るずんこ_023

ボーカロイドの東北3姉妹をご存知ですか?
走るずんこ_023

東北3姉妹とは
  • 東北ずん子(次女)→東北の郷土菓子ずんだ餅生まれ
  • 東北イタコ(長女)→恐山の口寄せイタコ生まれ
  • 東北きりたん(三女)→粳米(うるち米)で有名なきりたんぽ鍋生まれ
東北ならではのキャラクターであり、
いずれも東北おこしとして起用してもらいたい願いでデビューしました。

東北企業なら、販促にこの東北3姉妹のキャラクターを
ガンガン使ってもいいということで、人気急上昇中です。



製作費用は今流行のクラウドファンディング


いずれのキャラクターも
クラウドファンディングという、
ネット上での資金調達(小規模キャピタルベンチャーのような仕組み)を利用して作られています。
こんな感じで広まりました↓


参加者は、見返りに後々サービスを受けたり、商品をもらうことが出来る権利を得ます。
もう終わってますが、こんな感じです↓



東北3姉妹のボカロは安い!


ボーカロイド(ボカロ)の相場はおおむね
  • 読み上げソフトVOICEROID+→10,000円~8000円ですが、東北ずん子が7000円と最安値
  • 歌うVOICEROID3→14,000円~8000円ですが、東北ずん子がこちらも7000円と最安値
東北イタコと東北きりたんも「同じ位の値段になる」と期待。

東北3姉妹の声優は?


東北出身のこの三名方です。
  • 東北ずん子の声優は、佐藤聡美さん
  • 東北きりたんの声優は、茜屋日海夏さん
  • 東北イタコの声優は、木戸衣吹さん

いずれも出身地が東北だから選んだということらしいので驚きです。
九州でも出さないかな~と思いつつ、これで東北3姉妹のご紹介をおわります。

「とうほくさんしまい」と入力すると、「東北産姉妹」と出るのは私だけ?

VOCALOID, コミPo!, 作ってみた, 漫画アニメ

東北ずん子和服データの使い方_001

#ずんだチャレンジというイベントをやっていたので、コミPo!で作ってみました。


#ずんだチャレンジとは、
「アイス・バケツ・チャレンジ」のパクリ?で、
  • ずんだ餅を食べる
  • 500円を寄付する
  • 東北ずん子を描く
この3つのいずれかを選ばなくてはいけない指名ゲームである。


東北ずん子のイラスト/3Dデータ(http://zunko.jp/con_illust.html)で配布されてるデータを使って作成しています。

前回利用したときは、髪の部分だけでしたが、
着物とずんだアローのデータも配布されています。
前回:

この機会に使ってみてはいかがでしょうか?


ただ使い方が若干ややこしくなっていますので注意してください。


東北ずん子データ使用時に注意する点


  • 着物の装着は、ポーズによって変更する
  • 髪の装着は頭上アイテムでセット
  • 着物の装着は机上アイテムでセットする

ではこれらに注意して使い方を説明します。


東北ずん子和服データの使い方


1.まずは和服データをダウンロード

東北ずん子のイラスト/3Dデータ(http://zunko.jp/con_illust.html)

解凍すると、こんなファイルが入ってます。

東北ずん子ダウンロードファイル中身

使うのは3DデータだけでOKです。
  • ズンダアロー.csu
  • 東北ずん子(衣装).csuが1~195
東北ずん子(衣装).csuの番号は、ポーズが決まっています。

HowToUse.jpgの001~005を参照して、どんなポーズで使うのかを決めます。
東北ずん子和服ポーズ一覧

2.ポーズを決める


今回は48.両手で握手を作ってみます。
東北ずん子両手で握手のポーズ

3.東北ずん子の原型を作る



東北ずん子のデータを始めて使う人は、
水着着用+坊主頭を準備します。
東北ずん子基本データ作成
  1. 服装⇒水着の06ライム
  2. 瞳の色⇒緑
  3. 髪型⇒坊主
基本はこのキャラを中心に使っていきます。


4.東北ずん子のポーズをつける


最初に選んだポーズをつけます。

ポーズが違うと、和服はずれますので注意をしましょう。
東北ずん子両手で握手

5.ポーズと同じ和服データをコミPo!本体にドラッグ&ドロー


前回髪を入れている人は、
マウスでデータを移動するだけでOKです。(フォルダーも指定されます)
東北ずん子データドラッグ&ドローする方法

ユーザー3Dデータ読み込みは登録するカテゴリを選べる


同じ東北ずん子データとして、カテゴリを選んでもいいと思います。
東北ずん子和服データ確認 ※カテゴリはご自身でお選びください。

6.実行を押した後は一回削除する


ドラッグ&ドローで入れても着ることは出来ません。
東北ずん子ドラッグ&ドロー後
まずは、そのまま消してしまってください。

7.和服を机上アイテムで装着する

東北ずん子和服着用机上データの出し方
  1. キャラのパーツ変更(メガネアイコン)
  2. 顔・身体の追加パーツの机上アイテムを選択
  3. 和服データをプッシュ
この順序で操作をすれば、そのまま自動的に着用してくれます。
調整不要なのは凄い仕組みです。


8.和服の次に髪を頭上アイテムでセットする

東北ずん子髪をセットする方法
髪の毛は、頭上アイテムで装着します。
こちらも選択するだけで、自動的にセットされます。

※調整はつまみで行うことが出来ます。

9.任意でずんだアローを手にセットする

ずんだアローセットの仕方
同様にしてずんだアローを、右手アイテムで追加すれば完成です。

東北ずん子和服データの使い方_001
簡単なので使ってみてください。

コミPo!, 作ってみた, 漫画アニメ