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 アクセシビリティ プレスリリース ノウハウ 組織

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

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人分）をまとめたものです。 まずは、アンケートに回答された人... 続きを読む

25年続くYahoo!ニュースを支える、Figmaを用いたデザインシステム

2022/12/10 225 users figma 萩野 Japan Yahoo デザイン業務

こんにちは。Yahoo!ニュースでデザインを担当している萩野と小股です。 Yahoo!ニュースは、Yahoo! JAPANが運営する国内や海外のニュースを閲覧できるサービスです。1996年にサービスを開始し、2021年には25周年を迎えました。 そんなYahoo!ニュースでは、2020年より「Figma」を用いてデザイン業務を行っています。この記... 続きを読む

後悔しないデザインシステムの始め方

2022/12/03 42 users 始め方

UXA2022 Day 1; Ted Drake - Inclusive design for cognitive disabilities, neurodiversity, and chronic illness 続きを読む

デザインシステム開発優先度の「難しさ」と「対策」｜hikaru-takase /Loglass｜note

2022/11/29 16 users ログラス 理想 現実 プロジェクト 調整

こんにちは、ログラスのデザイナー高瀬です。 今回はデザインシステムの理想と現実ついて話していきたいと思います。 デザインシステムって素晴らしいけど、いざ実装しようとするとプロジェクトの扱いや開発優先度の調整って難しいですよね？ 今回はそんなデザインシステムにまつわる開発優先度と対策の話をしていきたい... 続きを読む

デザインシステムにフロントエンドのプラクティスを詰め込んで再配布する

2022/11/26 15 users プラクティス フロントエンド

Data Analysis Supporting Policy Decisions of New Service LIVEBUY 続きを読む

デジタル庁公開のデザインをhtml/cssに落とし込んでみた。 - Qiita

2022/11/13 108 users figma Qiita CSS HTML デジタル庁

はじめに デジタル庁が公開したデザインシステムがよさそうなデザインでしたので、適当に遊ぼうかと思いました。 html/cssで公開してくれればすぐに使いやすいと思ったんですが、どうやらFigmaでしか配っていない。。 ということでhtml/cssに落とし込んでみました。 注意事項 趣味程度に作ったものを、使いたい人がいれ... 続きを読む

デザインシステムに準拠したコンポーネント駆動UI開発への取り組み

2022/11/14 14 users

こんにちは、THECOO株式会社のpoteboyと申します。普段は現職１人目のWEBフロントエンド開発者としてFaniconというファンコミュニティサービスの開発を行っております。 弊社では私が入社する以前までフロントエンド専任の開発者がおらず、サーバーサイドの開発者やAndroidの開発者がフロントエンドの開発業務を兼務して... 続きを読む

デジタル庁、Web・アプリデザインの指針まとめた「デザインシステム」公開　地方自治体の活用も見込む

2022/11/11 52 users ドキュメント 指針 認知向上 デジタル庁 web

Webサイトやアプリの開発時、一貫したデザインにできるようドキュメントやデータをまとめた「デザインシステム」をデジタル庁が公開した。「デザインシステムに関わる活動をオープンにし、デザインシステムの認知向上や改善につなげる」という。 デジタル庁は11月11日、Webサイトやアプリの開発時、一貫したデザインにで... 続きを読む

デザインシステム｜デジタル庁

2022/11/11 827 users デジタル庁 東京ガーデンテラス紀尾井町 ウェブサイト 構築

デジタル庁へのアクセス〒102-0094　東京都千代田区紀尾井町1-3　東京ガーデンテラス紀尾井町 19階、20階 デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザイン... 続きを読む

デザインシステムを導入してみて(運用編) - バイセル Tech Blog

2022/11/09 11 users バイセル Tech Blog 運用編 テクノロジー戦略本部

はじめに テクノロジー戦略本部の酒井です。前回デザインシステムの導入に関して話しましたが、今回は運用についてどういった取り組みをしてきたのか紹介していこうと思います。前回の記事をまだ読んでいない方は読んで頂けると幸いです。 デザインシステム導入してみて(導入編) はじめに 概要 デザインの質を保つ取り組... 続きを読む

Web制作者は要チェック！ Figmaで無料利用できるUI用のデザインシステムのまとめ -Design Systems for Figma

2022/10/31 11 users figma タイポグラフィ UIコンポーネント アイコン 無料

Figmaで無料で利用できるWebサイトやスマホアプリのUI用のデザインシステムを紹介します。UIコンポーネント、カラー、アイコン、タイポグラフィなどがまとめられており、すぐにFigmaで利用できます。 Design S...記事の続きを読む 続きを読む