【Atomic Designに懐疑的なあなたへ】改めて考えたい React / Next.js のデザインパターン

2022/05/15 164 users React Next.js 戦い 設計手法 フロントエンド開発

フロントエンド開発は一般的に複雑性との戦いです。放ったらかしにしておくとますます複雑になり、変更するのが難しくなります。これまでにも、このような複雑さをどうにかして制御しようとして、Atomic Designをはじめとした様々な設計手法（デザインパターン）が考えられてきました。 しかし、React / Next.js を使っ... 続きを読む

Atomic Designをやめてディレクトリ構造を見直した話｜食べログ フロントエンドエンジニアブログ｜note

2021/05/21 245 users Note ディレクトリ構造 ロク リプレース 金野

こんにちは。フロントエンドチームの金野と申します。 食べログでは現在、React+TypeScriptでフロントエンドのリプレースを進めています。 以前の記事で、食べログではAtomic Designをどのように取り入れているかの紹介をしました。 しかし、最近のリプレース作業では、Atomic Designとは異なるディレクトリ構造を採用し... 続きを読む

Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話 - Yahoo! JAPAN Tech Blog

2019/12/03 472 users 刷新 Yahoo 岡部和昌 kzms2 Japan

Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話 こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経... 続きを読む

Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division - Speaker Deck

2019/07/10 289 users Speaker Deck 指針 コンポーネント Vue.js

Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division Vue.js 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎か... 続きを読む

社内管理画面を Vue + Go で作る - Gunosy Tech Blog

2018/10/05 302 users Vue Rails Gunosy GOA フロントエンド

広告技術部のUTと呼ばれている @mocyuto です。 普段は広告配信のバックエンドを主に担当しています。 今回は社内管理画面を作った話をお伝えしたいと思います。 はじめに 設計 バックエンド goa 構成 フロントエンド 構成 TypeScript Vuex Atomic Design まとめ はじめに Gunosyの管理画面ではRailsが多いですが、社内... 続きを読む

Atomic Designってデザイナーには難しくない！？という話

2018/07/30 108 users DeNA デザイナー UI要素 最小単位 最初

Atomic Designってむずくないすか？ なんか、良さそうなのは分かるんですよ。 UI要素を最小単位まで分解して、それを共通化して再利用性を高めて工数減らしていこうぜ！ということなのは分かるんです。 Atomic Design を分かったつもりになる こちらはDeNAの記事で、単純に「Atomic Design」でググると最初に出てくる記... 続きを読む

PhotoshopからXD、さらにSkechへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 | スペースマーケットブログ

2018/07/12 351 users 横井 Photoshop 苦悩 デザイナー デザインチーム

PhotoshopからXD、さらにSkechへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 デザイナーの横井です。こんにちは！ 猫飼いなのですが猫に顔をうずめるのが難しい季節になってまいりました（毛まみれ） 久しぶりのデザイン記事となりましたが、今日は弊社デザインチームが行ったAtomic Designのシ... 続きを読む

Atomic DesignからみたBootstrap｜Yoko Nishida｜note

2018/01/08 109 users Yoko Nishida

はじめまして。UIデザイナーの @nikoko45 です。 最近Webサービスのデザインガイドラインを作っていて、特にコンポーネントをどうまとめたら良いのか模索中です。ユーザーには一貫したUIや世界観を提供でき、開発者にはもっと効率的に作業スピードをあげられる方法はないか考えてみました。 デザインガイドラインで目指したいこと 一貫性のあるデザインを維持するために、デザインファイルのテンプレート作成... 続きを読む

珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | デザイン | POSTD

2015/12/28 395 users Bootstrap POSTD Sketch 互い 原則

ここ何年も、私たちはデザイン理解してもらえるよう、スタイルガイドなどを作成してきました。同じように、開発者もBootstrapなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。それを実現しようとしてるAtomic Designについて解説します。概要：  Sketchを使ったAtomic Designの方法がプロダクトデザイン... 続きを読む