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」を公開します ・あらゆる組織でシステム... 続きを読む

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

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

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

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 から取得し... 続きを読む

HashiCorp、UIデザインシステム「Helios」をオープンソースで公開。UIコンポーネントやアイコンなど

2023/02/01 100 users Helios Vagrant hashicorp 原則 公開

HashiCorp、UIデザインシステム「Helios」をオープンソースで公開。UIコンポーネントやアイコンなど TerraformやVagrantなどで知られるHashiCorpは、同社製品のユーザーインターフェイス開発に使われているデザインシステム「Helios」をオープンソースで公開しました。 デザイン設計の原則やサンプルと共に、25種類のUI... 続きを読む

アプリ版デザインシステム実装を公開しました - pixiv inside

2023/01/26 10 users pixiv inside うえ 実装 OSS化 Web版

アプリ版デザインシステム実装をOSS化しました こんにちは、ああうえ(@_kwzr_)です。新規事業部とデザインシステム部を兼務しており、アプリ版デザインシステムの実装を進めています。 Web版に引き続いて、アプリ版のデザインシステム(charcoal-ios, charcoal-android)をOSS化しました。 github.com github.com inside.p... 続きを読む

Sass のテストコードを書くと便利 - putchom

2022/12/22 13 users Sass putchom デザイナー テストコード 普段私

こちらは CSS Advent Calendar 2022 22 日目の記事です。 こんにちは、家計簿プリカ B/43を運営する株式会社スマートバンクでデザイナーをしている putchom です。 CSS Advent Calendar ではありますが、今回は Sass のテストコードを書くと便利という話をします。 普段私はデザインシステムを設計する仕事をしています... 続きを読む

2022年のUIデザインツールのまとめ、注目されているプロトタイプ・デザインシステム・リモートワーク・ユーザーテストなど

2022/12/21 15 users リモートワーク プロトタイプ UIデザインツール 一言 まとめ

2022年現在、UIデザインツールの使用状況を調査した「2022 Design Tools Survey」を紹介します。 急いでいる人用に一言でいうと、Figmaがっょぃ。 2022 Design Tools Survey 2022 Design Tools SurveryはUX Toolsでおこなわれたアンケートの調査結果（4,260人分）をまとめたものです。 まずは、アンケートに回答された人... 続きを読む