あけましておめでとうございます。

放置していたブログ、久々(約二年ぶり)に更新。
昨年末石野真子さんのクリスマスディナーショーのVJやってきたので、それの制作工程なんかを書いていきます。

2014-12-26_115958.png
会場が恵比寿にあるアクトスクエアってところで、360度パノラマスクリーンがある面白い会場でした。
過去にVJはやったことあるけど、さすがに360度スクリーンに投影する映像は作ったことがなかったので色々と苦労しました。

360度パノラマスクリーンがあると言っても全部が全部360度パノラマスクリーン投影するわけではなく、出力できるパターンがいくつかあり、自分はその中の3つのパターンの映像を作ることになりました。

映像は合計5つ作ったんだけど、そのうち3つは360度パノラマスクリーンの映像、
1つはセンタースクリーンの投影される5:1の超ワイドな映像、
もう1つはVJソフトからリアルタイムに出力される映像です。

他にも画像を読み込ませてスクロールさせたり、ランダムに動かすみたいなこともできるみたい。

その中のCGで作ったパノラマ映像について書こうと思います。
360度パノラマの映像は14608px×720pxってわけのわからないサイズw
画素数で言うと最近話題の4Kよりちょっと多いくらい。

開演開始時と終演時に流れる2つの360度パノラマ映像はよくある緞帳が締まったり空いたりする映像だったので、AfterEffectsで作って指定されたパノラマのサイズの映像を作れば良かったから問題はなかったんだけど、ある一曲で流れる映像が一本道を走っているような映像を作ってほしいと要望がありました。

CG背景用の全球面パノラマは作ったことあるけど、360度パノラマ映像なんて作ったことないから、大丈夫かなぁ?っと思ってたけど、結論を言えばLightwaveを使えば簡単にできた。

全方位パノラマと360度パノラマを勘違いしそうになるけど、全方位カメラはこれ。

maru.png
上下左右360度全方位の絵がある。最近流行りのオキュラス用に作るならこれ。
カメラの真下にある道路が写っているのがわかる。

360度パノラマがこれ。
360.jpg
全方位と違い上下の絵が存在しない。スクリーンが固定で上下が存在しないのであればカメラの上下の絵は必要ない。

360度パノラマが撮れるブロギーなんてカメラもあったねー。
ブロギーで撮った映像をアクトスクエアで出力すれば面白いものが作れるかも。

建物とか複雑な形状は存在しないCGってことでMODOでモデリングしたものをVueに読み込んで作ることを初めは検討。
Vueってソフトは手軽にリアルでキレイな景観CGが作れて、360度パノラマ出力も簡単にできるんだけど、いかんせんリアルすぎるせいでレンダリングが遅い...早くしようとクオリティ下げると一気に汚くなるという欠点が...。
なのでVue作ることは早々に諦め、Vueでは背景の空だけ作って、それ以外はいつも使ってるMODOでやることに変更。

っが、しかし...MODOでは全方位パノラマは書き出せるけど、360度パノラマは書き出せないことが判明。やっぱりVueで作ろうかとも思ったけど、レンダリング時間を逆算するとどう考えても間に合わない。

ハーフサイズにしても数日かかる。そこで最近ホコリを被ってた久々Lightwaveの登場!
最終的にはMODOでモデリングしたものをLightwaveに読み込んでアニメーションさせレンダリングすることになった。
モデリングって言っても、木は素材の木、岩はMODOに入ってる素材だから、実際にモデリングしたのは大地と道路だけ。道路つってもただの板ポリだけどね。
正直モデリングからアニメーションまで全部Lightwaveでできるんだけど、最近使ってなくて操作を思い出すのに時間がかかりそうだったから、モデリングはMODOにしました。

2014-12-26_161116.png
MODOでのプレビュー画面


モデリングしちゃえばループできるように前後にいくつか同じものを配置して、10秒で終わるようにアニメーションを設定。フォグを設定しないとループの境目が出てしまうのでフォグを設定してレンダリング。あとはマシン任せ。


MODOでモデリングしたものをLightwaveに読み込んでループ配置したところ。


ハーフサイズの7304*360pxでレンダリングして1フレが約5分。
合計300フレームレンダリングしたから、レンダリング時間は25時間ってところ。フルサイズでレンダリングしたら1フレ大体9分くらいだったから、どう考えても終わんなかった。

やっぱLightwaveのレンダリングは速いなぁっと改めて思った。クオリティはあれだけど...。
まぁ作った3Dモデル自体がこれだからクオリティ上げるなんて不可能だけど。

超短納期だったから忙しかったけど、レンダリング中はやることがないので、友人宅のクリスマスパーティーに行ったりしてましたよ。

360度パノラマの映像はレンダリングしたものが14608px×720pxなんだけど、このまま納品することはできず、これをトリミングして6つの映像の切り分けて納品しました。

アクトスクエアでは6つのプロジェクターを使って、映像を同時に6つ出力することで360度パノラマを実現しているようです。

ただ納品コーデックが最近巷で話題のMPEG1!
MPEG1じゃAEから書き出せないってことでTMPGEncを使ってAEで書きだしたものを変換。

LightwaveでTGAの連番ファイルを書き出す→AEで色調補正→6つにトリミングして書き出し→TMPGEncでMPEG1にエンコード。

っとただでさえパノラマ映像作るの大変なのに、色々やること多くて更に時間がなくなりました。

なんとか当日までには間に合ったけど、360度パノラマスクリーンに投影テストできるのは本番当日という何かあったらどう対処もできない状況だったけど、無事に投影することもでき、レンダリングの問題でズレがあったりして、当日レンダリングし直すところもあったけど、無事に本番を終えることができました


帰り際にスタッフ控室にあいさつに行ったら石野真子さん偶然会ってお土産をいただいてしまいました。
あざーす!

IMG_0757.JPGのサムネール画像

ちなみに360度パノラマを円柱に貼って映像にするとこんな感じ。


360度パノラマだから、前も横も後ろも見える。


ただ実際の会場はフロントスクリーンが大きくて、横から後ろはちょっと小さいから見え方が結構違うけど。

リハときにどんな感じに出力されてるか撮りたかったんだけど、リハ中はバタバタしすぎて全然撮れなかったから、自分の作った映像がどう出力されてたのか実はちゃんと見れてない。

IMG_0747.JPG


 久々のブログでとっ散らかった文章になってしまいましたが、こんなもんです。

それではみなさん本年もよろしくお願いします。

新年あけましておめでとうございます。
今年もよろしくお願いします。

っで話はいきなり変わるけど、
JAYPEG
というクリエイターが作品を投稿するサイトがあって、
去年そこでクリスマスカードのコンテストみたいのをやっていた。

暇なときにそれ用のクリスマスカードを作って投稿してみたので、
それの制作工程を書いてみる。

完成版がこちら

 christmas_card.jpg

投稿されてるカードを見て、パンチ効いているのがないなぁっと思ったので、
パンクなデザインにしようかと思って、
自分の好きなスカルヘッドとクリスマスを合わせたデザインにしようと思いました。

クリスマスツリーとスカルヘッドを組み合わせようと考えたけど、
横長なカードだったので、ツリーは止めて緑のサークルのこれにしました。
これがなんてアイテムかよくわかんないんだけど...。

いつもは軽く手描きでラフを描くんだけど、今回はいきなりCGソフトから。
素材のスカルヘッドをCGソフトのmodoで開きます。

01.jpg

スカルヘッドが口を開いてなんか咥えてたら面白いなぁっと思ってたので、
緑のあれを咥えさ、骨っぽい質感のスカルヘッドを
クリスマスっぽくメタルな感じにして、
クリスマスの飾りによく使われるボールを目ん玉に。

02.jpg

緑のあれから生えてるのはmodoのfurを使って生やしました。

03.jpg

下に入っているMerry Christmasという文字はイラレのパスを読み込んで厚みをかけてます。
イラレファイルがドラッグアンドドロップで簡単に読み込めるのもmodoの素晴らしいところ。

04.jpg

05.jpg

 あとは背景入れて、照明の設定、質感の微調整などをしていったけど、
画面左下と右下の空白が寂しいので、
別のスカルヘッドも入れて目ん玉の色を変えたりしていきました。

06.jpg

modoで最終レンダリングしたものが下の画像の上。下が最終版。
自分はCGで完成させることはなく、レタッチをかなりしていくので、
ここから微調整。
今回は時間もなかったのであんまりしてないけど。

07.jpg

レタッチ工程のgifアニメーションがこちら。
特定色域の選択、明るさ・コントラストの調整、
グラデーションオーバーレイの合成などをしていき、
デザインを仕上げていきます。

08.gif

レタッチ作業は終わっても、
パンクなデザインにしてはなんか全体的に眠い感じになっているので、
シャープをかなり強めにかけて全体にノイズ感を出して完成。

09.jpg
以上です!

11月23日にタワレコ渋谷店がリニューアルするんですが、
それのコンセプト映像やインタビュー映像を友達が監督していて、
そのキャンペーンサイトを制作するということで、
Webサイト制作を担当しました。

http://liveliveful.jp/


超カッコイイ映像が見られるので、ぜひぜひ見てみてください。
インタビューが定期的に更新されていくんですが、
更新作業などもやってます。

監督はショウ、
音楽は同じチームのフットサル仲間でもある小野さん、
カメラマンは知り合いの岡村さんと、
以前blindというショートフィルムを作ったメンバーが
4人も関わっていて、自分がWeb担当だから、
撮影もすべて終わっている状態からしか関わっていないけど、
知った名前が多く、面白いプロジェクトでした。

Webサイトの仕事は後々雑誌とかで紹介されたときに、
紙面にスタッフとして名前が載ることはあるんだけど、
今回はWebサイト自体にスタッフ名が掲載されていてるので、
自分の名前が紹介されていてなんか感動。


制作期間が短かったのと、
PC&スマフォ版両方作らないといけなくて、
更にスマフォはAndroid2.x系、Android4.x系、iOS5系、iOS6系と
挙動が違って、Android2.x系に最適化すると、iOS6で動かなくなったりと、
デザインや演出よりも、そっちに無駄に時間がかかってしまいました。

まぁ何はともあれ無事に公開できてよかったです。

超久々の投稿。

登壇者として少し喋らせてもらいました。

最近AfterEffects用に発売されたElement3Dというプラグインがあって、
「今までのAfterEffectsでは表現できなかったような、
3DCG表現がAfterEffectsだけで作れちゃいます」みたいなことを話そうとしたんだけど、
発表当日は自分のPCじゃなかったので、プラグインがうまく動作せず、
用意していたものがほとんど使えなくて、自分の発表はグダグダになってしまいました。

ってことでそのときに作って見せる予定だったものを少し作りこんで、
モーショングラフィックス映像としてYouTubeにアップしてみました。

Element3Dのプラグイン所持者にはiPhone5のCGモデルが無料で配布されていたので、
それを素材として使いました。

途中までマジメに作ってたんだけど、途中からふざけたくなってきたので、
なぜかAndroidの公式キャラのドロイドくんが登場してますがお気になさらず。

この映像はすべてAfterEffectsのみで作ってます。
立体的なCG表現もすべてElement3Dというプラグインを使っていて、
CGソフトは一切使ってません。



【追記 12/10/15】レポートが掲載されました。
 http://techblog.yahoo.co.jp/event/mw2012_report/


去年のCut&Pasteで共に戦った戦友のショウダくんがショートフィルムを作り、
それのWebサイトを作りました。
4分程度の短い作品なのでぜひともご覧ください。

http://www.blind-film.net/



原発をテーマにしている作品で、
今の日本人の目からすると描画がリアルなので、
ちょっと衝撃が強いかもしれません。

テーマがテーマなのか、Twitterで話題を呼び、
現時点でVimeoとYouTubeの合計再生数がすでに5万回を越え、
Facebookの「いいね!」を押された回数も900回を超えてます。

Twitterのクチコミで多く広がったせいか、
iPhoneやAndroidでのアクセスがかなり多く、
頼まれてもいないスマフォ用のサイトを作っておいてよかったなぁっと思いました。


ちなみにWebサイトを作ることになったのは、
とあるイベントの帰りに、
「今ショートフィルム作ってるからそれのサイト作ってよ」
と言われたので、
「別にええよ」
と軽く返事をしたのがキッカケ。


海外のKICK STARTERというところで出資を仰ぎ、
そこで資金を集めて製作するという新しい試みが用いられた作品。
サイトにあるSpecial Thanksを押したときに表示されるのが出資者の方々です。

http://www.kickstarter.com/projects/1503216494/blind-post-nuclear-tokyo-commute


監督の彼とは同じ年なのでいい刺激になりますねー。



新年あけましておめでとうございます。

今年の4月でフリーランスのWebデザイナーになって3年目。
昨年はいろんな方々にお世話になり、
なんとかフリーランスとして生活していけております。

昨年はWebデザイン、Flash制作だけでなく、
映像制作やCG制作、企画・ディレクションなど
多くのことをやらせていただきました。

それにWeb Designingに読者のWebデザイナーとして紹介していただいたり、
Web屋さんなのにCut&Pasteのモーショングラフィックス部門に出場したりと、
色々と刺激的なことも多くありました。

今年も枠にとらわれず、色々と頑張っていこうと思っておりますので、
本年もよろしくお願い致します。 BillionMilesAway 鈴木順二


年賀状用に作ったCGをアニメーションさせてみたのでぜひご覧ください。



12月11日に渋谷のWombで開催されたCut&Pasteの
モーショングラフィック部門に参戦してきました。


CG WORLDに掲載された記事。下向いて唇噛んでる写真が使われたw


一週間前に「GAME OVER」というテーマがメールで送られてきて、
素材を用意しないといけなかったんだけど
仕事が忙しかったのと、
体調を崩していたということもあり、
まったくアイデアが思いつかなかった。

とりあえず曲を先に作り
その曲を聴きまくってビジュアルイメージを考える
ミュージックビデオ手法でやることに。

何曲か曲を作って、それを二日前から聴きまくり、
なんとか思いついたのが
ブロックゲームのジェンガを音と映像をシンクロさせて
カッコ良く見せようというアイデア。

ほかにいくつか思いついたんだけど、
素材を作り込む時間がなくて、
最低限の素材で済むその案にした。


そしてCut&Paste当日、デスクトップPCと24インチモニター、
キーボード、タブレット、オーディオインターフェイスなど、
20キロ以上ある荷物をダンボールに詰め、
東横線で横浜から渋谷まで向かう。

土曜の8時の電車だったけど、
思ったより混んでいて、ドデカイダンボールを運んでいるせいで、
ものすごく冷たい目線が...。
渋谷駅からWOMBまでも遠い遠い。

去年の大会ではCintiqとか支給されてたらしいんだけど、
今年は機材の支給が何もなかった。

WOMBには9時に到着。
WOMBの4階にあるVIPルームに機材をセッティングして、
事前に用意した素材のチェックと説明を受け10時から制作スタート。

実際制作してみてわかったこと。
・事前に用意した素材のクオリティが低すぎた。
・実際作ってみたら頭でイメージしてたのと尺が合わなくて、
 尺が5秒ほど足りなくてテンパッた。
・思ってたより15秒は長い。
・用意した曲が16秒あってそれを編集したらBPMが変わって、
 作った映像とシンクロしなくなってしまった。
などなど当日に問題発生しまくり。
全参加者の中で一番クオリティが低いのに、一番遅く完成した。

そして8時間で制作したモーショングラフィック作品がこちら↓


映像と音がシンクロしてない残念な作品になってしまいました。
まぁ何を書いても言い訳的な感じにしかなりませんが...。
もっと頑張れたかなぁ...。

まぁWebデザイナーが
モーショングラフィック部門で出れただけでも良かったと思うけど。

モーショングラフィック部門で優勝したのは、
僕と同じ年のショウダユキヒロ氏。
僕以外の誰が優勝してもおかしくなかったですね。

以下実際のWOMBでの制作環境についての愚痴。
15時過ぎくらいから審査員の人たちやら、
ほかの部門に出場する人たちが集まり始めたんだけど、
その場所と僕達が作ってる場所が同じスペースにあり、
その人たち喋り声がうるさいうるさい。

その上真後ろに喫煙スペースがあって、
そこでタバコを吸われるもんだから、
超嫌煙家の僕のイライラはピーク。
制作環境は最低最悪な場所でした。

まぁみんな同じ環境で制作してるわけだから、
何を言っても言い訳にしかならないけどね。


■映像制作環境
・Lightwave
・Adobe Aftereffects

■音楽制作環境
・KORG KARMA(シンセサイザー)
・Steinberg Cubase SX
・Adobe Soundbooth

まぁチャンスがあれば来年も出てリベンジしてやりたいけど。

4月16日(金) 21:00からテレビ朝日系列で放送がはじまる、
「警視庁失踪人捜査課」のドラマサイトを制作させていただきました。

朝日放送「警視庁失踪人捜査課」
http://shissou.asahi.co.jp/

放送終了まで更新は続くので、6月まで更新していきます。
今後は面白いスペシャルコンテンツも公開される予定。







++ Credit ++
Client:朝日放送(ABC),テレビ朝日
Design,Flash:Junji Suzuki(BillionMilesAway)


台本を読ませていただきましたが、
1話完結のドラマで、毎回毎回色んな失踪人がいて面白いです。

僕も仕事が忙しくて寝れない日が続いているときは
失踪したくなります。
足はそこそこ速いのでいつか全力疾走で失踪したいです。
ウソです。

創土社さんから2月28日に発売される
ファンタジー小説「エミリー・レインとリシダス」の
特設サイトを制作させていただきました。

・エミリーレインとリシダス
http://www.soudosha.jp/lycidas/

書籍のサイトはビジュアルが本のカバーしかなかったので、
ストーリーから連想されるイメージをデザインしてみました。

「エミリー・レインとリシダス」は、
魔界都市などで有名な菊池秀行さんが絶賛しているファンタジー小説です。

私も少し読ませていただきましたが、
ファンタジー好きにはたまらないストーリーで、
舞台が中世などではなく、現代にしているところも良かったです。

ストーリーのページで第一巻の第一章をすべて読むことができますので、
お時間のある方はぜひ読んでみてください。

Amazon等での予約はまだですが、2月28日に発売予定です。




++ Credit ++
Client:創土社
Direction,Design,Flash,CG:Junji Suzuki(BillionMilesAway)
Illust:All Silhouettes

登場人物のシルエットにはAll Silhouettesの素材を使わせてもらいました。
CreativeCommonsの写真をいくつか使わせていただいてます。

A Happy New Year 2010

みなさま、新年あけましておめでとうございます。

2009年4月にフリーランスのデザイナーとして
独立してから早いものでもう10ヶ月。
色んな会社様からお仕事もいただけるようになってきました。

2010年もデザインやFlash,CG制作など
一生懸命頑張って生きたいと思いますので、
本年もよろしくお願いいたします。

みなさまにとって2010年が良いとしてありますように。

2010年元日 BillionMilesAway 鈴木順二


P.S
上の画像は今年の年賀状用に制作したCGイラストです。

FlashのPapervision3Dで動かせるようにローポリで作ったんですが、
時間がなく結局動かせませんでした...。
時間があったらチャレンジしてみようと思います。

チ●カスこと小山さん(@kmxs)が壁紙カレンダーを作っていたので
対抗して私も作ってみました。

壁紙カレンダーというかカレンダー壁紙ですね。
カレンダーを一生懸命積んでるのは昔作ったキャラクターのボロットくんです。

ボロットくんは私がTV局勤務時代に何度かTV出演させたことがあります。



壁紙のサイズってどこまで作っていいのかわからないので、
一通り用意してみました。


[11/04 追加] せっかくなので夕方バージョン、夜バージョンも作ってみた。





フリーになってからの初のフルFlash案件ローンチしました。

EXITO
http://www.ex-ito.jp/

exito1.jpg

exito2.jpg
++ Credit ++
Art Director:Gaku Ohata(g+un graphic)
Designer:Yoshio Nakada(g+un graphic)
Flash Developer:Junji Suzuki(BillionMilesAway)

山田英二さんや日高英輝さんなど
著名なJAGDA会員のデザイナーたちがデザインしたTシャツが買えます。

イケてるデザインのTシャツばかりなので、
みなさんポチっとしちゃってください。

Part.2があるかは知らんけど...。

レタッチする写真はこちら。
去年中国の上海で撮った写真。

この写真をよくありがちな
観光パンフレットに載ってるふうの写真にレタッチします。

■元画像
Shanghai
逆光気味の写真だったので右側の建物の調整が厳しかったけど、
レタッチ後の写真も逆光気味にすることで対応。


まずはパスツールを使って建物のマスクを抜き、
背景にいい感じの空の写真を配置し、
トーンカーブやレンズフィルタ、特定色域の選択などの調整レイヤーを使い、
全体の色味、明るさなどを調整し、前面にフィルタの逆光を入れ、
最後にレイヤーを統合してシャープを全体に掛けたら終了!
いかがでしょうか?


画像の変化の流れ

Flashで書き出したから色味が変わちゃってるけど...


■レタッチ後
Shanghai-Retouch
制作時間:約1時間

なんとなく頭にイメージしたものをLightwaveで簡単に作ってみました。
描いてたのとちょっと違うけど。
もうちょっと改良してこれに時間軸をつけれたらいいなぁっと思います。
さらにPV3Dとかと使って、Flashでインタラクティブに動かしてみたい。




BusinessCard, originally uploaded by BMA Japan.

撮影してFlickrにアップしてみた。
色校とかない格安の印刷所に頼んだので、
思ってた色とちょっと違ったけどしょうがない。

次は特殊加工の印刷とかもやってみたい。

このアーカイブについて

このページには、過去に書かれたブログ記事のうち制作物カテゴリに属しているものが含まれています。

前のカテゴリはWebです。

次のカテゴリは広告です。

最近の記事はインデックスページで見られます。
過去に書かれたものはアーカイブのページで見られます。