2025年1月9日

開発者が再びクリエイティブコーディングを取り入れるべき理由

Jake AlbaughDeveloper Advocate, Figma

キャラクターたちが特大のブラシを使って、大きなWebブラウザのウィンドウに絵を描いている遊び心のあるイラスト。猫がこぼれた絵の具に足を踏み入れ、足跡を残しており、鮮やかな色彩と遊び心のあるディテールがシーンを彩っている。

最新のブラウザは、ほとんどのデザインツールの機能を超えて進化しています。テンプレートから解放され、Webにおけるクリエイティビティの可能性を引き出せるかどうかは私たち次第なのです。

開発者が再びクリエイティブコーディングを取り入れるべき理由を共有

ヒーローイラスト: Zoey Kim作

新進のデザインエンジニアだった2010年頃、カスタムのWebサイトを持つことには特別な意味がありました。Webサイトはそれぞれのデジタル名刺。技術を披露し、評判を築き、新しいビジネスを引き寄せるためのスペースだったのです。私のような開発者は、HTML5の新しい機能を活用するために雇われていました。表現力豊かなインラインSVG、GSAPによるタイムラインベースのアニメーション、魅力的なWebGL実験、そして複雑なCSSイラストレーションなどがその例です。デモは想像力に富み、型破り。進化するクリエイティブコーディングの世界では、実用性だけでなく、表現も構築する必要がありました。

Webサイトの構築と管理が複雑だった時代、開発者はWixやFormat、Squarespaceのような役割を果たしていましたが、次第に、それらのサービスが私たちに追いつくようになりました。当時、私たちは「手作りの方が優れている!」と主張しましたが、これを裏付けるデータはなく、傷ついた心と、クライアントのphpMyAdminログイン情報でいっぱいのノートだけが残りました。

テンプレートとオートメーションにより、アニメーションのトランジションや背景動画のループ、パララックス効果、CMSなど、すべての機能を備えたサイトを誰でも作成できるようになりました。そのアクセシビリティは称賛に値しますが、クリエイティビティと表現に予期せぬ代償をもたらしました。Webサイトはテンプレート化され、予測可能になり、驚きと喜びを与える力を失たのです。

今、私たちは新たな分岐点に立っています。多くのデザイナーや開発者が慣れ親しんだ制約の中で作業を続けている間に、ブラウザは静かに進化を遂げました。Webは、コンテナクエリ、高度なスコープと継承、ユーザーの好みに応じた応答性などの機能をサポートするようになり、色、タイポグラフィ、動的ユニット、レイアウト、アニメーションの面で、はるかに洗練されています。しかし、Figmaのデベロッパーアドボケイトとして私が話をする多くの若いデザイナーや開発者は、こうした可能性に気づいていません。ブラウザの可能性を広げることをせず、依然として古いパラダイムの中で活動しているのです。

ブラウザの可能性を広げることをせず、依然として古いパラダイムの中で活動しているのです。

未開拓の可能性の一例として、カラーグラデーションを挙げてみましょう。通常は、標準的なRGB(赤、緑、青)のグラデーションで作業しますが、CSSは現在、HSL(色相、彩度、明度)やOKLCHなどの色空間をサポートしています。これにより、より鮮やかで正確な色の変化を実現できます。私は、従来のツールと最新の機能のギャップを埋めるために、CSS color-mix()というFigmaプラグインを作成しました。デザインと開発がより密接になり、より多くの開発者がデザインツールにおいてスペースと主体性を見出すにつれ、私たちは、ツールとプラットフォームを刺激的な新しい方向に押し出すことができます。

すでにその可能性を示しているクリエイターもいます。クリエイティブコーダーのHenry Desroches氏は、デザイン画のようなコントロール性、次元性、志向性を持つWebサイトを、レスポンシブな環境で作成します。空白を使用することで表現力を高め、要素が相互に作用し、一体となる感覚があります。Googleのエンジニアリング担当シニアディレクターであるSarah Drasner氏は、Web上のSVGアニメーションとイラストレーションの未来の可能性を最初に示してくれた人です。また、Goldman SachsのUI&UX担当シニアバイスプレジデントであるTim Holman氏は、Optical ToysやThe Useless Webなどのプロジェクトを通じて、クリエイティブなWebスピリットを体現しています。WebデザイナーのLynn Fisher氏は、ブラウザをクリエイティブな媒体として利用し、ビューポートの幅を調整することでイラストを変化させています。これら、そして他の多くの例は、テンプレートが単なる出発点であり、最終目的地ではないことを思い出させてくれます。

Webサイトはデジタル名刺やサービスのポータル、情報ほ含んだ単なるコンテナ以上のものであり、クリエイティブ創な表現の場です。今こそ、好奇心を呼び覚まし、実験を取り入れ、テンプレートを超えて何を創造できるか試してみましょう。より表現力豊かなWebを構築するためのツールはすでに存在しています。後は手に取り、構築するだけです。