アトミック・デザインの父、ブラッド・フロスト氏によると、未来は暗い

長年にわたり、ユーザー インターフェイスの作成には、単純なボタンを開発する場合でも、完全なフォームを開発する場合でも、車輪の再発明が必要でした。 2013 年、ブラッド フロストは、システム設計に対する考え方を変える概念、アトミック デザイン を世界に紹介しました。多くの人はこれが「流行の」用語だと信じていますが、実際には、この方法論はデジタル製品構築の現在および将来の課題に非常に関連し続けています。

この記事では、最近の講演で詳しく述べたフロストのアイデアが、依然としてスケーラブルで効率的な設計システムの開発の基礎であること、および人工知能 (AI) の台頭などテクノロジーがどのように進化しているかについて議論したいと思います。 ) により、アトミック デザイン の概念がこれまで以上に必要になります。

Atomic Design は死んだのか? 10 年間の影響と進化を振り返る

「アトミックデザインは死んだのか？」昼食後に人々を目​​覚めさせるのに良い方法です。しかし、私がやりたいのは、過去 10 年間を振り返ることに時間をかけたいと思っています。私が Atomic Design というものを作成したのは 10 年前の今年でした。これはまだ存在します。なので、少し考えるいい機会だと思いました。もしよかったら、一緒に小さな旅行に行きましょう。」

ブラッド フロストは、この挑発的な紹介で、Web デザインの進化と、彼が 2013 年に世界に導入した方法論である アトミック デザイン について私たちを振り返ります。 Frost が最近共有した旅は、ウェブの初期から複雑なデザイン システムの開発にまで及んでおり、アトミック デザイン の基礎が今日の課題にどのように関連しているかを思い出させてくれます。しかし、Atomic Design は、デジタル インターフェイスが変化し続ける今日の時代においても、その妥当性を維持しているのでしょうか?

ウェブの進化: 簡単な回顧展

Frost は、最初の Web サイトが 1991 年に公開され、CSS がその直後の 1994 年に登場した Web の始まりに私たちを連れ戻します。「むかしむかし、Web サイトがありましたよね? 1991 年、最初の Web サイト、1991 年、CSS 1994 年に GeoCities が誕生しました。その頃の人はいますか? はい、私のような古い人もいます。」彼は、初期の頃、デザインは HTML とおそらくアニメーション GIF だけを必要とする単純な作業だったと回想します。 「HTML を書いているだけですよね? それだけです。そしてアニメーション GIF か何かを貼り付けました。」

ウェブが成長するにつれて、新しいアプローチが登場し始めました。 Photoshop は、後に切り取られて Web ページに変換される視覚的なレイアウトを作成するために使用され始めました。このプロセスは、フロスト氏が説明するように、90 年代の「キラー」ウェブサイトの作成につながりました。「90 年代半ば、私たちはパンフレットを Photoshop で編集してカットできるというアイデアを思いつきました。それを外に出して、インターネットに投げてください。」

インタラクティブなインターフェースの台頭と複雑さ

よりインタラクティブな Web エクスペリエンスをもたらした Ajax などのテクノロジーの開発と、2008 年の iPhone と App Store の開始後のモバイル アプリケーションの出現により、デザインに新たな課題がもたらされました。 Frost 氏が説明するように、「Web 2.0 が登場し、これが Ajax と呼ばれるようになりました。突然、私たちはよりインタラクティブなエクスペリエンスを持ち始めました。それが何を意味するにせよ、『Web アプリ』のようなものを手に入れました。」

デバイス、オペレーティング システム、エクスペリエンスの増加に伴い、デザイナーと開発者は、プラットフォーム間で一貫性と一貫性を維持するという課題に直面し始めました。 「Photoshop ファイルが増え、ブランドのガイドラインにも従わなければなりませんが、それは決して起こりませんでした。」ここではスタイルガイドとデザインパターンの出現が見られますが、それらは依然として断片的で管理が困難でした。

解決策: アトミックデザイン

Frost がモジュール式でスケーラブルなインターフェイスを作成するための体系的なアプローチである Atomic Design を導入したのは、このような状況でした。ユーザー インターフェイスの基本的な構成要素としての「アトム」の概念が、分子、有機体、テンプレート、ページに組み合わされ、デジタル デザインの増大する混乱に解決策をもたらしました。 「私は、ますます複雑になる設計システムに一貫性と効率性を提供することを目的として Atomic Design を作成しました」とフロスト氏は言います。

彼は、Atomic Design は UI コンポーネントを整理するための単なる方法論ではなく、デザイナーと開発者がより効果的にコラボレーションできるようにすることを目的とした哲学であると主張します。 「この方法論は、再利用可能なコンポーネントの明確な階層を作成し、製品開発の一貫性と時間の節約を促進することを目的としています。」

自動化と AI の時代におけるアトミック デザイン

Atomic Design の関連性は時間が経っても薄れていません。実際、フロスト氏は、人工知能 (AI) の台頭と設計の自動化の増加により、アトミック デザインがさらに重要になっていると強調しています。同氏は、2025 年までにオンライン コンテンツの 90% が AI によって生成される可能性があり、コンテンツが急激に増加する中で品質と一貫性を確保できる堅牢な設計システムの必要性が高まるという予測を引用しています。

「あらゆる物の90%はゴミだ」とフロストは「チョウザメの法則」を引き合いに出して言う。同氏は、AI によるコンテンツ生成の容易さによって、不適切に設計されたインターフェースの蔓延につながる可能性があると警告し、アトミック デザインを使用して、インターフェースが注意深く構造化された方法で設計されていることを確認することの重要性を強調しています。

デザインの未来: コラボレーションと共有標準

ブラッド フロスト氏は、設計チームと開発チームの間でさらなる協力と標準の共有を求めて考察を締めくくりました。彼は、将来の課題に対処するには、パターンやコンポーネントをさまざまなチームや組織間で効率的に再利用できるグローバル コラボレーションを促進するシステムを作成する必要があると考えています。

「ブラッドは、開発者とデザイナーのコミュニティに対し、コラボレーションを継続し、Web の力を利用して人々を団結させ、有意義な方法で問題を解決するよう強く勧めます。」

したがって、

Atomic Design は死んだわけではありません。それどころか、現在および将来のデジタル デザインの課題に取り組むための重要なツールです。自動化と AI の時代では、高品質で一貫したデジタル エクスペリエンスを確実に作成するために、構造化された協調的なアプローチを持つことがこれまで以上に重要です。

アトミックデザインとは何ですか?

まだ詳しくない方のために説明すると、Atomic Design は、次の 5 つの主要なレベルに基づいてインターフェースを作成するモジュール式のアプローチです。

1. アトム: インターフェイスの最も基本的な構成要素 (ラベル、入力、ボタンなどの HTML タグ)。
2. 分子: 単純な機能コンポーネントを形成する原子の組み合わせ。
3. 生物: ページのヘッダーやセクションなど、より複雑な部分を構成する分子の組み合わせ。
4. テンプレート: 生物を組織し、レイアウトとコンポーネントの相互関係を定義する構造。
5. ページ: 最終段階では、テンプレートに実際のコンテンツが埋め込まれ、エンド ユーザー向けにパーソナライズされます。

この方法論は、再利用可能なコンポーネントの明確な階層を作成し、製品開発の一貫性と時間の節約を促進することを目的としています。

Atomic Design が依然として重要なのはなぜですか?

Brad Frost の最新の講演の中で、Atomic Design の背後にある考え方は、再利用可能なコンポーネントを作成するだけでなく、それらのコンポーネントを製品に関連付けるであると述べています。これにより、ログインまたはログアウトしたユーザー、管理者または訪問者、さらには地域や言語の違いなど、さまざまなコンテキストに対して、最終製品の設計の一貫性と柔軟性が向上します。

ブラッドはデジタル インターフェースの現状についても振り返り、世界中のさまざまなチームによって再作成されたコンポーネントの断片化を強調しています。彼は、アコーディオンやセレクトなどの同じ基本機能がさまざまな組織でさまざまな方法で再作成され、多大な非効率性と人材の無駄が生じていることについて言及しています。

この作業の重複は、設計システムが標準を統一することで解決しようとする非効率性の最大のポイントの 1 つです。しかし、フロスト氏が指摘するように、多くの開発チームが世界標準に協力するのではなく、すでに解決された問題に対して独自のソリューションを作成していることが依然として見受けられます。

アトミックデザイン: 今でも関連性のあるメンタルモデル

Frost 氏によると、Atomic Design は、UI コンポーネントを階層的かつ相互接続された方法で整理し、デザイナーと開発者のコ​​ラボレーションを促進するソリューションとして登場しました。彼は自分の方法論を「ユーザー インターフェースを階層的かつ相互に接続された方法で考える」方法であると説明し、どんなインターフェースもラベル、ボタン、入力フィールドなどの小さなコンポーネントに分解できることを強調しています。それをインターフェースの「アトム」と比較します。 「これらは事実上、生の HTML タグに似ています。それ自体ではあまり役に立ちません」と Frost 氏は述べています。

これらの原子は、ロゴ、ナビゲーション、検索バーを含むヘッダーなどの分子や生物に結合します。これらのモジュール式コンポーネントは、実際のページの「スケルトン」であるテンプレート内に配置され、設計チームと開発チームがさまざまなコンテキストでこれらのコンポーネントのパフォーマンスを検証できるようになります。

アトミックデザインの批判

フロストは、彼のコンセプトが過去 10 年間に受けた批判を避けません

。 Atomic Design は厳格すぎる可能性があり、設計チーム内の創造性や革新性を妨げる可能性があると多くの人が主張しています。フロスト氏は、これらの懸念に対し、アトミック デザインの目標は創造性を制限することではなく、明確に定義されたシステム内でイノベーションの自由を可能にする強固な基盤を提供することであると述べています。

アトミックデザインの遺産

フロストは講演の最後に、デジタル デザインの将来についての力強い考察を残しました。彼は、コラボレーション、一貫性、再利用の重要性を忘れずに、新しい働き方を模索し続けることを全員に奨励しています。 「やるべきことを決してやめないでください。デザインについての新しい考え方が見つかり、気分も良くなります。」

要約すると、Atomic Design は、デジタル デザインの課題に対する効果的なソリューションを提供し続ける強力なツールです。コラボレーションと標準の共有を促進することで、より一貫性のある高品質のデジタル エクスペリエンスを構築できます。フロストの遺産とアトミック デザインでの彼の仕事は、間違いなく次世代のデザイナーや開発者にとって不可欠なものとなるでしょう。

Atomic Design の将来とコラボレーションの必要性

ブラッド フロストが私たちに思い出させてくれたのは、アトミック デザインの本質は技術的なコンポーネントを超えているということです。それはコラボレーション方法論です。彼は、設​​計とテクノロジーの課題を解決するには、単独ではなく連携して機能するシステムを作成する必要があると提案しています。これには、さまざまな組織の取り組みに参加し、世界的に適用できる共有標準に貢献することが含まれます。

講演の最後に、ブラッドは開発者とデザイナーのコミュニティに対し、コラボレーションを継続し、ウェブの力を利用して人々を結び付け、有意義な方法で問題を解決することを訴えました。彼は、人間による解決策に焦点を当て、テクノロジーを倫理的に使用することで、すべての人にとってより良いデジタル エクスペリエンスを生み出すことができると信じています。

結論

作成から 10 年が経過した現在でも、Atomic Design は、効率的でスケーラブルな設計システムを作成したい人にとって重要なアプローチであり続けています。 AI がインターフェース開発を支配できる世界において、フロストの手法はインターフェース設計の品質と一貫性を維持する方法を提供します。

現在、明確に定義された標準のコラボレーションと再利用を促進する方法論を採用することがこれまで以上に重要になっています。 Atomic Design はただ生きているだけではなく、将来のデザインの課題に取り組むための重要なガイドです。

Atomic Design は死んでいません。それどころか、デジタル設計における複雑さの増大や品質、アクセシビリティ、効率性への要求に対処するための重要なツールであり続けています。ブラッド・フロスト氏は、デザインは世界規模で反復的な作業となっている一方で、コラボレーションと、再利用可能で手頃な価格のコンポーネントに焦点を当てることが、真に世界に変化をもたらすデザイン システムを作成する鍵であると私たちに思い出させてくれます。

以上がアトミック・デザインの父、ブラッド・フロスト氏によると、未来は暗いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。