デザインシステムにあるヒトとコトの課題
今なぜデザインシステムなのか 4月16日 Webridge Kagawa 主催で「パターンラボ – 柔軟性と拡張性をデザインに取り込む方法（#wmsp20）」というワークショップを開催しました。昨年はコンテンツ戦略やペルソナなど企画・設計寄りのワークショップを実施していましたが、パターンラボは少し実装に寄り添ったカリキュラムにしました。ポッドキャストでも話したことがありますが、「考える」と「作る」の間にはちょっとした溝があると思います。ペルソナやカスタマージャーニーマップで利用者像や彼らのもつ課題を視覚化すれば、現実的な実装ができるというわけではありません。実装へ近づけるためには、考える人と作る人が一緒に課題共有するための場が必要と考えています。 例えば Web デザインでは数年前から、パソコンではなくスマートフォンやタブレットをはじめとしたモバイル機器での使いやすさを優先するモバイルファ
アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
On Sunday March 6, we migrated Stripe’s largest JavaScript codebase (powering the Stripe Dashboard) from Flow to TypeScript. In a single pull request, we converted more than 3.7 million lines of code. The next day, hundreds of engineers came in to start writing TypeScript for their projects. Seriously unreal. I remember a short time ago laughing at the idea of typescript ever landing at Stripe, an
Du logo à la charte graphique, en passant par une ergonomie bien pensée, nous mettons l'UX (User eXperience ou expérience utilisateur) au centre du processus de création. Un design esthétique et convaincant, multi-plateforme représente toujours un défi. Nous imaginons tout ce qui peut le rendre efficace et adapté à votre besoin. Ce que nous savons faire Logo et identité graphique, typographie Ergo
[[toc]] This post will be a bit longer than usual. It's quite a big announcement to me, and there are many things I want to talk about. I'll be appreciated if you take the time to read through it. The table of contents is hidden on the left if you are on a desktop. Hope you enjoy :) 中文 Chinese Version What is Atomic CSS? Let's first give a proper definition to Atomic CSS: From this article by John
新規事業から大規模事業まで！デザインシステムへの向き合い方とは？ - Bonfire Design #3 レポート
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog デザインのシステム化について国内外で動きが活発化しておりますが、実際の現場では作成・浸透・運用する場合は、様々な局面で課題があると思います。事業会社で働くデザイナーの方は似たような課題をお持ちの方が多いのではないでしょうか？ 弊社では、「デザインのシステム化」をテーマに、Bonfire Design #3を開催いたしました。 今回は、弊社から全社デザインシステムについて、デザイナーの鹿山、エンジニアの森本が登壇し、ゲストスピーカーとして、レバレジーズ株式会社デザイナーの小林信也さん、クックパッド株式会社デザイナーの藤井謙士朗さん、サイバーエージェント株式会社エンジニアの五藤佑典さんにお話していただきました。また、今回のイベントでも
大規模B2B SaaS 「HRMOS」におけるDesign Systemの開発・運用プラクティス
前回の記事ではHRMOSのDesign Systemの導入背景の紹介をしました。 本日はそのDesign Systemがどのように開発・運用されているのかを紹介したいと思います。 開発体制 Design Systemの開発はデザイナー、エンジニアが1つのチームとして開発を行っています。 開発のポイントとしては以下のとおりです。 デザインタスク、実装タスクなどすべてのDesign Systemのタスクは1つのバックログで管理 隔週に1度、やることの計画、やったことの確認をチーム全員で行う チームメンバーは全員兼務なので、極力MTGを増やさないよう、非同期でのコミュニケーションをメインにしている この体制になった背景として、当初はDesign System開発がデザイナーとエンジニアで分断されていたことにあります。 デザインとエンジニアリングでそれぞれ別のバックログをもち、それぞれ別のサイクル
もしあなたがウェブデザインに携わっていれば、「デザイン・フレームワーク」や「UIフレームワーク」、「UIキット」、「パターンライブラリ」などの言葉を聞いたことがあるかもしれません。これらはどれも、商品やサービスに利用される設計基準やテンプレート、UIパターン、コンポーネントとそのデザイン言語全般を指します。 これまでデザイン・フレームワークを作成したことがない人は、時間のかかる作業に見えるかもしれませんが、一度作成してしまえばデザイン制作をスピードアップさせ、全体的な作業の効率化を実現できます。 まず、デザインフレームワークが解決できる問題点や、デザインフレームワークが必要な理由、そしてデザイン制作時に必要なコンポーネント素材について詳しく見ていきましょう。 デザイン・フレームワークとは？ すべてのユーザーインターフェース・デザインは、真っ白のアートボードからはじまり、デザイナーはそこに機
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 release of the incredible Nested Symbols feature followed by Sketch Libraries just a few months ago, Sketch has emerged as an essential part of the Design System workflow. In this talk we will be covering: • Best of breed Design Systems out in the wild
スタイルガイドとパターンライブラリの違い
最近、パターンライブラリの作成ツールを探していて「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
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
第三の産業革命「メイカームーブメント」により誰もがモノを作って売ることができる時代が来た――『メイカーズ』著者クリス・アンダーソン氏インタビュー
おおの・かずもと／1955年、兵庫県生まれ。東京外国語大学英米学科卒業。コーネル大学で化学、ニューヨーク医科大学で基礎医学を学ぶ。現在、医療問題から経済まで幅広い分野に関して世界中で取材を行う。『代理出産―生殖ビジネスと命の尊厳』(集英社新書)、『マイケル・ジャクソン死の真相』(双葉社)などの著書、『そして日本経済が世界の希望になる』(ポール・クルーグマン/PHP新書)などの訳書がある。 World Voiceプレミアム 海外のキーパーソンへのインタビュー連載。「週刊ダイヤモンド」で好評を博したWorld VoiceがWEBでバージョンアップ。過去誌面に登場したインタビューのノーカット版やWEBオリジナル版をアップしていきます。 バックナンバー一覧 2012年、ＩＴビジネス分野でもっとも印象に残った本に、この一冊を挙げる人も多いのではないだろうか。『ロングテール』『フリー』の著者が、グロー
モバイル開発をしている上でデザインとの関係性は切手は切れない関係だとお思います。 また、プロダクト自体も成長に伴い複雑性がましてきました。そのときに私はデザインシステム に注目して様々なアプローチしてきました。 本発表ではあまり馴染みではない「デザインシステム」はどういうものなのかという基本的な話から ではどのようにしてプロダクトにデザインシステムを導入し、どこまで何をしていったのか エンジニアリングを持って何を解決していったのかを解説します。
こんにちは、プロダクトデザイナーの @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
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
マイクロソフトがアップルとアドビを脅かす11の理由
Microsoftは、クリエイティブな未来の主導権をAppleとAdobeから奪い取ったのではないか。筆者にはそう思える。 「Windows 10」の直近のアップデート2つ（第1弾の「Creators Update」と、2017年秋のリリース予定が発表されたばかりの「Fall Creators Update」）や、複合現実とコンピューティング関連ハードウェアへの積極的な取り組みを併せて考えると、Windowsはクリエイティブな仕事とクロスデバイスの生産性において頼れるプラットフォームになりつつある。 「残念ながらAppleとAdobeは終わりだ」などと言っているわけではない。そんなことは考えてもいない。Appleが作っている人気のスマートフォンやタブレットは、誰もが耳にしたことがあるだろう。それに、6月に開催の開発者会議Worldwide Developers Conference（WWD
デザイントークンって何？｜seya
「デザイントークン」 最近はよく使われている言葉だと思うのですが、意外と日本語での情報がないのでまとめてみました。 W3C の定義実はデザイントークンには W3C という標準化団体でのワーキンググループがあります。 これが絶対の定義と思う必要はないと思いますが、共通の定義としては便利だと思うので引用するとこの W3C では Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. 訳: デザイントークンとは、色、スペーシング、タイポグラフィのスケールなど、デザインシステムを構成する不可分なピースのことです。 Design Tokens W3C Community Group https://github.com/design-tokens/commun
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
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
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.
STUDIO XVI
Studio XVI is a nimble design practice run by Designer & Creative Director Derek Boateng. My focus is creating brand identities and systems that drive business goals startups and upstarts. Bringing founders ideas into the real world. Simple ideas, applied tastefully. Velonetic – The future of insuranceBrought in as a hands-on Creative Director at Bareska to help design concepts, evolve and rollout
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
こんにちは、よりデザインの@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
Generate color pallets using deep learning powered algorithm
GitHub - jondot/awesome-react-native: Awesome React Native components, news, tools, and learning material!
Awesome React Native is an awesome style list that curates the best React Native libraries, tools, tutorials, articles and more. PRs are welcome! Don't miss out! Subscribe to our weekly newsletter Sponsors Never leave your command line for secrets Teller is an OSS and FREE productivity secret manager for developers made by SpectralOps, supporting cloud-native apps and multiple cloud providers. Mix
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
こんにちは、クックパッド株式会社 デザイン戦略部のふじけん(@kenshir0f)です。 デザイン戦略部に異動してからは全社横断のデザイン品質の向上の仕組みづくりを担当していますが、今回はレシピサービス「クックパッド」のデザインシステムの整備で取り組んでいることを紹介したいと思います。 大規模サービスにおけるデザインガイドラインの世代交代クックパッドでは約10年前にクックパッドらしいUIを簡単に実現することができる Sara という CSS ベースのUIフレームワークが生まれました。 Sara は Web のデザインと実装がパッケージ化されているため少ない実装で機能提供が可能となり、その分開発者はユーザーと向き合ったサービス開発にフォーカスすることができます。 CSS Framework の Sara モバイルアプリ(iOS, Android)でも同様に Sara のデザインを取り入れて開
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
Building a button component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build color-adaptive, responsive, and accessible <button> components. In this post I want to share my thoughts on how to build a color-adaptive, responsive, and accessible <button> element. Try the demo and view the source Buttons are interacted with
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Migrating millions of lines of code to TypeScript
Alsacréations. Dewplayer lecteur mp3 en Flash
Reimagine Atomic CSS
デザイン作業のイライラ解消！効果的なデザインフレームワークの作り方【2017年版】
GLIDE ARTS STUDIO | Projects | Website
米国の政府関連サイトのデザイン指針として誕生した、UIデザインに最適化されたフリーフォント -Public Sans
株式会社グラフネットワーク / Graphnetwork.Inc
📝 Vue Fes Japan Online 2022 / 見たセッションメモ - memo_md
An exploration in Material Design by feedly
サービスにおけるDesign Systemの構築
SmartHR UI を中心としたエコシステムのすすめ - SmartHR Tech Blog
The anatomy of a button — UI component series
デザインシステムの資料を作る時に参考にしたリンク集｜Ryo Yoshitake | THE GUILD
Eva Design System: Deep learning color generator
fabFORCE.net - DBDesigner 4
クックパッドのデザイン品質を支える Apron Design System の構築｜ふじけん / kenshir0f
Introducing React Spectrum
Building a button component | Articles | web.dev
Say hello to Bootstrap 2.0 | Twitter Developers