デジタルデザインのリソースとして定着してきた「デザインシステム」。捉え方は幅広く、コンポーネントが集められたドキュメントであったり、共同編集できるツールに落とし込まれたりしているものも存在します。そんなデザインシステムを新たな方向性で捉え、ユニークな取り組みをしている「Design Systems International」というデザインスタジオがあります。その名の通り、デザインシステムに特化した会社なのですが、彼らのデザインシステムは「デザインを作るシステム」なのです。コンセプトを考え、大まかなデザインの方針が決まったらそれをジェネレートできるシステムを構築していきます。

特に特徴的なのは、そのシステムから生み出されたロゴデザインなどのグラフィックが必ずしも完全一致せず、複数のパターンで存在すること。色や文字の配置が違っていても、不思議と特定のブランドを認識できるのです。いままでのグラフィックデザインの常識を覆すデザインシステムを作る彼らのデンマークオフィスに伺い、デザインとシステムの新しい関係性について話を聞いてきました。

デザインのシステムであり、システムを使ったデザインでもある

── いま、日本でもデザインシステムやジェネラティブデザインは注目されています。Design Systems Internationalでは、いわゆるスタイルガイド的なデザインシステムとは違う、デザインとシステムを融合させた新しい取り組みをされていますよね。

Rune：はい、私たちがやっていることはいわゆるデザインシステムの枠ではないかもしれません。このスタジオから生み出されるものは「システムを使ったデザイン」です。

デザインにおいて、ルールやシステムは切り離せないものだと感じています。グリッドシステムを使ったレイアウトの考え方などは昔からデザインの定説としてあります。デジタルデザインが主流になってから、より複雑な要素が入り組むようになり、システムとして考えることがさらに必要になりました。それでもデザインスタジオの制作方法はあまり変わっていないように思います。特に、デザインとエンジニアリングの間にはまだ壁がありますね。デザイナーは未だに「ページ単位」でデザインしようとするんです。それがアプリやWebなどの「動的なデザイン」であっても。まだ印刷物と同じように考えてしまっています。

我々のスタジオは平面だけをデザインしないこと、そしてコードを素材として扱うことに挑戦してみています。グラフィックやロゴデザインでもデザインを作るためのシステムをまず作るんです。

── まさに「デザインツール」なんですね。一般的なデザインシステムとはまた違う分野になりますね。

Rune：デザインシステムと呼ばれるものは、Webサイトのデザインコンポーネントやスタイルガイドのように考えている方が多いと思うのですが、私たちはもっと幅広い分野として捉えています。コーディングを用いて作っていますが、基本はビジュアルアイデンティティ、ブランディングを作り上げるプロジェクトが多いですね。

Webなどデジタルメディアのデザインは結果的にコードに落とされるものなので、「デザインができたから、次はコーディングをします」ではなく、もっと早い段階でコーディングをしてもいいと思うんですよ。フレキシブルなのがデジタルの醍醐味であり、面白さでもあります。なので私たちのプロジェクトではフレキシブルさを表現する要素のひとつとして、システムが生み出した複数のデザインや、変形可能なデザインをロゴに使うことがよくあります。

ユーザーが変形可能なロゴシステムの開発

Martin：変形できるロゴとはどういうことか、事例でお見せしますね。

以前、The Processing FoundationのWebサイトとロゴをリニューアルしました。Processingは2008年にリリースされたプログラミング言語で、ご存知の方も多いのではないでしょうか。Processing財団のサイトも15年前のままだったので、作り変えるのはデザイン的にも開発的にも大掛かりになりました。中身は結構めちゃくちゃだったんですよ。使いやすく作り変えると同時に、昔からのユーザーも離れないことが前提だったので、その点はバランスが難しかったです。

まずはブランドシステムを作ることからはじめました。Processingはシンプルなコードでビジュアルを形成できる言語であり、アイデンティティとして​「​プログラミング」の要素は欠かせません。なので、ロゴそのものをプログラムとして作りたかったんです。

Webサイトのトップには、ユーザーが自由に操作できるプログラムを用意しました。このツールに用いたルールはとてもシンプルです。８×８のグリッドの中に３本の線、色は自由、直線か曲線に２〜４つのハンドル（ベジェ曲線のセグメントの曲がりを調整する部分）、線はモジュールに対して1.5倍。このシンプルなルールの図形がそのままProcessingのロゴを作っています。
自分で数値をいれて自由な形を作る体験ができる、はじめてのコーディングを歓迎するようなイメージです。一度変更したら、次にサイトに訪れたときに自分が作ったロゴが表示されます。

Rune：Processingの共同創業者であるCasey Reas氏と話したときに、「Processingはとてもテクニカルで難しい印象があるかもしれないが、いまは子供たちがプログラミングを学ぶために使われているし、遊び心があることを伝えていきたい。その一方で、美術作品のインスタレーションなどにも使われていて、とてもプロフェッショナルな一面もある。だからこそ、ビジュアルアイデンティティは幅広い範囲に対応できるものが良い。」といった希望を伝えられました。じゃあ、ただロゴを作るんじゃなくて、誰でもProcessingを体験できるロゴシステムにしようと、今回のシステムを作りました。

デザインシステムを作るためのシステム「Mechanic」

Rune：我々はロゴのグラフィックをデザインするだけではなく、ブラウザ上で使えるツールをよく作っています。こういったツールをたくさん作って学んだことから、Mechanic というサービスを開発しました。ポスターや名刺など、一定のルールを決めてシステムに落とし込み、文字や色を入れると自動でデザインルールに則ったデザインを複数案生成してくれます。これはいわばデザインシステムを作るためのシステムですね。

── Mechanic、私も触ってみました。便利で楽しいツールですよね。１種類だけではなく、無限にバリエーションを出してくれるし、思いもよらないレイアウトを提案してくれたりもしますね。

Martin：このDesign Systems Internationalのステッカーは一見全部同じように見えるんですが、実は異なるデザインになっています。これはMechanicを使って自動で生成された数種類を印刷したものです。

このシステムではカラーブロックの色や配置と文字の組み合わせなどをちょっとずつ変更することも可能です。Mechanicを使うとこのようにルールの領域を設定してシステムを構築できます。

── よく見ると全然一致していないのに、同じブランドであることを認識できるのがすごいです。新たな「一貫性」が生まれているように感じます。

Rune：そうなんです。完全一致ではなく、柔軟でありつつも同じだと認識できる範囲で作ることはできるんです。

Martin：最初にルールを考えるのはなかなか骨の折れる作業ではありますが、一度作ってしまえばずっと使えます。ルールの整備という一番大変なところを私たちが担っているのです。我々の場合Mechanicがベースにあるので、オーダーを受けてもかなりクイックに作ることができるようになりました。

Rune：「これがガイドラインです、これに沿って作ってくださいね」と教えるのではなく、ツールを作って渡したほうが正確で速くて良いな、と思っています。VI（ビジュアルアイデンティティ）のルールが組み込まれているツールであれば、手間がかからないんですよ。

── Spectrum Tokyoの画像も作れるようにして欲しい……！ Mechanicはオープンソースになっていますが、使っている人はいますか？

Rune：インハウスのデザイン部署などが使ってることもあるみたいですが、ヘビーに使っているわけではなさそうです。

制作会社だとすぐにやり方を変えるのは難しそうですし、このやり方はまだ早すぎるのかもしれません。これはもともと自分たちのために作ったものなので、他の人が使うかどうかはあまり気にしていないんですけどね。

Martin：Mechanicはデザインシステムのアイディアを広めるために作ったものでもあるので、これを見てシステムとデザインのポテンシャルをわかってもらえればいいんです。これをオープンソースにすることで、もっと興味を持ってくれる人が増えればいいなと思っています。誰かのためになっていたらとても嬉しいですね。

よりコンセプチュアルにルール化する

── Mechanic以外のブランディングのプロジェクトもあるんですか？

Martin：よりコンセプチュアルなデザインだとこんなものもあります。「AIxDesign」というAIを活用するデザイナーやクリエイティブテクノロジスト、アクティビストのためのグローバルコミュニティのために、ブランドシステムをデザインしました。

ロゴタイプとカラーパレットはすでにあったので、それをシンプルなレイアウトシステムに落とし込みました。もともと彼らはカラフルなBlob（スライムのような流線的な形）を装飾に使っていたんですが、それぞれの形が意味を持っているわけではありませんでした。そのBlobの代わりに、オープンイメージ（AIが学習するための画像のライブラリ）からオブジェクトのシルエットに色をつけたものを装飾として使用することにしました。

言葉だと伝わりづらいと思うのですが、たとえばこのパンダのシルエットだと、こんな風に……！

── 想像以上に抽象的でした。これだとランダム性がありつつも、AIの要素がデザインに落とし込まれていてコンセプチュアルですね。

Martin：こういったことも表現の豊かさに繋がりますよね。このシステムだとどんな画像からも生成できます。彼らの遊び心を残したままリブランディングしたかったんです。

コードもデザインを作る「素材」として考える

── デザインシステムはこれからどのように発展していくと思いますか？

Rune：現状、デザインシステムはプロダクトデザインだけのものになってしまっている気がします。スタイルガイドに近いような。でも、考え方によってはもっと広く使えるものだと思います。

Martin：将来的にはグラフィックデザイナーやコミュニケーションデザイナーにとって新しいデザインの手法になると思っています。現代のデザインはとても複雑になってきているので、かつて使われてきたデザインツールが最適とは言えなくなってきました。デジタル環境にマッチした作り方をしていく時代に変化しているのではないでしょうか。

デジタル領域で働いているデザイナーはコードを「素材」のひとつだと考えてみてください。たとえば粘土を使って作品を作るのであれば、粘土の専門家になる必要はないですが、粘土でなにができるか、できないかは知っていたほうがより良いものが作れますよね。それはコーディングも一緒です。

Rune：そう、ちょっとずつ遊んでみるといいですよ。そうしていくうちにコーディングで「モノを作る」から「システムを作る」ことができるようになっていくと思います。

── もっとデジタルで遊んだほうがいい、ということですかね？

Rune：デジタルメディアからなにかをひらめくようになれるといいですよね。イームズ夫婦は、彼らが木の特性についてよく理解しているからこそ美しいカーブの椅子が作れている。デジタルデザイナーも同様に、コーディングの特性を知っておくとさらに自由にものづくりができるのではないでしょうか。

── デザインシステムを制限と考えず、創造性をさらに拡張するための道具にできると面白いですね。デザインシステムはもっと自由なものだと感じさせられました。

Runeさん、Martinさん、ありがとうございました！

関連リンク

Design Systems International