デザインシステムの力 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 ライブラリは、あらかじめアクセシビリティ… 続きを読む

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

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

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

デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / 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... 続きを読む

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

加速するコンポーネント設計入門 / Component Design as an Accelerator

2022/10/07 103 users Keywords コンポーネント設計 境界 デザイナー

社内勉強会用 デザイナーとフロントエンドエンジニアの境界をなくし、UI開発を加速させるためのコンポーネント設計入門 ※フロントエンドエンジニア視点 [Keywords] - 共通認識としてのデザインシステム - 共通認識としてのコンポーネント設計 続きを読む

フロントエンドの"ちょうどいい"自動テストのはじめかた - Atrae Tech Blog

2022/09/30 171 users フロントエンド はじめかた たかみ wevox テスト

Wevoxのフロントエンドエンジニアをしているタガミです。最近はmonorepo構成に移行中のWevoxフロントエンドのテストやデザインシステムなどをいい感じにしようとしています。 この記事では、WevoxというSaaSプロダクトのフロントエンドにおける自動テストの話をします。Wevoxはリリースから5年以上が経過し、チームのメ... 続きを読む

デザイナーやエンジニアの作業効率が向上するFigmaの運用方法を考える｜osanai / ui designer｜note

2022/09/12 212 users figma カンム エンジニア デザイナー コンポーネント

カンムでプロダクトデザインをしている osanai です。こんにちは。 前回ご紹介したコンポーネント品評会により、デザインシステムにおけるコンポーネントの課題について議論が進み、不必要なコンポーネントが生まれにくくなり、デザインの意図が汲み取りやすくなりました。 品評会をしていると、しばしばデザイナーとエ... 続きを読む

AWS、自社製品のために開発したデザインシステム「Cloudscape」オープンソースで公開。UIコンポーネント、デザインパターンなど

2022/07/25 92 users Cloudscape マネジメントコンソール AWS 公開

AWSは、マネジメントコンソールなど同社が提供する製品やサービスのWebアプリケーション画面を構築するために開発したデザインシステム「Cloudscape」をオープンソースで公開しました。 Cloudscape Design System, an AWS solution for building intuitive user experiences, is now open source! Cloudscape consists o... 続きを読む

Tailwind CSSの二面性と、デザインシステムを借りるということ

2022/07/24 101 users Tailwind CSS お門違い コミットメント 二面性

この雑記を書く問題意識は、Tailwind CSS に対して向けられている世の人々の不満が、Tailwind CSS がコミットしていることから外れた、お門違いの期待の押しつけになっているのではないかと感じるところにある。 ライブラリやフレームワーク、道具にはそれが作られた目的があり、果たそうとするコミットメントがある。そ... 続きを読む

Figma Tokens で小さくはじめるデザインシステム

2022/06/25 158 users figma 双方向 エンジニア デザイナー わたし

📝 はじめに こんにちは犬です。 デザインシステムをはじめる上で、 Figma の神プラグインを見つけたので共有します！ わたしが携わっているプロジェクトでは、エンジニアとデザイナーの双方向のコミュニケーションツールとして Figma Tokens を採用しています。 📝 Figma本体 だけでは実現が難しい色の管理手法 Figma ... 続きを読む

デザインシステムを育てていく

2022/05/31 159 users 構築 支援 参考 目的 デザイン

はじめに ここ最近はデザインシステムの構築や支援を行なっています。そこで、デザインシステムを作ることが目的になっていることを感じることがあります。私はデザインシステムは作ることよりも、育てていく考え方が重要だと思っているので、その考えについてお伝えします、どなたかの参考になれば幸いです。 デザイン... 続きを読む

デザインシステム – 公益社団法人2025年日本国際博覧会協会

2022/04/18 100 users 公益社団法人2025年日本国際博覧会協会 Expo 万博

公益社団法人2025年日本国際博覧会協会では、2025年日本国際博覧会（大阪・関西万博）に活用するための「EXPO 2025 Design System」を策定しました。 このデザインシステムは、万博のさまざまなインターフェースを統一し、アナログ・デジタルの境界線を超えて一貫した体験を提供することを目的としています。EXPO 2025 D... 続きを読む

Reactのディレクトリ構成でAtomicデザインをやめた話

2022/03/31 74 users React つらみ ディレクトリ構成 部類 概念

Atomic デザインをやめた 結論から言うと Atomic デザインを React のディレクトリ構成に当て込むのをやめました。結構ツラミが出てきてしまった感じです。とはいえ、Atomic デザインを批判するわけではなく、むしろ概念というか考え方は好きな部類です。 あくまでデザインシステムであり、ディレクトリ構成に当て込むべ... 続きを読む

Tailwind CSS 社内勉強会【まとめ】 - RAKUS Developers Blog | ラクス エンジニアブログ

2022/02/17 116 users コンポーネント指向 ラクス CSS チートシート 背景

背景 スコープ Tailwind CSSとは？ コンポーネント指向とは？ Tailwind CSSのメリット class名を考える必要がない デザインシステムの最低保証 ドキュメント、チートシートの豊富さ Tailwind CSSのデメリット classに多くのコードを書く必要があり、可読性が落ちやすい CSSの理解度がある程度必要 デザインを100%再現し... 続きを読む

Amebaのデザインシステム「Spindle」の全貌公開 | CyberAgent Developers Blog

2021/09/17 150 users Ameba SPINDLE UX設計 実務 UI設計

メディア統括本部・技術横断室の谷です。組織横断の活動しながら、AmebaやAmebaマンガという事業に関わっています。実務としては、コード実装をメインに、UI設計やUX設計、最近ではユーザーインタビュー等のリサーチ業務をおこなっています。 この記事では私が立ち上げから2年くらいかけて関わってきたAmebaのデザインシ... 続きを読む

フロントエンドから取り組むデザインシステムの改善 #UI - Yahoo! JAPAN Tech Blog

2021/08/25 107 users 近藤 フロントエンドエンジニア Japan 近年 Yahoo

こんにちは、フロントエンドエンジニアの近藤です。Yahoo! JAPANのスマートフォンのウェブトップページのフロントエンド開発業務と、社内で利用されているデザインシステムの開発に携わっています。 近年、デジタルプロダクトを持つ多くの企業で、デザインシステムが活用されています。デザインシステムには、ビジュアル... 続きを読む