米政府系サイトの常識を変えた「デザインシステム」革命
官僚主義からスタートアップ精神へ——。およそ10年前、新サービスの立ち上げ失敗を機に生まれた米国政府の新組織が作ったWebデザインシステムは、今では160サイト・11億ページビュー規模にまで広がりを見せている。 by Jon Keegan2024.07.03 412 9 この記事の3つのポイント 米国には公共デザインシステムとカスタムフォントがある 政府系Webサイトのアクセシビリティと一貫性を高めることが目的 これらのプロジェクトでは透明性や協働、継続的な改善が重視されている summarized by Claude 3 米国には、公式のWebデザインシステムとカスタムフォントがある。この公共デザインシステムは、政府のWebサイトを単に美しいものにするだけでなく、すべての人にとってアクセスしやすく機能的なものにすることを目的としている。 インターネットが普及する以前、米国民は印象的な石柱
マルチプロダクト戦略における「使いやすさ」の商品価値を確立する｜週刊プロデザ by SmartHR
こんにちは、プロダクトデザイン本部 ダイレクターのfumiya(@tyoys00)です。 社外に向けて記事を発信するのはだいぶお久しぶりになります。 皆さま、息災におすごしでしょうか？ さて今回は「週間プロデザ by SmartHR」の一本目の記事として社内のプロダクトデザイナーに向けて執筆したドキュメントを公開します。 このドキュメントはマルチプロダクト戦略を取る事業においてプロダクトデザイン組織はどのように戦うべきかをアジテーション気味に執筆したものです。 マルチプロダクト戦略におけるUIの一貫性の意義、客観的な基準に基づく設計がなされていることの商品価値、プロダクトデザイナーが組織としてデザインを行うことの重要性を声高に（時に空回りしながら）書いたものになります。 いま現在（2024年4月時点）、プロダクトデザイン本部ではプロダクトデザイナー総出でSmartHR デザインシステムの拡
IPの世界観に寄り添う、マルチブランドなカラーシステム設計論｜TORAJIRO
はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。 既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。 デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。 今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多かったため、自分が知らない誰かの知見に助けられたように、微力ながらコミュニティに貢献するべく、未完の状態で状態でお見せすることにしました。 Framework by Figma登壇資料 後でFigma Communityにも掲載します シチュエーションにおける最適解繰り返しますが、今回説明するような煩雑で、複雑で、面倒な、プ
デザインの公共性 | Figma Blog
デジタル技術をユーザーフレンドリーにするためには、デザインの力が欠かせません。表層的な部分のみならず、サービス全体のデザインから携わり、さらにそのナレッジを共有していくことでよりスマートな課題解決に結びつけられます。 デジタル庁では、Figmaのデザインプラットフォームなどの各種ツールを導入し、誰一人残されない、人にやさしいデジタル化に取り組んでいます。ここでは、Figmaが主催「デザイン経営2023」カンファレンスから、デジタル庁 サービスデザインユニットのマネジャーを務める鈴木伸緒氏講演内容を抜粋し、行政におけるデザインの役割についてご紹介します。 イントロダクション日本の行政サービスのデジタル化を推進する組織として、2022年に発足した『デジタル庁』。そのミッション「誰一人取り残されない、人に優しいデジタル化を。」のもとに、省庁や自治体をまたいだデータ連携や、デジタル技術を用いた安全
クロンのデザインシステムを作っている話
この記事は MICIN Advent Calendar 2023 の2日目の記事です。 前回はmanimotoさんの「組織の異動や退場 または私は如何にして心配するのを止めてGoogleグループを削除するようになったか」でした。 私は株式会社MICINのオンライン医療事業部でフロントエンドエンジニアをしているdoutoriと申します。 弊社で提供しているサービス、クロンのデザインシステムを現在進行形で作っています。 クロンのサービスブランド クロンのブランドとしては主に「オンライン診療クロン」「クロンお薬サポート」「クロンスマートパス」の3軸でサービスを展開しています。 これらに対して、医療機関向け・薬局向け・患者向け・管理者向けと必要に応じた数のサービスを日々開発しています。 デザインシステムを作るに至ったわけ それぞれのサービスに対して独立した体制で開発を進めてはいるのですが、開発頻度
翻訳記事：デザインシステムチームなしでデザインシステムを構築する｜Nobuya Sato
某DSチャネルで上がってきて目に止まり、わりと参考になるな、と思って9月頃に翻訳したまま寝かしていた記事🤣ですが、師走の忙しい時期とはいえ、頑張って🎄前に公開。 デザインシステム Advent Calendar 2023 の20日目の記事です。 一部のメガベンチャーみたいに豊富な社内リソースがある企業は別として、たぶん、現状のほとんどの国内企業の状況ってこんなんじゃないのかな？と思います。昨今、「デザインシステムやってます！」ってのは会社のブランディングや採用時の強みにもなるっぽいですが、よく聞く話は海外のように専任リソースはない状況が実情。 とはいえ、海外もGoogleやAtlasiaon、Neflixみたいな大手なら別ですが、殆どの場合は経験上、AORなデジタルエージェンシーに基本的な部分を一緒に構築して一緒に育てていくのが主流なのかな？と思います。 実際、例えばNikeなんかも初
デザイントークンって何？｜seya
「デザイントークン」 最近はよく使われている言葉だと思うのですが、意外と日本語での情報がないのでまとめてみました。 W3C の定義実はデザイントークンには W3C という標準化団体でのワーキンググループがあります。 これが絶対の定義と思う必要はないと思いますが、共通の定義としては便利だと思うので引用するとこの W3C では Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. 訳: デザイントークンとは、色、スペーシング、タイポグラフィのスケールなど、デザインシステムを構成する不可分なピースのことです。 Design Tokens W3C Community Group https://github.com/design-tokens/commun
デザインシステムを導入する為にやって良かったこと５選｜YUCCA
こんにちは。クラウドワークスでデザイナーをしているYUCCAです。 今回「デザインシステムを導入する為にやって良かった事５選」のお話をしたいと思いますが、デザインシステムと一言で言ってもいろんな側面を持ち抽象度が高いので、前提としてこの記事でのデザインシステムのスコープや私たちのデザインシステム「norman」について軽く紹介させてください。 クラウドワークスのデザイン基盤チームでは、スケーラビリティを持ちながらUIデザインの品質を高められようにする為の一貫した仕組み（デザインシステム）づくりをしています。 このデザインシステムを私たちは「norman」と呼んでいます。 クラウドワークスで使用されている自社CSSフレームワークは2013年から根本的には変わっていない背景があります。なぜ変わっていないのかをここでは省略しますが、10年くらい前のものなので、レガシーなデザインが引き起こす様々な
色を決めよう -デザインシステム構築奮闘記⑤-｜ヌマタ
こんにちは！atama plus プロダクトデザイナーのヌマタ @n_m_ta です。 この連載は、スタートアップのインハウスデザイナーたちが、デザインシステムを1から構築する様子をまとめ、誰かの参考になればという趣旨ではじめました。 デザインシステムの構築に至るまでの経緯や、プロダクトの概要についてはこちらをご覧ください。 前回は、ムードボードを作りました。今回は、コントラスト比を意識しながら色を決めた話についてお伝えします。 本記事は、2019年に実施した取り組みをまとめたものです。 これは atama plus Advent Calendar 2023 と デザインシステム Advent Calendar 2023 の5日目の記事です。 コントラスト比が足りないムードボードを作り、言葉と見た目の両面から「らしさ」の認識合わせができました。次に、私たちは色を決めることにしました。このタ
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 | プレスリリース | フリー株式会社
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■マジ価値サマリー（このお知らせでお伝えしたいこと） ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム開発に携わるエンジニアやデザイナーの皆様に、「vibes」を利用してシステムを構築いただく、またはコード等を参照いただくことで、社会全体としてアクセシビリティ向上の取り組みが広がることを目指しています freee株式会社（本社：東京都品川区、CEO：佐々木大輔、以下「freee」）は、freeeがこれまで培ってきたアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes（読み：ヴァイブス）」を公開しました。本デザインシステムを公開するこ
「デザインシステム」がよくわからないので、理解の仕方を変えてみる｜usagimaru
ここ数年「デザインシステム」はIT業界を中心に流行語になっていますが、どうにも「〜システム」と呼んでしまっていることと、実際にそれが指している概念がはっきりしないが故に、私にとっては積極的に使いたくない語になってしまっています。皆さんが「デザインシステム」の語で言及しているものは、本当に同じ概念を指しているのでしょうか？ 定義にあたってみる「デザインシステム」「Design system」の言葉の定義を軽く調べてみました。 とりあえずWikipedia（英語）にはこのように書かれています。 デザインシステムは、任意のアプリケーションを組み立てるのに用いる再利用可能なコンポーネントと標準規約の集まりです。デザインシステムは、モバイルアプリケーションやWebサイトなどデジタルプロダクトのデザインと開発をサポートします。パターン、コンポーネントライブラリ、デザイン言語、スタイルガイド、コード化さ
行政におけるデザインシステムのあり方に関する調査研究 | AIS | 一般社団法人 行政情報システム研究所
本調査研究は、行政機関があるべきデザインを一貫性を持ってユーザーに提供するためのデザイン原則やライブラリ、ルール等を定めた「デザインシステム」をいかに企画・開発・運用していくべきかを明らかにすることを目的として実施したものです。 政府は、「デジタル社会の実現に向けた重点計画」において、政府機関が提供する情報に誰もが素早くアクセスできるように、各府省庁のウェブサイトのデザインやコンテンツ構成等の標準化・統一化を図るとしており、その具体策として、標準化・統一化のための原則・ルール等をまとめた「デザインシステム」の策定を進めています。 デザインシステムとは、あるべきデザインを一貫性を持ってユーザーに提供するためのデザイン原則やライブラリ、ルール等を定めたものです。ウェブサービスが役所の窓口に代わり、住民との第一の接点になりつつある今、デザインシステムの構築は、行政機関にとって避けて通れない課題と
翻訳記事：プロジェクト・メタクロシス：如何にしてUIキットを世界的なムーブメントに変えたか @frog のデザインシステム｜Nobuya Sato
翻訳記事：プロジェクト・メタクロシス：如何にしてUIキットを世界的なムーブメントに変えたか @frog のデザインシステム お仕事する機会がある方々には、デザインシステムを作るというのは、かっこいいデザイン原則を決めることでも、きれいなFigmaデータの構造を作ることでも、力技でロジカルっぽいデザイントークンを作ることでもなく、デザインと実装の運用方法（DesignOps）や継続的な組織体制（DesignOrg）を作ることだよく伝えてる。 とはいえ、おしゃれなデザインシステムのドキュメントのウェブサイトが公開することのほうが実績っぽくて組織としてもやってる感あるあるでどうしてもそちらに注目されがちだよなぇ、という現場ゆえの悩み（や勘違い）もよく聞く。 そんなときに、運良く？よい感じの投稿がforgのmediumにあったので（特に最後のDSの図が好き）日本語に訳してみました。（翻訳の許諾をく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デジタル庁デザインシステムβ版
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
【増枠しました】半熟デザインシステム vol.1 (2024/04/24 19:00〜)
Colors & fonts - Home
@storybook/cli - Storybook
デザインシステムのカレンダー | Advent Calendar 2023 - Qiita
GOV.UK Design System: contribution model for new components and patterns