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 日に刷新、主に開発環境をアップデートした経... 続きを読む

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

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

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

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

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

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

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

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

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

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 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎か... 続きを読む

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

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

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

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

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

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

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

2018/01/08 109 users Yoko Nishida

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

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

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

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

Atomic Design ～堅牢で使いやすいUIを効率良く設計する 読了 - くらげだらけ

2018/05/01 76 users 堅牢 コンポーネント くらげだらけ 読了 思想

2018 - 05 - 01 Atomic Design ～堅牢で使いやすいUIを効率良く設計する 読了 design 昨今ではデザイナーの間でも、アプリやサービスに使われる色やテキストなどをまとめた「スタイルガイド」や、デザイン コンポーネント をまとめた「パターンライブラリ」、さらにそれらを全てまとめてドキュメント・原則・思想なども含めた「デザインシステム」などを作りながら効率よくより良い体験... 続きを読む

Atomic Designの概念に基づいたJavaScriptフレームワークのコンポーネント設計とは？ - pixiv inside

2017/05/26 72 users pixiv inside コンポーネント設計 概念 エモい話

テクノロジー Atomic Designの概念に基づいたJavaScriptフレームワークのコンポーネント設計とは？ はじめに こんにちは。はてなブログとエモい話が何よりもすきな17新卒のエンジニアPotato4dです。 ひょんなことからこのpixiv insideに技術的な記事を書く機会に恵まれたので、JavaScript周りの話を書きたいと思います。 概要 モダンなJavaScript環境に慣... 続きを読む

Atomic DesignをVue.jsで実現するための構成と考え方 | Biscuetでの例をもとに - SMARTCAMP Engineer Blog

2019/08/29 69 users Biscuet Vue.js 構成 もと ビスケット

スマートキャンプのデザイナー/エンジニアの葉栗です。 弊社では8月1日、インサイドセールスに特化したCRM Biscuet（ビスケット という新サービスをリリースしました。 biscuet.jp Biscuetでは Vue.js + Atomic Design でコンポーネント設計をしています。今回はその構成と考え方・Biscuetチームでの運用について紹介し... 続きを読む

Atomic Designの概念を参考にSketch.appのシンボルを効率的に管理する方法 | UXデザイン会社Standardのブログ

2017/01/10 69 users Sketch.app シンボル 概念 参考 方法

新年明けましておめでとうございます。 2017年も、未来の豊かさにつながる仕組みをデザインする組織として、STANDARDメンバー一同、常に学び、考え、邁進して参ります。本年もどうぞ、よろしくお願いいたします。 Sketchの連載記事を執筆しました 私事ですが、年末にWPJさんでSketchの連載記事を執筆させて頂きました。 吉竹 遼のSketch入門 for UIデザイナー – WPJ 対象はこ... 続きを読む

Atomic Design と Figma の組み合わせでデザインが便利になる｜デザインシステムの作り方｜SMARTCAMP DEXIGN｜note

2019/07/06 68 users figma Biscuet ビスケット ランディングページ

まだ開発中のサービスですが、このBiscuet（ビスケット）のデザインシステムの考え方を紹介していきます。 上記のランディングページ（LP）の作成プロセスも過去に紹介しています。気になる方はあわせてお読みください。 Figma と Atomic Design の採用デザインツールは「Figma」、考え方は「Atomic Design」を採用しま... 続きを読む

デザインシステムの資料を作る時に参考にしたリンクまとめ | よりデザイン

2017/12/31 68 users 資料 参考 デザインシステム デザイン リンクまとめ

デザインシステムの資料を作る時に参考にしたリンクまとめ この記事は何？ DMMさんで「Atomic Design & Design Systems」をお話させて頂いた 時に、自分が読んだ記事をまとめたものになります（いちおう全部目は通してる…ハズ）。デザインシステムについて書かれている記事ってまだまだ少ないのですが、情報源自体もまとまってないんですよね。実際、自分が↑の資料を作る時はほぼ手探り状態... 続きを読む

THE GUILD勉強会『Atomic Design & Sketch』 // Speaker Deck

2017/12/04 67 users Sketch Speaker Deck

All slide content and descriptions are owned by their creators. 続きを読む

「Atomic Design & Design Systems」をお話させて頂きました | よりデザイン

2017/12/29 61 users Design Systems DMM.com 前半 デザイン

DMM.com ラボさまの社内勉強会にお声がけ頂き、「Atomic Design & Design Systems」というテーマでお話させて頂きました。 当日の構成 勉強会のテーマがAtomic Designについてだったので、前半は GUILDさん勉強会 でお話させて頂いた内容を少し持ってきました。 後半ではAtomic Designの視点をもう少し広げて、Design System（毎回デザイ... 続きを読む

Atomic Designの日本語スライドに正しさを求めるのは間違っているだろうか - Qiita

2019/01/04 54 users プロトタイピング Qiita コンポーネント指向 チーム 失敗

はじめに Atomic Designとはこのリンクに書いてある感じの奴です 最近のコンポーネント指向のフロントエンドでAtomic Designで失敗するチームの話をちらほら聞きます 自分も1度は失敗しました。そりゃプロトタイピングもしたことなかった状態でAtomic Designでこった画面を作ったので当然ですが。(逆に1つ目の画面で失敗... 続きを読む

フロントエンドの制作者が知っておきたい、Atomic Designを使用したコンポーネントベースのUI設計が分かる良書 | コリス

2018/05/11 52 users コンポーネントベース コリス 良書 実務 実装

ここ数年で、WebページやスマホアプリのUIを開発する際に、コンポーネントベースの実装が増えてきました。元々はソフトウェア開発で一般的な考え方でしたが、メンテナンス性に優れ、再利用性も高く、UIもより効率的に実装できます。 Atomic Designを使用したコンポーネントベースのUI設計が実務レベルで詳しく解説されたオススメの本を紹介します。 今よりもっと効率的にUIに取り組みたい、メンテナンス... 続きを読む

Sketch LibrariesとAbstractを使ったAtomic Designの実践

2017/10/20 49 users Nagisa Abstract 川畑 コンポーネント指向 効率

はじめに こんにちは！ 社長室インキュベーションチームで新規サービスのデザインを担当しています田村です。 先日、 デザイナーリーダーの川畑が執筆した記事 にある通り、Nagisaではデザイン手法として Atomic Design を採用しています。 Atomic Designは、コンポーネント指向のデザイン手法です。 コンポーネント指向はパーツの再利用と効率の良い運用を可能とし、デザインの追加・変... 続きを読む

Atomic Designを採用したWeb開発におけるの現状と課題　導入の経緯から効果まで - ログミーTech

2018/12/05 42 users ログミーTech 経緯 課題 現状 導入

Atomic Designを採用したWeb開発におけるの現状と課題 導入の経緯から効果まで istyleにおけるAtomic Design利用の現状と課題 2018年10月18日、Roppongi Designersが主催するイベント「Designer X Engineer Development #01」が開催されました。デザイナーとエンジニアでどのように開発を進めていくか。デザインをプロダ... 続きを読む

Atomic Design の理解 : molecules と organisms をどのように分割するか - Frasco

2017/10/20 40 users インタラクションデザイナー Frasco 我々 最初 理解

Alla Kholmatova Atomic Design の理解 : molecules と organisms をどのように分割するか 我々のインタラクションデザイナーである Alla Kholmatova が FutureLearn での Atomic Design の利用の状況について考察します。 1年前、私たちは FutureLearn での 最初のパターンライブラリ開発について 、そし... 続きを読む

AtomicDesignとVue.js(Nuxt.js）に使うと最高な開発を体験できた - Qiita

2019/04/05 28 users Qiita AtomicDesign コンポーネント 手法

開発環境 Nuxt.js v2 Express v4 bootstrap v4 (bootstrap-vue) Atomic Designとは Atomic Design はデザインシステムを作るための１つの手段 ざっくり言うと、UI コンポーネントの粒度をカテゴリーに明確に分ける手法 http://atomicdesign.bradfrost.com/ Atomic Designの詳細については割愛しますので、下記サイトをご... 続きを読む

フロントエンドのディレクトリ設計を移行した話 | Atomic Design → Feature

2024/02/28 26 users feature リファクタリング ディレクトリ設計 前提 業務

はじめに この記事は、業務でフロントエンドのディレクトリ設計思想を変更した際の作業をまとめた記事です。 多少大きな規模のプロジェクトのため新規機能実装などに影響が出にくいようにリファクタリングを進めてきました。そこでの進め方や感想も含めてお伝えできればと思います。 前提 6年ほど運用しているReact Nati... 続きを読む

Atomic Design の理解 : molecules と organisms をどのように分割するか - 海外のイケてるテックニュースを翻訳するよ

2017/10/06 26 users インタラクションデザイナー organisms 許諾 原著者

2017 - 10 - 06 Atomic Design の理解 : molecules と organisms Original: Making sense of atomic design: molecules and organisms by Alla Kholmatova 本記事は、原著者の許諾のもとに翻訳・掲載しています。 我々のインタラクションデザイナーである Alla Kholmat... 続きを読む