ウェブにおけるマテリアル・オネスティ(Material Honesty on the Web)
Translated with the permission of A List Apart and the authors.” ウェブにおけるマテリアル・オネスティ
by Kevin Goldman, 2013
https://alistapart.com/wp-content/uploads/2013/03/ALA372_materialhonesty_300.png?w=1920
橋を石膏で覆い、その石膏をフレスコで覆うことは全く正当だ...。だが橋をセメントで覆い、その接続部が石に見えるようにすることは偽りである。その手続きが軽蔑に値するのとちょうど同じだけ、もう一方は尊くもある。
―ジョン・ラスキン, 『建築の七灯』(1849)
「ものはそれが何かを模倣するよりそれ自体であるべきだ」という素材への率直さ(material honesty)という考えは、美術批評家のジョン・ラスキンから象徴的な合板椅子のデザイナーであるチャールズ＆レイ・イームズまで導いてきた考えだ。
その素材と工業的なプロセスへのあらゆる覆いと称賛を剥ぎ取ってみよう。椅子はむき出しのまま、まさにそれ自体(what it is)としてある。鋳型にはめられた合板として。そうであることによって、それはモダンであり、機能的であり、時間を超えるのだ。そう、この椅子は80年に亘って生産され続けているのである。
https://alistapart.com/wp-content/uploads/2013/03/Herman-Miller-Eames-LCW-Chair_b_1x.jpg?w=960
Eames Molded Plywood LCW chair, courtesy of Herman Miller, Inc.
今日、フラットデザインとスキューモーフィックデザインとの間で起きている議論がある。デザインについての健全な議論が行われている間に真の問題が先延ばしにされ続けることは、非難されるべきだ。どちらの側であれ、ウェブの住人は、いまだに彼ら自身の感性をもってしてウェブ素材のための語彙を解明しようとしているのだから。
幸いなことに、素材への率直さ(material honesty)についての19世紀から20世紀にかけての議論は、実践的なガイドラインとともに成熟した哲学に至る道を与えてくれる。私たちは、そのガイドラインを、私たちのウェブ素材についての意識を発展させ、長く続く作品を生み出し、よりよいデザインプロセスを評価し、共通化されたツールと曖昧さのない用語によってよりよく協働するために利用することができる。
まずはウェブ素材について定義し、どんなときにそれは率直であり、どんなときには率直ではないかについて理解することから始めよう。
Web materials(ウェブ素材)
ウェブ素材は3つのカテゴリーにとてもよくフィットする。(訳注1)
1. Foundation(基礎): HTTP, URL, HTML
2. Style(様式): CSS
3. Decoration(装飾): ラスタイメージ
FOUNDATIONAL HONESTY(基礎的な率直さ)
ウェブは HTTP(the how), URL(the where), HTML(the what) からなる複合物だと捉えるべきだ。これらの成分を一つでも欠けばもはやウェブを構成できないだろう。
お望みのレイヤーを置いてみたところで、もしこれらのプロトコルがなければそれはもはやウェブではない。それはすでに率直ではない。
例えば、フラッシュでできたサイトは基礎的な素材に欠けており、いずれ多くのポピュラーなデバイスで読み込めなくなるだろう。フラッシュサイトでは ページ 毎の率直なURLが存在していないため、それらはパーマリンクが作りづらい 不正直なページ であり、予測可能な方法でシェアできず、ブラウザバックボタンが期待しない結果を生むためナビゲーション困難である。検索BOTのいくつかはフラッシュのコンテンツをインデックスできるが、それは正直なHTMLをもたらさないので、SEO、アクセシビリティ、更新可能性において問題がある。これと全く同じ理由で、貧相に計画されたAJAXによるインタラクションもまた不正直であるのは公然たることだ。
STYLISTIC HONESTY(様式的な正直さ)
あなたは今、光速でCSSをタイプするゾーンに入っている。全く突然、あなたはタイピングをやめ、心持ちを変える。新しいアプリケーションを起動し、フォトショップのようなペイントソフトで線形グラデーションのラスタイメージを作り、ついにはそれをスプライトファイルに入れる。それもこれも #4d90FE から #4787ED のグラデーションを作りたいがためなのだ。これはハックである ―それもWEBにおいては不正直なプロセスと素材を作るだけの。そうして、グラデーションの色は容易に変更できなくなってしまう。ラスタイメージは忠実さを失うことなしに成長することはないし、それはページ読み込みにもう一つHTTPリクエストを増やしてしまう。これは不正直だ。
ラスタイメージのグラデーションは一例にすぎない。ライスタライズされたアイコン、テキスト、テクスチャー、ドロップシャドウのような光の効果なども同じだ。どの場合でも、WEBの普遍性は一部除去されてしまう。
一方で、純粋なCSS(Pure CSS)はラスタイメージを読み込まない。
純粋なCSSとは、 background-image, list-style-image, border-image, cursor:url のような不純な要素を除去するだけでは足りない。純粋なCSSは、物質的な素材を模倣することよりも製造プロセスを尊重する。見た目と製造プロセスの関係がより噛み合っていればいるほど、より素材に率直であることを理解してほしい。
一例をあげよう。純粋にCSSで作ったボタンで、ビンテージなステレオのノブのように細工されたものは不正直だ。そう、それがたとえ純粋にCSSのみで書かれていたとしても。それは、何かそれではない素材を模倣しているがゆえに不正直なのだ。それがたとえ鉄で作られたハイファイなコンポーネントに見えようと、それはCSSで作られている。ラスキンのニセモノの石のように、製造プロセスと見た目がつながっていない。
ドロップシャドウのような照明効果、フォームシャドウ、鏡面ハイライト、反射は、デジタルスクリーンのどこにも光源がないにもかかわらずこれらの照明効果を作り出しているがゆえに不正直だ。
シェーディング、シャドー、球根状ボタン(bulbous buttons)がなければ、私達はよりフラットな(あるいは 率直な, ネイティブな、 真正なデジタルの)ウェブを得ることができる。それをなんと呼ぼうと、フラットウェブはより内容に焦点を当てる。それは手早く組み上げられるし、読み込みも早い。デザイナーと開発者は同じツールを使うので、ワークフローはより協力的になる。
才能豊かな "平面王国の住人(訳注2)" はその仕事にエモーショナルな深みを付け加えるが、Dribbble の中では別段驚かれもしない。静的な画面だとみなされるなら、フラットウェブデザインはエアボールを投じるに等しい(訳注3)。 その代わり、平面王国の住人にとってのエモーショナルデザインのパレットは、一時性(temporal)だ。状態変更アニメーション、微妙なタイミング効果、戦略的に配置されたユーザーフィードバック、その他 "興味深い瞬間(interesting moments) "のうちに一時性の美が生きているのであって、ドロップシャドウやフォトショップのレイヤー効果の中にではない。 1980年代の木目を模したベニヤで包まれたオーブンレンジについて考えてみよう。こういったプロダクトのスタイルはすぐにだめになった。なぜなら、素材への不正直さがそのデザインを安っぽくし、すぐにベニヤが剥がれて汚くなったからだ。時代を超えた機械などとんでもない。一方で、製造過程丸出しのステンレススチールのオーブンレンジは、今日においても、機械として全き物として残っており、より高い値段の需要があり、よりスタイリッシュである。
DECORATIVE HONESTY(装飾的な正直さ)
基礎的な、様式的な正直さが存在すれば、装飾レイヤーは一番上部に生きることができる(そうする必要があるというわけではない)。この最も外側のWEB素材は、ミクロなメタファーとマクロなメタファーに分かれる。
ミクロなメタファー --地味なガウスノイズテクスチャー、またはショッピングカートとかごみ箱アイコンとか-- は寸法的にも、美学的な影響も小さい。ゴミ箱アイコンを"ゴミ箱"というリンクに変えてもサイトのユーザビリティと美観は影響を受けない。ミクロなメタファーはクールだ。汗を流してはいけない。
一方でマクロなメタファーは大きい。半透明で多色のプラスチック製仕切りタブをもった三穴バインダーみたいなものだ。それは美学を駆り立て、デザインはそれなしでは崩壊する。
デザイナーはときにマクロなメタファーを利用して静的なモックアップのデザインレビューを驚異的なものにしたり、賞味期限切れのツールやプロセスについてのスキルを活用したり、習慣から逸脱したりする。だが、エンドユーザーにとって、マクロなメタファーはどのように調理されたところで正直なものではない。
A continuum(ひとつながりのもの)
つまり、中傷する人の言うこととは真逆に、装飾のための場所があり、素材への率直さのための場所がある。これら2つはひとつながりのもの(a continuum)の上に存在しており、片方の端には装飾があり、もう片方に素材への率直さがあるのだ。デザインが率直になるか率直でなくなるかの明確な分かれ目はない。ウェブデザイナーは面倒でもそれを整理しなければならない。
デザインはいつまで様式を維持する必要があるだろう？どれだけ容易にサイトが編集できる必要があるだろう？顧客は *本当のところ* 模造的な(スキューモーフィックな)デザインを好きなのだろうか？顧客の好みから遠ざかることで、顧客を失う余裕はあるだろうか？もしそんな状態ではなく、あなたが数年に亘ってフォトショップのカンプでクライアントがデザインを判断できるように教育してきたのなら、彼に興味深い瞬間とユニバーサルアクセスデザインに焦点を当てるための再教育を施す間、あなたにはデザインプロセスを調整する移行期間があるはずだ。こんなことは一夜にしてできることではないが、もしあなたのデザインの意思決定を意識しているならば、あなたはそのつながりに沿って行きたい方向に行けるのだ。
偉大なジャズミュージシャンは言う、「ルールを壊すためにこそルールを知らねばならない」。哲学的に明晰な工業デザイナーや建築家のように、つながりの上に置かれた自らの仕事に意識的なウェブデザイナーは、ルールを壊し、遊び心に満ち、なお偉大なもの、永続的な作品を生み出しうる。
Stefano Giovannoni のトイレ用ブラシには芽が生えており、そのプラスチック製鉢植えは陶器のふりをしている。だがそれは機能する！その上、紛れもなく、彼はわかった上でルールを破っているのだ。
https://alistapart.com/wp-content/uploads/2013/03/Alessi-Giovannoni-Merdolino-Toilet-Brush_b_1x.jpg?w=960
Stefano Giovannoni’s Merdolino toilet brush, 1993. Courtesy of Alessi.
そのトイレ用ブラシはエモーショナルで楽しいばかりでなく、アフォーダンス、人間工学的にも完璧にデザインされている。それは今なお新鮮で、20年に亘って生産され続けている。
A materially honest process(実質的に率直なプロセス)
イームズチェアが新しい製造プロセスを必要としたように、率直なウェブはウェブデザインについての新しいアプローチを要求する。そのプロセスではカンプにかける時間は最小限にとどめ、素早くイテレーションを回し、プロトタイプによりコストをかける。
素材への率直なプロセスを新しいソフトウェアデザインツール (登場してはすぐに消えていくような)のリストから探すより、 _永続的に_デザイナーのツールの一部になるものに投資すべきだ。 それはペンでスケッチを書くことだ。
ペンでのスケッチは、おそらくはこの先も、どんな媒体よりも、アイデアを作り共有するための最も早く最も安価な方法だ。アイデアが固まっていない初期段階では特にそうだ。最初の段階でひとたびワイヤーフレームが完成してしまうと、ピクセルまで指定されたワイヤーフレームによって、顧客のみならずデザイナーまでもが探求すべきデザインはもう何もないと思ってしまう。そうでなければ、フォントやスタイル、グリッドへの要素の整列についての大騒ぎに導かれるだけだ。デザインの初期段階でそんなことに拘るのは馬鹿げている。
ペンでのスケッチはウェブ素材からかけ離れており、最終的なデザインと混同する恐れはない。ペンスケッチでフォントについて大騒ぎするのは望んでも難しい。これによって、皆が、まさに今やるべきことにフォーカスする。ペンでのスケッチでコンセプトが解決したら、デザイナーは顧客と率直に協働し 、ブラウザ上でデザインする ことができる。そうして視覚的なアイデアとプロトタイプを生きたものにするのだ。 29回目のDrive で、私達はペンスケッチで多くのプロジェクトを始めた。私達は営業の際にスケッチしながら話し、提案書の "What To Expect" ページにもスケッチするので、私達の顧客はそのスケッチを知っている。 スコッツデールにいるいままで顧客ではなかった人も、IPEVO のドキュメントカメラを使って大きい画面で共有するので、スケッチを容易に読める(予め作っておいたものだったり、リアルタイムに作ったり)。IPEVO には固定フォーカスモードがあるので、カメラに手が入り込んでもフォーカスは紙に当たったままになる。ウェブカムだともっと苦労するだろう。 https://alistapart.com/wp-content/uploads/2013/03/29thDrive-Pen-Sketch-Session_b_1x.jpg?w=960
Stefano Giovannoni’s Merdolino toilet brush, 1993. Courtesy of Alessi.
私達はしばしばIPEVOを利用して、家にいながら会社に残っているチームメンバーと協働で仕事をしている。それは人間的なプロセスを維持している。私達はまた、顧客が私達と一緒にスケッチできるようカメラを贈ってもいる。デザイナーではない人の「私はアーティストじゃないので」というステージを克服するのには時間がかかるが、努力し続けていると、彼らは突然美しく歪んだ箱を描き始める。そうしてよりよき協働が生まれる。
ペーパープロトタイピングのテクニック は人と一緒に行うと素晴らしいが、スキャンしてしまうと一致しなくなる。それで、顧客から離れて仕事しているのであれば、ミーティングの風景をビデオで撮影し、紙のプロトタイプを作りながらそのスナップ写真を撮るといい。そうして、だれでもアクセスできるアーカイブに投稿する。 Betting on your future(未来に賭けよう)
率直な素材と仕事をすることは刺激的だ。Typekit にいた人たちがはじめて真のタイポグラフィをウェブに持ち込んだとき、彼らもそう感じていたに違いない(ウェブフォントはSIFRやラスタライズされたテキストより正直だよね!?)。Ethan Marcotte がレスポンシブウェブデザインの原則を明言したときもそう感じただろう。正直なCSSフレームワークを作ったり、WordPressのテンプレートを作っているデザイナーや開発者たちもそうだと私は確信している。
率直な素材を使うことで、これらの人々はデザインコミュニティーのリーダーになった。革新の当事者のみならず、他の人々がアイデアをより遠くまで運んでいくことを促していった。それにはやりがいがあり、有益でもある。あと数年もすると、一連の流れのなかで、正直な領域に順応するために必要な厄介事を理解することを選んだデザイナーと、そうしなかったデザイナーとの間の分離が浮き上がってくるだろう。いまこそ、pointing finger(訳注5) をやめて、イームズの、ライトの、Giovannoni の教えを見つめ直すときだ。マテリアル・オネスティこそが長命をもたらす。私達の作品にとってもキャリアにとっても。
---------------------
訳注
1: どこからこのカテゴリを持ってきたかは不明。建築の引用が多いので建築かもしれない。建築だとたぶん構造・様式・装飾とか近そう。たぶん普通のプロダクトデザインにも当てはまる。
2: flatlanders.たぶん造語。平面土地の住人とかでも趣あってよいかも。
3: バスケでゴールに当たることなく外れること。手前のDribbbleと掛けている。
4: 原文は以下の通り。
"ORNAMENT. Integral element of architecture, ornament is to architecture what efflorescence of a tree or plant is to its structure. Of the thing, not on it. Emotional in its nature, ornament is- if well conceived-not only the poetry but is the character of structure revealed and enhanced. If not well conceived, architecture is destroyed by ornament." かなり難解で、一応私訳をあげておくが自信はない。
「装飾。建築に不可欠な要素としての装飾が建築に対してとる関係は、樹木や植物の風化がその構造に対する関係と同じである。表面にあるものとしてではなく、作用としての。そのエモーショナルな本性上、よりよく着想された装飾は、詩としてのみならず構造の性格として明らかにされ改善される。良くない着想の場合、建築は装飾によって破壊される。」
5: ウェブのポインティングデバイス用のメタファーのことを言っているのではないかとおもう。あと、たぶん最初のほうにでている finger-pointing とかけている。