最近ではFlat Designが日本でも話題になっていますが、この記事ではコンセプトまで言及しています。この記事を読むことによって読者の方がコンセプトを理解しFlat Designへの造詣が深まるでしょう。またひょっとしてウェブが新しい時代の入り口にさしかかっているもの感じていただけるかもしれません。

# 372

マテリアル・オネスティー

マテリアル・オネスティー (訳注:ここでいうHonesty、HonestはどちらかというとSimplicity的な意味もあります。
この投稿に対するコメント欄にも同じ事を言っている人がいますが、「ウェブデザインの世界でオネスティという言葉を使うのはちょっと合わない気がする。それはSimplicityに置き換えられないか」と発言してます。ここでは適格な日本語表示はないのでカタカナ表示とします。)

「レンガをしっくいで覆い、その上にフレスコ画法をほどこすのは正統法である。しかしレンガをセメントで覆い、それをつなぎ目をほどこして石のように見せかけることは完全に偽装である。まさに前者が高潔であるとすれば、後者は下劣な方法である」

美術評論家ジョン・ラスキン『建築の七灯』(The Seven Lamps of Architecture)1849年

マテリアル・オネスティー(物質は模倣した何か別のものではなく、その物質の姿であるべきだというと考え)は、美術評論家ジョン・ラスキンを始め、プライウッド・チェア LCW でお馴染みのデザイナーのチャールズとレイ・イームズに至るまでの人々を導いてきた。

どんな覆いをも剥ぎ取り、その素材(成形合板)とその製造工程の両方の恩恵を預かることによって、椅子本来の姿をあらわにする。こうして、それはモダンで機能的で、そして時代を超越したものになる。そう、時代を超越するのである。実際、そのイームズの椅子は80年もの間継続的に生産されている。

椅子 ハーマンミラー イームズ
イームズの成形合板LCWチェア 提供ハーマンミラー社

今日、「フラットデザイン」と「スキューモーフィックデザイン」間で素材の議論が持ち上がっている。 デザインに関する議論が活発であるが、あまりにも多くの問題の指摘がこの問題自体を長引かせている。今でもあらゆる立場のウェブに関わる人々がウェブ素材に対する感性やボキャブラリーに関して試行錯誤を繰り返している。

幸運なことに、19世紀と20世紀のマテリアル・オネスティーの議論は、実用的なガイドラインと共にこの哲学を成熟させるための手段を与えてくれた。現在私たちは、ガイドラインをウェブ素材に対する自分たちの意識を高めるため、永続する作品を生み出すため、そしてデザインプロセスをもっとスマートにするため、さらには一般的なツールや曖昧さのない用語とうまく協調して取り組むために用いることができる。

中心となるウェブ素材を定義し、それらはどのようなとき「オネスト」と言えるのか、「オネスト」と言えないのかを理解することから始めよう。

Web素材

Web素材はきちんと3つのカテゴリーに納まる。

  1. ファンデーション: HTTP、URL、およびHTML
  2. スタイル: CSS
  3. 装飾: ラスターグラフィックス

基本となるオネスティ

ポール・ロバート・ロイズの記事「The Web Aesthetic」(Web美学)が基礎を築く。

「ウェブはほぼ、HTTP(どのように)、URL(どこ)、HTML(何)の各種要素から構成されると考えられる。これら各種要素のどれか一つでも欠けると、ウェブを構築できなくなる」

載せたいものを重ねていく。しかしプロトコルが存在しなければ、それはウェブではない。それは「オネスト」ではない。

例えば、基本的な素材を欠くFlashサイトは多くの人気のデバイスで表示されないだろう。Flashサイト各ページの「オネスト」なURLが存在していないと、パーマリンクが難しく、考えつく方法で簡単に共有ができず、ブラウザのBACKボタンが予期せぬ結果を引き起こすのでナビゲーションが難しい。Flashサイトは実に「非オネスト」なページである。

検索ロボットの中にはFlashコンテンツをインデックスできるものもあるが、Flashコンテンツは「オネスト」なHTMLを提供しないので、あらゆる類のSEO、アクセシビリティ、および更新可能性の問題が生じる。設計されていないAJAXの相互作用が、これら同じ理由から「非オネスト」となるだろうことは言うまでもない。

スタイル的オネスティ

こんな場面を想像してみてほしい。すごい早いスピードでCSSをタイプしている。突然あなたはタイプをやめ、考え方を変えて新しいアプリをスタート、Photoshopのようなアプリケーションでリニアグラデーションのラスタイメージを作成する。最終的に#4d90FEから#4787EDへ色の変化するグラデーションを作成するためにそれをスプライトファイルに追加しなければならないとしよう。これはハックでしかない。

なぜならそれはウェブ上で「非オネスト」なプロセスであり「非オネスト」な素材を作成する。結果グラデーションの色を簡単に変えられない。ラスタイメージは、拡大されれば必ず再現性(クオリティ)を失う。そしてページロードの際に別のHTTPリクエストが発生する。これは「非オネスト」である。

ラスタグラデーションはほんの一例である。ラスタ化されたアイコン、テキスト、テクスチャー、およびライティング効果もまた一般的である。すべての場合において、ほんの少しづつウェブの広汎性が取り除かれている。

一方、純粋なCSSはラスタイメージではない。

しかし、純粋なCSSというのは、単にあなたの作業からbackground-image, list-style-image, border-image, and cursor:urlのような不純要素(画像)を取り除くことだけを意味しているわけでもなく、また存在する素材を模倣するのではなく、作業工程を尊重するということである。外観と作業工程間の関係がよりうまく絡み合うものほど、素材はより「オネスト」となるのがわかるだろう。

ここにひとつ例がある: ビンテージもののステレオノブのように見えるように精巧に作成された純粋なCSSのボタンは「非オネスト」である。そうなのだ。例えそれが純粋なCSSであっても「非オネスト」となるのである。なぜなら素材がそのもの自体でなく、何かを模倣したものだからである。それはスチールで製造されたハイファイコンポーネントのように見えるが、実際はCSSで作られている。 見栄えと作業工程が切り離されてしまう。まるでラスキンの言う偽造の石のようである。

ドロップシャドー、ボックスシャドー、ハイライトやリフレクションなどのようなライティング効果でさえ非オネストである。なぜならライティング効果を作り出している光源がデジタルスクリーンの中にないからである。

すべてのシェーディング、シャドウ、そして立体的な丸ボタンがなければ、ウェブはよりフラット(またはオネスト、ネイティブ、真のデジタル)になる。好きに呼んで構わないが、「フラットウェブ」はよりコンテンツにフォーカスしたものになる。フラットウェブはスピーディに作り上げることができ、またローディングも早い。デザイナーと開発者が同じツールを使うので、ワークフローはより協力的でもある。

能力のある「フラットウェブ構築者」は作業に「感情的な深み」を加えられる。しかし、それはDribbble上で他人をワーッと言わせるような類のものではない。静的なスクリーンとしてみなすと、フラットウェブデザインは積極的な姿勢を示すものではない。

代わりに、「フラットウェブ構築者」がなすエモーショナル・デザイン(感情に訴えるデザイン)のパレットは時間的である。 時間的な美はドロップシャドーやPhotoshopのレイヤー効果ではなく、状態が変化するアニメーション、微妙なタイミング効果、戦略的に置かれたユーザーフィードバック、その他「興味をひく瞬間」などに宿る。「フラットウェブ構築者」は、これらの瞬間を快適なマイクロコピー、[パーソナリティ](http://www.alistapart.com/articles/personality-in-design/)、およびタイポグラフィと組み合わせてあらゆる種類の感情と深みを築く。ウェブのすべてが「オネスト」であればすべてよしである。

マスターアーキテクトのフランク・ロイド・ライトは1953年のエッセイ「The Language of an Organic Architecture」(オーガニックアーキテクチャの言語)中で、この種の美学を「of the thing, not on it」と呼んだ。

デザインの歴史が何度も語るように、私達が閲覧者をだまして、実際とは違う素材をそうであると信じ込ませようとすれば、デザイン価値と永続性は減少する。工業デザイナーのノーマン・ベル・ゲディス(と他の人)が20世紀初期にこのトピックについて本を何冊も書いている。ゲッデスは自身の素材の使用の方法を「(関連する素材の)誠実スタイル」と呼んだ。

木製のベニヤ板を模倣した木目調で覆われた1980年代の電子レンジを考えてみよう。これらのようなデザインはすぐに流行遅れとなった。なぜなら「非オネスト」な素材がデザイン品位を落とし、それらをすぐさま永続性を持つ機械というよりも、木目の剥離が目立つ何か目障りなものに変えてしまったからである。しかし、ステンレススチールの製造工程をあらわにする電子レンジは無意識に損なわれないままであり、より高い価格を要求し、スタイル的にもより有意であり続ける。

装飾的オネスティ

基本的オネスティとスタイル的オネスティが存在していると仮定して、装飾レイヤーはその上に宿ることができる(しかし、そうしなければならないというわけではない)。この最も外側のウェブ素材はグループに分けられる。マイクロメタファーとマクロメタファーである。

マイクロメタファー(目立たないガウスのノイズテクスチャー、またはショッピングカートやゴミ箱のアイコンなど)はサイズ的に小さいが美学に影響を及ぼす。そのごみ箱アイコンを「ゴミ」というラベル付けしたリンクと置き換えてみる。そうすれば、サイトのユーザビリティと美学は損なわれないままである。マイクロメタファーを使えば見かけはよいかもしれないが、それにそれほど気を配る必要はない。

一方マクロメタファーはサイズ的に大きいものをいう(半透明で多色のプラスチック製の仕切り用タブを伴った三穴バインダーのようなインタフェース)。それらは美学を動かし、それがないとデザインはばらばらになる。

デザイナーは時に静的なモックアップのデザインレビューを作成するためにマクロメタファーを用いる。または旧式のツールやプロセス、単なる習慣を伴うデザイナーのスキルにてこ入れするためにそれを用いたりする。しかしあなたがそれらをどれだけスライスしようとも、エンドユーザーにとってマクロメタファーは「非オネスト」である。

連続体

純粋な象牙の塔(訳注*現実社会から遊離した学問・思想・芸術または夢想の世界。ここではラスター画像などを使わない純粋なフラットなウェブサイトを追求することを意味しているのだと思います)レベルのオネスティについてあれこれ言い合う事は楽しい。しかしそれはそれほど単純ではなく、装飾が実際付加価値を加えるという時もままある。

whatever looks good and is usable.(よい見栄えであれば使い物になる)」と言ったドルー・ウィルソンの姿勢がまさにそうである。彼の前提はタフティの「whatever it takes(必要なのはとりあえず何でも)」や、フランク・ロイド・ライトの「less is only more where more is no good (少ないのが良いと言えるのは、多すぎて良くなくなるときだけである)」にさえ類似している。

従って、反対者が言うことに反して、そこには装飾のための場所とマテリアル・オネスティのための場所がある。これら2つは連続体に存在している。一端には装飾があり、別の端にはマテリアル・オネスティがある。デザインが「オネスト」または「非オネスト」になる精密なポイントはない。ウェブデザイナーはそれを仕分けするという厄介な仕事を抱えている。

デザインはどれくらいの間スタイル的に有意である必要があるのか? サイトの編集はどれほど容易でなければならないか?クライアントは本当に「スキューモフィック デザイン」が好きなのか?オフィスの賃貸料を払わなければいけないあなたは、クライアントが好むものから彼らを遠ざけることでクライアントを失うリスクを負う余裕はあるのか?

または、もしあなたが何年も費やして、クライアントに静的なPhotoshop のデザインカンプでウェブデザインを判断するように教え込んできたとしたら、あなたにはデザインプロセスを調整しなければならない過渡期が訪れるであろう。

同時にクライアントがデザインの「興味深いと思える瞬間」と「誰もが利用できる(ユニバーサル・アクセス)」ということに焦点を当てられるように再教育しなければならない。これは一晩でできるようなことではないが、あなたが自分のデザイン決定を意識していれば、この連続体に沿って自分が行きたい方向に進むことができる。

偉大なジャズミュージシャンは次のように言う: 「ルールを破るためのルールを知っていなければいけない」。冷静に目先が利く工業デザイナーや建築家のように、自分の作品がその連続体のどこに位置しているかを知っているウェブデザイナーは、ルールを破り、遊び心がありながらも、素晴らしくて普遍的な作品を生み出す。

ステファノ・ジョバンノーニの、芽が生えたトイレブラシのベースとなったプラスチック製の鉢植えは陶器を装っている。しかし、これはよくできている!そして、ステファノは自分がどのルールを破っていたかを正確に知っていたことは間違いない。


ステファノ・ジョバンノーニのMerdolinoトイレブラシ 1993年 提供 Alessi

それは感情に訴えるものというだけでなく、おもしろみがあり、アフォーダンス(affordance)やエルゴノミクスが見事にデザインされている。20年の間継続的に生産されているが、まだ最新のデザインように見える。

素材的にオネストなプロセス

ちょうどイームズのチェアが新しい製造工程を必要としたように、「オネスト」なウェブは、ウェブデザインに対する新しいアプローチ(固定的なデザインカンプによってあまり定義されないで、より迅速なイテレーションやプロトタイピングによるアプローチ)を要求する。

新しいソフトウェアデザインツール(多くは現れてもすぐに消えてしまうが)の長いリストの中からマテリアル・オネストのプロセスを捜すよりも、私達は永久にデザイナーのツールキットの一部になるであろうオネスト・ツールに投資するべきである。

ペン・スケッチ
ペン・スケッチは、特に初期のアイデア化段階において、あなたのアイデアを創造して共有するための最も速く、最も安く、最も普遍的な方法である(どのような媒体に対しても適用でき、それは永久に普遍的な方法であり続けるだろう)。

ピクセル精度のワイヤーフレームは(いったん一回目のワイヤーフレームが完成すると)、これ以上他に考慮にいれなければならないデザインは何もないと考えるに至るところまでクライアント(とデザイナー)を導くことができる。

または精度の高いワイヤーフレームは、クライアントとデザイナーがグリッド上のフォント、スタイリング、や要素のアラインメントに関してあれこれ議論することを可能にする。しかしこれらは、初期のデザイン段階で焦点を当てるには間違っている。

なぜならペンスケッチはウェブ素材からかけ離れていて、決して最終デザインとは混同されない。例えそう望んだとしても、ペンスケッチではフォントを議論するのは難しい。

これは、皆が適切な時期に正しいことに焦点を合わるということである。ペンスケッチを通して概念が決定された後、デザイナーはクライアントと共に誠意を持って仕事をし、ビジュアル的アイデアとプロトタイプに息を吹き込むためにブラウザでデザインすることができる。

29th Driveで、私達はほとんどのプロジェクトをペンスケッチで始める。、私達は販売のプロセスにおいて顧客にスケッチについて話しており、さらに提案の時の「What To Expect(期待すべきこと)」のページでも再びそれに触れているので、顧客は私達がスケッチ作業を行うことを知っている。

顧客にScottsdale社の人はいないので、私達はスクリーンシェアが大きくて、スケッチ(リアルタイムで作成されるか、もしくは事前に作成される)が読みやすいIPEVOドキュメントカメラを使用している。IPEVOには固定焦点モードがあるので、手がフレームに入っても、カメラのフォーカスは紙面に固定される。通常ウェブカメラでは簡単にこれを行うことができない。

私達は頻繁に自宅で作業をし、オフィスの他のチームメンバーと共同作業をするためにIPEVOを使用する。それはプロセスを機械相手ではなく、より人間的なものにしてくれる。また私達はカメラを顧客へ送って一緒にスケッチしてもらうこともしている。

顧客の「アーティストじゃないから」的な苦手意識を克服させるのには時間がかかるが、なんとか激励することによって、最終的には人生初となる綺麗な湾曲したボックスをスケッチしてくれている。ここにより良いコラボレーションが誕生する。

ペーパープロトタイピングテクニックは全員がその場にいる場合は非常に都合がよいのだが、スキャナーとは調和しない。従って、あなたがクライアントから離れたところで作業をしているならば、紙面によるプロトタイプのプレゼンテーションをしている間、「Go To Meeting」でスクリーンをビデオ撮影したり、写真を撮ったり(IPEVOの別の便利な使い道だ)するとよい。その後、ビデオやスチール写真を皆がアクセスできるどこか1つのアーカイブに送る。

あなたの将来に賭ける

「オネスト」な素材と作業することは気分を引き立たせる。Typekitのクリエーターたちは、始めてウェブに真のタイポグラフィを持ち込んだ時、それを感じたに違いないだろう(ウェブフォントはSIFRまたはラスタ化されたテキストよりもっと「オネスト」である!?)。

イーサン ・マルコッテが最初にレスポンシブウェブデザインの原則を明確にした時、それを感じたに違いない。「オネスト」なCSSフレームワークまたはWordPressテンプレートを作成するインディーズデザイナーや開発者も、それを感じたに違いない。

「オネスト」な素材を使うことによって、これらの人々(それを取り入れただけでなく、さらに先にアイデアを進めようと他の人を先導した人々)はデザインコミュニティのリーダーになった。

今後数年のうちに、連続体上の「オネスト」な場所に順応するために必要となる困難な仕事の意味を理解すべく努力するウェブデザイナーと努力しないウェブデザイナー間に違いがでることを我々は知ることになるだろう。

私達はただ非難するのをやめ、イームズ、ライト、およびジョバンノーニの教訓に目を向け始めるときなのである:マテリアル・オネスティーは私達の仕事やキャリアにおいて長期的な成長を育むであろう。

(訳注 1980年代電子レンジはこのようなもののことを指すかと思います 画像ソース インターネットhttp://www.chicagotribune.com/media/photo/2011-02/59603344.jpg)