クリエイター(絵描き)のサイト制作に活用したWebアニメーションの覚書[1]

応援しているクリエイター(絵描き) 夜々さんのサイトを制作する機会がありました。
その際にその作品の世界観をできる限り表現したサイトを作りたかったので、Webアニメーションを多用して制作しました。

ちなみに制作したサイトはこちらです。
【眠リ知レズ 夜々 オフィシャルサイト】
http://yoyo-x-x-x.com/

続きを読む

フロントエンド未経験Webクリエイターが0から学んだスキルの覚書[3]Vue.js(学習)

前回の記事でフロントエンド未経験Webクリエイターの最初の覚書としてGitについて書かせていただきましたが、今回は最近フロントエンド界隈でポストjQueryとして有名な『Vue.js』について0から学んだことを覚書していきます。

『Vue.js』

『Vue.js』とは、「Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースのJavaScriptフレームワークである。他のJavaScriptライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。一方で高機能なシングルページアプリケーション(SPA)を構築することも可能である。」[wikipedia]

続きを読む

フロントエンド未経験Webクリエイターが0から学んだスキルの覚書[2]Git(ギット)

『Git』とは、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムのこと[wikipedia]

Git初心者の方にはたにぐちまことさんの『Git+GitHub入門』(Youtube)がスゴクわかりやすかったので、特におススメです!

続きを読む

フロントエンド未経験Webクリエイターが0から学んだスキルの覚書[1]

前回までこのブログでは、制作させていただいた『クリエイター(絵描き) 夜々』さんのサイト制作について説明してきました。

その過程でSpineAnimateCCを使用したWebアニメーションで、作品の世界観を表現することはある程度のレベルで形にすることができたとは思っています。

しかし、細かい部分を見ると思い通りに作ることができなかった部分も多く、今の自分のスキルセットでできることには限界を感じています。

なので、最近はフロントエンドの技術を学び表現力をあげたい!と思うことが多くなりました。
今後、SPA(Single Page Application)のようなシームレスな画面遷移をさせたり、インタラクティブなUIを取り入れたWebサイトを作りたい!と考えています。

続きを読む

クリエイター(絵描き)のサイト制作に活用したWebアニメーションの覚書[4] AnimateCC編(2)

眠リ知レズ 夜々 オフィシャルサイト』の制作方法の解説記事も今回でいったん最終回となります。
今回はAnimateCCでの制作の後編として主にAnimateCCで出力したHTML5CanvasのCreateJSでのアニメーション制御方法について説明してきます。

Spineで制作したアニメーションデータの取り込み方法等は前回の記事で解説していますので、そちらをご覧ください。

続きを読む

クリエイター(絵描き)のサイト制作に活用したWebアニメーションの覚書[3] AnimateCC編(1)

全てをSpineで動かそうと思うと画像容量が膨大になってしまい、Webには適さないのでメインのキャラクターの動きのみSpineでしっかり作りこみ、背景や周りの生物・装飾物はAnimateCCで動かしています。
動きはタイムラインでつけてしまうと制御がしづらいイメージがあったため、基本的にCreateJSで実装しています。

AnimateCCでの制作は、まず以下のように取り込む画像データ(PSD)の整理してから、AnimateCCにインポートして制作しています。

続きを読む

クリエイター(絵描き)のサイト制作に活用したWebアニメーションの覚書[2] Spine編

「Spine(スパイン)?そんなソフト聞いたことがない」という方が多いと思いますので、まずソフト紹介からします。
主にゲーム業界で使われる2Dキャラクターアニメーション制作ソフトで、スマホゲームされる方はLive2Dのようなものだと思っていただければわかりやすいかと思います。

続きを読む