デザインシステムを拡張し、プロダクト開発の共通基盤を目指す - freee Developers Hub

2024/12/20 5 users freee Developers 共通基盤 TAKUMI

統合UX基盤というチームでエンジニアをしているtakumiです。freee Developers Advent Calendar 2024の20日目は、現在社内向けに開発を進めている新しいUIライブラリ「標準UI」について、その特徴や開発過程を紹介していきます。 デザインシステムの浸透と新たな課題 freeeでは2018年からデザインシステム「vibes」を開発... 続きを読む

Serendie Design System | Takram

2024/12/17 6 users Takram 浸透 加速 DX戦略 既存

Takramは、三菱電機株式会社のDX戦略を支える「Serendie Design System（セレンディデザインシステム）」のデザインと開発を手がけました。このプロジェクトは、デザインシステムの立ち上げに留まらず、オープンな組織文化をつくる第一歩となることをめざしたものです。 serendie.design DXの加速、AIの浸透、既存の業界... 続きを読む

freeeで1年間働いてわかった「ふつう」のアクセシビリティ - freee Developers Hub

2024/12/07 17 users freee shikakun アクセシビリティ 中途採用 向上

はじめまして！ shikakun といいます。freeeのデザインシステムの開発に携わっている、ソフトウェアデザイナーです。2024年1月に中途採用で入社しました。 freeeで働くことを決めた理由のひとつは、freeeがアクセシビリティの向上に積極的に取り組んでいる印象を持っていたからでした。アクセシビリティとは、「（製品や... 続きを読む

デザインシステムの成長。そして、これからどう向き合うか - enechain Tech Blog

2024/12/05 16 users enechain Tech Blog 成長

この記事はenechain Advent Calendar 2024の5日目の記事です。 はじめに enechainでフロントエンドエンジニアをしている@Shunya078です！ enechainは、日本最大のエネルギー卸取引マーケットプレイスを運営するスタートアップです。我々ソフトウェアエンジニアは日々、プロダクトを通じてエネルギー市場に貢献しています... 続きを読む

デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System

2024/11/23 155 users エンジニア Webデザイナー 実践ガイド

MTDDC Meetup TOKYO 2024 2024/11/23 株式会社サイバーエージェント 原 一成 (@herablog) 続きを読む

UI 開発における ヘッドレス UI ライブラリの重要性とデザインシステムへの取り入れ方

2024/11/23 118 users ライブラリ 取り入れ方 ヘッドレス 開発 重要性

昨今の Web 開発における UI はますます複雑化し、アクセシビリティの重要性が高まっています。ブラウザの標準機能だけでは実現できない複雑な UI を実装する際、アクセシビリティに関する誤った実装が原因で、ユーザー体験を損なう可能性があります。ヘッドレス UI ライブラリは、あらかじめアクセシビリティ… 続きを読む

デザインシステムのダークモード対応 - enechain Tech Blog

2024/10/30 13 users enechain Tech Blog ダークモード対応

こんにちは。enechainで働いている takurinton です。 これまでのenechainのデザインシステムではdark modeの提供はしておらず、プロダクト側で必要に応じて状態とデザイントークンを保持した上で切り替えてもらうという方式をとっていました。 しかし、事業拡大やプロダクト側からの要望によりdark modeのデザイントー... 続きを読む

デザインシステムにおけるコンポーネントライブラリ管理の改善 - enechain Tech Blog

2024/10/24 19 users コンポーネント 乖離 プロパティ バリエーション 実装

はじめに コンポーネントライブラリ管理の課題 デザインと実装の乖離 見た目における乖離 プロパティの乖離 コンポーネントやバリエーションの増加による管理の負担 ガイドラインの浸透 さいごに はじめに enechainプロダクトデザインデスクの伊藤です。現在、私は複数プロダクトのデザインを行いながら、デザインシステ... 続きを読む

VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~ / 20241019_cloudsign_VueFesJapan2024_1

2024/10/19 79 users UIコンポーネントライブラリ 分離 プロダクト 資料

2024年10月19日(土)「Vue Fes Japan 2024」に開催された、弁護士ドットコム株式会社 クラウドサイン事業本部　フロントエンドエンジニア の辻 佳佑が登壇した際の資料です。 セッションタイトル：VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの… 続きを読む

翻訳記事：デザインシステムのジレンマ：見た目は似ているが、機能が違う｜Nobuya Sato

2024/10/09 23 users ジレンマ コンポーネント デザイナー 見た目 健全性

読むときについでに訳してしまおう活動。今回は、UX Collectiveに投稿されたこの記事。デザインシステムを作るときのジレンマです。 コンポーネントは、見た目が似ていても機能が違う場合があり、デザイナーや開発者はあえて使い分けて作っている場合があります。しかし、デザインシステムの健全性を機能させるには、し... 続きを読む

他社事例から考える、利用しやすいデザインシステムのためのガイドライン作り - enechain Tech Blog

2024/09/10 28 users ガイドライン作り enechain Tech Blog

はじめに enechainデザインシステムについて デジタル庁デザインシステム 特徴 Figmaファイル Webサイト GitHub Primer 特徴 Figmaファイル Webサイト Ameba Spindle 特徴 Figmaファイル Webサイト 各デザインシステムの構成まとめ enechainへの反映 Notionでのガイドライン まとめ はじめに こんにちは、デザイナーの渡... 続きを読む

デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / Innovation in Frontend Development Processes through Design Systems and Component-Oriented Architecture

2024/08/24 79 users コンポーネント指向 革新

フロントエンドカンファレンス北海道でお話ししたスライドです Proposal: https://fortee.jp/frontend-conf-hokkaido-2024/proposal/ebd98e0a-241c-4443-aa98-300af113b40d # URL YouTube… 続きを読む

米政府系サイトの常識を変えた「デザインシステム」革命

2024/07/02 409 users 革命 常識

官僚主義からスタートアップ精神へ——。およそ10年前、新サービスの立ち上げ失敗を機に生まれた米国政府のWebデザインシステムは、今では160サイト・11億ページビュー規模にまで広がりを見せている。 by Jon Keegan2024.07.03 1 3 この記事の3つのポイント 米国には公共デザインシステムとカスタムフォントがある 政府系W... 続きを読む

デザインシステムの開発者体験向上の試み - enechain Tech Blog

2024/06/11 28 users enechain Tech Blog 開発者体験向上 自分

はじめに 今回書く開発者体験について 具体的な試み eslint pluginによるコーディング規約の明文化 Notionへのリソース集約 デザイントークンと型定義 おわりに はじめに こんにちは。enechainで働いている takurinton です。 enechainではさまざまな開発者体験向上の取り組みが試行されていますが、今回は自分が主に見... 続きを読む

Tailwind CSSでデザインシステムを構築する［前編］ ～「契約」としてのデザインシステム | gihyo.jp

2024/01/25 84 users gihyo.jp Tailwind CSS 契約 後編 発想

2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設... 続きを読む

コンポーネントをアクセシブルに保つ技術

2023/12/21 11 users アクセシブル コンポーネントライブラリ Linter 実装

アクセシビリティ Advent Calendar 2023 21日目の記事です。 Ubie株式会社 デザインエンジニアのtakanoripです。 Ubieではデザインシステムの1要素としてコンポーネントライブラリの実装を進めています。その中でコンポーネントをアクセシブルに保つための仕組みをいくつか導入しているので紹介します。 Linter まず一番... 続きを読む

freee、デザインシステム「vibes」を公開　アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 | プレスリリース | freee株式会社

2023/12/19 119 users freee Vibes アクセシビリティ プレスリリース 組織

freee、デザインシステム「vibes」を公開　アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■マジ価値サマリー（このお知らせでお伝えしたいこと） ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム... 続きを読む

デザインシステム「Tsukuri」の立ち上げから現在まで〜取り組みとその成果〜 - ANDPAD Tech Blog

2023/12/06 7 users sizucca ANDPAD Tsukuri アンドパッド

アンドパッドでプロダクトデザイナーをしている @sizucca です。 以前、デザインシステムの専任エンジニアが、ANDPAD のデザインシステム「Tsukuri」に関する技術的な記事を連載形式で執筆しましたが、今回はデザイナーの視点から、デザインシステムの立ち上げから現在に至るまでの取り組みと、その成果を振り返りたいと... 続きを読む

「デザインシステム」がよくわからないので、理解の仕方を変えてみる｜usagimaru

2023/12/05 13 users 概念 usagimaru 流行語 IT業界 皆さん

ここ数年「デザインシステム」はIT業界を中心に流行語になっていますが、どうにも「〜システム」と呼んでしまっていることと、実際にそれが指している概念がはっきりしないが故に、私にとっては積極的に使いたくない語になってしまっています。皆さんが「デザインシステム」の語で言及しているものは、本当に同じ概念を... 続きを読む

エンジニアがデザインシステムの構築に向けて、UX改善と両立して取り組んだ話

2023/10/17 5 users UX改善 エンジニア 構築 浅井 傍ら

この記事は毎週必ず記事がでるテックブログ "Loglass Tech Blog Sprint" の 9 週目の記事です！ 1年間連続達成まで 残り 44 週 となりました！ はじめに こんにちは、株式会社ログラスでエンジニアの浅井（@mixplace）です。開発チームのいちメンバーとして、チームの開発生産性改善を行う傍ら、デザインシステムの構築... 続きを読む

Figma によるデザインシステム入門

2023/06/26 443 users figma 本書 デザイナー プロダクト 材料

本書は Figma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文: http... 続きを読む

初公開！「家計簿プリカ B/43」のデザイントークンの設計 - inSmartBank

2023/06/19 12 users putchom inSmartBank スマートバンク 構築

こんにちはスマートバンクのデザイナーのputchomです。普段は「家計簿プリカ B/43」のプロダクトデザインやデザインシステムの構築を担当しています。 先日、CreatorZineさんでプロダクトデザインに関するスマートバンクの連載記事を書かせていただいたのですが、今回はその中でお伝えしきれなかった「デザイントークン... 続きを読む

ANDPAD のデザインシステム「Tsukuri」の Web 向け実装について - 現状と今後 - ANDPAD Tech Blog

2023/04/27 10 users ANDPAD Tsukuri 寺島 アンドパッド 構築

1. はじめに Web フロントエンド開発を中心に行っている寺島です。 この記事はアンドパッドで開発しているデザインシステム 『Tsukuri』 の Web 向け実装である『Tsukuri for Web』の構築について紹介する最後の記事です。 tech.andpad.co.jp tech.andpad.co.jp tech.andpad.co.jp この記事では Tsukuri for Web の現状... 続きを読む

デザインシステムを作るのはなぜ難しいのか - クラウドワークス エンジニアブログ

2023/03/03 16 users クラウドワークス エンジニアブログ

こんにちは、crowdworks.jp のデザインシステム構築に携わっているエンジニアの @t0yohei です。最近は日々デザインシステム難しいいいいと思いながらあれやこれやと考えているのですが、開発者の観点から何が難しいと思うのかをせっかくなので共有したいと思います。 デザイナーの観点からのデザインシステム構築につい... 続きを読む

ANDPAD のデザインシステム 「Tsukuri」 の Web 向け実装について - 方針と全体像の紹介 - ANDPAD Tech Blog

2023/03/02 19 users figma React ANDPAD Tsukuri 実装

この記事の概要 デザインシステム 『Tsukuri』の Web 向け実装『Tsukuri for Web』を開発中です 変更しやすくするために構成要素の依存関係を考慮した構造を検討しました コンポーネントの実装は Web Component を利用し、Vue.js と React にも対応します アイコンやデザイントークンに対応する実装は Figma から取得し... 続きを読む