コーダーとディレクターの視点から語る
「動き」にこだわるクリエイティブコーディングの魅力

街中でダイナミックな動きのある映像を見て立ち止まったり、アクセスしたウェブサイトの滑らかなアニメーション表現に驚いたり、訪れたイベントのインタラクティブアートに感動したり。日常のあらゆる場所で目にすることが増えた “いい感じ” のビジュアル表現ですが、それらを作り出している手法の一つが、「クリエイティブコーディング」です。

2024年5月11日、FabCafe Kyotoで「ブラウザの中も外も、クリエイティブコーディング。 つくりかた、こわしかた、ディレクションを事例とともに。」と題し、クリエイティブコーディングをテーマにしたトークイベントを開催しました。
ゲストにお招きしたのは、クリエイティブコーダーとして第一線で活躍される株式会社STARRYWORKS 足立紗彩さんと株式会社devdev 池田亮さん。所属する企業や自身の会社で手がけたプロジェクトの事例や、個人として行っている創作活動についてご紹介いただきました。
また、弊社のWeb構築プロジェクトにて、WebGLなどのダイナミックなアニメーション実装をディレクションしてきた、テクニカルディレクターの伊藤友美も登壇。会場からの質疑応答も交えながら、２時間にわたって繰り広げられたトークの様子を紹介します。

企画・編集：笹島啓久（ロフトワーク クリエイティブディレクター）
執筆：Naomi

まず最初は、テクニカルディレクターという立場からプロジェクトをハンドリングする中で、クリエイティブコーディングの実装に携わってきた伊藤が、そもそもクリエイティブコーディングを取り入れることの良さや、自身がディレクションをする中で実感したこと、気づきなどをプレゼンテーションしました。

「私たちロフトワークが担当するプロジェクト、特にWebサイト制作においては、大学や研究機関、企業のコーポレートサイトなどを多く手がけています。その場合にクライアントが弊社に期待しているのは、キャンペーンぺージのようなインパクト重視の演出よりも、正確な情報を適切に伝えること。いわば情報設計こそが肝であり、ロフトワークの強みとも言えます」

どちらかといえばインパクト重視の演出を求められる場面で用いられる事の多いクリエイティブコーディングですが、伊藤は「コーディングとクリエイティブコーディングは、役割が違う。ユーザー視点やブランディングにおいて、クリエイティブコーディングが有効に機能する場面がある。」と説明し、クライアントへ提案・実装してきた事例を紹介しました。

また、「コーディングとクリエイティブコーディングは、求められる役割が違うのであれば、制作フローも変えるべき」というディレクターならではの気づきは、常に条件や課題が異なり、状況が刻々と変わっていく中での進行管理において、非常に参考になる指摘でした。

次に登壇した足立紗彩さんからは、企業の中でプロジェクトに携わるエンジニアとして、ディレクターやデザイナーなど様々な職種の方々と、どのように完成まで進めているのかを、企業で手がけた実績のほか、個人で制作している作品や映像を交えながらプレゼンテーションしていただきました。

ご紹介していただいた事例は、アニメーションやビジュアルといった演出の具体性が決まっている場合と、雰囲気やイメージのみの段階で演出の具体性が決まっていない場合です。

まず、演出の具体性が決まっている場合。

足立さんが事例として紹介したのは、実制作期間が約1ヶ月の体験型コンテンツ。細かい動きの調整を手元で行いながら、並行して社内にほぼ実寸大の体験スペースをつくり、自分たちで挙動やアニメーションをテスト。実際に動かすことが、改善点の発見やクオリティの引き上げに繋がることが多くあるとのこと。
また、ディレクターと連携しながら、必要な電力量や配線ケーブルの確認、機材構成図を作成するなどもエンジニアの仕事、と足立さんは言います。

Web上では想定されない、体験型コンテンツならではのデバッグ項目を考えるなど、納品ぎりぎりまで、非常に細かい動きの修正などを行ったそうです。

加えて、設定した挙動で完成ではなく、納品・実装した現場サイドでも、演出や挙動を微調整できる仕様にしたことも、体験型コンテンツならでは。その日その時の現場でしかわからない様々な状況にフィットするように調整できるようにしました。

続いて、雰囲気やイメージのみの段階で、演出の具体性が決まっていない場合。

複数のパターンを制作・提案しながら、チームで細かな調整を行いつつ完成形へと近づけていく様子を、事例と共に説明していただきました。制作を進めていく途中、「アニメーションの細部の動きを、どこまでも詰めていってしまうため、一旦離れて、別の業務に関わる」というお話には、多くの人が共感をしていました。

まとめとして、足立さんが全ての案件において心がけていることを、3つ挙げていました。いずれもクリエイティブコーディングに限らず、チームで何かを制作していったり、プロジェクトを進めていくうえで大切なポイントである、と感じます。

1. 自主的に案を出す
2. 細かい粒度での認識合わせ
3. 軽量化と効率化

最後は、株式会社devdevにてプログラマーとして、様々な案件に関わってこられた池田さんから、具体的な制作事例や過程、マインドセットなどを、自身のスキルの磨き方を交えながら、プレゼンテーションしました。

ディレクター、デザイナーと、プログラマーである池田さんの計３名のチームが、約1ヶ月ほどの制作期間で、モーションやグラフィックの実装を行った事例では、クライアントからの「インパクトのあるサイトデザインを」というオーダーがあったとのこと。それに対して、まずチーム内でのイメージのすり合わせを実施。

出てきたキーワードやサンプルビジュアルなどをもとに、デザイナーがイメージボードを作成し、池田さんは必要な技術を洗い出しながら、デモを作成、チーム内でブラッシュアップしていった、といいます。
デモの制作において、池田さんが常に意識しているのが「初回デモで、65%以上の完成度を目指すこと」。その理由は、専門性が異なるメンバーと、チームとして良い仕事をする上で、意見を出し、ブラッシュアップする土台となる水準が65%と考えているため、とのことでした。スタートの時点から完成度の高いデモを制作できれば、より具体的なブラッシュアップができ、結果的にチームのテンションが上がる、という実感があるそう。

完成度65%以上の初回デモを作るためには「プログラマーがモーションやグラフィックを作り切る、というスキルが必要。」と考えた池田さんは、自身のスキルアップのため、クリエイティブコーディングの作品作りをスタートし、SNSへの投稿を始めました。

SNSへ投稿する、ということは、つまり、人から見られる意識を持つようになる、ということ。結果的に、モーションやグラフィックを作るスキルを磨くことができている。

結果的に400以上ものモーションやグラフィックを制作した池田さん。それが活きたというお仕事の事例も、具体的に紹介いただきました。

その案件では、プログラマーである池田さんとディレクターの2名体制、 1ヶ月の制作期間で、模様や色、エフェクトなどのバリエーションが異なるデータを、1日10個程度のペースで、大量に制作・納品したそう。

途方もないくらいの膨大な数を、限られた時間内で制作することができたのは、まさにコツコツ続けてきたクリエイティブコーディングの作品作りによって実力が磨かれていたからこそ、と言えるでしょう。

一方、仕事のスキルアップのためのクリエイティブコーディングだけだと飽きてくるそうで、仕事ではあまり使い道がなさそうな表現にもあえて積極的に取り組んでいるという池田さん。個人の作品制作のような、仕事に直接的に関係ないことであっても、楽しみを見出して継続しているから、仕事の依頼が途切れないのかもしれません。

後半は、参加者から寄せられた様々な質問に答えてもらいながら、登壇者の3名と共に「クリエイティブコーディング」についての取り組み方や、考えを深めるような意見交換の時間となりました。

一部ですが、質問とコメントを抜粋してご紹介します。

── 日常生活で、観察や収集、言語化などのトレーニングとして、どんなことを行っていますか。

池田　映画やアニメーションなどを観るのは好きですが、ついつい興味が技術的な視点に移ってしまい、ストーリーを楽しめなくなるため、あまり観ていません(笑) 。とにかくアウトプットが大事だと思っているので、定期的に制作するようにしています。

足立　創りたいアイデアをノートにまとめたり、いい感じのアニメーションを社内のSlackにポストするなど、意識的に収集をするようにしています。

伊藤　美術展などを観に行ってよかったことを言語化したり、リファラを大量に見たりしています。

また、大学時代に学んだ映像制作における考え方や技法（例えば映像のリズム感を掴むために、アニメをコマ送りで観る方法など）は、サイト制作やモーションづくりなどに活かせているのかもしれません。

──高校の数学で学ぶようなレベルの知識は、クリエイティブコーディングにどのくらい活きるのでしょうか。また、文系でもコーディングの仕事ができるのでしょうか。

足立　私、実は文系だったんですよね(笑)。

伊藤　私も文系でして、高校数学は途中で離脱しています(笑)。でも、仕事を通して身につくと思うので、大丈夫では。

池田　実は私も文系だったんですが、数学は元々得意でした。もちろんサイン・コサインという考え方をモーションの制作に使っていますし、知識があるに越したことはないですね。あとは、ものづくりをする体力や、制作する習慣を身につけることも大切かもしれません。

── チームでのコミュニケーションや、制作物のフィードバックをする時に気をつけていることを教えてください。また、無理なリクエストや難しい相談をされたとき、どのように対処していますか。

池田　チームの雰囲気を悪くしないように、ですね。テキストコミュニケションなので、絵文字や言い回しには気を遣っています。

また、遠慮のない相談をされることも多いですが、態度には絶対に出さないようにしています。一旦、時間をおいたり、本当に無理かどうか試しにやってみてから断る、ということはありますね。

伊藤　私もリモートでのコミュニケーションは難しいと思っていますが、相手の話や気持ち、チームメンバーを最大限に尊重することでしょうか。その上で、柔らかい表現でフィードバックを伝えるように心掛けています。

質疑応答・クロストークのあとは、登壇者や参加者同士が交流し、情報交換や表現方法の工夫など、明日からの制作に繋がる学びを得ているようでした。

予定していた2時間が、あっという間に過ぎた本イベントでした。企画した私自身も非常に学びの多い、貴重で充実した機会で、登壇者のトークをきっかけとして、新しいクリエイティブコーディングの表現や手法が生まれて欲しいな、と感じました。