プロダクト体験の「インフラ」となったUIコンポーネントSmartHR UIの現在とこれから - SmartHR Tech Blog
こんにちは、念願の高級水拭き兼用ロボット掃除機を買ってほくほくなプロダクトデザイナー@kgsiです。 ※ この記事は、SmartHR Advent Calendar 2022の13日目の記事です。 SmartHRではReact コンポーネントライブラリ「SmartHR UI」を全プロダクトで使っています。なぜ使っているのか？それはSmartHRのプロダクトの体験統一と、開発速度を向上させるためです。 github.com SmartHR UIがそもそもどういったコンポーネントライブラリなのか、どうやって始まったのか、運用やリリース手順の改善については、過去の記事にて説明しています、よろしければ以下の記事をご覧ください。 「プロダクト間共通の React コンポーネントライブラリ」がどうなったか、という話 - SmartHR Tech Blog プロダクト間共通の React コンポーネント
プロダクトの「色」と向き合う「デザインとエンジニアリング」 | CyberAgent Developers Blog
UXエンジニアの谷です。 「クリエイターHangout」はデザイナー数名のグループで構成される社内のコミュニティです。（Hangoutについては過去の井上の記事をご覧ください。）定期的ににテーマを設けての勉強会や活動をおこなっているのですが、その機会に今回講師として参加させてもらいました。 ▼今期のHangoutのグループ Webフロントエンドエンジニアでもある私が講師を勤めたのは「デザインとエンジニアリング」です。今回はデザイナーとエンジニアのコミュニケーションにおいて、課題となる「色」を主題に「デザインシステム」のトピックを交えておこないました。 1. デザインシステムの定義とは 2. 第1回 色の棚卸し 3. 第2回 & 第3回 色の整理 4. 第4回 コントラストチェック 5. 色と名前を決めることの難しさ 6. デザインシステムはどこまで作り込むか デザインシステムの定義とは 「
UIの一貫性と開発生産性を高める！UI実装ガイドライン制定と浸透のプロセス - Techtouch Developers Blog
こんにちは。テックタッチの shoko です。 最近モスのフィッシュバーガーにハマっていて、3日に1回食べています🐟 さて、本日は、UI の一貫性と開発生産性を高めるために、テックタッチの UI チームがどのような取り組みをしているかをお話したいと思います。 UI チームとは テックタッチが抱える UI の課題 UI 実装ガイドライン制定と浸透のプロセス 1. メンバーから課題を収集 2. 課題・議論の集約 3. UI チームでガイドラインを制定 4. チーム全体へのガイドライン浸透 ガイドライン制定の効果 おわりに UI チームとは テックタッチでは、複数のスクラムチームでプロダクト開発を進めています。主要な機能の開発は順調に進んでいるものの、UI 改善のようなタスクに時間を割くのが難しいという状況に直面していました。 そこで、開発の優先度では後回しになりがちなものの、プロダクトの品質
Windowsの新しいロゴデザインが明らかに
Microsoftが開発するPC向けOS「Windows」のロゴデザインが新しいものに変更されたと報じられています。 Microsoft reveals new Windows logo design and 100 modern app icons - The Verge https://www.theverge.com/2019/12/12/21012997/microsoft-new-windows-logo-fluent-design-icons Microsoft reveals new Windows Logo and Microsoft 365 icons - The Redmond Cloud https://www.theredmondcloud.com/microsoft-reveals-new-windows-logo-microsoft-365-icons/ Mic
社外にも公開しているSmartHR Design Systemは、ライティングに関するガイドラインも充実しています。この記事では、UI文言を検討したいと思ったときにそれらのガイドラインをどのように活用するとよいのか、おすすめの参照方法を紹介します！ チェックリスト的に参照したいライティングスタイル ライティングスタイルには、UI文言に限らずヘルプページやリリースノートなどにも適応したいガイドラインがまとまっています。 基本的かつ具体的な内容で、数も多くないので都度チェックリスト的に参照するのがおすすめです！ヘルプページやリリースノートも含めて、開発に関わる文言や文章を書く機会に参照すると、自然と頭に入っていきます。 迷ったときに参照したい用字用語
LINEはなぜデザインシステムを取り入れたのか？ フロントエンドにおける価値と定義を解説 デザインシステムにおけるフロントエンド #1/2 2019年11月20、21日の2日間、LINE株式会社が主催するエンジニア向け技術カンファレンス「LINE DEVELOPER DAY 2019」が開催されました。1日目は「Engineering」をテーマに、LINEの技術の深堀りを、2日目は「Production」をテーマに、Web開発技術やUI/UX、プロジェクトマネジメントなど、より実践的な内容についてたくさんのプレゼンテーションが行われました。「デザインシステムにおけるフロントエンド」に登壇したのはLINE Front-end Standardizationチーム Front-end Engineerの岡崎晶彦氏。LINEはなぜデザインシステムを必要としたのか？ どのようにデザインシステ
はじめに 今回書く開発者体験について 具体的な試み eslint pluginによるコーディング規約の明文化 Notionへのリソース集約 デザイントークンと型定義 おわりに はじめに こんにちは。enechainで働いている takurinton です。 enechainではさまざまな開発者体験向上の取り組みが試行されていますが、今回は自分が主に見ているデザインシステムにフォーカスして記事を書こうと思います。 弊社のデザインシステムに関しては、 @Shunya078 の なぜ我々はデザインシステムを創るのか？ を読んでいただくと背景がご理解いただけると思います。 今回書く開発者体験について 開発者体験の定義についてはさまざまな解釈があると思いますが、今回は以下の3つのトピックに絞って紹介します。 eslint pluginによるコーディング規約の明文化 Notionへのリソース集約 デザ
背景 Atomic Design ベースのディレクトリ構成になっていたが、 molecules と ogranisms のルールが定まっておらず、コンポーネントがどっちに入るのかが個々人の感覚になっていた 一部の機能は機能ごとにディレクトリを切っていてルールが曖昧になっていた テストと実装が別ディレクトリにあって、集約性の観点で見通しが悪かった 一行まとめ Atomic Design ベースから features （機能ごと）に分ける方向にディレクトリ構成を変更した。 方針 （フィロソフィー） 関心が近いものは近い場所になるべく集約させる ガチガチに縛るよりはある程度レールを引くのに止める 特に features の中のルールは固められないと判断して決定を遅らせる ルール化できそうなものをLintエラーで管理する 実はまだやってない。インポートの制約に関するルールを追加する予定 採用したル
The Gradual Design System: How We Built Slack Kit - Slack Engineering
A group of engineers, designers, and writers began to centralize and standardize components. We named it Slack Kit. This post was co-written with Zack Sultan, Lead Product Designer at Slack In 2016, Slack was two years old and already used by millions of people. Our codebase had grown rapidly, and like many companies that focused on product/market fit, our code was built in a way that favored time
はじめに この記事はTailwindCSSが最近流行ってるけどなんで流行ってるの？という疑問をいただいた、フロントエンドエンジニア歴3年ほどの人間が調べてわかったことをまとめた記事です。以下のようなことがわかります。 TailwindCSSとは一体なんなのか？ CSS設計とは違うの？Bootstrapなどとの違いは？ どんな背景があって流行るようになってきているのか考察 Design Systemとの相性は？ TailwindCSSとは一体なんなのか？ ものすごくざっくりまとめるとユーティリティクラスの詰め合わせのライブラリと表現できるのかなと思いました。 以下のTailwindCSSの公式ドキュメントに書いてあることについて軽くまとめます。 https://tailwindcss.com/docs/utility-first まずはコードを見てみる まずTailwindを使わない普通のH
デザインシステムを組織に浸透させる3つの心得
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフーのデータソリューション事業のデザインを担当しています、水野 直と申します。 私は2020年にヤフーに新卒入社し、DS.INSIGHTというプロダクトを支えるDS.DESIGN SYSTEMの大規模改修を担当しました。 デザインシステムの難しさは、構築することよりも、プロダクトの成長に伴走してシステムを運用し、機能させ続けることにあります。サービスの改善のスピード、人の流動が激しい現代において、多くの組織がプロダクトを発展させていくため、車輪の再発明をしないようデザインの言語化、パターン化にリソースを注いでいるかと思います。 今回はNijibox主催「なぜデザインシステムが必要なのか」のイベントに登壇した際の内容をベースに、立
I've been working on Chakra UI for the past five years, and I'm very proud of what we've achieved collectively. With our growing team, we've achieved over 1.9M downloads per month, 2M unique website visits per month, and over 31k Github stars; this has been one of my most rewarding projects to date. For a project that started with a single maintainer to become a multi-framework team, this has been
React Spectrum Libraries A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. GitHub React SpectrumA React implementation of Spectrum, Adobe’s design system. Spectrum provides adaptive, accessible, and cohesive experiences for all Adobe applications. Explore React Spectrum React AriaA library of unstyled React components and hooks that helps yo
いつも大学や英語の勉強についての記事を書いてますが、今回はデザイナーとして働いている私が知った技術的なことについてまとめていきたいと思います。 改めて軽く自己紹介昨年の11月よりファインディ株式会社でUI/UXデザイナーとして働いております。ファイディで働くのはとても楽しく、また周りの優秀な人達に囲まれて自分もメキメキと成長を感じています。（ここに関しては入社半年エントリー記事で詳しく書く予定） 普段はプロダクトの魅力を高めるために様々な取り組みを行っています。その中でもデザインシステムはデザイナーだけでなくエンジニアも巻き込んで運用に向けて日々奔走しています。 ファインディデザインシステムとは現在手掛けているのはWebエンジニアの中途転職を支援するFindyというプロダクトのデザインシステムなのですが、サービス開始から6年ほど経過し多くのデザイナー、エンジニアの手によって作られたためどう
「ウェブの制作コストと時間を節約したい」 「デザインを統一して、一貫性をもたせたい」 「制作に必要なものだけまとめたい」 「シェアしたときのデザインのずれを防ぎたい」 プロジェクトを続けているうちに、ページによってボタンや文字サイズ、余白スペースの幅などがばらばらで、統一感がなくなってしまった、なんて経験があるかもしれません。 さらに、複数のチームによる開発では、デザインのズレだけでなく、同じ作業を繰り返すなど非効率さが目立ち、全体のモチベーションもだだ下がりなんてことに。 一貫したデザイン設計により、技術的な問題を防ぐことができるデザインシステムを作成しようと思いつつ、最初に作るのが時間もかかって大変だから、と導入をあきらめていませんか。 今回は、デザインシステムとしてそのまま使えるFigma用おすすめUIキットをまとめてご紹介します。 プロトタイプ作成に必要なパーツが一式すべて揃い、プ
Storybook 6.1
Storybook is the industry standard UI component workshop. It organizes components and their states to structure UI development, testing, and documentation. It's used by teams at Twitter, Slack, Airbnb, Shopify, Stripe, and Microsoft. As Storybook grows in popularity, companies are building more components in it than ever before. Atomic components, full blown pages, and everything in between. Perfo
Our new expression.It all starts here. Use this guide as a high-level overview of how the Starbucks brand comes to life. As we evolve to meet beautifully diverse customers all over the world, our brand has evolved too. Here we introduce a fresh new design system that maintains the core elements of our brand while keeping our customers’ experience central to creative expression. To achieve this, we
by DobaKung Microsoftが2021年にリリースするWindows 10の大型アップデートで、エクスプローラー・アクションセンター・スタートメニューなどのUIを大幅に見直すことを計画していると報じられました。 Microsoft plans big Windows 10 UI refresh in 2021 codenamed 'Sun Valley' | Windows Central https://www.windowscentral.com/windows-10-sun-valley-ui-october-2021-update Sun Valley: Microsoft is planning a major redesign for Windows 10 https://betanews.com/2020/10/28/microsoft-windows-10-s
SmartHRのプロダクトデザイングループのFigmaの運用を大公開！第1弾：デザインデータに対する考え方｜wentz
こんにちは。 SmartHRでプロダクトデザインをしている@wentz_designです。 入社して16ヶ月が過ぎ、そろそろ入社エントリなるものを書く機運か？と思い至り、これまで取り組んだことについて書いてみることにしました。 私は現在、メインでSmartHRの基本機能の開発に携わっています。 サブプロジェクトとしてユーザーリサーチ推進室の運営、SmartHR Design Systemの運営、Figmaというツールの社内利用推進および組織アカウントの管理・運用に関わっています。 Figmaに関しては、過去にSmartHR UIのリソース（ライブラリ）を一般公開したことで様々な反響がありました。 今回は、SmartHRのプロダクトデザイングループでは普段Figmaをどのように活用しているのか、を複数回に分けて紹介していきます。 第1弾ではプロダクトデザイングループの「デザインデータに対する
【freee / ICS / Ubie / RAKSUL】 デザインシステム構築の様々なアプローチ 「Design System Build #01」勉強会レポート｜RAKSUL DESIGN
【freee / ICS / Ubie / RAKSUL】 デザインシステム構築の様々なアプローチ 「Design System Build #01」勉強会レポート 近年、国内外の様々な企業のプロダクト開発に導入されている「デザインシステム」。「デザインシステム」を導入することで、デザイナーやエンジニアの開発生産性や効率性を高めたり、ユーザー体験の一貫性を提供できたりと、様々なメリットがある一方で、事業内容や成長フェーズ、組織構造などによってデザインシステムの目指すべきカタチは異なり、正解や完成がないことから、悩みを抱えている企業や開発者は少なくありません。 そこでラクスル株式会社（以下、RAKSUL）は、デザインシステムのコミュニティ「Design System Build」を立ち上げ、2022年8月23日に“デザインシステム構築の様々なアプローチ”をテーマに勉強会を開催しました。 この
A content-first Web framework Nue is a closer-to-metal framework embracing minimalism and web standards. It's structurally clean and stupidly fast. Get started Product roadmap Content-first: Build entire sites without ever leaving your content Vision The ultimate goal of Nue is to build a perfect web framework, which is ridiculously fast and easy to use. Nue JS Server-side templating and reactive
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
[[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
大規模B2B SaaS 「HRMOS」におけるDesign Systemの開発・運用プラクティス
前回の記事ではHRMOSのDesign Systemの導入背景の紹介をしました。 本日はそのDesign Systemがどのように開発・運用されているのかを紹介したいと思います。 開発体制 Design Systemの開発はデザイナー、エンジニアが1つのチームとして開発を行っています。 開発のポイントとしては以下のとおりです。 デザインタスク、実装タスクなどすべてのDesign Systemのタスクは1つのバックログで管理 隔週に1度、やることの計画、やったことの確認をチーム全員で行う チームメンバーは全員兼務なので、極力MTGを増やさないよう、非同期でのコミュニケーションをメインにしている この体制になった背景として、当初はDesign System開発がデザイナーとエンジニアで分断されていたことにあります。 デザインとエンジニアリングでそれぞれ別のバックログをもち、それぞれ別のサイクル
アクセシビリティの改善のために 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 プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
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
モバイル開発をしている上でデザインとの関係性は切手は切れない関係だとお思います。 また、プロダクト自体も成長に伴い複雑性がましてきました。そのときに私はデザインシステム に注目して様々なアプローチしてきました。 本発表ではあまり馴染みではない「デザインシステム」はどういうものなのかという基本的な話から ではどのようにしてプロダクトにデザインシステムを導入し、どこまで何をしていったのか エンジニアリングを持って何を解決していったのかを解説します。
こんにちは、プロダクトデザイナーの @uknmr です。昨日に続き SmartHR UI に関する話を書きます。ええ、そう。今日はやや社内に向けて書きます。アドベントカレンダー14日目? 知らない子ですね。我が家にクリスマスの概念はないので、そんなものはありません。 SmartHR UI の目的とは? ブランド観点から UI を揃えたい、一貫したユーザー体験*1を提供したい、という気持ちから生まれた SmartHR UI ですが、本当ですか? 我々は本当に UI を揃えるためだけにコンポーネント集を手入れしていますか? 共通コンポーネント集があれば、それを使い続けさえすれば UI が揃っていくのは必然です。「揃えたい」という気持ちは「誕生した瞬間に達成された」とも言えます*2。 では、何のために自前でコンポーネント集を手入れし続けているのでしょうか? 私はそれを「SmartHR というプロ
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
デザイントークンって何？｜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
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
こんにちは、クックパッド株式会社 デザイン戦略部のふじけん(@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
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
Hawkins: Diving into the Reasoning Behind our Design System
Stranger Things imagery showcasing the inspiration for the Hawkins Design Systemby Hawkins team member Joshua Godi; with cover art from Martin Bekerman and additional imagery from Wiki Chaves Hawkins may be the name of a fictional town in Indiana, most widely known as the backdrop for one of Netflix’s most popular TV series “Stranger Things,” but the name is so much more. Hawkins is the namesake t
#11WeeksOfAndroid 18 #Android12 1 #AndroidDevJourney 1 #androiddevsummit 5 #GoogleIO 19 #WeArePlay 3 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 106 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 ベータ版
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI文言を検討するときのSmartHR Design Systemの歩き方｜稲葉志奈
LINEはなぜデザインシステムを取り入れたのか？ フロントエンドにおける価値と定義を解説
デザインシステムの開発者体験向上の試み - enechain Tech Blog
フロントエンドのディレクトリ構成を変えた 2023 - kobayang
TailwindCSSって何？なんで流行ってるの？｜F Lab｜Fixel株式会社
The future of Chakra UI
React Spectrum Libraries
FigmaのSlotを活用したらデザインシステム管理が超絶楽になった話｜🐰
デザインシステムの作成に便利すぎるFigmaおすすめUIキット【2022年版】
Starbucks Creative Expression
Microsoftが「Windows 10のUI」の大規模な刷新を計画中か
Nue: The content-first web framework
Migrating millions of lines of code to TypeScript
Reimagine Atomic CSS
📝 Vue Fes Japan Online 2022 / 見たセッションメモ - memo_md
サービスにおけるDesign Systemの構築
SmartHR UI を中心としたエコシステムのすすめ - SmartHR Tech Blog
The anatomy of a button — UI component series
Eva Design System: Deep learning color generator
クックパッドのデザイン品質を支える Apron Design System の構築｜ふじけん / kenshir0f
Introducing React Spectrum
Building a button component | Articles | web.dev
Jetpack Compose を使ったデザインシステムの実装