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

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

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

【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とは異なるディレクトリ構造を採用し... 続きを読む

ビジュアルリグレッションテストを導入した話 - メドピア開発者ブログ

2020/04/10 10 users ビジュアルリグレッションテスト リグレッションテスト 改修

こんにちは。フロントエンドエンジニアの小林和弘です。 Vue.js + Atomic Designでつくられたプロジェクトにビジュアルリグレッションテストを導入しました。 ビジュアルリグレッションテストでUIの安全性を高める コンポーネントの改修、新機能の追加、ライブラリのアップデートを行う際、UIに不要な変更が入っていない... 続きを読む

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を実践して得た学びと失敗 - コネヒト開発者ブログ

2019/10/23 24 users コネヒト開発者ブログ 失敗 コンポーネン コンポーネント 実装

‍♂️エンジニアの@dachi_023です。約4ヶ月ぶりに記事を書きます、がんばります。 この記事について コンポーネントやAtomic Designについて書いています。ここではUIデザインのフローに関するAtomic Designの実践ではなく、開発(実装)のフローにはめ込んだ場合にどうすべきなのか、というお話をしています。 コンポーネン... 続きを読む

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チームでの運用について紹介し... 続きを読む

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

Sketchを使ったAtomic Designのワークフロー | UX MILK

2019/07/08 17 users Sketch ワークフロー ガイドライ UX MILK 共通

SketchとAtomic Designという強力なツールと方法を組み合わせれば、デザイナーはデザインシステムを作成して、ワークフローを標準化し効率化することができます。 デザインシステムとは デザインシステムとはチームがプロダクトを制作し運用する際に共通の言語で繋がれるように、再利用できるコンポーネントとガイドライ... 続きを読む

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

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

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

「デザインの歴史」から「Atomic Design」まで。rootが選ぶ、デザイナーとしての資質を高めるオススメ本【6月版】 | root inc. WebサイトやアプリのUI/UXデザイン会社

2019/06/13 10 users root 資質 デザイナー UXデザイン会社 歴史

続きを読む

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の日本語スライドに正しさを求めるのは間違っているだろうか - Qiita

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

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

Atomic Designとの
上手な付き合い方 / better-relationship-between-atomic-design - Speaker Deck

2018/12/10 21 users Speaker Deck 付き合い方

Atomic Designとの
上手な付き合い方 / better-relationship-between-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」が開催されました。デザイナーとエンジニアでどのように開発を進めていくか。デザインをプロダ... 続きを読む

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

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

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

UIの意味付けに情報アーキテクチャは強い味方 : could

2018/08/19 12 users could 思考プロセス 分類 粒度 情報アーキテクチャ

IAUI UIの意味付けに情報アーキテクチャは強い味方 UI要素の分類と意味付けは誰かによって作られたシステム（考え方・モデル）に寄り添うことになります。思考プロセスを書き出し、共有するときに IA の知識が役に立ちます。 Atomic Designは数ある分類方法のひとつ Atomic Design のように UI の『粒度』で分類すること... 続きを読む

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を使用したコンポーネントベースのUI設計が分かる良書 | コリス

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

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

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

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

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

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

2018/01/08 109 users Yoko Nishida

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

デザインシステムの資料を作る時に参考にしたリンク集｜ryopan｜note

2018/01/04 25 users バス Design Systems DMMさん 全部目 実際

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

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

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

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

「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（毎回デザイ... 続きを読む