こんにちわ。北千住デザインと申します。アドベントカレンダー2023🎄のための記事です。
私はHTML／CSSを主としたクリエーティブコーディングを行なっています。
👉 HTML SKETCHES - https://000690273.codepen.website/
これらはほぼプログラミング言語を使わないクリエーティブコーディングという点がユニークだと思います。（HTMLはマークアップ言語と呼ばれます）。そのやり方などを説明します。
クリエーティブコーディングとは
決定的な定義はないかもしれませんが、一般にアート的なコーディングのことを指すように思います。ブラウザに限ればツールとしてはp5jsが最も有名です。
個人的には、創造的なコーディングということなのでコーディングを通して新しい発見や新しいアイデアが生まれ、そのために試行錯誤が行われることが重要と思います。その定義に沿えば、HTMLだろうがCSSだろうがコーディングという作業が発生すれば、クリエーティブコーディングは可能だと思います。
開発環境
創造的であるには試行錯誤が簡単にできることが重要です。開発にはオンラインのコードエディターを使うのが良いでしょう。私はCodePenというサービスを使っています。
HTML／CSSを記述・編集すると即座に結果が更新されます。時間が空いた時に過去つくったやつをちょっとずつ良くしてくのも楽しいです。他人のコードも見ることができます。私のサイトでも各ページの画面上部からソースコードに飛ぶことができます。
HTMLの良い部分
p5js等のクリエーティブコーディングと比べて良い点をあげます。
ロジックを考える必要がない
プログラミング言語でないのでロジックを組むことはできません。ゆえに難しいことを考えないで済みます。瞬時に完成する場合もあります。
文字の扱いが簡単
p5jsなどでも文字は使えますが限定的です。HTML／CSSは配置・レイアウト・装飾などの機能が用意されています（むしろ、そのための仕組みです）。
レイアウトエンジンがある
要素をグリッド上に整列、文章の折り返しなど、レスポンシブデザイン的な機能が標準的に存在しています（逆にそこから逃れようとすると面倒になります）。
できることが限定的
できることが多くないことは悪い部分もありますが、限られた中での創作ゆえに思いつくアイデアもあります。さほどやりたいことのない自分は逆に制約をあった方がアイデアを考えやすいのかもしれません。
CSS楽しい
CSSを覚えるとブログの見た目をカスタマイズできたりして（本ブログのように）、覚えると楽しいです。
HTMLの悪い部分
悪い点を挙げます。
できないことも多い
CSSで2Dや3D的な変形（アフィン変換）やフィルタ（ブラー、ドロップシャドウ等）も使えるものの、限定的です。svgを使うとコードのみで線や図形が描けるが、p5jsに比べれば面倒。自由なレイアウトもやや面倒です。インタラクティブなこともhoverくらいしかできません。ただ、 手軽さが失われてしまうので、それらの面倒なことはあきらることをお勧めします！！
HTML／CSSを覚えないといけない
まあ、ChatGPTやCodePenなどもあるので、そんなに難しくないと思います。 もしわからなかったら、とほほのＷＷＷ入門で勉強しましょう。
楽しむためのTips
長くなりそうだったので、これらを楽しむためのTipsは別ページにまとめました。作る時の参考にどうぞ。
👉 HTML Creative Codingを楽しむためのTips - KITASENJU DESIGN BLOG
モチベーション
どういうモチベでやっているかですが、主にウェブデザインやグラフィックデザインの文化に影響を受けています。自分は過去にジェネラティブアートよりもそれらを応用的に扱ったデザイン的なもの（Adobe Flashとそれにまつわる文化）の中にいたため、そっち系に興味があるのかもしれません。
Web Brutalism
ウェブデザインにWeb Brutalismというジャンルがあります。HTMLやCSSの装飾性が剥き出しになったような、どちらと言えば簡素な、しかし造形は魅力的であるようなウェブサイトを指します。自分はそれらの見た目や実験精神・カウンター精神が好きです。彼らはp5jsやthreejsのようなライブラリも使うと思いますが、HTML(DOM)も使います。そんな敬愛するウェブブルータリストたちと同様、私も試行錯誤をしたいのです。
Web brutalism的なサイト集→ https://hallointer.net/、https://klikkentheke.com/
グラフィックデザイナーとの共通点
グラフィックデザインの分野はウェブデザインよりもずっと歴史は長く、文化としても成熟しています。その中でも一部のデザイナーたちが機能性は度外視に、視覚の新規性を競っていたりして、時として批判されることもあるのですが、そんな行為はクリエーティブコーディングとも共通している気がしています。そのようなグラフィックデザイン的なスタイルの試行錯誤をHTMLへ応用することはひとつモチベーションです。
参考用に自分が集めたデザイナー集→https://scrapbox.io/graphicresearch/。
UIをつくる
あと私のページのように一覧できるようなUIを作るとモチベーションがアップします。こういったUIは10数年前、よくFlashクリエーターたちが作っていたのです。このように入れ物を整備し、複数の作品をひとまとまりに見せるのも一興でしょう。
参考→https://onscreen.jp/、http://fladdict.net/、https://mrdoob.com/
ジェネラティブアートか？
ジェネラティブアートの定義として「自律的に動作する機構を使ったアート」というのがあります。
コードをブラウザが実行し、その描画システムがウィンドウ幅に対してレイアウトする、という側面はジェネラティブとも言えるかもしれませんが、一般にp5jsやその他のプログラミング言語で作られるようなものに比べると、ジェネレイティビティは弱いと考えています。
HTML Creative Coders
勝手ながら、私以外のHTML Creative Coderを紹介いたします。ご本人たちがHTML Creative Codingという語を使ってるわけではないですし、純粋にHTML／CSSだけということではないですが、その一端を見ることができます。
- ikeryoさん https://ikeryou.jp/
- Yehwan Songさん https://yhsong.com/
- Leander Herzogさん https://leanderherzog.ch/
- Jan Robert Leegteさん https://www.leegte.org/
おわりに
以上、HTML／CSSを使ったクリエーティブコーディングについて紹介してみました。もしご興味があれば、やってみてください。
