デジタル庁デザインシステムβ版
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。 デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。
官僚主義からスタートアップ精神へ——。およそ10年前、新サービスの立ち上げ失敗を機に生まれた米国政府の新組織が作ったWebデザインシステムは、今では160サイト・11億ページビュー規模にまで広がりを見せている。 by Jon Keegan2024.07.03 412 9 この記事の3つのポイント 米国には公共デザインシステムとカスタムフォントがある 政府系Webサイトのアクセシビリティと一貫性を高めることが目的 これらのプロジェクトでは透明性や協働、継続的な改善が重視されている summarized by Claude 3 米国には、公式のWebデザインシステムとカスタムフォントがある。この公共デザインシステムは、政府のWebサイトを単に美しいものにするだけでなく、すべての人にとってアクセスしやすく機能的なものにすることを目的としている。 インターネットが普及する以前、米国民は印象的な石柱
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 | プレスリリース | フリー株式会社
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■マジ価値サマリー（このお知らせでお伝えしたいこと） ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム開発に携わるエンジニアやデザイナーの皆様に、「vibes」を利用してシステムを構築いただく、またはコード等を参照いただくことで、社会全体としてアクセシビリティ向上の取り組みが広がることを目指しています freee株式会社（本社：東京都品川区、CEO：佐々木大輔、以下「freee」）は、freeeがこれまで培ってきたアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes（読み：ヴァイブス）」を公開しました。本デザインシステムを公開するこ
Speaker : Yuito Kawashima ( https://github.com/yuitokawashima ) at 「Vue.js v-tokyo Meetup #20」 https://vuejs-meetup.connpass.com/event/318066/
デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / Innovation in Frontend Development Processes through Design Systems and Component-Oriented Architecture
フロントエンドカンファレンス北海道でお話ししたスライドです Proposal: https://fortee.jp/frontend-conf-hokkaido-2024/proposal/ebd98e0a-241c-4443-aa98-300af113b40d # URL YouTube…
DroidKaigi 2024 での発表資料
ここ数年「デザインシステム」はIT業界を中心に流行語になっていますが、どうにも「〜システム」と呼んでしまっていることと、実際にそれが指している概念がはっきりしないが故に、私にとっては積極的に使いたくない語になってしまっています。皆さんが「デザインシステム」の語で言及しているものは、本当に同じ概念を指しているのでしょうか？ 定義にあたってみる「デザインシステム」「Design system」の言葉の定義を軽く調べてみました。 とりあえずWikipedia（英語）にはこのように書かれています。 デザインシステムは、任意のアプリケーションを組み立てるのに用いる再利用可能なコンポーネントと標準規約の集まりです。デザインシステムは、モバイルアプリケーションやWebサイトなどデジタルプロダクトのデザインと開発をサポートします。パターン、コンポーネントライブラリ、デザイン言語、スタイルガイド、コード化さ
プロダクト全体のソースコードを解析して、提供しているモジュールおよびそれを使用しているプロダクトごとに個別に自動集計する仕組みとその実装方法について解説します。
@storybook/cli - Storybook
さまざまな企業やチームのデザインシステムプロジェクトを支援し、アドバイザーとして関わる中で、必ず話題になるテーマの一つが「どうやってデザインシステムやチームそのものの費用対効果を社内で説得するか？」というのがあります。 結論から言うと、デザインシステムは企業活動の一環であり、成果物としてのアウトプットでない事を理解する必要があります（もちろんFigmaファイルを作ることでもない！😁）。つまり、デザインシステムを進めるためには、企業活動として必要なコストの予算化（しかもかなりの額！）は避けて通れません。勢いだけでできるのは、デジタルネイティブな企業のアプリ開発ぐらいです、と伝えながら、一緒に悩みながら時間かけて組織改革を一歩づつ進むしかないのが現実です。 とはいえ、そうした問題意識があって前に進めない組織の方が、むしろ健全だと思う今日このごろ。 デジタルネイティブ企業、つまり本業がデジタル
プロトタイプの制作時間が3分の1に！──サイバーエージェントのデザインシステム「Spindle」におけるFigma活用術
ProductZine Day＆オンラインセミナーは、プロダクト開発にフォーカスし、最新情報をお届けしているWebメディア「ProductZine（プロダクトジン）」が主催する読者向けイベントです。現場の最前線で活躍されているゲストの方をお招きし、日々のプロダクト開発のヒントとなるような内容を、講演とディスカッションを通してお伝えしていきます。
はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。 既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。 デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。 今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多かったため、自分が知らない誰かの知見に助けられたように、微力ながらコミュニティに貢献するべく、未完の状態でお見せすることにしました。 Framework by Figma登壇資料 後でFigma Communityにも掲載します シチュエーションにおける最適解繰り返しますが、今回説明するような煩雑で、複雑で、面倒な、プロセス
2024年のfreee技術の日の登壇で使用したスライドです。 配信動画は以下です。 https://www.youtube.com/live/Vih4vuNxPT4?si=43vKDWrZOFF_0rau&t=2072 合わせて「マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデ…
Ubie Vitals
Design Principles デザイン上において目指すべき指針を言語化したものがDesign Principles（デザイン原則）です。誰でも、効率よく、迷わずに、Ubieらしい表現をするための基礎です。 Learn More
こんにちは、ほぼフルタイムのフリーランスとして株式会社mikanでデザイナーをしています、三上蒼太(@sota_mikami)です。 英語アプリmikanは、もうすぐ10歳になる長寿アプリです。アプリ自体はシンプルさを保ち続けていますが、多くの実験が積み重ねられてきた歴史があります。 ただその歴史ゆえに古い画面のデザインデータが一部なかったり、設計意図や当時の背景がわからず評価の難しい画面があったりと、デザインデータと意図を管理するための標準化が一つの重要な課題となっていました。 今回は、その一環としてmikanにおけるデザインデータの命名規則を策定した話を記録します。 なぜ命名規則を作ったのか？デザインファイルにおける命名規則を策定するのは、チーム内での共通認識を高めて効率的なコミュニケーションを図ることが目的です。 命名規則がないと、デザイナーごとに異なる命名が行われ、他のメンバーがフ
デジタル庁のサービスデザインユニットは、2021年9月のデジタル庁発足当時から行政におけるサービスデザインの実践を続けています。 今回、第一線でサービスデザインを実践している諸外国行政機関のデザインチームを招聘し、デジタル庁のサービスデザインチームのメンバーと、行政におけるサービスデザインの実践知の共有と議論を行うデザインミートアップ「Service Design in Gov #0」を開催いたします。デジタル庁は本取組により、国際的にも行政におけるサービスデザインのハブを目指します。 本フォーラムは2023年10月20日（金）に開催し、オンラインでの配信を予定しています。 どなたでもインターネット上でご参加いただくことが可能です。 デザインミートアップ「Service Design in Gov #0」について目的行政におけるサービスデザイン・アクセシビリティの先進事例や課題の共有実践者
これまでさまざまな組織のデザインシステム構築や運用を支援してきたグッドパッチ。本連載ではデザインシステムにフォーカスし、その概要や歴史、導入から運用、構築にいたるまで網羅的にお届けします。第5回は「デザインシステムの構築フェーズ」についてです。 こんにちは。グッドパッチのUIデザイナーの乗田です。前回の記事では、グッドパッチがデザインシステム構築を支援する際の準備フェーズで行う4つの作業について紹介しました。第5回では、「デザインシステムの構築フェーズ」をテーマにお届けします。 はじめに 本連載では、デザインシステムは単なるデザインのコンポーネント集ではなく「組織の課題を解決するためのツール群である」ということをお伝えしてきました。 今回はこの考えにもとづき、組織課題がとくに発生しやすく、構築することで価値が生まれやすいであろうプロダクトデザイン領域に焦点を当て「デザインシステムの構築」に
デザインシステムの構築と運用そしてその本質
Generate Design Systems quickly - Figr Identity (FREE BETA) | Figma
Boost Your Figma Designs with Our Easy-to-Use Design System Generator: 🚀 Quick Design System Setup: Build design systems fast in Figma. Figr Identity helps you create and manage elements like styles and variables easily, making your design consistent and on-brand. 🔍 Seamless Figma Integration: ...
デザインの公共性 | Figma Blog
デジタル技術をユーザーフレンドリーにするためには、デザインの力が欠かせません。表層的な部分のみならず、サービス全体のデザインから携わり、さらにそのナレッジを共有していくことでよりスマートな課題解決に結びつけられます。 デジタル庁では、Figmaのデザインプラットフォームなどの各種ツールを導入し、誰一人残されない、人にやさしいデジタル化に取り組んでいます。ここでは、Figmaが主催「デザイン経営2023」カンファレンスから、デジタル庁 サービスデザインユニットのマネジャーを務める鈴木伸緒氏講演内容を抜粋し、行政におけるデザインの役割についてご紹介します。 イントロダクション日本の行政サービスのデジタル化を推進する組織として、2022年に発足した『デジタル庁』。そのミッション「誰一人取り残されない、人に優しいデジタル化を。」のもとに、省庁や自治体をまたいだデータ連携や、デジタル技術を用いた安全
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今日は、WEB上に公開されているデザインシステムをとにかくたくさん集めました。業種や規模、国内外の企業問わず、デザインシステム（スタイルガイドも含む）と名の付くものを、見つけられた範囲ですべて収集しています。 多数のデザインシステムの比較・検討をしたい際など、データベース的にお役立ていただけたら幸いです。 【アップデート履歴】 ・2024/02/08 一休,Wantedly,W3C,パリ五輪2024を追加しました ※以下の目次、異次元の長さになっています。開く際はご注意ください…🐲 はじめに🗒掲載方法について「企業名＋URL＋スクリーンショット」を掲載しています。スクリーンショットについては、1枚目は全体の雰囲気が掴めるもの、2枚目はテキスト入力系コンポーネントの説明ページを選んでいます。 💡Tips｜複数のURLを
The two-dimensional Design System Attributes Framework graph. Illustration by author using Miro. Naming things is hard. Sometimes, classifying the things you’ve just named is even harder. As a content modelist, I’ve had my fair share of battles with the process of classification. I wouldn’t exactly say it’s more of an art than a science — but then again, not even the periodic table is systematical
こんにちは、プロダクトデザイン本部 ダイレクターのfumiya(@tyoys00)です。 社外に向けて記事を発信するのはだいぶお久しぶりになります。 皆さま、息災におすごしでしょうか？ さて今回は「週間プロデザ by SmartHR」の一本目の記事として社内のプロダクトデザイナーに向けて執筆したドキュメントを公開します。 このドキュメントはマルチプロダクト戦略を取る事業においてプロダクトデザイン組織はどのように戦うべきかをアジテーション気味に執筆したものです。 マルチプロダクト戦略におけるUIの一貫性の意義、客観的な基準に基づく設計がなされていることの商品価値、プロダクトデザイナーが組織としてデザインを行うことの重要性を声高に（時に空回りしながら）書いたものになります。 いま現在（2024年4月時点）、プロダクトデザイン本部ではプロダクトデザイナー総出でSmartHR デザインシステムの拡
こんにちは、ソーシャル経済メディア「NewsPicks」の吉川（よっしー）です。 この記事は NewsPicks アドベントカレンダー 2023 の12日目の記事です。昨日はtakehiloさんによる『TCAでGithubリポジトリ検索アプリを作ってみよう』でした！ 前回、ダークモード対応のカラートークンについてまとめました。 今回のnoteのテーマは「コンポーネントの命名規則」です。コンポーネントを作るたびに地味に悩む命名に向き合ってみました。 「デザインデータの命名規則を決めたいけど考える時間がない」「実装との共通化は後回しで、整理しやすい構造にしておきたい」と考えている方に、参考の一つになれば幸いです。 BEMとはBEM（Block-Element-Modifier）は、ウェブ開発においてコードの構造化と保守性を向上させるために広く使用されている命名規則です。 Block（塊）：Pa
クロンのデザインシステムを作っている話
この記事は MICIN Advent Calendar 2023 の2日目の記事です。 前回はmanimotoさんの「組織の異動や退場 または私は如何にして心配するのを止めてGoogleグループを削除するようになったか」でした。 私は株式会社MICINのオンライン医療事業部でフロントエンドエンジニアをしているdoutoriと申します。 弊社で提供しているサービス、クロンのデザインシステムを現在進行形で作っています。 クロンのサービスブランド クロンのブランドとしては主に「オンライン診療クロン」「クロンお薬サポート」「クロンスマートパス」の3軸でサービスを展開しています。 これらに対して、医療機関向け・薬局向け・患者向け・管理者向けと必要に応じた数のサービスを日々開発しています。 デザインシステムを作るに至ったわけ それぞれのサービスに対して独立した体制で開発を進めてはいるのですが、開発頻度
※途中入退室可 登壇者紹介 takanorip / Ubie株式会社 デザインエンジニア 元フロントエンドエンジニア、現デザインエンジニア。症状検索エンジン「ユビー」やユビー 病気のQ&Aの開発、デザインシステム構築などに携わっている。趣味は筋トレと料理。 X: https://twitter.com/takanoripe uto-usui / note株式会社 UXエンジニア デザインスタジオでキャリアをスタート、その後Condé Nastに入社し、WIREDやGQなど大規模メディアのフロントエンドやクリエイティブディレクションに従事。2021年にnoteに入社し、UXエンジニアとしてデザインシステムやアクセシビリティ向上などを中心に、デザインとエンジニアリングの横断的課題に取り組んでいる。 X: https://twitter.com/uto_ao note: https://note
2024年4月23日に行われたFigma Frameworkの登壇資料です。 ## セッション概要 Gaudiyでは漫画やゲーム、アイドルといった様々なジャンルのファンコミュニティを提供しています。本セッションではそれぞれのIPが持つ世界観に寄り添い、IPらしさを表現するためのマルチブランド…
edit_calendarHow to join the calendarYou can join the calendar by selecting an available date and registering the URL of the article you wish to link to. If a slot is available, you can go back to a past date to join!
デジタル庁のサービスデザインユニットは、2021年9月のデジタル庁発足当時から行政におけるサービスデザインの実践を続けています。 今回、第一線でサービスデザインを実践している諸外国行政機関のデザインチームを招聘し、デジタル庁のサービスデザインチームのメンバーと、行政におけるサービスデザインの実践知の共有と議論を行うデザインミートアップ「Service Design in Gov #0」を開催いたします。デジタル庁は本取組により、国際的にも行政におけるサービスデザインのハブを目指します。 本フォーラムは2023年10月20日（金）に開催し、オンラインでの配信を予定しています。 どなたでもインターネット上でご参加いただくことが可能です。 デザインミートアップ「Service Design in Gov #0」について 目的 ● 行政におけるサービスデザイン・アクセシビリティの先進事例や課題の
某DSチャネルで上がってきて目に止まり、わりと参考になるな、と思って9月頃に翻訳したまま寝かしていた記事🤣ですが、師走の忙しい時期とはいえ、頑張って🎄前に公開。 デザインシステム Advent Calendar 2023 の20日目の記事です。 一部のメガベンチャーみたいに豊富な社内リソースがある企業は別として、たぶん、現状のほとんどの国内企業の状況ってこんなんじゃないのかな？と思います。昨今、「デザインシステムやってます！」ってのは会社のブランディングや採用時の強みにもなるっぽいですが、よく聞く話は海外のように専任リソースはない状況が実情。 とはいえ、海外もGoogleやAtlasiaon、Neflixみたいな大手なら別ですが、殆どの場合は経験上、AORなデジタルエージェンシーに基本的な部分を一緒に構築して一緒に育てていくのが主流なのかな？と思います。 実際、例えばNikeなんかも初
デザインシステムチームとQAエンジニアの取り組み：kintoneのユーザー体験を最高にするために｜blindsoup
この記事は、CYBOZU SUMMER BLOG FES '24 (Design Stage) DAY 4の記事です。 kintone Design Systemチームは、kintoneの「ユーザー体験を最高にする」をミッションに活動しています。その手段のひとつとして、kintone Design Systemを開発・運用・啓発しています。 この記事では、ユーザー体験を最高にするために、kintone Design Systemチームから働き掛け、QA（品質保証）エンジニアが実施している試験の観点を拡充した活動を紹介します。 なぜkintone Design SystemチームがQAエンジニアに働きかけるのかkintoneとして一貫して提供したいユーザビリティ・アクセシビリティの品質をQAエンジニアが試験することで、プロダクト全体の品質向上につながるためです。これにより、ユーザー体験の向上
Figmaのプラグイン使ってますか？作業時間を圧倒的に短縮してくれるプラグインが続々と無料で公開されています。Figmaの大ファンの皆さんと作業効率アップのためのプラグインを共有していきたいと思います。気に入ったプラグインがあれば、ぜひ試してみてください。 １、Breakpoints
企業の資産となる仕組みをデザインするー三井住友銀行さまとのデザインシステム設計・構築の取り組み｜ajike丨UX Design
デザインを用いて本質的な課題解決を提案する株式会社アジケ（以下、アジケ）は、「企業の資産となる仕組みをつくること」をデザインの対象にしています。 今回は、中長期にわたりパートナーとして様々なプロジェクトに取り組んでいる株式会社三井住友銀行（以下、SMBC）と、「デザインシステム」の設計・構築を通して組織課題にアプローチした取り組みをご紹介いたします。 デザインシステムとは サービスやプロダクトに関するすべてのデザインに対し、一貫性をもたせて提供するための考え方や仕組みのこと。デザインの共通パーツのルールを定めたもので、対面・非対面を問わず各チャネルのアウトプットで統一した体験の構築を目指すものです。 2021年度のグッドデザイン賞では、SMBCのデザインを活用した顧客体験の向上の取り組みの一つとして、デザインシステムも受賞の対象となりました。 ※今回のプロジェクトに携わったメンバーメインビ
翻訳記事：プロジェクト・メタクロシス：如何にしてUIキットを世界的なムーブメントに変えたか @frog のデザインシステム｜Nobuya Sato
翻訳記事：プロジェクト・メタクロシス：如何にしてUIキットを世界的なムーブメントに変えたか @frog のデザインシステム お仕事する機会がある方々には、デザインシステムを作るというのは、かっこいいデザイン原則を決めることでも、きれいなFigmaデータの構造を作ることでも、力技でロジカルっぽいデザイントークンを作ることでもなく、デザインと実装の運用方法（DesignOps）や継続的な組織体制（DesignOrg）を作ることだよく伝えてる。 とはいえ、おしゃれなデザインシステムのドキュメントのウェブサイトが公開することのほうが実績っぽくて組織としてもやってる感あるあるでどうしてもそちらに注目されがちだよなぇ、という現場ゆえの悩み（や勘違い）もよく聞く。 そんなときに、運良く？よい感じの投稿がforgのmediumにあったので（特に最後のDSの図が好き）日本語に訳してみました。（翻訳の許諾をく
色を決めよう -デザインシステム構築奮闘記⑤-｜ヌマタ
こんにちは！atama plus プロダクトデザイナーのヌマタ @n_m_ta です。 この連載は、スタートアップのインハウスデザイナーたちが、デザインシステムを1から構築する様子をまとめ、誰かの参考になればという趣旨ではじめました。 デザインシステムの構築に至るまでの経緯や、プロダクトの概要についてはこちらをご覧ください。 前回は、ムードボードを作りました。今回は、コントラスト比を意識しながら色を決めた話についてお伝えします。 本記事は、2019年に実施した取り組みをまとめたものです。 これは atama plus Advent Calendar 2023 と デザインシステム Advent Calendar 2023 の5日目の記事です。 コントラスト比が足りないムードボードを作り、言葉と見た目の両面から「らしさ」の認識合わせができました。次に、私たちは色を決めることにしました。このタ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
米政府系サイトの常識を変えた「デザインシステム」革命
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
HeadlessなUIライブラリを利用する価値
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
「デザインシステム」がよくわからないので、理解の仕方を変えてみる｜usagimaru
ソースコードを解析して社内向けUIライブラリの使用状況を自動で集計する
翻訳記事：デザインシステムチームの投資収益率（ROI）｜Nobuya Sato
Brand Guidelines - Duolingo
IPの世界観に寄り添う、マルチブランドなカラーシステム設計論｜TORAJIRO
デザインプリンシプルのつくりかた（freee技術の日）
デザインファイルにおける命名規則を策定した話【Figma】｜三上蒼太 / Sota Mikami
デザインミートアップ「Service Design in Gov #0」を開催します｜デジタル庁
4つの要素で考える、プロダクトデザインのためのデザインシステム構築とは
日本・海外のデザインシステム総まとめ【56事例＋α】｜akane
How to classify your design system—a framework
マルチプロダクト戦略における「使いやすさ」の商品価値を確立する｜週刊プロデザ by SmartHR
デザインコンポーネントの命名規則にBEMを取り入れる｜Yoshi
【増枠しました】半熟デザインシステム vol.1 (2024/04/24 19:00〜)
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
デザインシステムのカレンダー | Advent Calendar 2023 - Qiita
デザインミートアップ「Service Design in Gov #0」開催のお知らせ
翻訳記事：デザインシステムチームなしでデザインシステムを構築する｜Nobuya Sato
10個の無料で使えるベストFigmaプラグイン集めました。｜Hitomi Bremmer UI UX