PSDtoHUBSPOT News Blog

This Blog Template is created by www.psdtohubspot.com

Written by DMN事務局
on 9月 05, 2022
DMN Design Management Report #056

アトミックデザイン2022:

イームズをはじめとするデザインの巨匠たちから学べること

Screen Shot 2022-09-02 at 6.18.29 PM

Darren Yeo  Rethinking Design 


Atomic design 2022: what we can learn from Eames and other design giants


アトミックデザイン2022:イームズをはじめとするデザインの巨匠たちから学べること

Screen Shot 2022-09-02 at 6.28.01 PM

 

 

私たちはデザイナーとして、巨匠の肩の上に乗って、彼らが創り出した素晴らしい作品を見下ろすことになります。アトミックデザイン革命を起こし、デザインシステムを加速させたBrad Frostもそういった巨匠の一人です。この本が出版されてから10年近くが経ちますが、デザインを支持する人々の波がさらなる解説と翻案を続けています。しかし、2013年に作成されたアトミックデザインが決定的な正典であると考えるのは、作成者である彼自身でさえ新しい知識で比喩や理解を更新しているため、間違っています。彼の2019年の論文では、デザインのトークン化の参考として、化学のメタファーを素粒子まで拡大したことが明らかにされました。2020年に作成された玉ねぎとペースレイヤリングの新しいメタファーを受け入れたことも、その一つです。彼もまた事実上、他の巨匠たちの肩の上に立っているのです。そして、Mediumには、既存の作品や解釈を基にした新しい記事が数え切れないほどあります。

 

では、アトミックデザインはもう終わったのでしょうか?

 

いいえ、まだそうではありませんし、この記事の終盤にはさらに詳しく書いてあります。しかし、そのためには「サブアトミック」に行く必要があり、量子トンネルを通るタイムトラベルというフィクションの概念を借りる必要があります。過去、現在、そして可能性のある未来へと、時間の間を旅するために。



量子トンネルの中へ

2016: 私たちは、アトミックデザインが電子書籍として出版された時の例を再訪します。これはおそらく、デザインコミュニティの初期の大多数がアトミックデザインというメタファーの概念を受け入れた瞬間であり、Frostが化学粒子の関連付けを通じて、どのようにアトミックデザインを導き出すかを見事に説明した瞬間でした。この時期に、彼はまた、システムについての理解を工業デザインと建築に帰結させており、これは2014年にFederico Holgadoにも共有されました。

 

Screen Shot 2022-09-02 at 6.24.56 PM

 

Frostの「アトミック」という言葉とビジュアルがデザイン界に定着したのは、

それが適切な時期に適切な言葉であったからです。



2014: タイムマシンに飛び込んで、私たちはHolgadoのシステミックデザインというアーカイブの問題にたどり着きました。Mailchimpの再設計の道のりを記録することに加え、著者はさらに、異なる企業によって作られた特殊な部品を組み立てるプロセスを比較することによって、システムのケースを構築したのです。工業デザインでは、OEM(Original Equipment Manufacturers:相手先商標製品製造会社)です。建築の場合は、測量士、規制当局、構造設計家、配管工、請負業者などです。Holgadoのインスピレーションの源は、Stephen KieranとJames Timberlakeの著書『リファブリケーション・アーキテクチャ』にあります。

 

 Screen Shot 2022-09-02 at 6.25.54 PM

Holgado, Kieran, Timberlakeによる、自動車製造を例とした、

異なるレベルにおける設計要素の体系を示す重要な参考文献です。



2003: Refabricating Architectureが初めて出版された年です。この時点で、私たちはウェブサイトやネイティブアプリから離れ、複雑な製品、機械、建築の領域へと足を踏み入れました。しかし、Kieran と Timberlake は、Brunelleschi、Le Corbusier、Michael Dell といった様々な巨匠を提供したのです。突然、さまざまなインスピレーションの源が爆発的に増えましたが、その根底には、コンポーネントとアセンブリを備えたシステムというコンセプトがあります。建築をはじめとするさまざまなデザイン分野をつなぐのは、デザインのスケールという緩やかな痕跡です。しかし、スケールにはいくつかの問題があります。まず、異なるレベルの抽象的なデザイン要素の重要性をどのように結びつけるかが課題となります。そして、階層がシステムとしてどのように連携しているのか、明確なメンタルモデルを作るために、補完的なビジュアルとともに、適切な言語と物語を使う必要もあります。Frostの「アトミック」という言葉とビジュアルがデザイン界に定着したのは、デジタル体験の進歩という適切な時期に適切な言葉であったからです。同じ論理がサブアトミックにも当てはまり、デザイントークンは後の段階でデザイン界でより受け入れられやすくなったのです。しかし、Frostが内側に向かうことでメタファーを拡張しようとする一方で、外側にズームする機会もあるのではないでしょうか?Charles&Ray Eamesが登場して、私たちは再びタイムマシンに乗り込みました。

 

1977:伝説の工業デザイナー、Charles&Ray Eamesは、デザインにおけるスケールの大きさを垣間見たに違いありません。1977年に制作された映画「パワーズ・オブ・テン」は、10の累乗(10¹、10²、10³など)でモノの大きさを表現する奇想天外な創作物で、時代に先駆け、すでに人間の目には見えない映像とストーリーで、見る者の想像力をかきたてました。Eamesなどのデザイナーは、地球を眺めるだけにとどまったと思われるかもしれませんが、太陽系を超え、既知の宇宙へと突き進んでいったのです。そして、いつの間にかスイッチを入れて、元のオブジェクトにズームインし、さらに深く、原子・素粒子レベルの宇宙にまでズームインし続けます。

 

Screen Shot 2022-09-02 at 6.26.57 PM

 

IBMの依頼で制作された「パワーズ・オブ・テン」は、

米国議会図書館のナショナル・フィルムレジストリに

保存されることが決まった画期的な映画です。

 

この映画は、デザイナーとして私たちをどこへ向かわせるのでしょうか。手始めに、これまでの旅は、スケールの概念は、メタファーの使用を通じて、正しい言語、表現、視覚を必要としていることに気づかせてくれました。そこから、私たちはその後、メタファーを拡張し、更新することができます。もうひとつ、UIデザインの境界を越えて、プロダクトデザインや空間デザインのような新しい分野にまで、想像力と実験の飛躍が必要なのです。

 

現在:40年の時を経て、BBCはデザインの巨匠に敬意を表し、パワーズ・オブ・テンを宇宙のアップデート版としてオマージュしました。スケールは10²⁴から10²⁷に移行しています。(コメント欄のJaco Nelsは、小さなものへの理解も10-¹⁶から10-³⁵に広がったとシェアしています)様々なデザインの巨匠を訪れ、新しい視野で原子デザインに立ち返ったのです。おそらく、私たちは原子設計の規模を超え、2016年にFrostが表現したような「クレイジー」ゾーンに入る時が来たのでしょう。私たちの現在の冒険は、製品設計とシステム・オブ・システムの新たな理解とともに、それぞれ複雑な生物と種に向かって私たちを連れて行きます。

Screen Shot 2022-09-02 at 6.23.03 PM

アトミックデザイン2022(Yeo, 2022)

 

  1. イオンCid, 2019)は、原子の素粒子であり、デザイン部品の特性を含んでいます。いくつかのデザイン界では、これらはデザイントークン 、Frostが共有するものとして知られています。

例:カラー、パディング、ステート

 

  1. アトムFrost, 2016)は、コンポーネントとも呼ばれる基礎的なビルディングブロックとして残っています。ここでは大きな変更はありません。

例:ボタン、テキスト入力、ラベル

 

  1. 分子Frost, 2016)は、2つ以上のアトムが組み合わされたものです。より大きなUIコンポーネントであり、パターンとしても知られています。

例:ページネーション、ダイアログボックス

 

  1. 生物Frost, 2016)は、複雑さが始まるときです。生物学と同じように、分子とアトムの大きな範囲の組み合わせが出現します。デザインにおいては、有機体をモジュールや機能、あるいはウィジェットやシンプルなアプリケーションとして捉えることができます。

例: カード、ナビゲーションバー、日付ピッカー

 

  1. 複雑系生物(Complex Organismsᴺ)とは、高度な生命体のことです。手っ取り早く言えば、動物、植物、人間といったところでしょうか。製品も同様に複雑であることがわかります。部品、パターン、モジュールのテンプレート以上のもので構成されているだけでなく、異なるページや画面をまたぐフローがあります。興味深いことに、ここで「玉ねぎ」(Mu, 2020)は「プロダクト」という言葉を連呼しているのです。一方、私は、メタファーの命名規則にこだわることを選びました。また、テンプレートとページを同じ配列の下に統合し、メンタルモデルをそのまま維持しました。

例 ユーザーインターフェース、アプリ、ウェブ

 

  1. (species)とは、ユニークでありながら類似した特徴を持つ複雑な生物の一群のことを指します。デザインにおいて、種は製品群やポートフォリオと呼ばれることがあります。より多くの組織がデザインの価値を認識し、デザインシステムに対する理解が進むにつれて、組織内の製品にデザインの全領域を適用する能力が向上しています。

例:スイート、プラットフォーム、オムニチャネル

 

その他の考察

Beyond speciesᴺᴱᵂ:異なる種の生物が互いに影響し合うことで、新たなデジタル体験が生まれる可能性があります。生息地における動物と植物の共生的パートナーシップは、強力な生態系を生み出します。同様に、異なる業界や媒体で異なる製品を扱う場合(つまり、フィジタル)、一貫性のある調和の取れた体験を確保する必要が生じることがあります。

例 API、統合、フィジタル、iot

 

ライブラリ vs システムᴺᴱᵂ: Eameのパワーズ・オブ・テンの注意深い観察により、物理世界と分子世界の間に著しい違いがあることがわかります。そのため、この映画では、この2つの世界の間をズームイン・ズームアウトするという独創的な区別で、その分離を表しています。同じように、図書館とシステムも別の世界と言えるのでしょうか。私は、現在のパターン/コンポーネント・ライブラリとデザイン・システムの定義に基づくと、その証拠が増えてきているので、そう考えています。私たちは、アトムから有機体までをライブラリで束ね、複雑な有機体や種をシステムで束ねることから、そう遠くはないでしょう。

・・・

複雑な生物と種は、厳密なユーザーインターフェースモデルから離れていますが、私たちが以前行ったシステムに関するディープダイブを通じて、製品とその関連用品は2022年に考慮されなければならないことがますます明らかになってきました。最近の例では、SpotifyがEncore(システム・オブ・システム)を作るまでの旅を紹介しています。とはいえ、この旅は大きな驚きではないはずです。実際、Frostは、『アトミック・デザイン』の第4章に書かれているように、この現象を認識していたのです。

 

今日、私たちが関心を寄せるすべてのウェブ対応デバイスに加え、デバイスとウェブの状況は、常に大きく、多様になっていることを理解する必要があります。

 

そこで、EamesからFrostまで、デザインの巨匠たちに対する私の深い理解に戻ります。私たちは今、システム・オブ・システムをデザインするエキサイティングな時代にいるのです。私は、巨匠の肩の上に乗り、アトミックデザインの知識を広げるために、日々成長する探求に微力ながら貢献できることに感謝しています。

 

Screen Shot 2022-09-02 at 6.29.29 PM

パワーズ・オブ・テンの原子スケール

 

英語版参照元:

https://uxdesign.cc/atomic-design-2022-what-we-can-learn-from-eames-and-other-design-giants-4d8e2f579daa

 

<DMN編集部>

You may also like:

デザインメソッド デザイントレンド

DMN Report 055:メタバースデザインツールキット

DMN Design Management Report #055 メタバースデザインツールキット Nick Babich Product designer & editor-in-chief of UX Planet.

デザインメソッド

DMN Report #92 AIのコンテキスト

DMN Report #92

デザインインパクト デザイン組織 デザインメソッド デザインオペレーション デザイントレンド

DMN Report 75:AI革命をナビゲートする:デザイナーが競争力を維持する方法

DMN Report 75:AI革命をナビゲートする:デザイナーが競争力を維持する方法 Irina Nik Product Designer