脱・Atomic Design - HTML+CSSコーディングの粒度分類法（HTML Parts） - Qiita
はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト… といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし
Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPAN トップ
Atomic Designから派生した、“オルタネイティヴ”な5つのデザインシステム
2018年6月6日、DMM.comが主催するイベント「DMM meetup」が開催されました。今回のテーマは「ReactとAtomicDesignからみるコンポーネント開発」。フロントエンド開発において重要性が増しつつあるコンポーネント開発手法について、「React」と「Atomic Design」の2つをキーワードに、各分野のプロフェッショナルたちが自身の知見を語ります。プレゼンテーション「Alternative Atomic Designをさがして」では、よりデザインの吉竹遼氏が登場。 Atomic Designをどう使うか 吉竹遼氏（以下、吉竹）：では、LT2人目の吉竹です。よろしくお願いいたします。 今日来てる方で、エンジニアの方はどれくらいいらっしゃいますか？ （会場挙手） やっぱりさすが、多いですね。デザイナーは……？ （会場挙手） ディレクターさんは？ （会場挙手） ちょっと
処理の共通化とコンポーネントの分割/分類/粒度について
じまぐ @nakajmg Frontend Engineer at PixelGrid Inc. + 副業 （元DMM.comラボ 7年前？
Atomic Designを採用したWeb開発におけるistyleの現状と課題 導入の経緯から効果まで - ログミーTech
istyleにおけるAtomic Design利用の現状と課題 高田孝平氏（以下、高田）：「istyleにおけるAtomic Design利用の現状と課題」というタイトルでお話させていただきます。よろしくお願いします。私はアイスタイルでバックエンドエンジニアをしています、高田です。 竹内美帆氏（以下、竹内）：デザイン部でフロントエンドエンジニアをしております、竹内です。よろしくお願いいたします。 細江佳菜美氏（以下、細江）：同じくデザイン部でデザイナー兼ディレクションをやっています、細江と申します。 高田：はい、ありがとうございます。まずAtomic Designを導入するまでの経緯について話します。 その前に、アイスタイルがどんな感じで開発を行っているかと今回の事例について、前提知識として説明します。 今アイスタイルでのWeb開発は、PHPがメインで行われてます。またHTMLやCSS、J
Atomic Designを使ってReactコンポーネントを再設計した話 | スペースマーケットブログ
こんにちは、フロントエンドエンジニアの荒田です。 早いものでスペースマーケットに入社して半年が経ちました。毎日新しい発見があり充実した日々を送っています。 今日はAtomic Designを使ってReactコンポーネントを再設計したお話をご紹介したいと思います。 背景 今まではReactでコンポーネントを作成するにあたり、粒度に関しての指針が明文化されておらず、コンポーネントの粒度は各エンジニアがそれぞれの思想で決めていたため、担当エンジニアの違いによってコンポーネント粒度がばらばらになる課題がありました。 汎用的で、使いやすい粒度のコンポーネントを作成するためには、デザイナーがデザインを繰り返し使っている、その粒度に合わせるのがいいのでは？と感じました。 そしてそれらを解決するためにAtomic Designを導入してコンポーネントのあり方について再設計することにしました。 Atomic
Atomic Design ベースのコンポーネント設計を考えてみた - mya-ake com
背景筆者が個人的に仕事を受けはじめた会社のフロントエンドのプロジェクトを立ち上げることになりました。 そこでせっかく新しく作る機会があるならコンポーネントの分割の仕方（コンポーネント設計）を明確に定義したいと思いました。 そもそもなんで分け方を定義したいとなったかというと、後からメンバーがプロジェクトに入ってきたときに、スムーズにプロジェクトに入ってもらうためです。 今まで作ってきたプロジェクトでのコンポーネントの分け方は、「2,3回使う場合はコンポーネントに分ける」 「長くなって見通しが悪いコンポーネントは分ける」など曖昧なところもありますがシンプルなものでした。 ただこの分け方をするとコンポーネント自体が大きくなりがちでした。 今のところプロジェクトに関わる人数も少なく、個々のメンバーのレベルも高いため運用できていますが、人が増えた場合や他のメンバーとなった場合は「苦しいのではないか？
Atomic Designで「あなたのマイスター」をデザインリニューアル - Qiita
これはユアマイスター Advent Calendar 2018の13日目の記事です。 はじめに みなさん、こんにちは。 ユアマイスター株式会社でシニアデザイナーをしている寺戸です。 弊社アドベントカレンダーでは、エンジニアとデザイナーが持ち回りで記事を書いています。本日は今年の3月から行なっている「あなたのマイスター」のデザインリニューアルについて書いていこうと思います。 リニューアルの背景について クリーニングやリペアなどの「サービス」を売り買いする、サービスECプラットフォーム「あなたのマイスター」。2016年にリリース後、月間訪問者数200万人以上になり、登録しているパートナー※の数も大変ありがたいことに現在2,000パートナーを超えています。 ※弊社サービスでは出店してくださる業者さんや職人さんのことを「パートナー」とお呼びしています サービスが成長すると、このような悩みが増えてき
Atomic Designを
導入する理由と悩み
- Speaker Deck
All slide content and descriptions are owned by their creators.
Vue.js からみた AtomicDesign
この記事はVue.js #3 Advent Calendar 2017の13日目の記事です Atomic Design自体の記事は色々ありますので、この記事ではAtomicDesignで設計したコンポーネントをVue.jsで実際に運用してみて感じた事をまとめてみました 実際にどんな感じになるか結論から言うと、AtomとMoleculeにStoreを持たせず。 OrganismsとTemplateあたりの粒度でStoreを利用するとIA的にも収まりがいい様に思えます。是非デザイナーにツッコミ入れましょう。 VueコンポーネントをAtomicDesignで実装するとだいたいこんな感じになります。Atomの役割色・タイポ・ボタン固定文言など 直接描画要素にデータをレンダリング描画要素のイベントを発行親要素からのデータ受け取り登場箇所がすごく多いのでステートレスを徹底するStoreみちゃダメ絶対！
Atomic Design by Brad Frost - Make and Maintain Great Design Systems
Atomic Design by Brad Frost Atomic Design details all that goes into creating and maintaining robust design systems, allowing your organization to roll out higher quality, more consistent UIs faster than ever before. This book introduces a methodology for thinking of our UIs as thoughtful hierarchies, discusses the qualities of effective style guides, and showcases techniques to transform your tea
Alternative Atomic Designをさがして | よりデザイン
DMMのエンジニアで『React開発 現場の教科書』の著者でもある石橋啓太さんにお声がけ頂いて『ReactとAtomicDesignからみるコンポーネント開発』でお話をさせて頂きました。 テーマは個人的に関心のあった「Atomic Designの代替」を選びました。Atomic Designと言えば、いまや国内外含めてコンポーネント設計をする際に多くの人が参照する概念ですが、すべての環境に適切かと言えばそれはまだ疑問を残す余地があります。 「Atomic Designを採用してみたけどしっくりこなかったので自分たちに合った概念を考えてみた」という個人・組織がいるのはMediumの記事などを通じて知っていたので、そういった事例を集めてみたら面白いんじゃないかなと思ったのがこのテーマを選んだきっかけです。完全に趣味です。 Atomic Designへの疑問 Atomic Designについて知
Atomic Design ～堅牢で使いやすいUIを効率良く設計する
2018年5月6日 著 ゴールデンウィーク中の個人的課題図書、2冊目の『Atomic Design ～堅牢で使いやすいUIを効率良く設計する』を読了。といっても、サンプルデータを実際にダウンロードして手を動かしたわけでもなく、また本文に出てくる結構な量のコードについては読んでいません。Atomic Designについて日本語で専門的に書かれた本というのは知る限り本書が初めてだと思ったので、あくまで興味本位で。 感想としては、期待したほどAtomic Designについて掘り下げられていたわけではなかったような（そこを期待するならFrost氏の書いた『Atomic Design』を読むしかないか）。それは店頭で立ち読みした際に承知のうえで購入してたんですけどね。勝手ながら自分が本書のタイトルをつけるなら、『コンポーネント・ベースのUI開発 〜ReactによるAtomic Designの実践』
Atomic Design ～堅牢で使いやすいUIを効率良く設計する 読了 - くらげだらけ
昨今ではデザイナーの間でも、アプリやサービスに使われる色やテキストなどをまとめた「スタイルガイド」や、デザインコンポーネントをまとめた「パターンライブラリ」、さらにそれらを全てまとめてドキュメント・原則・思想なども含めた「デザインシステム」などを作りながら効率よくより良い体験を提供できるように開発できるようにしようという取り組みがよく見られます。 DropboxやAirbnbなどをはじめとして積極的に自社サービスの「デザインシステム」を公開している企業も多く見られるようになってきました。 それにともなって、自分たちでも作ってみよう・開発現場に取り入れてみようと取り組み始めているという話もよく聞くようになってきましたが、どんな風にどんなところから手を付けて良いか？というのは良く聞く質問です。 「デザインシステム」を考えていくにあたって、設計の手法・考え方の一つにAtomic Designとい
Atomic Designってデザイナーには難しくない！？という話 - Qiita
Atomic Designってむずくないすか？ なんか、良さそうなのは分かるんですよ。 UI要素を最小単位まで分解して、それを共通化して再利用性を高めて工数減らしていこうぜ！ということなのは分かるんです。 Atomic Design を分かったつもりになる こちらはDeNAの記事で、単純に「Atomic Design」でググると最初に出てくる記事です。SEOが強め！（2018/07/30現在） こちらの記事、確かに詳細に書かれているんです。 2016年にこんな記事を書けるなんて、当時口を開けてアホ面で仕事をしていた自分なんかからしたらもう感服するしかないです。 英語の記事しかない中で、最先端なことを書けるDeNAはやっぱりすごいな私は何してんだよって話なんです。 ただ、この記事を、こんな優良な記事を読んだとしても、実際に作り始めると、、、 ButtonってIconも文字も入ってくるけど、こ
Atomic Design by Brad Frost
We're tasked with making interfaces for more users in more contexts using more browsers on more devices with more screen sizes and more capabilities than ever before. That's a daunting task indeed. Thankfully, design systems are here to help. Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster
React Component 視点でのアトミックデザインの解釈といくつかの疑問 - mizchi's blog
フロントエンドの中でも、JS書くプログラマと、CSSを書くマークアップと、デザインカンプを作るデザイナで、コンポーネントという概念がズレる。だいたいこれらが一人だったり兼任だったりで1~2レイヤーの開発ステップになるが、完全分業だったり人が多くなると混乱の元になる。 誰かが決定的に間違ってるというつもりはない。正直、どっちかというと本来のデザイナ側の用語定義に倒した方がいい気がしているが、プログラム上の都合もいろいろ混ざってきて、話が簡単ではない。 自分の理解が間違ってる可能性もある。この記事はレビューをもらうために書いている側面もあり、指摘されたら追記していく。 読んだもの。 Atomic DesignとCSS設計 - Atomic Designとは何か | CodeGrid Atomic Designの考え方と利点・欠点 – wkr. Atomic Design の大雑把な理解 基本的
Atomic DesignとSketchの活用 | ajike switch
こんにちは。 デザイナーの原です。 さて、皆さんは「Atomic Design」をご存知でしょうか？ 今回は、Sketchを活用した「Atomic Design」の実践方法についてご紹介したいと思います。 Atomic Designとは パーツ・コンポーネント単位でデザインを行っていくデザインシステムのことです。 通常のページ単位のデザイン方法とは異なり、パーツ同士を組み合わせて制作していく方法を指しています。 原子（Atomic）を一番最小のパーツとし、分子（Molecules）、有機体（Organisms）、テンプレート（Templates）、ページ（Pages）の5つの単位に分けられています。 原子（Atomic） パーツの中で一番最小のパーツを指し、UIの基礎的な要素になります。 他の原子と組み合わさることで、分子になります。 分子（Molecules） 2つ以上の原子から構成され
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Atomic Design」と「Design Systems」〜デザイナーとエンジニアが二人三脚で開発する手法〜 - DMM inside
デザイナーによるAtomic Designの実践〜導入編・運用編〜
