タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話
Home テクノロジー Blog Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話 こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPA
Atomic Designをやめてディレクトリ構造を見直した話｜食べログ フロントエンドエンジニアブログ
こんにちは。フロントエンドチームの金野と申します。 食べログでは現在、React+TypeScriptでフロントエンドのリプレースを進めています。 以前の記事で、食べログではAtomic Designをどのように取り入れているかの紹介をしました。 しかし、最近のリプレース作業では、Atomic Designとは異なるディレクトリ構造を採用しています。 今回の記事では、「なぜAtomic Designをやめたのか」という理由と、「どのようなディレクトリ構造にしたのか」を紹介します。 Atomic Designを導入したねらいと導入した結果 上記の記事で言及した通り、当初Atomic Designを導入したねらいは以下になります。 1. コンポーネントの責務がより明確になる 2. 見た目の粒度だけでなく、ロジックの責務も明確にできる 3. 「ドメインが入るか／入らないか」。「抽象的か／そうでな
Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division
Vue.js 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。 それが SPA 未経験のチームであればなおさらです。 直近のプロジェクトはまさにそんなプロジェクトでした。 本セッションではアトミックデザインのエッセンスを用いてコンポーネント分割の指針を示し、 またコンポーネント実装時に注意すべき事柄についてお話します # URL HomePage: https://nrslib.com Twitter: https://twitter.com/nrslib
【Atomic Designに懐疑的なあなたへ】改めて考えたい React / Next.js のデザインパターン
フロントエンド開発は一般的に複雑性との戦いです。放ったらかしにしておくとますます複雑になり、変更するのが難しくなります。これまでにも、このような複雑さをどうにかして制御しようとして、Atomic Designをはじめとした様々な設計手法（デザインパターン）が考えられてきました。 しかし、React / Next.js を使ってチーム開発を行う際に、現状のデザインパターンでの運用では「どうもうまくいかないな」と思う場面に多々遭遇しました。そのような経験を踏まえて、「コンポーネントをどのように設計するか」「どのようにディレクトリを分けるか」を徹底的に考え、新しいデザインパターン「Tree Design」にまとめました。 Tree Design はまだまだ仮説段階です。今後弊社チームで運用していく中でブラッシュアップする予定です。しかし、他のフロントエンド開発チームがデザインパターンを再考する際
2019/6/1 初夏のJavaScript祭りで使用したスライドです。 Atomic Designの考え方をNuxt.jsのコンポーネント分割に取り入れてサービス開発してみました。フロントエンドエンジニア、デザイナー両面からの視点でやってみて良かったことやハマりどころをご紹介します。
脱・Atomic Design - HTML+CSSコーディングの粒度分類法（HTML Parts） - Qiita
はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト… といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし
Atomic Design は難しい Webフロントエンド開発をしている人で Atomic Design を用いた経験がある方に会った時は、必ず 『Atomic Designどうですか？』と聞くようにしています。 大体の方はちょっと苦笑いをしながら『やっぱり難しいですねぇ』とか『試行錯誤しながらで...』みたいなことを教えてくれます。 私もメインの開発をする際に Atomic Design という枠組みを用いています。そして、同様に色々と悩んだのですが、このあたりについて納得がいく解釈ができたと思っています。 そこで、私の思う Atomic Design の難しさや、そう思う原因、どうやってそれを解消するかという点について、https://atomicdesign.bradfrost.com/ を適宜参照しながら共有したいなと思います。 そもそも Atomic Design 何やねん。な方
自社サービス『ツクリンク』はリリースから7年が経ちました。 直近でAtomic Designをベースにしたデザインシステムの作成と、CSS設計の変更をしたので紹介します📛 CSSの変遷現在の設計の話をする前にこれまでのCSSを紹介。 Ver１ 初回リリース時 昔懐かしいCSSです。Sassも使わずベタ書き。 #main .articles p { } #main .articles .header { }実は今でも一部で生きています。反省してます。探さないでください。 Ver２ リニューアル リニューアルをしたタイミングでCSS設計にはMindBEMdingを採用、SCSSを使い格段に書きやすくなりました。ファイルはBlockごとに分け、クラスの衝突を防いでいました。 # _block.scss .block { &__element { &--modifier {} } } # ディレ
Atomic Design と Figma の組み合わせでデザインが便利になる｜デザインシステムの作り方｜スマートキャンプ デザインブログ
まだ開発中のサービスですが、このBiscuet（ビスケット）のデザインシステムの考え方を紹介していきます。 上記のランディングページ（LP）の作成プロセスも過去に紹介しています。気になる方はあわせてお読みください。 Figma と Atomic Design の採用デザインツールは「Figma」、考え方は「Atomic Design」を採用しました。 Atomic Designをデザインに落とし込む際、コンポーネント単位での管理がしやすいFigmaが便利だと考えました。 Figmaに関する記事には、チュートリアルやテンプレートなどの内容は多く見かけますが、実務での採用・運用を主にした記事は少ないため、スマートキャンプでの例を紹介します。 ※本記事内で紹介する画面キャプチャは開発中のものや、記事用に独自に編集したものも含まれます。 Atomic Design についてAtomic Desig
Atomic DesignをVue.jsで実現するための構成と考え方 | Biscuetでの例をもとに - SMARTCAMP Engineer Blog
スマートキャンプのデザイナー/エンジニアのhaguriです。 弊社では8月1日、インサイドセールスに特化したCRM Biscuet（ビスケット） という新サービスをリリースしました。 biscuet.jp Biscuetでは Vue.js + Atomic Design でコンポーネント設計をしています。今回はその構成と考え方・Biscuetチームでの運用について紹介していきます。 Atomic Design について templatesとpagesについて Biscuetでのルール atoms molecules organisms pages ディレクトリ構成 App.vue components/ plugins/biscuet-materials/ さいごに Atomic Design について Atomic Design とは、コンポーネント単位で設計していくデザイン・開発手法で
はじめに この記事は、業務でフロントエンドのディレクトリ設計思想を変更した際の作業をまとめた記事です📕 それなりの規模のプロジェクトでの移行作業のため、新規機能実装などに影響が出にくいようにリファクタリングを進めてきました。そこでの進め方や感想も含めてお伝えできればと思います。 前提 6年ほど運用しているReact Nativeのプロジェクトでの移行作業のお話です。 従来のディレクトリ設計思想はAtomic Designを採用していました。しかし、organismsのコンポーネントが300個近くにも及び、プロジェクトの規模が大きくなるにつれて様々な課題が浮き彫りになりました。これを機に設計思想の移行を決めました。 Layer型のAtomic DesignからFeature型のディレクトリ構造に移行していこうと思います😌 参考: ソフトウェアアーキテクチャの基礎 なぜ移行したか なぜ移行
Atomic Design思考でVue.js×Plotly.jsでのグラフComponentを実装した結果 - ABEJA Tech Blog
第0章：はじめに こんにちは。はじめまして。 ABEJAでフロントエンドとバックエンドをフラフラしているエンジニアの齋藤(@z-me)*1です。 本ブログは ABEJA Advent Calendar 2019 の9日目です。 不本意ながらABEJAで開催するフロントエンドのミートアップやカジュアル面談でよく、 ABEJAってAIの会社ってイメージはあるけどUI/UXガッチリやってるイメージがない。 と言われる事が多いので、当ブログ編集長*2が言っている通り*3、ABEJAではプロダクトを開発＆提供しているということをお伝えしたいと思います。 今回はその中でも、あまり外部に広く知られていない、ABEJA Insight for Retailの提供しているDashboardで、どのようにUI/UXに力を入れて開発しているのかや、その開発手法(Atomic Design)やグラフCompone
脱・Atomic Design - HTML+CSSコーディングの粒度分類法（HTML Parts） - Qiita
はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト… といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし
PJでUIデザインにAtomic Designを導入したらどうだったのか | フューチャー技術ブログ
今回はUIと少しUXのお話ですこんにちは。フューチャーでUXの専門家をさせていただいている平川といいます。 フューチャー技術ブログでは、【Figma】を使ってチームでUI/UX設計するといいこと の記事を書いた久保さんと同じチームに所属しています。 PJでは最高の顧客業務を目標に、業務、UX、UIの設計と、アプリ開発をさせていただいています。 今回はPJの現場でUXとUIのデザインを通して、Atomic Designの導入はどのような結果を生んだのか、Atomic Design導入に際しての課題や取り組み方のコツなんかをお伝えできればと思います。 Atomic DesignAtomic Designは、Webページやアプリケーションを作成する際に、UIの最小要素（原子）からの組み合わせで構築していく考え方です。Atomic Designの提唱者はHTMLタグを元素周期表に見立ててそれを原子
🙋♂️エンジニアの@dachi_023です。約4ヶ月ぶりに記事を書きます、がんばります。 この記事について コンポーネントやAtomic Designについて書いています。ここではUIデザインのフローに関するAtomic Designの実践ではなく、開発(実装)のフローにはめ込んだ場合にどうすべきなのか、というお話をしています。 コンポーネントとAtomic Design ReactやVueをはじめとするライブラリのお陰でフロントエンド開発に「コンポーネント」という考え方が浸透した今日この頃ですが、そんなコンポーネントの設計についての話なんかをしているとよく現れるのが今回の主題に挙げている「Atomic Design」です。Atomic Designはデザインシステムを効率よく作成するための手段のひとつですが、その中に登場するコンポーネントを5階層(Atoms, Molecules,
2022.07.20 開発×テスト LT会 - vol.3 #devtestlt
SketchとAtomic Designという強力なツールと方法を組み合わせれば、デザイナーはデザインシステムを作成して、ワークフローを標準化し効率化することができます。 デザインシステムとは デザインシステムとはチームがプロダクトを制作し運用する際に共通の言語で繋がれるように、再利用できるコンポーネントとガイドラインをまとめたものです。 ほとんどの場合、デザインシステムはスタイルガイドとコンポーネントライブラリから構成されています。加えて、ブランドバリューや、口調や雰囲気といった要素を含めることもあります。デザインシステムを導入する際のポイントは、プロダクトやブランドについての唯一の正しいソースとして運用される基準を作ることにあります。 Googleのマテリアルデザインは構築されたUIデザインシステムの一例です。マテリアルデザインは2014年に、一貫したAndroidアプリをデザインし開
食べログでのAtomic Design 〜どう分類しているか編〜｜食べログ フロントエンドエンジニアブログ
食べログFE（フロントエンド）チームの金野と申します。 以前の記事で、jQuery+Backbone.jsからReact/TypeScriptへのリプレースを進めていることをご紹介しました。 リプレースした部分では、Atomic Designを採用しています。 今回の記事では、採用した理由や食べログでの分類方針についてご紹介します。 Atomic Designを導入した目的Atomic Designを導入したねらいは以下になります。 ・コンポーネントの責務がより明確になる ・見た目の粒度だけでなく、ロジックの責務も明確にできる ・「ドメインが入るか／入らないか」。「抽象的か／そうでないか」の区別が明確になる ・世間的にも浸透している概念のため、デザイナー・エンジニア間の共通言語を作れる 食べログではもともとUIコンポーネントをFLOCSSの考え方に従ってレイヤー分けしていましたが、以下の課
「デザインの歴史」から「Atomic Design」まで。rootが選ぶ、デザイナーとしての資質を高めるオススメ本【6月版】 ｜ブログ｜root｜芯を問い、成長に貢献する
デザインパートナーとして企業の課題解決や事業成長に携わる私たちは、作って終わりではなく、作った後の支援が欠かせません。そのためには、「プロダクト戦略」、「デザイン開発」、「組織デザイン」の3つの領域を横断した知見が求められます。 この記事では、領域を横断するデザイナーとなるためrootメンバーが日々読んでいる本から、今月のオススメをご紹介します。 先月のオススメ本の紹介はコチラ。 姿勢としてのデザイン 「デザイン」が変革の主体となるとき 姿勢としてのデザイン「デザイン」が変革の主体となるとき 著者：アリス・ローソーン デザイン界の歴史と文化を振り返り、直観・創意・問題解決能力に根ざした現代の柔軟なメディアとして、デザインのラディカルな変貌を描いています。現代ではデザインが社会でより影響力を持つ時代が到来しており、事例を元にどのような姿勢でデザインに取り組んでいるかが紹介されています。 少々
かれこれ４、５年くらいAtomic designに触れてきて、こんなに使いづらいのになんで使ってるんんだっけ？ってなったので、脳死と妥協のAtomic designを辞めたいというモチベを高め、重い腰を上げて考えてみました。 前提 今回の趣旨はあくまでも共通コンポーネントにフォーカスしています。なのでpages(人によってはscreens,containersと命名しているかも)は考慮しません。 また、atomic designのデザインサイドの思想そのものについては言及しません。あくまでもディレクトリ構成の運用上の課題にフォーカスします。 ディレクトリを分ける意味とは そもそも、components/配下をフラットに並べずにグルーピングする目的は何でしょうか。 使いたいものが明確な場合はディレクトリ構成はあまり寄与しません。「あのButtonコンポーネントを使いたい」であれば、ディレクト
PLAIDでエンジニアをしている @kei-tamiya です。 本記事は PLAID Advent Calendar 2019 の 20日目になります。 社外で個人的に開発しているプロジェクトでAtomic Designを採用しており、ある程度知見が溜まったので、1つの運用例としてご紹介したいと思います。 前提 どんなプロジェクト？ もともとVue.jsを用いて動いているアプリケーションを1からリファクタするプロジェクト 別リポジトリに、Nuxt.js, Typescript, Vue Apolloを使用して開発 フロントエンドエンジニア3〜4人、デザイナー1人 全員リモートで、週1で30〜60minぐらいミーティングできる GraphQLのAPIサーバーはおよそある状態 主に大きなページごと（Userに関するページなど）をエンジニア1人が担当して開発する もともと課題に感じていたこと・
Web サイトを構築するにあたって、よく参照されるコンポーネントの分類手法として、Atomic Design と Presetational and Container Components があります。 Atomic Design … UI の粒度と具体性によって 5 レベルに分類するPresentational and Container Components … 「表示」と「振る舞い」の役割で分類するここでは、それぞれに関して概要をざっと眺めた上で、Next.js プロジェクトにどんな形で適用していけばいいかを考えてみます。 Atomic Design とはWeb デザインにおける UI コンポーネントの分割粒度の考え方として、Brad Frost 氏の Atomic Design があります。 Atomic Design - Brad Frost 氏のブログ記事Atomic Des
はじめに VALU Advent Calendar 2019 11日目 (!) の記事です! VALU ではデザインに Atomic design (アトミックデザイン) を採用しています。 本記事では，VALU のデザイナーが作成した素敵な Sketch シンボルを差分なく反映し，かつ変更に耐えうる SwiftUI を運用するための方法をご紹介しようと思います。 昨年の VALU Advent Calendar にて，Sketchと1対1を目指すAtomic designなStoryboardの作り方 を投稿しました。本記事はそれを SwiftUI で行ったものです。まだご覧になっていない方は先にご覧ください。 Highlights SwiftUI を利用することで，「ファイル数増加」「子View更新時の伝播」「親ViewのConstraints破棄」など，UIKit (昨年の実装) で
がんばらない
2019年7月31日、Vue.jsに関する知見を共有する勉強会「Roppongi.vue #2」が開催されました。Vue.jsをさまざまな角度から掘り下げるライトニングトークには4人が登場。「Atomic Designと刺さらない現場」に登壇したのは、果物リン氏です。登壇資料はこちら Atomic Designと刺さらない現場 果物リン氏：前回もRoppongi vueでしゃべらさせていただきました果物リンです。 今回は実質懇親会LT的なノリだと思いますが、「Atomic Designと刺さらない現場」というタイトルでしゃべりたいと思います。今回の内容はちょっと若干過激なんじゃないかなと思うんですけど、まあ、お気持ちなのでというところで。 みなさん、Atomic Design使っていますか？ 使ったことがあるよという方、手を挙げてもらっていいですか？ （会場挙手） おっ、半分はいかないかな
Extending Atomic Design
Atomic design is now over 6 years old (which is nuts!). I’m thrilled that all these years later the methodology continues to help teams think of their user interfaces as a hierarchical, interconnected set of components that build real product screens. I thought I’d be sick of talking about this by now, but I’m still passionate about atomic design after hearing so many success stories, as well as w
Brad Frostが提唱したAtomic Designはすでに多くの場面で採用されていますが、もともとがUIデザイン手法であるため、フロントエンドアプリケーション開発におけるコンポーネントの分類に直接的に適用できないものも出てきます。 そこで、最近採用している"Applicational Atomic Design"について具体的なコードとともに紹介していきます。 Reactを前提として説明していきますが、VueにはもちろんAngularを用いたプロジェクトに対しても、同様の手法を適用することができるでしょう。 紹介する方法論をnext.jsに適用したアプリケーションのソースコードは、GitHubに公開しています。 "Applicational Atomic Design"とは? Atomic Designに基づきつつ、アプリケーションの振る舞いやドメインモデルとの関わりを視点に加え、フ
Reactを使ったコンポーネント指向設計で、Atomic Designをやめようとしている話 - ITANDI Engineer Blog
はじめに OHEYAGOの開発をしている田渕です！ OHEYAGOはtoCサイトなので、UI・UXを重要視しており、チームとしてデザイナーを2人抱えております。 デザイナーは他業務との兼任ですが、それに対してエンジニアは3人なので、デザイナーの割合がとても多いチームです。 エンジニアとデザイナーで共通認識を持ち、開発効率を向上させるために、デザインシステムとしてAtomic Designを採用していました。 しかし、運用がうまく行かず、ある問題が露わになってきたため、Atomic Designをやめようとしている最中です。 そこで、上手く行かなかった知見の共有として、どういった問題が出てきて、どのようなデザインシステムに舵を切ろうとしているのかを紹介します！ 最初にAtomic Designを採用した理由 当時のチームには、Reactでの開発経験が多い人がおらず、コンポーネント設計も手探り
フロントエンドのテックリードのみゅーとん(@_mew_ton)です。 弊社では新しいプロジェクトを立ち上げの際に、Nuxt3を採用することにしました。 また、従来までのプロジェクトの反省点として、 Atomic Design を考慮して実装することにしました。 ただ、Atomic Design について調査していくと、Atomic Design の考え方をそのままディレクトリに落とし込んでいくのはどうやら悪手のようで、Google サジェストからも、いくつか失敗のケースが散見されました。 そこで、Nuxt3 のディレクトリ構成にマッチするような Atomic Design の構成を考えてみたので紹介します。 Atomic Design とは Atomic Design とは、パーツ単位でUIデザインを設計する手法です。 Atomic Design 自体は 5年以上前から提唱されている設計方
DROBE では React のコンポーネント設計に Atomic Design を取り入れていますが、特にデザインにおける設計と React における実装という目的の違いから、実装していると微妙に概念が取り入れ辛く、しばしば方針に迷う事があります
この記事は2020年10月3日にWCAN 2020 Design Special 〜デザイン力の基本とブランドづくりの一歩〜で行うLTのスライドと原稿です。 投稿時点ではまだイベントは始まっていませんが、先んじて公開します。 以下が実際の内容です。 それでは「実装まで視野に入れるならAtomic Designを辞めましょう」と題して私のLTを始めます。 みなさんこんにちは。Increments株式会社でデザイナーをしている綿貫佳祐と言います。 Incremetnsではこれらのサービスを展開しております。 普段の業務からこれら3つ、インターフェースだけでなくフロントエンドまである程度担当していまして、両方の視点から見た話をしていきます。 最初にお断りしておきますと、現在Atomic Designを使っている方々を否定するつもりはありません。 ただ、主観ですがAtomic Designは「汎用
![[LTスライド&原稿]実装まで視野に入れるならAtomic Designを辞めましょう - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b36672e68f2ccc80b4b17d448b528f5e5a3bb2ff/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTFQlRTMlODIlQjklRTMlODMlQTklRTMlODIlQTQlRTMlODMlODklMjYlRTUlOEUlOUYlRTclQTglQkYlNUQlRTUlQUUlOUYlRTglQTMlODUlRTMlODElQkUlRTMlODElQTclRTglQTYlOTYlRTklODclOEUlRTMlODElQUIlRTUlODUlQTUlRTMlODIlOEMlRTMlODIlOEIlRTMlODElQUElRTMlODIlODlBdG9taWMlMjBEZXNpZ24lRTMlODIlOTIlRTglQkUlOUUlRTMlODIlODElRTMlODElQkUlRTMlODElOTclRTMlODIlODclRTMlODElODYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWNjOTkxODEzYWE5YTgzYjAxYTU1NGEwOTMxMDA2MDA1%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB4cnhveGN4b3gmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTVhZmVkZjZjZjNkMTFiMmYwOTA4NTAyYTkyYmQwZTVl%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gUWlpdGHmoKrlvI_kvJrnpL4%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D46ba16e8a9b0707ba9fc31cfba17831c)
2019/6/22 のAdobe XD ユーザーフェス 2019 (札幌) で発表したスライドです。
タイトルは記事の内容を読み込ませ、chatGPTに作成してもらいました。 強いタイトルですが、Reactの初学者向けにAtomic Designとは何なのか、それに則ってコンポーネントを分割するにはどのようにするのかを解説しています。 後半では実際にAtomic DesignでTodoアプリを作成していますので試してみてください。 （有識者はアドバイスなどがありましたらどうぞよろしくお願いします） Atomic Designを理解する React開発者にとってのAtomic Design Atomic Designとは Atomic Designの5つのレベル Atomic Designのメリットとデメリット React/TypeScriptで作るTodoアプリ React開発者にとってのAtomic Design Reactの開発者がAtomic Designを使う理由は、コンポーネント
はじめに Flutter は宣言的 UI フレームワークを採用しており、階層的に UI を実装することが可能となっています。 Flutter を始めとして SwiftUI や React Native などの台頭により、近年では宣言的 UI でのネイティブアプリ開発がトレンドとなっていますが、その原型と言えるものは HTML の言語仕様として Web フロント開発では既に定着していました。 その Web フロント開発において注目されているコンポーネント設計手法があります。それが Atomic Design です。 この記事では、Flutter による宣言的 UI 実装と Atomic Design によるコンポーネント設計を組み合わせ、堅牢かつ再利用性の高い Widget 及び画面を実装することを目指します。
デザインシステムの類も作ったことがある（今もやっている）のだが、なぜ Atomic Design に良さを感じないのかを思いつき次第まとめていく。 （余談だが自分の務めている会社はデザイナにも Atomic Design を好む人がいないのでこの辺で揉めたことがない。むしろ「やっぱ無理でしょ」「だよねー」ぐらいに意見があっていると思っている）
Atomic Designでコーディングしてたら規約ができたので、それを使って更にコーディングしてみた。 - Qiita
Atomic Designでコーディングしてたら規約ができたので、それを使って更にコーディングしてみた。Vue.jsAtomicDesign Atomic Designとは？ 知っている方は、こちらまで読み飛ばして下さい。 Atomic Designには階層と、それぞれの役割がある 原典によると、 Atoms(原子) Molecules(分子) Organisms(生体) Templates(テンプレート) Pages(ページ) の５つの階層がある。それぞれ説明すると、 Atoms 原子 現実世界における原子 ＝ それ以上分割できない ユーザーインタフェースにおける原子 ＝ 分割すると機能しないから、それ以上分割できない これをみて、「分割できるかどうか」＝「粒度」を追い求めてしまうことが多いが、それはあまり意味がない。 大事なのは粒度ではなく、Atomにするメリットを享受できるかどうかに
Atomic Design × Typescript × React × Muiの実践的なフロントエンド開発
こんにちは！BrunchMadeの@はせがわです。 この度、株式会社BrunchMadeに創業メンバーとしてジョインしました🙌 今回はそのBrunchMadeのホームページ制作にあたって、学んできたことを共有していきます。 設計：Atomic Design 言語：Typescript フレームワーク：Next.js UIライブラリ：Mui（Material-UI） はじめに フロントエンド開発している方はほとんど聞いたことあるであろう「Atomic Design」。 そもそもAtomic Designはデザインシステムを作成するための方法論ということもあり、UI設計の答えではありません。そのため、実際のフロントエンド開発に取り入れようとすると意外と手こずることが多いのではないのでしょうか？ また、記事・サイトなどを検索しても説明は載っているが、具体的なコードが少ない。Organismsの
札幌在住のWeb屋。 Bracketsが好き過ぎて本を書いたり、CSSの新しいアーキテクチャであるPRECSSを作るなど色々しております。 仕事ではHubSpotをメインにやってます。
こんにちは、@ktmoukです。時間を管理できるアプリ「Hackaru(測る)」を一人で開発しています。 最近、ユーザが最初に訪れるページ、いわゆるランディングページをリニューアルしました。Atomic Designを参考に、Vueのコンポーネントを分割しています。 本稿では、個人開発でAtomic Designを使うときの作成手順をまとめてみました。Web制作の参考になれば幸いです。 ランディングページ: https://www.hackaru.app その前にAtomic Designとは？ Atomic Designは、UIのパーツを「原子(Atom)」「分子(Molecule)」「有機体(Organism)」「テンプレート(Template)」「ページ(Page)」に分類しようという考え方です。分類することでパーツが再利用しやすくなります。 詳しくは、DeNA DESIGN BLO
Vue.jsでFormをAtomic Designしてみた時のコンポーネント間のデータのやりとり
「実践ドメイン駆動設計」 から理解するDDD (2018年11月)Atsuo AOKI24.2K views•127 slides
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.js × Atomic Designのサービスデザインフロー
Atomic Design はなぜ難しいか？どうやって難しさを解消するか
Atomic DesignをベースにしたデザインシステムとCSS設計｜あっきー
フロントエンドのディレクトリ設計を移行した話 | Atomic Design → Feature
Atomic Designを実践して得た学びと失敗 - コネヒト開発者ブログ
Atomic Design とテストの○○な話
Sketchを使ったAtomic Designのワークフロー
Atomic designを辞めて利用目的別のディレクトリ構成に移行する
課題解決手法としてのAtomic Designの解釈と実装 - Qiita
Next.js アプリのディレクトリ構成を考える（Atomic Design と Presentational and Container Components）
Sketchと1対1を目指すAtomic designなSwiftUIの作り方 - Qiita
あきらめる Atomic Design
Atomic Designが刺さる現場・刺さらない現場
"Applicational Atomic Design"について
Nuxt3 向けに Atomic Design を拡張してみた - hacomono TECH BLOG
React の Component 設計と Atomic Design
[LTスライド&原稿]実装まで視野に入れるならAtomic Designを辞めましょう - Qiita
Adobe XDで始めるAtomic Design
【TypeScriptで学ぶReact入門】Atomic Design実践ガイド📙
Flutter x Atomic Design で堅牢なデザインパターンを実現しよう
Atomic Design に対する感情 - fsubal
Adobe XDで始めるAtomic Design | Thinking Salad
Atomic Designでランディングページを作ったので、作成手順とかまとめました。｜ktmouk
happiness-hokkaido.net
www.chunichi.co.jp
tatiaipo-kabu.com
fire.xn--w8j1at4m.tokyo%26num%3D109)
www.studiok-i.net
pc.watch.impress.co.jp