Hatena Blog Tags
はてなブログ トップ
アトミックデザイン
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

アトミックデザイン

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
Web開発における知見共有系ページ•2年前

フロントエンドのアトミック(Atomic)デザインとは

アトミック(Atomic)デザインとは？ アトミックデザインはデザインシステムの一種であり、UI/UXデザインにおいてコンポーネントベースのアプローチを採用しています。 アトミック(Atomic)デザインのメリットは？ 再利用性が高い アトミックデザインでは、小さなコンポーネントを組み合わせて様々なUIを作り出すため、コンポーネントの再利用性が高くなります。同じアトムや分子を複数の有機体で使うことができるため、デザインの一貫性を保ちやすくなります。 コンポーネントの管理が容易 アトミックデザインでは、コンポーネントをアトム、分子、有機体、テンプレート、ページのようなレベルで分類することで、コン…

#FE#フロントエンド#Atomicデザイン#アトミックデザイン#コンポーネント

関連ブログ

yuta-yamauraのブログ•11日前

アプリ開発者に転職して１ヶ月の振り返り

アプリ開発者として転職して１ヶ月経ったので、振り返りを書こうと思います。 目次 前書き １１月にやったこと 良かったところ 悪かったところ 学んだこと 今後について 前書き ゆうたです。 29歳からプログラミングの勉強を始めて31歳で転職できました。 今年もあと１ヶ月で終わりですね。 転職して早々に今年が終わるので、新しいことに挑戦するには良かったタイミングだったかもしれませんね。（どういうこと？） 前職ではサーバの運用保守なることをしてたので、アプリ開発者と密接にコミュニケーションをとりながら、月に一回行う月次のアプリケーションリリース（要は新たな機能の追加や改修etc）の手順書作成とかなん…

jun01tの日記•3ヶ月前

アトミックデザインについて

アトミックデザインは、2024年の時点でも依然として推奨される設計手法ですが、状況によっては他の手法や考え方と組み合わせて使うことが一般的になっています。 アトミックデザインの強みである再利用性、一貫性、保守性は、特に大規模なプロジェクトやデザインシステムを構築する際に非常に有効です。しかし、近年ではアトミックデザインに対する批判や限界も指摘されており、他のアプローチと比較検討することが重要です。 アトミックデザインが推奨される理由 再利用可能なコンポーネントの管理 デザインシステムの中でコンポーネントを効率よく再利用することで、重複したコードやデザインを防ぎます。 デザイナーと開発者の協力が…

jun01tの日記•3ヶ月前

Vue.jsを使ったアトミックデザイン

以下は、Vue.jsを使ったアトミックデザインについてのブログ記事をMarkdown形式でまとめたものです。 Vue.js でアトミックデザインを活用する方法 はじめに アトミックデザインは、ウェブ開発において、コンポーネントを小さな単位から組み立てていく設計手法です。この手法は再利用性と一貫性を向上させるために役立ちます。この記事では、Vue.js を使ったアトミックデザインの基本概念と実践方法について説明します。 アトミックデザインとは？ アトミックデザインは、Brad Frost が提唱した UI 設計の概念で、以下の 5 つの階層に基づいています。 Atoms (原子) UI の最小単…

中堅SEの技術メモ•3ヶ月前

【web技術・基礎編】1-1-8-5.フロントエンドアプリケーション・アトミックデザイン

○ゴール 以下の用語が説明出来る様になる。 ・アトミックデザイン ・アトミックデザインの要素 ・アトミックデザインの使い方、注意ポイント ○参考教材(所用時間:30分) 【動画】 フロントエンドエンジニアなら知らないと損！アトミックデザインのすゝめ (youtube.com) 初心者がアトミックデザインで気をつけるべきポイントTOP3 (youtube.com)

中堅SEの技術メモ•3ヶ月前

【web技術・基礎編】1-1-8.フロントエンドアプリケーション

1-1-8-1.フロントエンドアプリケーション・ロードマップ（所要時間21分） 1-1-8-2.フロントエンドアプリケーション・SPA（所要時間24分） 1-1-8-3.フロントエンドアプリケーション・フレームワーク（所要時間42分） 1-1-8-4.フロントエンドアプリケーション・レイアウト、ワイヤーフレーム（所要時間25分） 1-1-8-5.フロントエンドアプリケーション・アトミックデザイン（所要時間30分） 1-1-8-6.フロントエンドアプリケーション・Webデザインの基礎（所要時間40分）

インフラジスティックス・ジャパン株式会社Blog•4ヶ月前

アトミックデザイン×ローコード App Builder でUIコンポーネントの再利用を促進する！

こんにちは！ソリューションコンサルタントの田上です。 Infragistics App Builder は、アトミックデザインの原則に基づいたUI構築を支援する強力なツールです。 ソフトウェア開発の現場では、デザインの一貫性を保ちながら効率的にUIを構築することが求められます。ここで登場するのが「アトミックデザイン」という設計手法です。 アトミックデザインはUIコンポーネントを「原子」「分子」「生体」「テンプレート」「ページ」という5つの階層に分解し、再利用可能なコンポーネントを組み合わせてデザインするアプローチです。 この記事では、App Builder がどのようにアトミックデザインの特性…

トレタ開発者ブログ•4ヶ月前

奥野さんと社員のリファクタリング部屋 -ディレクトリの名付け方つづき

「奥野さんと社員のリファクタリング部屋」は、リファクタリングに励むトレタの社員と技術顧問の奥野さん ( @okunokentaro ) の間で実際に行われた会話を切り取った開発現場実録コンテンツです。 技術顧問: 奥野さん 三度の飯よりリファクタリングが好き 今回の質問者: 武市さん トレタ在籍2年。沖縄在住のフロントエンジニア PR こちらに登場している2人が登壇するイベント・TORETA TECH UDATEが2024/08/28に開催予定！ リファクタリングやリアーキテクトなど、サービスを提供させながらプロダクトの新陳代謝をいかにして行なってきたかを開発現場の実例と合わせて紹介します！ …

RydeenWorks Dev Note•4ヶ月前

アジャイル開発への道

目的 アジャイル開発に習熟したい 自身の経験の棚卸し 役に立ちそうな情報の整理 アジャイル開発を成立させる要因について自身の見解を持ちたい 注意)記載内容は、あくまで個人の経験に基づく主観です 背景 2020年にスクラム開発にチャレンジ中のプロジェクトにPMとして合流した その時はプロジェクトがうまく進んでなかった、具体的には... 2weekのスプリント期間にタスクが終わらない 終わらなかった作業を別タスクとしてチケット化して継続開発してた スプリントが終わった時点で動作するソフトウェアがない スクラッチから開発したので動作するまでの実装量が多かった GUI画面が多かったしUI/UX考えなが…

TadaoYamaokaの開発日記•6ヶ月前

【読書ノート】Designing Interfaces: Patterns for Effective Interaction Design

インターフェースデザインのベストプラクティスとパターンをまとめた「Designing Interfaces: Patterns for Effective Interaction Design」を読んだので内容をまとめる。Jenifer Tidwell著のこの書籍は、効果的なインタラクションデザインを実現するための具体的なデザインパターンや原則を紹介しており、デザイナーや開発者がユーザーフレンドリーなインターフェースを構築する際に役立つ。以下の内容は、ほとんどClaude3.5 Sonnetを使用して作成している。目次 第1章: 人を中心に設計する 文脈 目標 リサーチ パターン 第2章: コ…

未経験からエンジニア 奮闘記•7ヶ月前

Next.jsのディレクトリ構成についてまとめてみた

Next.jsのディレクトリ構成についてまとめてみた はじめに Next.js バージョン: 12.0.0 以上 App Routerを利用していること 背景 いくつかのプロジェクトを通じて、ディレクトリ構成が作業スピードやバグの発生率に与える影響を実感しました。分かりやすく整理された構成は、コードの読みやすさを向上させ、バグの発見と修正を迅速に行う手助けをしてくれます。そのため、今回はNext.jsプロジェクトに適したディレクトリ構成について紹介したいと思います。 ディレクトリ構成の種類 まずは、Reactプロジェクトでよく見られるディレクトリ構成を紹介します。この情報は、Luis Falc…

弁護士ドットコム株式会社 Creators’ blog•1年前

夜明け前のデザインシステム再考〜デザインシステムの目的と指標

この記事は弁護士ドットコムAdvent Calendar 2023の20日目の記事です。 昨日は @dskymd さんのOptimistic Updateに触れてみる でした。 はじめに こんにちは、弁護士ドットコム本部 デザイナーの林です。 去年のアドベントカレンダーはデザイントークンの記事を書いたのですが、今年は弁護士ドットコムのデザインシステムの取り組みを俯瞰した振り返り的なお話をしたいと思います。ノウハウではなく過去からの学びですが、下記のような方々に読んでいただけると良いのかな、と思っております。 これからデザインシステムを始める方 デザインシステムを始めたけれど、どこにリソースを集…