デジタル庁デザインシステムβ版
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。 デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。
本書は Figma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、Brand Guidelineに則った内容となっております。(Brand Guideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ
４年間、7色だけでUIをデザインし続けた話｜コウノ アスヤ
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
2024-04-19に開催されたBARフロントえんどう #2 「CSS Library / Framework」（サイボウズ）での登壇資料です。 イベント → https://cybozu.connpass.com/event/311066/
Design System 1.4.1 | Figma
デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。 デザインシステムについての詳細や更新履歴はデジタル庁ウェブサイトをご覧ください。 ※Figma Communityにて公開中のデータは、Figma Communityの規定によりCC BY 4.0のライセンスが表記されます。ただし、このファイル内のイラストレーション・アイコン素材に関してはデジタル庁ウェブサイトに掲載の「イラストレーション・アイコン素材利用...
2024-03-27に行われたFindy『フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~』の登壇資料です https://findy.connpass.com/event/312625/
ここ数年「デザインシステム」はIT業界を中心に流行語になっていますが、どうにも「〜システム」と呼んでしまっていることと、実際にそれが指している概念がはっきりしないが故に、私にとっては積極的に使いたくない語になってしまっています。皆さんが「デザインシステム」の語で言及しているものは、本当に同じ概念を指しているのでしょうか？ 定義にあたってみる「デザインシステム」「Design system」の言葉の定義を軽く調べてみました。 とりあえずWikipedia（英語）にはこのように書かれています。 デザインシステムは、任意のアプリケーションを組み立てるのに用いる再利用可能なコンポーネントと標準規約の集まりです。デザインシステムは、モバイルアプリケーションやWebサイトなどデジタルプロダクトのデザインと開発をサポートします。パターン、コンポーネントライブラリ、デザイン言語、スタイルガイド、コード化さ
会社で複数の新規事業を立ち上げる機運が高まったことをきっかけに社内向けUIライブラリを開発し、限定公開して利用を始めました。 本記事ではReactで社内向けUIライブラリを開発・ビルド・公開・布教するためのアレコレを共有します。 以下のような話題について知りたい方に特に読んでほしいです。 Private Packageの作り方、配布の方法のイメージがつかない方 CommonJSとES Modules、今はどちらでビルドするのがいいのか知りたい方 ライブラリの作り方について網羅的に知りたい方 前提 利用側のアプリケーションはNext.js固定を前提とする Tailwind CSSを内部的には利用する 利用側のアプリケーションはパフォーマンス（Lighthouseスコア）重視することが多い 社内の様々なレベルのエンジニアがContributeする可能性がある 端的に言うと、社内のプライベートリ
こんにちはスマートバンクのデザイナーのputchomです。普段は「家計簿プリカ B/43」のプロダクトデザインやデザインシステムの構築を担当しています。 先日、CreatorZineさんでプロダクトデザインに関するスマートバンクの連載記事を書かせていただいたのですが、今回はその中でお伝えしきれなかった「デザイントークンの設計」についてご紹介しようと思います。 デザイントークンとは？ そもそもデザイントークンとは、色、タイポグラフィ、サイズ、不透明度、影などのデザインをするための最小要素のことであり、スマートバンクではデザインの一貫性を保ったり、関わるメンバーがよりデザインに対する共通認識を持てるようにして、プロダクトの価値提供を早くするために定義しています。 まず完成形です。このあと説明する様々な工程を経て、以下のようなデザイントークンをJSONで定義しました。（すべて記述するとかなり長く
デザインシステム作成Tips 9つ
はじめに エンジニアとしてデザインシステムを立ち上げてバージョン1を作る機会があったので、そのときに学んだTipsを共有します。 そもそもデザインシステムは「生産性を上げる」ことと「統一的なUI/UXを提供する」ことが目的ですが、このTipsの内容もいずれもその目的のためのものです。 定義する面でのTips 1. コンポーネントのレベル分けを定義する UI上ではある要素を組み合わせて別の要素が作られることがあります。例えばテキストとフレームからボタンが作られたり、ボタンを並べてページネーションを作ったり。 レベル分けしてコンポーネントそれぞれがどのレベルに属するのかを定義することで、これらの情報構造を整理することができます。アトミックデザインがその代表例ですね。 例えば以下のように分けることができます。 Level0: Styles UIを作る最小の要素。Typography, Color
Tailwind CSSでデザインシステムを構築する［後編］ ～デザイントークンを定義するときに何を議論すべきか 2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設定に落とし込む過程はもちろん、デザイナーが開発者とどのように協力しあうべきかについても論じています。 本記事の内容は、書籍の最終章に当たる部分です。ほかの章の内容に言及していたり、書籍内ですでに使われた用語が説明なく登場したりするのを防ぐため、書籍の原文から一部を変更しています。 前回の記事の最後で、デザインシステムを構築する際にコンポーネン
この記事は毎週必ず記事がでるテックブログ "Loglass Tech Blog Sprint" の 9 週目の記事です！ 1年間連続達成まで 残り 44 週 となりました！ はじめに こんにちは、株式会社ログラスでエンジニアの浅井（@mixplace）です。開発チームのいちメンバーとして、チームの開発生産性改善を行う傍ら、デザインシステムの構築に携わっています。 ログラスもプロダクトローンチをして 3 年が経ちました。日々新しい機能の追加や改修が入っていく中で、開発チームも増え、チーム内でアウトカムを出していくことが増えてまいりました。 機能が増え画面数も増えてくると、比例するように「UX負債」や「共通UIコンポーネントの技術的負債」も目に付くことが増えてくるようになります。 このような課題について、プロダクト全体の品質や一貫性担保する観点で「デザインシステム」を構築して運用していくことが
デザインシステムを育てていく｜sakito
はじめに ここ最近はデザインシステムの構築や支援を行なっています。そこで、デザインシステムを作ることが目的になっていることを感じることがあります。私はデザインシステムは作ることよりも、育てていく考え方が重要だと思っているので、その考えについてお伝えします、どなたかの参考になれば幸いです。 デザインシステムとは？まずはデザインシステムそのものについてです。デザインシステムの事例から学んでみます。 GoogleのMaterial DesignGoogleのMaterial Designは「チームがより高品質なデジタル体験を各OS上で構築するためのもの」と表しています。 Material is a design system created by Google to help teams build high-quality digital experiences for Android, iO
Design Systems Database: Surf among top‑notch Design Systems
Best-in-class Design Systems with components and foundations references from top-tier tech companies and leading UI teams
デザインシステムとは？ 簡単にいうと、デザインシステムは、デザインに関することを体系化・構造化したものです。 具体的には、デザインの目的・原則やデザインの基準を定めるVIガイドライン、UIパターンやコンポーネント、ライブラリなどの再利用できるものが含まれます。 そのため、デザインシステムを導入することで、 1つのプロダクトで、200色の白が存在すること や 見た目、機能が同じものを何個も存在することがなくなるため、 大規模なプロダクトやサービスをチームで開発・運用していくのが効率的になります。 また、デザインとコードの両方で一貫性のある見た目にもできるため、 デザインの苦手なエンジニアでも、簡単に、デザインの意図に沿ったUIやクオリティの担保されたUIを作成することができます。 知っておきたいデザインシステム ○ 国内のデザインシステム 国内の企業・組織が公開しているデザインシステムを10
Flink SQL: �the Challenges of Implementing a Streaming SQL Engine
これまでさまざまな組織のデザインシステム構築や運用を支援してきたグッドパッチ。本連載ではデザインシステムにフォーカスし、その概要や歴史、導入から運用、構築にいたるまで網羅的にお届けします。第5回は「デザインシステムの構築フェーズ」についてです。 こんにちは。グッドパッチのUIデザイナーの乗田です。前回の記事では、グッドパッチがデザインシステム構築を支援する際の準備フェーズで行う4つの作業について紹介しました。第5回では、「デザインシステムの構築フェーズ」をテーマにお届けします。 はじめに 本連載では、デザインシステムは単なるデザインのコンポーネント集ではなく「組織の課題を解決するためのツール群である」ということをお伝えしてきました。 今回はこの考えにもとづき、組織課題がとくに発生しやすく、構築することで価値が生まれやすいであろうプロダクトデザイン領域に焦点を当て「デザインシステムの構築」に
Creating a flexible design token taxonomy for Intuit’s Design System
This article covers how we evolved our tokens at Intuit to create a flexible taxonomy for a small but powerful set of semantic tokens. Intuit is the parent company for some well-known products such as Quickbooks, TurboTax, Mint, Mailchimp, and Credit Karma. Each product has their own design system. Several of them have their own dedicated design systems teams, as well as both Product and Marketing
Introducing Spectrum 2: Our vision for the future of Adobe experience design
Introducing Spectrum 2: Our vision for the future of Adobe experience design A preview of the comprehensive update coming to Adobe's design system Imagine you’re designing a house. Your first step might be to draw a picture. To turn that picture into a house would require the input of many experts—architects, engineers, and builders—and would involve planning, teamwork, and time with each collabor
Chromaticを導入しました！
はじめに 半年くらい前にプロジェクトにStorybook及びChromaticを導入したのでその知見を今更まとめたいと思います。 Chromaticは開発者１人だけではなくエンジニアチーム全体、更にはデザイナーやPM/PdMみんなで使っていくことによってその効果が何倍にもなるツールです。Chromaticがどんなツールなのか、どうやって使うことができるのか、について書きたいと思います。 Chromaticとは何か？ ChromaticはStorybookをベースとしたUIテストツールです。Storybookのチームによって開発されており、フリーミアム型のサービスです。 簡単なイメージとしては、ローカルにあるStorybookをCDNにデプロイしたもの、みたいな感じです。 https://www.chromatic.com/docs/ より デプロイすることで同じStorybookをチームみ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figma によるデザインシステム入門
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ
Tailwind CSSを本気でカスタマイズする方法
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
「デザインシステム」がよくわからないので、理解の仕方を変えてみる｜usagimaru
Reactで社内向けUIライブラリ開発・ビルド・公開・布教入門【2024年】
初公開！「家計簿プリカ B/43」のデザイントークンの設計 - inSmartBank
Tailwind CSSでデザインシステムを構築する［後編］ ～デザイントークンを定義するときに何を議論すべきか | gihyo.jp
エンジニアがデザインシステムの構築に向けて、UX改善と両立して取り組んだ話
【デザインシステム】エンジニアが知っておきたいデザインシステム - Qiita
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
4つの要素で考える、プロダクトデザインのためのデザインシステム構築とは
https://www.freee.co.jp/news/20231219_design.html