Atomic Design と Figma の組み合わせでデザインが便利になる｜デザインシステムの作り方｜スマートキャンプ デザインブログ
まだ開発中のサービスですが、このBiscuet（ビスケット）のデザインシステムの考え方を紹介していきます。 上記のランディングページ（LP）の作成プロセスも過去に紹介しています。気になる方はあわせてお読みください。 Figma と Atomic Design の採用デザインツールは「Figma」、考え方は「Atomic Design」を採用しました。 Atomic Designをデザインに落とし込む際、コンポーネント単位での管理がしやすいFigmaが便利だと考えました。 Figmaに関する記事には、チュートリアルやテンプレートなどの内容は多く見かけますが、実務での採用・運用を主にした記事は少ないため、スマートキャンプでの例を紹介します。 ※本記事内で紹介する画面キャプチャは開発中のものや、記事用に独自に編集したものも含まれます。 Atomic Design についてAtomic Desig
MoleculesとOrganismsのこと｜ひらやま
Atomic Designを設計していくと壁にぶつかっていくことはとても多い。 自分自身が書いた記事になってしまうが、以下の記事のような、AtomsとMoleculesの違いや、Pagesの必要性などに疑問を持つことが多々ある。 あーそうかーなんて思いながらパーツを定義しても、また「え？このパーツは結局どこに属するの？」となることがしばしばある。 それにまさしくぶち当たったのが今で、それが「MoleculesとOrganismsの違い」だった。 検索窓って、本当にMoleculesなの？Atomic Designの記事を漁っていると、しばしば「検索窓はAtomとAtomを組み合わせるからMoleculeだよ」という話がよく出てくる。 本当にそうなのかしら？ 検索窓ってそのコンポーネントで完結してしまっている気がする。 検索するワードを入れて、検索のボタンを押すと、ページ遷移して結果が出てく
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も文字も入ってくるけど、こ
[スライド付き] AbemaTVの事例から学ぶ、Atomic Designという名のデザイン整理術 | CyberAgent Developers Blog
こんにちは、AID（Ameba innovation Designers）という社内デザインチームに所属している早坂です。突然ですが、みなさんはAtomic Designをちゃんと理解していますか？ 今回はAtomic Designの概念から学ぼうということで、『AbemaTV』エンジニアの五藤さんをお呼びして講義をしていただきました。今回はその内容を共有したいと思います。 ▼当日使用していたスライドはこちら▼ Atomic Designとは「変更しやすいデザイン整理術」 講義の中で、Atomic Designがなぜ必要なのか、『AbemaTV』の具体例を元にお話ししてくださいました。 ・デザインの引き継ぎのタイミングで引き継ぎ先のデザイナーは困っていないか ・デザインの負債を抱えていないか この視点で現状のデザイン開発に問題がないかチェックします。お話を聞くとよくある話ばかりで耳が痛い。
![[スライド付き] AbemaTVの事例から学ぶ、Atomic Designという名のデザイン整理術 | CyberAgent Developers Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6706e0ce72f5676007cfed5b0a29fc4d5ad4382/height=288;version=1;width=512/https%3A%2F%2Fdevelopers.cyberagent.co.jp%2Fblog%2Fwp-content%2Fuploads%2F2018%2F07%2Fatomicdesign_sns.png)
Atomic DesignでUIを細分化する - のぐそんブログ
最近のjavascriptのフレームワークはコンポーネント指向で設計されているものが多いです。 コンポーネント指向の良いところは、作ったパーツを再利用できる点と、再利用することでサービス全体でのUIの一貫性が保たれるという点だと思います。 そしてコンポーネント指向はマークアップや、プログラムだけの話ではなく、デザインでも利用できます。 今回は以前から気になっていた、コンポーネント指向を使ったデザインシステムであるAtomic Designについて調べました。 Atomic Designについては、すでに多くの素晴らしい記事があり、ご存知の方も多いと思います。 この記事での新たな発見はないと思うので、知っている方は読まずにもっと結意義な時間に使ってください。 Atomic Designとは Atomic Designはページ単位でデザインするのではなく、細分化したコンポーネントの組み合わせで
Atomic Design の理解 : molecules と organisms をどのように分割するか - Frasco
我々のインタラクションデザイナーである Alla Kholmatova が FutureLearn での Atomic Design の利用の状況について考察します。 1年前、私たちは FutureLearn での最初のパターンライブラリ開発について、そしてなぜ我々が Atomic Design を使うことになったのかについて著しました。 全般的に、Atomic Design は我々のチーム内でうまく機能しています。それはインターフェイスの理解の共有や、さらなるモジュール化への移行、我々のデザイン言語の進化などに貢献しました。 Atomic Design におけるいくつかのコンセプトについては最初から明確でしたが、その他はあいまいに感じていました。例えば、我々の理解がまだ不十分な分野は、molecules と organisms の違いについてです。 Brad Frost は、molecu
おまえは原子か分子か。Atomic Designで扱いに迷うUIコンポーネントたちをどうするか｜きたじぃ
Atomic Designとはこんにちは。 デザイナー間で話題にされだしてから結構時間も経ってきましたが、UIデザインにおいてAtomic Design（アトミックデザイン）という考え方があります。 Atomic Designの詳しい説明は別のブログに譲ろうと思いますが（逃げ）、ざっくりいうと、UIコンポーネントをAtoms（原子）、Molecules（分子）、Organisms（有機体）、Templates（テンプレート）、Pages（ページ）の5つの単位に分けてデザインを構築していくという方法論です。 メリットとしては ・無駄なUIコンポーネントが増えなくなる ・一貫性のあるデザインをつくることができる ・UIコンポーネントが一覧化され、チームでコラボレーションしやすくなる と言ったことが挙げられます。 とりあえず導入してみるかなり前の話ですが、Sketchバージョン41でシンボルを入
手戻りが少ないアトミックデザインの導入｜ふじけん / kenshir0f｜note
こんにちは、クックパッド株式会社デザイナーの藤井(@kenshir0f)です。 業務では主にKomercoというサービスのデザインを担当しています。 Komercoは料理が楽しくなる料理道具やうつわ、調味料や食材など料理が楽しくなるモノが買えるアプリです。 料理に興味がある方はぜひ触っていただけたら嬉しいです。 さて、今日お話しする内容は新規事業でアトミックデザインを導入したお話です。これから導入を考えている方や、すでに導入している方の参考になればと思います。 Komercoでは立ち上げからリリースまでの間、サービスのデザインを一人で担当していました。 開発初期ではまだサービスの名前すら決まっておらず、ブランディングからロゴ、アプリの体験設計、インタフェースや開発用のデザインガイドラインなどを並行で作業する必要があり、上手に効率化を測りながらデザインしていました。 また、アプリは購入用、出
APB CSS - Atomic Parts Base CSS -
What is Atomic Parts Base CSS(APB CSS) Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS) Atomic Parts Base CSS(APB CSS)って何？？ Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS) APBCSS は Atomic Parts Base CSSのそれぞれ頭文字を取っていて、「エーピービーシーエスエス」と呼びます。 APBCSS は Atomic Designをベースに設計された「CSSアーキテクチャ」の一つとなります。 Point - Simple - Predictable - General versatility - Reusable - Maintainabl
Alternative Atomic Designをさがして｜Ryo Yoshitake | THE GUILD
DMMのエンジニアで『React開発 現場の教科書』の著者でもある石橋啓太さんにお声がけ頂いて『ReactとAtomicDesignからみるコンポーネント開発』でお話をさせて頂きました。 テーマは個人的に関心のあった「Atomic Designの代替」を選びました。Atomic Designと言えば、いまや国内外含めてコンポーネント設計をする際に多くの人が参照する概念ですが、すべての環境に適切かと言えばそれはまだ疑問を残す余地があります。 「Atomic Designを採用してみたけどしっくりこなかったので自分たちに合った概念を考えてみた」という個人・組織がいるのはMediumの記事などを通じて知っていたので、そういった事例を集めてみたら面白いんじゃないかなと思ったのがこのテーマを選んだきっかけです。完全に趣味です。 Atomic Designへの疑問Atomic Designについて知り
React Component 視点でのアトミックデザインの解釈といくつかの疑問 - mizchi's blog
フロントエンドの中でも、JS書くプログラマと、CSSを書くマークアップと、デザインカンプを作るデザイナで、コンポーネントという概念がズレる。だいたいこれらが一人だったり兼任だったりで1~2レイヤーの開発ステップになるが、完全分業だったり人が多くなると混乱の元になる。 誰かが決定的に間違ってるというつもりはない。正直、どっちかというと本来のデザイナ側の用語定義に倒した方がいい気がしているが、プログラム上の都合もいろいろ混ざってきて、話が簡単ではない。 自分の理解が間違ってる可能性もある。この記事はレビューをもらうために書いている側面もあり、指摘されたら追記していく。 読んだもの。 Atomic DesignとCSS設計 - Atomic Designとは何か | CodeGrid Atomic Designの考え方と利点・欠点 – wkr. Atomic Design の大雑把な理解 基本的
Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物
ここ半年開発していた動画サービスをベータ版ながらリリースしました（正式リリースは 4 月）。そのサービスの開発において、以前投稿した Atomic Design を採用しました。本記事では Atomic Design を実案件に導入した結果と感想を書いていきます。 Atomic Design の基本的な概念に関して知りたい方は Brad Frost 氏の原文、もしくは私の以前の記事↓を参照できます。 最近よくクリエイターが移住するカナダで Atomic Design を学ぶ Atomic Design を導入して正解 結論から書くと、今回 Atomic Design を導入したことは正解でした。コンポーネントの粒度を論理的に説明できるガイドラインとして十分すぎるほどの役割を果たしてくれました。 このガイドラインがあることで、デザインに関してさほど関心がない人（たとえばデザインよりもエンジニ
Atomic Designを分かったつもりになる
「Atomic Design」（アトミック・デザイン）という言葉がしばしば聞かれるようになってきました。実際にちょっとしたトライアルをしつつ、Atomic Design について考えてみました。
Atomic Design を導入してみた話 - Money Forward Developers Blog
こんにちは。 iOSエンジニアの廣瀬です。 以前から感じていた課題に、デザインデータ・UIコンポーネントの管理 がありました。 その解決策として Atomic Design の考え方を取り入れてみました。 今日は、"（しら）ずにお金が（たま）る"自動貯金アプリ『しらたま』（ https://sirata.ma/ ）の開発時に実施した Atomic Designの導入 について紹介します。 デザインデータ・UIコンポーネントの管理 ここでいう デザインデータ・UIコンポーネント とはデザイナーが使っているツール(Sketch)や、フロントエンドとなるiOSアプリのコードレベル(Swift)の話です。 具体的に管理がうまくいっていない状態とは下記のような状態と言えます。 カラーコードやフォント名がコミュニケーションを取るときに飛び交う アプリ全体で 色 や フォント の使い方にコンセプトが無い
Atomic Designの考え方と利点・欠点 – wkr.
Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【勉強会】 「第２回AtomicDesignについて考える会」の感想｜shinji.uyama｜note
Create atomic design systems with Pattern Lab - Pattern Lab