本記事は北欧のデザインメディア DeMagSign の翻訳記事です。
元記事はこちら：Where Graphic Design and Programming Meet

プログラマーでありデザイナーでもあるStig Møller Hansen氏が、デザインツールとしてのプログラミングの可能性を探す旅にご案内します。デザインにコードを取り入れることのメリットから実践的なアドバイスまで、魅力的なトピックについて詳しく紹介していきます。この記事を読めば「デザインとプログラミング」という興味深いテーマに関する理解がぐっと深まるでしょう。

・・・

Stig はデザイナーであり、伝道者であり、さらにはグラフィックデザイン、プログラミング、教育学にまたがる分野の研究者でもあります。コンピューターグラフィックデザインの博士号を持つ彼は、デンマークにある大学 Danish School of Media and Journalism（DMJX）の教壇にも立っています。私たちはそんな彼と非常に示唆に富んだ対談をし、デザイナーが自分たちの作品にプログラミングを取り入れるためのアプローチ、そしてプログラミングがデザイナーのマインドセットに与える影響についての理解を深めました。

──クリエイティブコーディングとはどんなものでしょうか？ また、どのような起源があるのでしょうか？

クリエイティブコーディングとは、コーディングによってデザインとアートを作り出すもので、一般的ながら曖昧な言葉です。Andrwe Bell氏はこれを「美的感覚を伴うプログラミング」と表現しました。この言葉の正確な起源は不明ですが、そのひとつとして挙げられるのはJohn Maeda氏の『Creative Code』（2004）でしょう。この本には、JohnとMITのAesthetics+Computation Groupの学生が行った、コードによるビジュアルの探求と実験についての記録があります。

私が知る限りもっとも適切な定義は2013年のMitchellとBown氏によるものかもしれません。

（前略）探求、繰り返し、振り返りからなる発見に基づいて進められるプロセスであって、コードを基本的な媒体とし、アートの文脈に沿ってデザインされた成果物を目指すもの

個人的にはクリエイティブコードという言葉が好きではありません。デザイナーではないプログラマーが書いているコードがクリエイティブではないかのように聞こえるからです。私にとって、データベースやバックエンドのシステムなど機能を追求するプロダクト開発も同じようにクリエイティブなものです。私たちが表現力のあるアウトプットを重視するからといって、「クリエイティブ」という言葉を独占的に使っていいわけではありません。

──クリエイティブコーディングの価値が再発見されつつあるようにも思えますが、どのようにお考えですか？

もし80年代にプログラミングやコンピューターに興味を持っていたら、オタク扱いされたかもしれません。しかし現代では、コードについて理解していないと認めることは恥と等しいです。私たちの生活はソフトウェアとコードによって制御、監視されているのですから。Douglas Rushkoff氏の言うとおり、「コードに対する理解はデジタルワールドを生きる上での必要条件」なのです。

90年代にはインターネットが新たなホットスポットとなりました。そのテクニカルな性質によってデザイナーはこの新たなメディア上のデザインを学ぶ必要があり、さらにそれはコーディングも含まれていました。デザインツールとしてコードが持つ可能性への関心が高まると、さまざまなプログラミング環境（特に、ビジュアルデザイナーのニーズに特化したもの）が登場するようになりました。

もっとも長く使われている言語はProcessingで、今年で20周年を迎えます。Processingは単なるプログラミング言語ではなく、やがて非営利団体となりました。彼らは、ビジュアルアートにおけるソフトウェアリテラシーとデザイナーのための多様な包括的コミュニティの促進に取り組んでいます。

クリエイティブコーディングに対する関心が高まっていることは、このトピックに関する書籍やチュートリアル、ライブ配信、講座、ワークショップ、イベント、会議などの増加からもわかります。もっとも有名なコーディングに関するYouTubeチャンネルのCoding Trainの登録者数は126万人です。

──グラフィックデザインにおいてコードはどのように使われているのでしょうか。

ほとんどのデザイナーは、クリエイティブコーディングのツールをインストールするだけで使うことができます。しかし多くのデザイナーは、自分自身で書いたコードとインターネットで見つけたコードをうまく組み合わせることでコードを作っています。

開発環境に関していえば、グラフィックデザイナーには多くの選択肢があり、そのほとんどがオープンソースです。環境環境は、そのデザイナーのプログラミングの知識となにをしたいのかによって決まります。テキストベースの環境（Processing、openFrameworks、Cinder、three.js、p5.js、hydraなど）を好む人もいれば、ビジュアルベースのドラッグアンドドロップ式のインターフェース（Nodes、Max、Vuo、TouchDesignerなど）を好む人もいます。今の多くの開発環境は、ユーザーがそのふたつを行き来できるようなハイブリッド型のフォームを提供しています。

まったくの初心者でも、p5.js’ browser-based editorを使えば簡単に始めることができます。p5.jsには、構文やプログラムの構造を理解するのに役立つサンプルが豊富に集められています。コードを画面上のピクセルに変えるためのできるだけ短い手順の方が良いという考えに基づいており、ちょっとコードを書いて、実行して、結果を確認する、そしてまた書いて、また実行する、というプロセスを繰り返します。自分が目指すプロダクトに向かって自分なりのやり方を作り上げるのは、このような繰り返しのプロセスなのです。

「コードを使い始めると、実体のないものであるにも関わらず、コードが思いどおりに形を変えられる驚くべき媒体であることに気づくでしょう」

──コードによってグラフィックデザインは新たな局面を迎えるのでしょうか？

私たちに染みついている視覚的な伝統や、視覚的なコミュニケーションのルールは、コンピューターが登場する前に確立されたものです。データモッシュ、グリッチアート、ピクセルソーティングなどのテクニックは、1950年代のジャズのレコードのジャケットには見られません。これらのテクニックは物理的な制約を超える、コードを素材に使ったデジタルメディアがあって初めて可能になるものです。グラフィックデザイナーには、デジタル世代の申し子とも言える新たなジャンルを切り開く力があるのです。

学生がコーディングの授業を受けると、彼らはいままで思いつきもしなかったような場所にインスピレーションを求め始めます。たとえば私のところの学生のひとりは、「Langton’s Ant」と呼ばれる２次元のチューリングマシンを使い、ツイートをリアルタイムでビジュアル化しました。「Langton’s Ant」は何十年にも渡ってコンピューターサイエンスの教育で使われているものですが、これがデザインスクールでも使われたというのは驚くべきことです。また私は、デジタルの時代の前後には美的感覚に明確な違いがあると考えています。クリエイティブなプログラマーがコードを使って作品に組み込む表現は、非常に複雑であることが多いです。著名なクリエイティブなプログラマーであるJoshua Davis氏は次のように言っています。

コンピューターがユーザーの手作業をなんとか真似しようとしていた時代から、コンピュータが一瞬で作り出す複雑なデザインを手作業で再現することが不可能な時代への変化を私たちは目撃したのだ

──アルゴリズムを扱うことはデザイナーにとってどんなメリットがあるのでしょうか？

アルゴリズムや計算を使うことは、デザイナーの作品のあらゆる面に大きな影響を与えるでしょう。発想、スケッチ、選択、キュレーション、制作、納品、クライアントやユーザーとの共同制作など、数え上げればきりがありません。

コーディングを学べば、コンピューターを使うことでしか実現できない、未知なる美しさの可能性を知ることができます。またこれは、デザインの哲学的な観点から考えると、自明のものであった限界や、商業ソフトウェアのパスティーシュから解放される方法でもあります。あなた以外にも何百万人というユーザーがアクセスしていて、まったく同じツールやプラグイン、ライブラリ、チュートリアルを使っているAdobe Creative Cloudを使用したあなたの作品が、果たしてユニークなものになるでしょうか？ コーディングができれば、自分だけのユニークなデジタルデザインが可能ですし、それによって誰にもまねできないデザインを作り出すことができます。

もうひとつ明らかなメリットはスピードです。アイデアは、実行して評価してまた実行してというステップを繰り返しながら結実していきます。この実行のパートをコンピューターに任せてしまえば、より多くの時間を評価に割くことができます。こんなに楽しいことはありません。こうすれば、自分が定めたソリューションの範囲における無数の可能性を見ることができます。あなたは、いまはまだコンピューターが代替できない人間だけの能力、すなわち美しさの観点からソリューションの評価を行い、最善のものを選べばいいのです。

また、コードはクリエイティブな活動における素晴らしい練習相手にもなります。とくに、自分が作ったプログラムが想定通りに動かない時、Bob Ross氏が言うところの「嬉しい誤算」が起こったようなときは正にそうです。不具合やバグ、不適切に組み込まれたアルゴリズムのおかげで、素晴らしい結果にたどり着くことがあります。そのような誤算には感謝し大事に保存するようにしましょう。

最後に、コーディングによるデザインシステムはインタラクティブなものにしやすいというメリットもあります。また直感的なインターフェースが用意されているため、ユーザーは共同のデザインプロセスにおいてより主体的にデザインに参加することができます。

──コーディングできるようになることで、デザイナーの活動にはどんな影響があるでしょうか？

グラフィックデザイナーがプログラマーのような考え方をし始めれば、これまでは見えていなかった、グラフィックデザインとプログラミングとの関連性が見えるようになるでしょう。Brad Tober氏によればメタデザインとは、「それぞれのモノのデザインにだけ気を取られていたデザイナーが、デザインのための新たなツールやシステム、手法の創造者または開発者になるという、役割の変容」です。９月のDesign Matters 21でワークショップを開催したRune Madsen氏もまた、メタデザインとアルゴリズム的なデザインシステムに関する素晴らしい文章を書いています。

また、コードの読み書きができる学生のデザインに対するアプローチも変化しました。プログラミングを学ぶ前は、自分がデザインしたものを、一定の定まったみた目を持つ静的なモノであると無意識に理解することが多かったのです。私のプログラミング講義を受けると、彼らはデザインをさまざまな状態を取り得る動的なシステムであると考えるようになる傾向があります。彼らはプロパティと変数の配列でシステムを作り、をれをインタラクティブなプロダクトとして提出するのです。わかりやすくいえば、彼らは.psdファイルやaiファイルではなく、exeファイルやappファイルを提出するようになるということです。

──デザイナーがコードを学ぶ上でもっとも難しい点はなんでしょうか？

私の経験では、デザイナーはコードを学ぶことがとんでもなく難しいことであるかのように思い込んで学び始める傾向があります。もうひとつの大きな問題は、多くのデザイナーは数学に対しておよび腰であり、トラウマを持っているような状態であるということです。これは、学校の課題で演習の目的がはっきりしなかったり、目的との関連性が薄い状態であったりした経験が原因であることがほとんどです。グラフィックデザインを突き詰めて行くと、サイズ、割合、量、位置、規模、回転などを表す数字に行き当たります。ですから、デザイナーは幾何学、三角法などといった数学的な考え方の基本を理解している必要があるのです。数学がいかにデザイナーの作品に関係があるもので、便利なものかを実感すれば、突如として数学は再び面白いものになるでしょう。

コードの書き方を学び始めると、何度も壁に当たるはずです。暗号のようなメッセージ、構文エラー、セミコロンの欠落、それにややこしい専門用語など、危険が山ほどあります。エラーを追いかけ、バグを探し回ることは時間のかかる作業ですし、クリエイティブなプロセスにそれほど貢献するものでもありません。しかし、穴に落ちた時に自分自身を引っ張り上げ、正しい道に戻る方法を学ぶことが重要なのです。

最後に、もしかしたらもっとも難しいのは長期的に続けることかもしれません。もしコーディングと計算を自分のデザイン活動の重要な要素にしたいなら、普段からそれらを使わなければなりません。あらゆる職人と同じように、自分が扱う道具を常に近くに置き、その可能性と限界と性質を理解し、大切にしなければなりません。大層なプロジェクトを手がける必要は無くて、ただコードを書く練習を続けることこそが重要なのです。

ーーデザイナーが使い方を学ぶべきツールやフレームワークはなにかありますか？　デザイナーはなにから始めたら良いのでしょうか。

まったくの初心者であれば、私はProcessingかp5.jsをおすすめします。どちらもラーニングカーブが非常に緩やかで、インターフェースもいたってシンプルです。どちらを使っても、簡単にコードを書き始めることができ、画面上でちょっとしたピクセルを動かすことができると思います。またこれらのツールは、ループや条件分岐、ファンクションといったプログラムの基本的な構成要素を学ぶために最適なプラットフォームでもあります。数々の本、チュートリアル、動画、講座もありますし、Processingにもp5.jsにもソーシャルメディアのグループがあります。また、Webサイトや共通の掲示板には、初心者が必ず突き当たる多くの疑問に対する答えがあります。

もし他にはどんなものがあるのか知りたいのなら、かつて私の学生であったTerkel氏が素晴らしくクリエイティブなコードを集めています。クリエイティブコーディングを扱いたいと思っている人にとっては絶好の出発点になるでしょう。最後に、Tega Brain氏とGolan Levin氏の共著で最近出版された、『Code as Creative Medium』もおすすめです。便利な演習と例題がぎっしり詰まっていて、デザイナーあるいはアーティストとしてコーディングを学ぶためのインスピレーションに満ちた宝物に違いありません。

Written by Giorgia Lombardo（Design Matters）

Translation brought to you by Spectrum Tokyo