Hatena Blog Tags
はてなブログ トップ
Atomic Design
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

Atomic Design

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
虎の穴ラボ技術ブログ•5ヶ月前

Tailwind CSS と Atomic Design で実現する効率的な Web 開発の事例

この記事は虎の穴ラボ Advent Calendar 2024の 20 日目の記事です。 こんにちは、虎の穴ラボの古賀です。 今回の記事は React や Vue などモダンな環境に対する Tailwind CSS や Atomic Design の導入の知見が得られる内容となっていますので、よろしければご覧ください。 目次 はじめに 採用理由 Tailwind CSS Atomic Design 開発ガイドライン コンポーネント単位の外部 CSS は作らない global.css には基本何も書かない カスタムコンポーネントに className 属性を使わない 任意の値は制限しない tai…

#開発事例#Tailwind CSS#Atomic Design#CSS設計#フロントエンドエンジニア

関連ブログ

タオルケット体操•5ヶ月前

いいかげんAtomic Designを捨てて別の統一解が欲しい

Atomic Design、どうですか？ フロントエンドをやってる系の人たちはぶっちゃけしっくりきてないとおもいます。 僕を含めて、当初より「これ微妙やね（まぁ流行ってるし適当ではあるから使っておくか）」という見解の人はチラホラみかけました。 それもそのはずです。 朧げな記憶ではありますが、Atomic Designはそもそもプログラマーのために作られたメソッド……ではありません。 デザイナーの方が考案した、デザインシステム構築のためのフレームワークです（そうだよね？）。 Sketchでデザインコンポーネントを作成する際に（たしかSketchだったはず。懐かしいですね）、Sketch上のコンポ…

#フロントエンド#Atomic Design
ASKUL Engineering BLOG•10ヶ月前

デザインシステム構築によるフロント開発環境改善

こんにちは。アスクル初のデザインエンジニアになることを目論んでいる現フロントエンドエンジニアの谷です。 本記事では、サイトのフロント刷新のために1からデザインシステムを構築したという取り組みについてご紹介します。

#フロントエンド#デザインシステム#figma#Atomic Design
英語の顔表情.airabuwo.blog•2年前

ATOMIC ENERGY

Atomic energy. アトミックエナジー

#atomic energy#アトミックエナジー#原子力#核エネルギー#energy#エネルギー#エナジー#atomic fire#Atomic Design#勢い
hacomono TECH BLOG•3年前

Nuxt3 向けに Atomic Design を拡張してみた

フロントエンドのテックリードのみゅーとん(@_mew_ton)です。 弊社では新しいプロジェクトを立ち上げの際に、Nuxt3を採用することにしました。 また、従来までのプロジェクトの反省点として、 Atomic Design を考慮して実装することにしました。 ただ、Atomic Design について調査していくと、Atomic Design の考え方をそのままディレクトリに落とし込んでいくのはどうやら悪手のようで、Google サジェストからも、いくつか失敗のケースが散見されました。 そこで、Nuxt3 のディレクトリ構成にマッチするような Atomic Design の構成を考えてみたの…

#frontend#Nuxt 3#Atomic Design#Nuxt.js
Leverages Tech Blog•3年前

Atomic Designを導入して開発コストの削減とデザインの統一を実現した話。

はじめに こんにちは。2021年新卒の田中です。現在私は、フリーター・既卒・第二新卒など、20代を対象とした就職・転職支援サービス「ハタラクティブ」のシステム開発やユーザー体験の改善に携わっています。 ハタラクティブでは、Laravel + jQueryだったフロントエンド環境をReact/TypeScript + Next.jsにリプレイスしました。その際、コンポーネントシステムとしてAtomic Designを採用し、入社1年目ながら選定から設計、導入プロジェクトの管理、運用ルールの構築を任せていただきました。 この記事では、ハタラクティブでどのような課題を抱えていてAtomic Desi…

#Atomic Design#開発効率#新卒記事