コードでデザインをするということ
この記事は2022年12月10日開催のSpectrum Tokyo Design Fest 2022で話したセッションの内容を文字起こししたものです。
僕は15年ほどWebに関する業界で働いています。はじめは小さなベンチャーでWebデザイナーとして仕事をはじめ、自分でデザインして自分でコーディングするというキャリアからはじまりました。それからフロントエンドデベロッパー、UXエンジニア、デザインエンジニアと肩書を変えてきています。
その中で、CSS設計の書籍の執筆や、Figmaのプラグイン開発、デザインシステムのリードなどの活動をしてるんですが、基本的にはコードを書くことをメインにしつつも、デザインに近い領域で仕事をしてきています。
Code is a Material
僕がデザインとコードの両方についての考えを巡らせるきっかけになったのは、2019年に観たデザインシステムのカンファレンスのいちセッションでした。
それが "Code is a Material" というタイトルです。
もちろんこのセッションの内容自体も素晴らしかったんですが、僕はこのタイトルそのものに深く感銘を受けました。
プロダクトのデザインというと、木でできた椅子であれば、その木の素材のことを理解してデザインするでしょう。固さやしなやかさなどですね。服のデザインも同様で、肌触りや質感、もしかしたら洗濯しやすさも考えるかもしれません。車のデザインはもっと複雑です。外観をスタイリッシュに描いても、それが安全で乗り心地の良い車になるわけではありません。いろんなパーツや素材などを理解・試行錯誤してデザインするでしょう。
ならば僕のかかわるデジタルのプロダクトデザインにおいては、コードを素材として考えるという観点は面白いと感じました。
彼らはダイナミックアイデンティティや動的なデザインなど、コードをプロトタイピングや成果物そのものに使うということで、そうしたデザインへのアプローチについてこのセッションでは語っています。
今回僕のセッションでは、実際に僕の仕事の近いところの話をします。
スマートフォンが登場して以後、色々なデバイスやスクリーンでWebが利用されることが増えました。そこでレスポンシブ・ウェブデザインという設計思想も生まれましたわけですが、実際に水のように流動的なコンテンツを受け止める器をどうデザインすれば良いのかを考える必要があるわけです。
よくある例をあげると、こういうカードコンポーネントのデザインです。モバイルとデスクトップそれぞれの理想を描いた静的なデザインを、実装担当となるエンジニアに渡すというシーンはおそらくよくあるはずです。
ところがいざ実装していくとなると、その中間のスクリーンでの振る舞いというのはわからないということがよくあります。
その実装を担当するエンジニアがデザインの経験などがあってよしなにデザインしてくれることもあるかもしれません。そうでなければただ写真が横に伸びてしまう・テキストが適切に折り返されず読みづらくなるなど、それはユーザーにとっても嬉しくない結果を招きます。現実的には、実装する担当者がデザイナーに「ここはどうなるのか？」などとコミュニケーションをとって解決することはあるかもしれませんが、ある程度は設計段階で解決しておきたいところです。
この話は「実装者にやさしいデザインをする」とかって話ではありません。コードの理解をすることでクリエイティビティが制約されると考える人達もいるかもしれませんが、むしろクリエイティビティを膨らませるのに役立つと考えています。
次のデモは、簡易的なCSSでつくった、スクリーンサイズにあわせて動的に文字サイズが可変するデモです。
font-size: clamp(1.5rem, 0.5rem + 2.5vw, 2rem);
ポイントはvw(viewport-width)というスクリーンサイズに対しての相対的な単位によって、スクリーンサイズに応じたフォントサイズにすることです。ただそれだけだと、極端に広いスクリーンサイズだと文字が大きくなりすぎてしまうので、最小・最大値を決めるclamp()というCSSの関数を使っています。
こういった静的なデザインツールでは表現できないけどコードできることを知っておくと、スクリーンサイズを固定せずに読みやすいコンテンツの設計を考えることができたりとデザインの幅も広がるんじゃないでしょうか。
水のようなコンテンツを受け止める器の素材として、コードという柔らかい素材を扱えるようになると、デザインはもっと面白くなると思います。
Code is a Meta-design tool
別の視点でコードとは何かを考えてみます。
ドナルド・クヌースという数学者・計算機科学の分野の著名な方で、彼の著書からの引用をします。
メタデザイン、つまりデザインのデザインというのは、ただデザインするより難しい。言い換えると、ただ線を描くようなことは簡単だが、それをどう描くかを説明するのはもっと難しいということです。
彼は『The Art of Computer Programming』という本を書いているのですが、その改訂版の組版が気に入らなかったというので、TeX（テフ）という組版処理システムを作りました。そのときにMETAFONTというフォントを作るプロトタイピング言語もつくりました。
例えば「a」という文字を僕が書いて、他の人が同じようにそれを描くことはできません。たぶん明日の僕も同じ「a」はかけません。METAFONTではその筆の軌跡のような情報をプログラミングによって再現できるようにしたわけです。
このようにコードによって「デザインのデザイン」をするツールという側面もあるのだと考えました。
僕の普段の仕事に近い話だと、タイポグラフィやスペースの設計において、計算を用いてつくる方法があります。
これはモジュラースケールと呼ばれる手法で、調和の取れた設計に使えます。ただの2の倍数・4の倍数というように等倍で作られるものではなく、基準となる値に対して、ある比率をかけ合わせていくことによって、美しい曲線を描くように定義をつくりあげることができます。比率あげればジャンプ率が高いものにできたりと、デザインの意図にあわせて適した設計ができます。ひとつひとつ手作業としてつくるよりも、再現性・拡張性のあるやり方です。右側のコード例はCSSで、このベースを作ってしまえば、基準値や比率を変えるだけでつくることができます。
僕はこうした自動化のような取り組みが好きで、よくFigmaプラグインの開発によって実現しています。
Contrast Gridは「背景色」と「文字色」のコントラスト比が適切かどうか（WCAG 2.1に従って、4.5:1の比率以上かどうか）を見極めるためのプラグインです。色をまとめて選ぶだけで、その結果を生成します。
カラーパレットを設計するときに、この検証をひとつずつやるのは骨が折れるので、効率化するために作りました。このContrast Gridというアイデア自体はEightShapesという会社がWebツールとして公開しており、そのソースコードも公開しています。その実装を元に改良を加えたのがこのプラグインですが、コードを扱うことができると、このようにコードを参考に新しいものを生み出すこともできます。
このあたりのプラグイン開発の話は、Figmaのカンファレンス Config 2022でも話したので、興味がある人はご覧ください。
Code is a Language
ちなみに僕はこのグローバルカンファレンスでは日本語で話しています。しかしトピックはコードの話なので、おそらくは日本人話者じゃない人にも少しは伝わるかなと信じていました。
そう考えてみると、コードは「言語」としての捉え方もありそうです。
プログラミング言語としてのコードは、機会と対話するためのものですが、「言語」として抽象的にとらえると、その言語からは「文化」「思想」も学べるのではないでしょうか。日本語や英語などの自然言語と同じようにです。
『達人プログラマー』という書籍では、新しいプログラミング言語を学ぶことで、普段のプログラミング言語でよりよい解決をするためのアイデアを得られるというようなことが書かれています。
僕の考えを加えると、その言語を扱う人のことをよく知ることにもつながると考えています。
一方で「デザイン言語」という言葉があります。デザイン言語は文脈や定義も色々ありますが、ここでは「プロダクト・組織の価値観を言語化したもの」とします。いわゆるデザインシステムは、それを体現する仕組みともいえそうです。僕はこのデザインシステムを見るのが好きなのですが、なぜ好きかというと、そこに「プロダクト・組織の文化や思想」を感じ取れるからです。
Zendeskはクラウド型カスタマーサービスプラットフォームです。そのZendeskの公開しているデザインシステム Gardenをみると、Contentというナビゲーションが先頭に来ています。Contentはいわゆるライティングやメッセージについてのガイドラインなのですが、これは対ユーザー・顧客とのコミュニケーションにおいて重要な内容です。Zendesk自体がカスタマーサービスのためのツールなので、デザインシステムにおいてもコンテンツガイドラインを優先した設計になっているのには意味がありそうです。他のデザインシステムと比べても、よくできた内容になってるので、ぜひ見てみてください。
Twilioはクラウドコミュニケーションプラットフォームサービスで、電話・SMSとネットをつなぐAPIを提供しています。Twilioのデザインシステム PasteのナビゲーションをみるとAccessibilityというコンテンツへの導線が目立ちます。また各ページでもAccessibilityやInclusiveといったキーワードが点在しており、これもまたTwilioの事業として「誰でも使える・つながる」というのは重要だということでしょう。
デザイン言語とコードは同じ言語といっても性質が違うので、一緒くたにしてしまうと誰かに怒られてしまいそうですが、あらためて「言語」として抽象的にとらえると、それぞれの言語を学ぶことによって「文化・思想」を知るという点では共通しているのだと思います。
実際に僕自身はこの2つの言語をバイリンガルとして学ぶことで、それぞれの人格で片方からヒントを得ることもあるし、合わせて新しい発想ができることもあります。あるいは、それぞれの言語を扱う人々とのコミュニケーションに上手く活かしたりと、いちデザイナーとしての幅が広がったと僕自身は感じています。
この話が、コードに触れてこなかった・難しいと感じるデザイナーの役に立てば嬉しいです。
コードを素材としてデザインをする、あるいはデザインの生産性向上などのために扱う、そして言語として学びデザインやコミュニケーションの幅を広げるためにチャレンジしてみてください。
付け加えるなら、コードを学ぶことで「エンジニアに優しいデザイナー」のような存在に留まらず「より強いデザイナー」になることを願います。
明日の元気の素になります。