UIコンポーネントにはマージンをつけるな！絶対にだ！！ - Qiita
.button { display: block; margin: 50px auto 0; padding: 8px 20px; border: solid 2px #ddd; border-radius: 10px; font-size: 16px; } See the Pen button_01 by Otsuka Yuhi (@boltkeep) on CodePen. パット見、いい感じのボタンです。 しかし、このボタンには一点重大な欠点があります。 それは、このボタンは必ず上に50pxの余白が付き、かつ中央寄せされるということです。 デザイナー登場 デザイナーがこう言いました。 「ボタンを横に２つ並べたい」 「ボタンとボタンの間隔は20px」 「その上で中央寄せで！」 「あと、上のマージンは外しといて！」 さて、どうしましょう？？display: flex;でしょうか？
エンジニアとデザイナーの共業≒協業を目指すための、Atomic Designの使い方 Part2
2018年10月18日、Roppongi Designersが主催するイベント「Designer X Engineer Development #01」が開催されました。デザイナーとエンジニアでどのように開発を進めていくか。デザインをプロダクトに落とし込むプロセスについて、どのような設計方法・ツール・コミュニケーションを行なっているかを共有する勉強会。今回は、5社のエンジニア・デザイナーが集い、自社における協同の現状を紹介します。プレゼンテーション「共業≒協業を目指すためのAtomic Designの使い方 」に登場したのは、DMM.comの河西紀明氏。 DMMの動画サービスに見る具体例 河西紀明氏：今回はせっかくなので、弊社のデジタルコマース事業のサービス開発環境をカイゼンするためにおこなった、アトミックデザインの概念を活用したUIインベントリの実施についてご紹介いたします。 デジタルコ
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 トップ
メルペイの社内向け管理画面を振り返る | メルカリエンジニアリング
Merpay Advent Calendar 2019 の 13 日目は、メルペイフロントエンドチーム の @tanakaworld がお送りします。 メルペイの管理画面は 2019 年 2 月のサービスローンチに先立ち、2018 年 11 月にリリースされました。私は 2018 年 8 月に入社してから一貫して管理画面開発に関わり、様々な機能開発・運用を行ってきました。その中でフロントエンドエンジニアとして関わったいくつかのプロジェクトをピックアップしてご紹介します。 目次 はじめに メルペイのフロントエンドチーム メルペイの社内向け管理画面 プロジェクトの振り返り 審査業務効率化プロジェクト マイクロサービス分割プロジェクト 課題感 分割の方針 分割後のアーキテクチャ Component v2.0 リニューアルプロジェクト 課題感 デザインポリシー 開発フロー 社内向け管理画面で今後注
社内システム特化なデザインシステムのメリット 〜 ヤフー社内のデザインシステム紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーで社内システムを担当しているデザイナーの伊藤、今河です。 前半では社内システムをデザインするデザイナーの環境と事例紹介を取り上げました。 後半では、私たちが運用しているデザインシステム「SAYA」について詳しくご紹介します。 SAYAとは SAYAとは、主に社内エンジニアが開発で使用するシステムのために作られたデザインシステムのひとつです。 多様なテーブルの表示形式や豊富なフォームパーツ、高情報量に対応する省スペースオプションの提供など、システム特有のUIにフォーカスし、社内エンジニアにとって最適なユーザビリティーを実現します。 ヤフーの従業員なら誰でも利用できるよう、デザインデータとコード、およびロゴデータなど
Specify | Your Design Token Engine
Flexible and powerful, Specify makes it easy to build the exact Design Token workflow your Design System needs. Flexible and powerful, Specify makes it easy to build the exact Design Token workflow your Design System needs. Flexible and powerful, Specify makes it easy to build the exact Design Token workflow your Design System needs.
デザインシステムの資料を作る時に参考にしたリンクまとめ | よりデザイン
この記事は何？ DMMさんで「Atomic Design & Design Systems」をお話させて頂いた時に、自分が読んだ記事をまとめたものになります（いちおう全部目は通してる…ハズ）。デザインシステムについて書かれている記事ってまだまだ少ないのですが、情報源自体もまとまってないんですよね。実際、自分が↑の資料を作る時はほぼ手探り状態でした。 この記事がデザインシステムについてこれから学ぼうと思われている方の力に少しでもなれたら幸いです。例によって海外記事は僕の認識違いが起きている可能性があるので、「これそういう記事じゃないから！」というツッコミがあればぜひお願いします。 （追記：記事執筆後も参考資料が増えてきたため、資料作成時に限らず参考にできるものを追加しています） まずデザインシステムについて学びたい時は Design Systems Handbook InVisionが作成し
デザインシステムの基本の基を考えていくお仕事をしています。 - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
「完璧なUXなどといったものは存在しない。完璧な絶望が存在しないようにね。」 と村上春樹風な書き出しを期待されたのでせっかくなので載せてみました。本編はこんな書き方しません。 こんにちは。UXエンジニアのみーたです。 先日3月でクラウドワークスの上期が終わり、私も入社半年になりました🎉 この半年間、デザイナー2名、エンジニア2名で構成されたフロントエンドチームは、デザインシステムを構築すべく様々な取り組みをしてきました。今回は、大きな壁の1つだった「100万ドル案件」についてお話していこうと思います。 デザインシステムにおける「100万ドル案件」 フロントエンドチームでは「Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド」で毎週1章ずつ輪読会をしました。 CHAPTER7「計画と実践」にて、実際に組織としてデザインシステムの確立の為に以下の内容について
デザインシステム
デザインの原則を記載したドキュメント、スタイルガイド、コンポーネントライブラリなどのデジタルプロダクト作成に必要なルールやツール デジタルプロダクトの作成に関するあらゆるルールやツールをまとめて体系化したもの。組織にとって唯一の指針であり、デザインの設計・実装の基盤となる。 デザインシステムの構成要素例 以下がデザインシステムの構成要素の一例である。これらを組み合わせて構成される。全て必要という訳ではなく、組織によって最適な構成を選択する。 スタイルガイド コンポーネントライブラリ(コードで実装されたUI要素) 共通の用語 デザイン原則・デザインガイドライン パターンライブラリ UIキット Voice & Tone（文章・文言のトーン） 情報設計 コンテンツ原則 分類方法 アクセシビリティ ブランドガイドライン デザインシステムの利点 デザインシステムを入れることでいくつかのメリットがある
デザインシステムを正しく理解しよう。作り方・参考事例のまとめ | Web Design Trends
大規模なデジタルプロダクトをデザインする時や、チームでデザイン制作を行う場合にデザインシステムを活用してデザイン制作を行うことがよくあります。 しかし、デザインシステムという言葉は知っていても、デザインシステムをきちんと理解していないという人も多いのではないでしょうか。 大企業に務めているデザイナーであれば、自然とデザインシステムを作ってデザイン制作を行う習慣が身に付くかもしれませんが、そうでない場合はあまり触れる機会が多くないかもしれません。 今回は、デザインシステムの基本と作り方、参考事例をご紹介していきたいと思います。 デザインシステムとは デザインシステムとは、デザインの原則、概念、ガイド、コンポーネントなど、デザインに関するあらゆるルールを定めたもののことを言います。 スタイルガイドやコンポーネントライブラリ（パターンライブラリ）はデザインスタイルの一部にあたります。 デザインシ
デザイナーとエンジニアで考えるReactコンポーネント設計 - KitchHike Tech Blog
コンポーネント設計がReact Nativeの開発速度に直結する CTOの Shoken です。キッチハイクでは1年半前に0ベースからReact Nativeでアプリ開発を始めました。React Nativeアプリを長期的に開発・メンテナンスする際に重要になるのがコンポーネント設計です。1年半の開発を通して、デザイナーとエンジニアがコンポーネント設計での共通認識を持っていることが、機能追加・修正などの開発速度に直結するという学びを得ました。この記事では、キッチハイクアプリのコンポーネント設計の考え方を紹介します。 コンポーネント設計がReact Nativeの開発速度に直結する Atomic Designという共通言語 コンポーネントを構成する4つの要素 "デザインとしての構造性" と "コードとしての再利用性" ButtonはAtomなのかMoleculeなのか問題 Atomic Des
Atomic Designを分かったつもりになる
「Atomic Design」（アトミック・デザイン）という言葉がしばしば聞かれるようになってきました。実際にちょっとしたトライアルをしつつ、Atomic Design について考えてみました。
理解しておきたいコンポーネント指向 - Qiita
この記事は フロントエンドエンジニア Advent Calendar 2016 の10日目の記事です。 最近はずっとReact、Redux、CSS Modulesで開発していて、コンポーネントについて考えることが多かったので頭の中の考えをアウトプットしてみます。 それぞれのモジュール化 みなさん、次のようにモジュール化を行っていると思います。 HTML Reactなどのコンポーネント化のライブラリを使う 何かのテンプレートエンジンでパーシャルにする CSS パーツ毎にclassを作る SASSのmixinにする JavaScript 関数やクラスにする JavaScriptに関してはそれほど問題ないと思います。 ただコンポーネント化に関してはCSSやJavaScriptとセットで考える必要があったり、 CSSもパーツ毎にclassにするのがいいのかmixinにするのがいいのかといった論点が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://cssnite.jp/lp/lp33/followup/LP33r-ikeda.pdf
Material Design
UWP アプリ用の設計ツールキットとサンプル - UWP app developer | Microsoft Docs
Showcase
Pairsのデザインシステムを運用してみて。デザイナー視点のツール編🛠 - eureka design
https://wix-style-react.now.sh/?selectedKind=3.%20Inputs&selectedStory=3.1%20Text%20Input&full=0&addons=0&stories=1&panelRight=0
The Blog | Welcome to Adobe Blog
