新規事業から大規模事業まで！デザインシステムへの向き合い方とは？ - Bonfire Design #3 レポート
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog デザインのシステム化について国内外で動きが活発化しておりますが、実際の現場では作成・浸透・運用する場合は、様々な局面で課題があると思います。事業会社で働くデザイナーの方は似たような課題をお持ちの方が多いのではないでしょうか？ 弊社では、「デザインのシステム化」をテーマに、Bonfire Design #3を開催いたしました。 今回は、弊社から全社デザインシステムについて、デザイナーの鹿山、エンジニアの森本が登壇し、ゲストスピーカーとして、レバレジーズ株式会社デザイナーの小林信也さん、クックパッド株式会社デザイナーの藤井謙士朗さん、サイバーエージェント株式会社エンジニアの五藤佑典さんにお話していただきました。また、今回のイベントでも
Zag.js が良いかもしれない
Zag.js を調べた背景 私は Chakra UI ユーザーなのですが、Chakra UI はスタイリング部分でランタイム CSS-in-JS（= emotion）を使用しているため、レンダリング時のパフォーマンス影響を考えると、どこかで移行するタイミングがありそうだと思っています。もちろん、Chakra UI がランタイム CSS-in-JS を捨ててくれれば移行は必要ありませんが、Chakra UI のロードマップを見たところ、明確にスケジューリングされていません（未来のどこかで移行はされそう）。そのため、移行先を探していたのですが、Chakra UI の作成者のアデバヨさんが作った Zag.js はとりあえず見とかないといけないよな、という感じで見始めました。 Zag.js が作られた背景 Chakra UI が抱えている技術的課題は先述の通り、ランタイム CSS-in-JS が内
もしあなたがウェブデザインに携わっていれば、「デザイン・フレームワーク」や「UIフレームワーク」、「UIキット」、「パターンライブラリ」などの言葉を聞いたことがあるかもしれません。これらはどれも、商品やサービスに利用される設計基準やテンプレート、UIパターン、コンポーネントとそのデザイン言語全般を指します。 これまでデザイン・フレームワークを作成したことがない人は、時間のかかる作業に見えるかもしれませんが、一度作成してしまえばデザイン制作をスピードアップさせ、全体的な作業の効率化を実現できます。 まず、デザインフレームワークが解決できる問題点や、デザインフレームワークが必要な理由、そしてデザイン制作時に必要なコンポーネント素材について詳しく見ていきましょう。 デザイン・フレームワークとは？ すべてのユーザーインターフェース・デザインは、真っ白のアートボードからはじまり、デザイナーはそこに機
大規模B2B SaaS 「HRMOS」におけるDesign Systemの開発・運用プラクティス
前回の記事ではHRMOSのDesign Systemの導入背景の紹介をしました。 本日はそのDesign Systemがどのように開発・運用されているのかを紹介したいと思います。 開発体制 Design Systemの開発はデザイナー、エンジニアが1つのチームとして開発を行っています。 開発のポイントとしては以下のとおりです。 デザインタスク、実装タスクなどすべてのDesign Systemのタスクは1つのバックログで管理 隔週に1度、やることの計画、やったことの確認をチーム全員で行う チームメンバーは全員兼務なので、極力MTGを増やさないよう、非同期でのコミュニケーションをメインにしている この体制になった背景として、当初はDesign System開発がデザイナーとエンジニアで分断されていたことにあります。 デザインとエンジニアリングでそれぞれ別のバックログをもち、それぞれ別のサイクル
Building a Scalable Design System with Sketch - Speaker Deck
Design Systems have reached peak popularity. It seems that every design team has either built one, is building one, or wants to build one. With the rele…
Francfrancのデザインシステムは、ブランドの価値を上げ、実務者の負担を軽減し、イノベーティブな取り組みを推奨する上での合意形成を的確にかつ迅速に行うためのものです。
スタイルガイドとパターンライブラリの違い
最近、パターンライブラリの作成ツールを探していて「Fractal」というツールを試しています。で、ふと「スタイルガイドとパターンライブラリの違いってなんだっけ？」という疑問が湧いたので、ちょっと整理してみました。ちなみに、どっちがいいかを書いているわけではないです。 特にウェブ向けのものではスタイルガイドもパターンライブラリもほぼ同じ意味で使われていることが多い気がしますが、あえてスタイルガイドとパターンライブラリを違ったものとして定義するとどうなるか、まとめてみます。 スタイルガイド 企業や組織のブランドイメージを統一するためにまとめられたガイドライン ロゴの使い方、配色パターン、タイポグラフィなどのビジュアルデザインを定義する より総括的なものだと文章のトーン&マナーなどのコミュニケーションデザインを定義する場合もある UIパターンやコンポーネントのデザイン一覧（パターンライブラリ）を
Sゝゝ http://www.sss-s.jp/ Direction Design System HTML+CSS JavaScript 2017.8 とほくこども園 http://www.tohoku-kodomoen.com/ Direction Photo Design System HTML+CSS JavaScript Illustration 2017.8 ソラクリニック http://www.sola-clinic.com/ Direction Photo Design HTML+CSS JavaScript 2017.4 おんがの保育園 http://www.ongano.jp/ Direction Design HTML+CSS JavaScript Illustration 2017.3 り山 http://www.rizan-s.com/ Direction Phot
ドラッグ＆ドロップは、スマホやパソコンを日常的に使う私たちにとって、直感的で馴染み深いインタラクションの一つです。MDN Web Docs（ウェブ標準技術を解説する開発者向けリソース）では、ドラッグ＆ドロップを「開始時」「操作中」「終了時」の3つのアクションに分けて定義しています： 1. 開始時：マウスでドラッグ可能な要素を選択する 2. 操作中：その要素をドロップ可能な要素へドラッグする 3. 終了時：マウスボタンを離してドロップする MDN「HTMLドラッグ & ドロップAPI」これら一連のインタラクションを意識せずにデザインプロトタイプを作成すると、ドラッグ可能な領域だけを1画面としてデザインしてしまいがちで、実装段階で細かいデザインの見直しが必要になることがあります。そのため、すべてのアクションを意識したデザインを考えると、後の手戻りを防ぎやすくなります。 今回はデザイン・実装・ア
GitHub - styled-system/styled-system: ⬢ Style props for rapid UI development
Add style props that hook into your own theme Quickly set responsive font-size, margin, padding, width, and more with props Influenced by constraint-based design system principles Typographic scale Spacing scale for margin and padding Works with any color palette Works with most css-in-js libraries, including styled-components & emotion Used in Rebass, Reflexbox, and the Priceline Design System "T
UIのデザインに最適化、シンプルで癖の無い、そしてSIL Open Font Licenseで利用できるサンセリフのフォントを紹介します。 米国の政府関連サイトのデザイン指針として誕生したU.S. Web Design Systemのフォントで、モバイルやアクセシビリティの面を特に重視して制作されたものです。 Public Sans -GitHub Public Sansの特徴 Public Sansのダウンロード Public Sansの特徴 U.S. Web Design Systemは米国の政府関連サイトのデザイン指針として誕生したもので、オープンソースのUIコンポーネントのライブラリや米国連邦政府のWebサイト用のビジュアルスタイルガイドが含まれています。 それに含まれているのが、Public Sansです。SIL Open Font LicenseのLibre Franklinを
Thoughtful Design & Judicious Programming to Enhance Your Business Established in 2001, we have been through the digital revolution era and consistently provided the newest technology and ideas for our clientele. Our vision is to make a better society with innovation and creativity. Our mission is to stay focused on realizing our client's vision and always provide what is expected and go beyond, a
vuefes.jp 一日セッション見つつメモを残したので、個人ブログに放り投げておく。 殴り書きなので何の清書もしてないし、誤字脱字もチェックしてないです！！！ Keynote | The Evolution of Vue / Evan You https://vuefes.jp/2022/sessions/yyx990803 0.x系の Pre バージョン時代の話 ES5のみのFeatureを前提にする必要があった 1.0のコードネームってEvangelionだったのか.. 2015-2016でのコアなライブラリ群の追加が多かったらしい。Vue Router とかVuex 大規模SPAアプリケーションの構築の解決狙い Vapor Mode Virtual DOM への依存がない パフォーマンス特化でのプリビルド 今後 Vue2→3の移行期という認識 30%が Vue3, 25%が 2.7
Google recently launched Android Lollipop which introduces some major changes and a new visual language called Material Design. With this new OS, Android is bringing a comprehensive guide for visual, motion, and interaction design across platforms and devices. On October 7th I attended a workshop hosted at Google where Material Design’s UX team shared insights on this new approach to Android’s des
Generate color pallets using deep learning powered algorithm
モバイル開発をしている上でデザインとの関係性は切手は切れない関係だとお思います。 また、プロダクト自体も成長に伴い複雑性がましてきました。そのときに私はデザインシステム に注目して様々なアプローチしてきました。 本発表ではあまり馴染みではない「デザインシステム」はどういうものなのかという基本的…
こんにちは、プロダクトデザイナーの @uknmr です。昨日に続き SmartHR UI に関する話を書きます。ええ、そう。今日はやや社内に向けて書きます。アドベントカレンダー14日目? 知らない子ですね。我が家にクリスマスの概念はないので、そんなものはありません。 SmartHR UI の目的とは? ブランド観点から UI を揃えたい、一貫したユーザー体験*1を提供したい、という気持ちから生まれた SmartHR UI ですが、本当ですか? 我々は本当に UI を揃えるためだけにコンポーネント集を手入れしていますか? 共通コンポーネント集があれば、それを使い続けさえすれば UI が揃っていくのは必然です。「揃えたい」という気持ちは「誕生した瞬間に達成された」とも言えます*2。 では、何のために自前でコンポーネント集を手入れし続けているのでしょうか? 私はそれを「SmartHR というプロ
Redesigning Chrome Desktop
In the beginning of September 2016, the new Chrome Core UI redesign, or so called “Chrome MD” (for Material design), rolled out on Windows as part of our 53rd update. It is the last step of a three phase deployment of the new design,which started in 51 with Chrome OS and Linux, followed by macOS in 52. Windows is the culmination of that process and while Chrome is never finished, it felt to me lik
この記事はenechain Advent Calendar 2024の5日目の記事です。 はじめに enechainでフロントエンドエンジニアをしている@Shunya078です！ enechainは、日本最大のエネルギー卸取引マーケットプレイスを運営するスタートアップです。我々ソフトウェアエンジニアは日々、プロダクトを通じてエネルギー市場に貢献しています。 社内には10を超えるプロダクトが存在しており、各プロダクト共通で利用されるデザインシステムが存在します。自分はこのデザインシステムに、チームをリードする立場として関わっています。 去年、なぜ我々はデザインシステムを創るのか？という記事でデザインシステムの生い立ちについて執筆しました。背景などについては是非そちらをご一読ください！ 今回は、今年一年間のアップデート内容を振り返るととともに、現時点における我々のデザインシステムがどういうフェ
マイクロソフトがアップルとアドビを脅かす11の理由
Microsoftは、クリエイティブな未来の主導権をAppleとAdobeから奪い取ったのではないか。筆者にはそう思える。 「Windows 10」の直近のアップデート2つ（第1弾の「Creators Update」と、2017年秋のリリース予定が発表されたばかりの「Fall Creators Update」）や、複合現実とコンピューティング関連ハードウェアへの積極的な取り組みを併せて考えると、Windowsはクリエイティブな仕事とクロスデバイスの生産性において頼れるプラットフォームになりつつある。 「残念ながらAppleとAdobeは終わりだ」などと言っているわけではない。そんなことは考えてもいない。Appleが作っている人気のスマートフォンやタブレットは、誰もが耳にしたことがあるだろう。それに、6月に開催の開発者会議Worldwide Developers Conference（WWD
Storybook 5.2
Storybook powers component development for design systems like Shopify Polaris, IBM Carbon, Salesforce Lightning, Auth0 Cosmos, Airbnb Lunar, and more than 25,000 public GitHub projects. Storybook 5.2 streamlines component documentation for all Storybook users. Our goal is to make best practice documentation — like the kind found in the high profile design systems above — easy for all Storybook pr
Windows TerminalとWSL 2はOSS版Windows 10の布石か？ - 阿久津良和のWindows Weekly Report
レポート Windows TerminalとWSL 2はOSS版Windows 10の布石か？ - 阿久津良和のWindows Weekly Report 既報のとおりMicrosoftの開発者向け年次イベントであるBuild 2019では、Windows 10に関する興味深い発表が行われた。その1つが「Windows Terminal」だ。 Windows 10は、これまでもコマンドプロンプトやWindows PowerShellで使用するWindowsコンソールの改良に取り組んできたが、下位互換性の観点からMicrosoftは「『世界を壊さずに』コンソールUIに有意義な改善を導入できない」と公式ブログで述べている。 「Windows Terminal」はFluent Design Systemを用いて、ウィンドウの透過機能などを実現している(公式ブログより抜粋) Windows Ter
In order to design the right interactions, we need to look back at the history and origins of physical pushbuttons, a direct predecessor of the UI component so heavily used in all digital products today. Buttons are amazing. The touch of a finger setting an appliance, a car, or a system in motion, even if the user doesn’t understand the underlying mechanisms or algorithms. In Power Button, Rachel
第三の産業革命「メイカームーブメント」により誰もがモノを作って売ることができる時代が来た――『メイカーズ』著者クリス・アンダーソン氏インタビュー
おおの・かずもと／1955年、兵庫県生まれ。東京外国語大学英米学科卒業。コーネル大学で化学、ニューヨーク医科大学で基礎医学を学ぶ。現在、医療問題から経済まで幅広い分野に関して世界中で取材を行う。『代理出産―生殖ビジネスと命の尊厳』(集英社新書)、『マイケル・ジャクソン死の真相』(双葉社)などの著書、『そして日本経済が世界の希望になる』(ポール・クルーグマン/PHP新書)などの訳書がある。 NOTEアカウントはhttps://note.com/kaz_sophia 最初のコラムは＜最近話題になったニュースから英語を学ぶ＞ World Voiceプレミアム 海外のキーパーソンへのインタビュー連載。「週刊ダイヤモンド」で好評を博したWorld VoiceがWEBでバージョンアップ。過去誌面に登場したインタビューのノーカット版やWEBオリジナル版をアップしていきます。 バックナンバー一覧 2012
Webにおけるデザインシステムとは？ - Rriver
最近、パターンライブラリやスタイルガイド、それからデザインシステムについて考えています。もちろん、こういったことは常に考えながらウェブ制作をしてるんですけど、あまり明文化したことはありませんでした。スタイルガイドとパターンライブラリの違いについては書いたので、今回は「デザインシステム」についての考察を書いてみます。 似たようなことを考えている方の参考になれば、というか、議論のきっかけになれば幸いです。 「デザインシステム」の定義が必要な理由 この記事では「デザインシステムとはなのか」掘り下げて考えて行こうと思います。でも、まずはじめに、そもそもなぜ定義が必要なのかを少し書いておきます。 定義をしっかり整理していないと説明するのが難しいですし、議論を深めようとすると、結局、定義に戻ってしまったりするんですよね。議論のそもそもの出発点が違っていると間違った土台のうえに議論を構築してしまったり、
PatternFly
Design and build better product experiences in the open with PatternFlyPatternFly is an open source design system that enables teams to create consistent and scalable enterprise products. PatternFly is sponsored and maintained by Red Hat, but is open to all.
Home | Trent Walton
I’m a designer & web builder who works with my friends at Luro. Mastodon / Instagram / LinkedIn / Letterboxd / Codepen / GitHub / Dribbble / Twitter / Echo Wolf Luro is launched! Track your components in your product, build a design system, get accessibility and web performance insights, etc. Learn more. New music! Follow and listen along here. We shipped Sherlock Holmes: A Scandal in Bohemia in a
こんにちは、クックパッド株式会社 デザイン戦略部のふじけん(@kenshir0f)です。 デザイン戦略部に異動してからは全社横断のデザイン品質の向上の仕組みづくりを担当していますが、今回はレシピサービス「クックパッド」のデザインシステムの整備で取り組んでいることを紹介したいと思います。 大規模サービスにおけるデザインガイドラインの世代交代クックパッドでは約10年前にクックパッドらしいUIを簡単に実現することができる Sara という CSS ベースのUIフレームワークが生まれました。 Sara は Web のデザインと実装がパッケージ化されているため少ない実装で機能提供が可能となり、その分開発者はユーザーと向き合ったサービス開発にフォーカスすることができます。 CSS Framework の Sara モバイルアプリ(iOS, Android)でも同様に Sara のデザインを取り入れて開
こんにちは、よりデザインの@ryo_panです。 この記事は何？DMMさんで「Atomic Design & Design Systems」をお話させて頂いた時に、自分が読んだ記事をまとめたものになります（いちおう全部目は通してる…ハズ）。デザインシステムについて書かれている記事ってまだまだ少ないのですが、情報源自体もまとまってないんですよね。実際、自分が↑の資料を作る時はほぼ手探り状態でした。 この記事がデザインシステムについてこれから学ぼうと思われている方の力に少しでもなれたら幸いです。例によって海外記事は僕の認識違いが起きている可能性があるので、「これそういう記事じゃないから！」というツッコミがあればぜひお願いします。 まずデザインシステムについて学びたい時はDesign Systems Handbook InVisionが作成したハンドブック。まず最初に目を通すならこれでしょう。デ
Gabe's blog
Notes on maintaining an internal React component library Jun 16, 2022 A collection of my thoughts on maintaining a component library as part of an existing design system used by a large number of frontend applications.
Helios Design System
The page navigation is complete. You may now navigate the page content as you wish. This button opens a dialog containing an input field and some additional information that you may wish to explore. An automatic search will be performed as you type text into the search field, but the results may not be announced. Exploring the additional items in the modal will help you discover the search results
こんにちは。enechainで働いている takurinton です。 これまでのenechainのデザインシステムではdark modeの提供はしておらず、プロダクト側で必要に応じて状態とデザイントークンを保持した上で切り替えてもらうという方式をとっていました。 しかし、事業拡大やプロダクト側からの要望によりdark modeのデザイントークンをデザインシステム側で管理し、chakra-uiのColorModeProviderを用いて切り替える方法を提供することにしました。 今回は、その移行の過程と方法について書きます。 デザイントークンについて 移行の手法 将来的に light/dark 以外の種類のトークンも定義する可能性がある 古いトークンはstylesで、新しいトークンはvariablesで管理している light モードしか使わないプロダクトは特別な手順なく移行可能にしたい デ
BigTarget.js - Increase click target size - more call-to-action conversions | Blog | Newcastle Web Design & Development | Newism
Working with the team at Camplify, Newism came along for the ride with a innovative product changing the RV holiday market. Camplify is a new service connecting holidaymakers with RV owners, in a unique peer-to-peer sharing environment. Already being developed externally, Camplify came to us with the task of fine-tuning their UI/UX, in particluar, ensuring a seamless, intuitive experience througho
General Information - What is DBDesigner 4? DBDesigner 4 is a visual database design system that integrates database design, modeling, creation and maintenance into a single, seamless environment. It combines professional features and a clear and simple user interface to offer the most efficient way to handle your databases. DBDesigner 4 compares to products like Oracle's Designer�, IBM's Rational
We’re excited to announce React Spectrum, a collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. Check it out on Github! React Spectrum includes three libraries: React Spectrum — A React implementation of Spectrum, Adobe’s design system. React Aria — A library of React Hooks that provides accessible UI primitives for your design system. React Sta
Six months ago we open-sourced Twitter Bootstrap, an extensive front-end toolkit for developing web sites and applications. Woohoo! Twitter Bootstrap, an open-sourced CSS/HTML framework from myself and @fat, just went live: dev.twitter.com/blog/bootstrap… #kaboom— Mark Otto (@mdo) August 19, 2011 Since then, Bootstrap has grown to be one of the most popular projects on GitHub, the largest open sou
Announcing Coinbase’s successful transition to React Native | by Coinbase | The Coinbase Blog
As of January 2021, the Coinbase iOS and Android apps have transitioned away from native development to React Native, and all mobile engineers are now collaborating in a single codebase. The transition from native to React Native did not happen overnight, and in the interest of helping those contemplating such a decision, we want to tell the story of how we got here. Specifically, we want to share
#11WeeksOfAndroid 18 #Android12 1 #AndroidDevJourney 1 #androiddevsummit 5 #GoogleIO 19 #WeArePlay 7 12l 1 5 star apps 1 Ads 1 advertising 1 AGDE 1 AGDK 2 AGI 1 AI 3 AI Announcements beginner Explore Generative AI 1 AI Announcements beginner Explore Generative AI、 1 Android 108 Android 10 1 Android 11 1 Android 12 Beta 5 1 Android 12L 1 Android 13 3 Android 14 7 Android 14 Beta 4 1 Android 14 ベータ版
DMMのエンジニアで『React開発 現場の教科書』の著者でもある石橋啓太さんにお声がけ頂いて『ReactとAtomicDesignからみるコンポーネント開発』でお話をさせて頂きました。 テーマは個人的に関心のあった「Atomic Designの代替」を選びました。Atomic Designと言えば、いまや国内外含めてコンポーネント設計をする際に多くの人が参照する概念ですが、すべての環境に適切かと言えばそれはまだ疑問を残す余地があります。 「Atomic Designを採用してみたけどしっくりこなかったので自分たちに合った概念を考えてみた」という個人・組織がいるのはMediumの記事などを通じて知っていたので、そういった事例を集めてみたら面白いんじゃないかなと思ったのがこのテーマを選んだきっかけです。完全に趣味です。 Atomic Designへの疑問Atomic Designについて知り
はじめに こんにちは。カナリーでソフトウェアエンジニアをしている @yoshi-jr です。 私たちは 【もっといい「当たり前」をつくる】 をミッションに掲げている不動産テックカンパニーです。弊社では、現在下記のプロダクトを運用しています。 「Canary」: BtoC の部屋探しポータル（アプリ/Web） 「Canary Cloud」: BtoB SaaS（不動産の仲介会社様向けの顧客管理システム） この記事では、 CANARY のウェブ版（以降 CANARY Web）で利用している技術スタックをまとめています。 この記事を読んでわかること CANARY Web について技術スタックの全体像・概要が理解できる 話すこと CANARY Web のアーキテクチャ CANARY Web で利用しているモジュールとその歴史 話さないこと CANARY Web 視点以外でのアーキテクチャ 各モジュ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン作業のイライラ解消！効果的なデザインフレームワークの作り方【2017年版】
Design System Guidelines - Francfranc Brand Identity
GLIDE ARTS STUDIO | Projects | Website
ドラッグ＆ドロップのUIを観察する｜トビ / Kazuhiro Tobita
米国の政府関連サイトのデザイン指針として誕生した、UIデザインに最適化されたフリーフォント -Public Sans
株式会社グラフネットワーク / Graphnetwork.Inc
📝 Vue Fes Japan Online 2022 / 見たセッションメモ - memo_md
An exploration in Material Design by feedly
Eva Design System: Deep learning color generator
サービスにおけるDesign Systemの構築
SmartHR UI を中心としたエコシステムのすすめ - SmartHR Tech Blog
デザインシステムの成長。そして、これからどう向き合うか - enechain Tech Blog
The anatomy of a button — UI component series
クックパッドのデザイン品質を支える Apron Design System の構築｜ふじけん / kenshir0f
デザインシステムの資料を作る時に参考にしたリンク集｜Ryo Yoshitake | THE GUILD
デザインシステムのダークモード対応 - enechain Tech Blog
fabFORCE.net - DBDesigner 4
Introducing React Spectrum
Say hello to Bootstrap 2.0 | Twitter Developers
Jetpack Compose を使ったデザインシステムの実装
Alternative Atomic Designをさがして｜Ryo Yoshitake | THE GUILD
2024年｜CANARY Web の技術スタック