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

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

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

執筆：Naomi

イベント概要

ブラウザの中も外も、クリエイティブコーディング。つくりかた、こわしかた、ディレクションを事例とともに。

クリエイティブコーディングの目的だけでなく、その有効性と進め方を理解する

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

株式会社ロフトワーク 伊藤友美が「クリエイティブコーディングというスパイスで変わるWebディレクション」をテーマに登壇

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

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

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

関連記事

未来のクリエイターとの出会いを導くブランド体験 デジタルハリウッド大学 Webサイトリニューアル | Project | 株式会社ロフトワーク

京都精華大学 | これからのオンラインコミュニケーション戦略とは？ 答えのない問いに「対話」で答えるWebサイト | Project | 株式会社ロフトワーク

フィードバックループを繰り返し、クオリティを最大限まで引き上げる

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

株式会社STARRYWORKS（スターリーワークス） 足立紗彩さんには、「多様なアウトプットに対してのエンジニアとしての関わり方」についてお話しいただきました

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

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

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

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

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

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

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

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

プロジェクトを進めていくうえで大切なポイント

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

プログラマーの「作り切る」スキルがチームの仕事を加速させる

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

株式会社devdev　池田 亮さんには「クリエイティブコーディングの自由とスキル」をテーマにお話しいただきました

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

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

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

・20240511イベント トークスライド内動画

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

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

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

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

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

日常の中でのアウトプットや収集がトレーニングになる

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