制作コラム
子どもの頃からゲームクリエイターが夢だった。高校から情報専門学校に通い、エンターテイメント業界のキャストとして売れて浮かれて中退。会社を立ち上げ、従業員は万人突破。トントン拍子で右から左へ仕事が流れてくる。でも物足りない...
そんなとき、弟から「ゲーム会社設立したわ！」
昔のことを思い出した私。将来の夢、兄弟ともにゲームクリエイターだったな。私からゲームクリエイターになろう、と最初に言っておいて投げ出して。
「...このまま本当にエンターテイメントをずっと続けるのか？...でも、やっぱりモノづくりがしたい」
タバコを吹かせながら大好きなトルコアイスを食べては思った私だった。
次の日、代表を辞任したいと周りに伝えては反対され、でも昔から知っている友人からは「いいじゃん、やってみようよ」と言ってもらえた。
その言葉が、「今の私の原動力になっている」...
はじめに
どうも、はじめまして。毎度お騒がせしてしております。
2021年5月より、フロントまわりのエンジニアをやりたくてしょうがない
Hirotomo Yamadaです。
「あれ、ゲームクリエイターになりたいんじゃないの？」と思ったでしょ。
そうなんです。変わりました。
あれから色々と調べてまして、歳を取れば考え方も変わりますね。今まで自分はプロモーションの企画・制作をし、数々の企業から評価を得ました。それを活かせながらITで活躍できないか。そう考え、人生ゲームをしていた私。止まったコマは...
自社開発した買い物アプリがヒット！Twitterにトレンド入りする。
私はこんなコマで「これだ！」と思ってしまったワケです。
現代の広告塔は間違いなくWEB。プロモーションの企画・制作をWEBで活かすことができるんじゃないか。と思って、さっそくググる。
なになに？エンジニアはたくさんあるけど、WEBエンジニアはフロント...？バック？さらに調べて、
「フロントがフロントで！バックがバックや！」
なるほど、よくわからん。
中略
長くなりそうなので、
とにかく私はフロントまわりがやりたくてしょうがない。もっと言うなら、将来WEBアプリケーションの企画・制作をしたい人。
と思ってください。
なぜPortfolioを作ろうと思ったか
憧れです。だって、カッコいいじゃないですか。
あれでしょ。自分の作品を公開するんでしょ。
そりゃあ、ワクワクしますよ。
とりあえず、Progateですべてのコースを終えてNPMをかじり、Gulpを入れてSassでコンパイル！感動です。
さっそく、ラフもカンプも用意せず、頭のなかでデザイン
※「さようなら全てのエヴァンゲリオン ～庵野秀明の1214日～」より
に影響されて...
エディターをカキカキ...
できあがり！
なんか、ショボい...アフリカの子どもたちも泣くぐらいヒドい。
そうだ！カッコいいサイトを参考にしよう！ネットをスイスイ。
「マジかっけぇ。アニメーションすごい！スクロールとリンクしてオブジェクトが動く動く」
※Appleです。
よし！これや！
そうして、アニメーションを取り入れたPortforioを作ろうと思った。
どうやってつくる？
今回、制作するにあたり下記の点を重要視していました。
1. ストーリー性
2. 自分をカタチつくってくれた作品の登場
3. 常識の枠から外れること
4. 見てくれた人をワクワクさせ驚かせること
1. ストーリー性
私が、すべての作品において一番大事にしていることは、ストーリー性です。なかなか頭のなかで感じていることを文字に起こすのは難しいのですが、例えるので言う「川はどこから流れるか」です。
一般的な川には上流から中流へ、中流から下流へ流れていきます。当然、源もあるわけです。色んなフェーズがあって、水は流れていきます。いきなり、水は流れません。
この世界には、必ず「理由」がある。
私が感じていることです。作品においても同じです。作品のなかの一つ一つに理由をつけ、流れを作ります。
要は、とことん不自然さを排除する。です。
今回の作品も、どうしてこのキャラクターやオブジェクト・文字が登場し、どんな理由を持たせ、どんな動きをつけるのか、一つ一つ説明ができるように構想しました。
2. 自分をカタチつくってくれた作品の登場
当初から、どうしても「自分をカタチつくってくれたモノ」をたくさん取り入れたいと思っていました。自分に影響を与えてくれた作品や人や言葉、そのどれもが今の私をつくり、今の努力となっているからです。
アニメーションも勉強し、ライブラリも少しは知れるようになりました。これらを活かして、「自分をカタチつくってくれたモノ」とうまくマッチングした作品にしたい、と感じることができました。
3. 常識の枠から外れること
私は、普通が嫌いです。いつも、流行っているものには乗らず新しいことを始めます。色んな人のPortfolioを見させていただきました。ほとんどが、やれることやできること、価格表でした。
たしかに、見てもらった人に自分がやれること、できること、価格を知ってもらい、「知らない不安」を見てもらった人から取り除く。「知らない不安」があると、人はアクションを起こしにくいですから、ビジネスマンとして当たり前のこと、見習うべきことだと感じます。
しかし、私は「それじゃ嫌だ！」と感じてしました。次にも触れますが、驚かせることが欠けている。普通という土台に、さらに要素を足していくのではなく、普通は最低限にして、シンプルにすることで見せるものにインパクト感をあたえようと思っていました。
4. 見てくれた人をワクワクさせ驚かせること
「人は昨日の驚きで、今日は驚かない」これは、私が大事にしていることの一つです。説明する必要がないくらいシンプルな内容です。新しい驚きを作り続けるのもクリエイターの仕事だと考えます。では、この無限大の作品のなかで新しい驚きをどう作るのか。
私は、デザインには自信がありません。全くと言っていいほどに。
それに、今回の制作は初。右も左も分かりません。
ディレクトリーでさえ、なんなのか...
でも、昔から「アイディアには自信がありました。」
今回のアイディアは、
作品が無いのなら、
デザインが少ないのなら、
内容をシンプルにすることで、見せたいもの、伝えたいものにインパクトを与える、ということでした。
試してみたかったこと
上記でも触れていましたが、自分の伝えたいメッセージと自分をカタチつくってくれたモノをアニメーションで驚かせることでした。
それには、まずアニメーションを勉強する必要がありました。
GSAP - GreenSock -
これやこれ！スクロールでどんどんアニメーションされていくやんけ！
僕は、使い方を学ぼうとしましたが日本語の参考サイトはほとんど無く、英語のGreenSockの公式リファレンスやフォーラムを読んで勉強する日々を送りました。(約1日ほど)
※サンフランシスコに行っててよかった...
今回、頭のなかには３つのことをやりたいと思っていました。
1. ダイナミックな動きで、「ドヤる」
2. ワクワクを掻き立てる動きで、さらに「ドヤる」
3. イースター・エッグ（隠し要素）を取り入れて、やっぱり「ドヤる」
1. ダイナミックな動きで、「ドヤる」
Appleのシングルページのような、スクロールに合わせてiPadが画面いっぱいに広がり映像がはじまったり、iPhonが回転しながらいろんな色に変わり、Macが分解されながら各パーツを説明するように。
今回は、鍵穴（私の心）に入り込むことを考えました。
わかりますよね？そう、キングダムハーツです！
キングダムハーツ大好きなんです！あの愛と勇気だけが友だち...以下略
さらに、バラバラになっている文字たちが集まり文章になるアニメーション。あれは、僕のバラバラになっている記憶や思い出をあなたが集めてくれる。をイメージして作品にしました。
2. ワクワクを掻き立てる動きで、さらに「ドヤる」
描かれたキャラクターたちが、映り変わり、そして消え。コンテンツの背景を考えてキャスティングしてあるので、ぜひキャラクターたちを調べてみてください！
そして、なんと言っても目玉商品はコチラ！
ウルトラマン vs ゴジラ
※戦ってません
です。ドンっ。
ウルトラマンの登場シーンを再現しました。完全に再現した(フラッシュの回数やデカくなるスケール)と言っても過言ではない。
これは、ウルトラマンの登場で、僕の好きなモノが始まったからです。私の世界に「赤色」をくれました。
そして、ゴジラです。最後は、やっぱりゴジラにしたかったんです。どうしても。破壊神にふさわしい壊しっぷり、カッコいい...
※ちなみに子どもの頃のパスワードは「Godzilla」です！
これは、ゴジラが最後に登場して私を壊してくry...ではなく、この作品を壊し終わらせてくれる存在にしたかったからです。
3. イースター・エッグ（隠し要素）を取り入れて、やっぱり「ドヤる」
私は、子どもの頃からゲーマーです。あるゲームでは、というか何個か世界一位にも輝いたことがあるゲーマーです。ゲームが大好きなんですよ。
とくに、隠し要素という名の「イースター・エッグ」
※分からない方は、ググってください。
今回、色んなところに隠し要素を取り入れました。
ソースのなかに、アニメーションのなかに、デザインのなかに。
隠し要素なので、多くは語りません！
※めっちゃ語りたい...あれがあれで、これがこう！...
ぜひ、ご自分の目で確かめてください！
問題と解決「どうしてもやりたいねん」
制作していくにつれて問題がたくさん生まれました。子沢山です。
1. サイトが表示されるが、非常にカクカクする。
・画像容量が大きすぎて読み込みに時間がかかる。
・要素を作りすぎてDOM生成に時間がかかる。
・アニメーションをつけすぎて処理に時間がかかる。
2. レスポンシブに応じてアニメーションが変わってしまう。
3. デバイスに応じてスクロール量が変化してしまい、意図したアニメーションが表現できない。
他にも数えきれないほどありましたが、大きいものを並べました。
1. サイトが表示されるが、非常にカクカクする。
制作していく途中から、ローカルでサイトを表示する更新が遅い、遅すぎる。それも、作れば作るほど時間は長くなっていく。気づいたら、とりあえず完成。更新するときなんて、10秒ぐらい真っ白。
あかん...
・画像容量が大きすぎて読み込みに時間がかかる。
これは、簡単でした。文明の力「圧縮ソフト」ドラえもんの道具より便利！
「ドラック＆ドロップでチョチョイのチョイやで！」
あら、不思議！MBがKBになりました。画像容量って大事ですね...
・要素を作りすぎてDOM生成に時間がかかる。
今回、文字一つ一つにアニメーションをつけるため、文字一つ一つにspanタグで囲われています。完成した当初は、総勢14486名！私の会社の従業員より少し多いやんけ！
※当然、JavaScript使ってますよ(笑)
まず、いらないコンテンツを削ぎ落としました。いらないって...
泣きながら DELETEキー を押してましたよ...
経営不振で、リストラのリストラで、総勢3280名になりました。
※これでもだいぶ多いほうだと思いますが...
それでも、ロードアニメーションを表現したいのにアニメーションが実行されないまま、サイトが更新されてしまうので。対策として、各要素の生成を段階的にして、初期段階の処理を軽くすることにしました。DOMContentLoadedとかloadとかPromiseググりました。
だいぶ、軽くなりました！ロードアニメーションがちゃんと意図したアニメーションになってる！
・アニメーションをつけすぎて処理に時間がかかる。
Appleを真似して真似して、夢中にアニメーションつけたんですよ...そしたら、PCだといいんですよ！TABとかSPだと全然ダメ！カクカクすぎて、ブラウザが強制終了。
せっかく作ったのに、撃沈です。ベランダから飛び降り自殺してやろうかと思ったぐらいです。とりあえず、1日現実逃避しました。
対策を色々と考えましたが、すべて敗北。
でも一つだけ、上手くいったんですよ！偶然！奇跡！運命！
なぜ、上手くいったのか上手く説明できません(笑)
方法は、下記のとおりです。
各要素内でペース配分を割り振りアニメーションの定義をしていました。
これを、一つの要素(タイムライン要素と名付けました)にアニメーションを集約、各要素とアニメーションを切り離し、そのタイムライン要素内でペース配分を管理することで思いっきり軽くなったんですよ！
言ってる意味わからないですよね。すみません、説明が下手くそで。
この件は、別記事で作成しようと思います。
長くなりそうなので...とりあえず、この件は解決したってことで！
2. レスポンシブに応じてアニメーションが変わってしまう。
まぁ、当然ですよね。これは、CSSとJavaScriptでレスポンシブ対応で頑張りました。それでも、解決しない問題はありますよね。
これに関しては、デザインを１から見直し、再構築です。
各画面にどう映りたいのか、頭のなかで絵を書いて。
異なるアニメーションが、ちゃんと「理由」を持っているように。
もうこれ、二次方程式ですね。いや、四次方程式や！
※数学得意でよかったー
この件は、とにかく試行錯誤して何度でも何度でも立ち上がり見直すよ！このデザイン、声が枯れるまで！としか、言いようがないです。
3. デバイスに応じてスクロール量が変化してしまい、意図したアニメーションが表現できない。
もう、これはしょうがないですよね...人の指に応じてスクロール量は十人十色。ほかにもデバイスやOSによっても。
ワイが思ったとおりにみんな操作してくれよ！
まぁそんなことできないので、しぶしぶ対策です。こちらです。
上記でも、無理矢理話を終わらせた一つの要素(アニメーションのペース配分を管理しているタイムライン要素)をレスポンシブに応じて、伸び縮みさせているという仕組みです。
ユーザーのスクロール量は、変えられないので、ページのスクロール量(高さ)を増やしたろ！って感じです。
※部活顧問の先生：ハハハ、そんなに走りたい(スクロール)のなら、もっと距離(高さ)を追加してやろう！
改善点「もういいじゃん、これで」
とりあえずって何回言えばいいんだろう。とりあえず、完成したわけですが。これで、終わりだと考えていません。リリースしますが、自分のなかでまだまだ改善したいことは山ほどあります。山田だけに？
改善したい内容は山ほどありますが、大きいものだとこちら。
・デザインの見直し
これに関しては、終わりがないと思うんです。いつもそうなんです。次から次へと「あーこれやりたい！あれもやりたい！」ずっと続くんです。
だから、いつもだれかからなにかから止めてもらうんです。
今回は、自分で決めた時間です。成長したものです。若いときは、そんなの関係ねぇって無視しっぱなしでしたが、大人になりました。
・アニメーションの見直し
正直、完成したもので限界なんです。処理的に。もっと、やりたいことあったんです！悟空とベジータがフュージョンするとか！(嘘)
でも、無理なんです。先生。
処理を軽くできれば、もっと登場させられるキャラクターがあると信じて、ダイエットします。
・SVGに変更
今回、無理矢理画像を乱用しています。SVG学びたいです。絶対にSVGでアニメーション管理したほうが楽だと感じてます。どなたか「SVGってなんなのか教えてください」
・要素の生成を、ページの高さごとに分配
現在の処理は、最初のちょっと後でspanの生成が始まります。これを、ページの高さごとに生成を分配し、最初の処理をもっと軽く。
・要素のアニメーション定義を、ページの高さごとに分配
上記と同じ。DOM生成時に、要素の座標など？を計算しているようですね。だから、アニメーションは座標がキモです。アニメーションをつければつけるほど計算する必要があるので重くなるってわけですね。
・コンポーネントの見直し
言い方が間違ってたらすみません。とにかく、軌道修正をしすぎて、ソースコードがぐちゃぐちゃです。それよりも初学のため、最適な使い方がなっていないと思います。どうぞ、先輩方教えてください(土下座)
デザインの先にはだれかがいる
デザインとは、「より良くしていくこと」だと、私は思っています。
「それは、何のために？」と、感じることがありました。
考えれば考えるほど、行き着く答えは一つでした。
それは、「だれかのため」です。
私は、デザインのその先に『だれか」のことを考えて創っていたのだと。
「楽しませたい」「喜ばせたい」「驚かせたい」「感じてほしい」
だから、私は今日も「だれかのため」にデザインをしていきます。
カッコいいこと言ってすみません。でも、カッコいいですよね。
私は、だれかのためにデザインしています。というか、みなさんそうですよね。デザインだけじゃないですよね。
格好良くなったり、可愛くなったり、綺麗になったり。
はたまた。
賢くなったり。優しくなったり。
友だちや仲間や社会の人や彼女や奥さんや、自分だったり
全部の行動の先には、「だれかがいる」んです。
だから、なれない人って「思い」が弱いんですよ。
人間って魔法使いだと思うんです。だって、思っただけで実現できるんですから！実現できないのは思いが弱いから。だから、強く思いましょう。
山ほど思うんです！山田だけにね！
「子どもの名前、山田心にしようかn...(小声)」
おわりに
今回、自分の作品を初めて作り色んな体験ができました。先人には感謝です。こんな素敵な体験を用意してくれたなんて！
※出来ないことが多すぎてブチギレそうでしたが...
これからも、流れを意識したデザインを考え、理由と繋がりを大事にした新しいモノを作り続けます。
ここにないモノ(未来)を、私が創る。