1 - 40 件 / 177件
デジタル庁では「誰一人取り残されない、人に優しいデジタル化を。」の実現を目指し、ウェブサービス・ウェブアプリケーションの使い勝手や情報の探しやすさ、アクセシビリティ等の向上に取り組んでいます。 その一環として、「デザインシステム」の構築を推進し、官民問わずすべての方が参照できる形で公開しています。よりよいデザインの普及・啓発に向けて拡充と更新を継続的に行い、あらゆる人がデジタル化の恩恵を享受できる社会に貢献します。 2024年5月30日 デザインシステムのコンテンツは専用サイト「デジタル庁デザインシステムβ版」へ移行しました 専用サイトで、ガイドラインやデザインデータ等の各アセットを案内しています。 イラストレーション・アイコン素材 行政手続きをもっとわかりやすくするために作成した素材集です。どなたでもご利用いただけます。 最近の取組2024年5月 専用サイト「デジタル庁デザインシステムβ
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化する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日] - 表紙画像に、このコ
おひさしぶりです🔅 最近は週末プロジェクトでアプリを2つリリースしようと動いていたり、一人暮らしを始めたり、バタバタした日々を過ごしておりました.... (toCサービス好きな人、一緒に週末プロジェクトやりませんか・・笑 週末プロジェクトはなかなか難しい....) 先日こんなイベントがあり、他社のサービスのFigmaファイルを見る機会が...!そして、Twitterなどで各社、各サービスがFigmaデータやDesign Systemをオープンにしているのを最近ちらほら見かけますよね...! 私がUIを勉強し始めた時は、Apple社が提唱するHuman Interface GuidelinesやGoogle社が提唱するMaterial designなどのUI設計の原則を定めたガイドラインを読んだり、本やnoteを読んだり、AppleやGoogle社が開発するアプリを中心にトレースしたり..
官僚主義からスタートアップ精神へ——。およそ10年前、新サービスの立ち上げ失敗を機に生まれた米国政府の新組織が作ったWebデザインシステムは、今では160サイト・11億ページビュー規模にまで広がりを見せている。 by Jon Keegan2024.07.03 412 8 この記事の3つのポイント 米国には公共デザインシステムとカスタムフォントがある 政府系Webサイトのアクセシビリティと一貫性を高めることが目的 これらのプロジェクトでは透明性や協働、継続的な改善が重視されている summarized by Claude 3 米国には、公式のWebデザインシステムとカスタムフォントがある。この公共デザインシステムは、政府のWebサイトを単に美しいものにするだけでなく、すべての人にとってアクセスしやすく機能的なものにすることを目的としている。 インターネットが普及する以前、米国民は印象的な石柱
カンムでプロダクトデザインをしている osanai です。こんにちは。 前回ご紹介したコンポーネント品評会により、デザインシステムにおけるコンポーネントの課題について議論が進み、不必要なコンポーネントが生まれにくくなり、デザインの意図が汲み取りやすくなりました。 品評会をしていると、しばしばデザイナーとエンジニアで「Figma でもっと効率よくできないかな」という話題が出てきます。例えば「コンポーネントの Variants のパターンをパット見で把握したい」「目的のページやコンポーネントにもっと素早くアクセスしたい」などです。 運用方法に関する課題に対して少しずつ改善に取り組み続け、徐々にですが Figma でのデザインシステムの管理が効率化されつつあります。今回はこれまでに実施した Figma の運用効率化の取り組みをご紹介します。 プラグインで解決編目的のページやコンポーネントに素早く
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースでデザインを担当している萩野と小股です。 Yahoo!ニュースは、Yahoo! JAPANが運営する国内や海外のニュースを閲覧できるサービスです。1996年にサービスを開始し、2021年には25周年を迎えました。 そんなYahoo!ニュースでは、2020年より「Figma」を用いてデザイン業務を行っています。この記事では、Figmaの利用に至った背景や、運用し続けられるものにする工夫、デザインシステムによってデザイン業務がどのように効率化されたか、お伝えします。 Yahoo!ニュースが抱えていたデザインにおける課題と解決方法 この章では、Yahoo!ニュースが当時抱えていた複数のデザイナーがデザイン
©Copyright Japan Association for the 2025 World Exposition, All rights reserved. 公益社団法人2025年日本国際博覧会協会では、2025年日本国際博覧会(大阪・関西万博)に活用するための「EXPO 2025 Design System」を策定しました。 このデザインシステムは、万博のさまざまなインターフェースを統一し、アナログ・デジタルの境界線を超えて一貫した体験を提供することを目的としています。EXPO 2025 Design Systemの提供する体験を通じ、万博がより多くの人々に愛されるものになることを願っています。
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、フロントエンドエンジニアの近藤です。Yahoo! JAPANのスマートフォンのウェブトップページのフロントエンド開発業務と、社内で利用されているデザインシステムの開発に携わっています。 近年、デジタルプロダクトを持つ多くの企業で、デザインシステムが活用されています。デザインシステムには、ビジュアルとしてのデザインの規定だけでなく、実際のプロダクトに利用できるUIライブラリやコンポーネントライブラリなどが含まれます。そのため、デザインシステムの構築にはデザインとエンジニアリングの両方の力が不可欠です。 本記事では、私が開発に携わっているデザインシステム「Riff」の紹介とともに、フロントエンド部分におけるデザインシステム
Wantedly でバックエンドのテックリード的なやつをやってる @izumin5210 です。半年くらい前から取り組んでいた、UI デザインシステムの React 実装について紹介します。ソフトウェアの設計としても非常にエキサイティングだったので、ライブラリ作ったりするのが好きな人なども楽しんでもらえると思います。 TL;DRWantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール&アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となるデザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮するこの話が気になった(Web・モバイル問わず)フロント
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上(2019年12月現在)ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 私が最近学んでいること、「デザインシステム」について書きたいと思います。 なぜデザインシステムを学んでいるのか。ですが、デザインの制作時にFigmaを使う機会が増えて、今までPhotoshopやXDで作業していたときよりも、コンポーネントを意識するようになったからです。 まだWeb制作を学び始めたばかりだから、デザインシステムとか難しそう。と思っている人もいるかもしれませんが、学
Design System誕生のきっかけを与えた、ロゴリニューアル ーメルカリグループでDesign Systemが誕生・導入されたのは2019年夏ごろでした。なぜこのタイミングだったんでしょうか? @kitaj:もともと、開発効率向上や見た目の一貫性を担保したいニーズはありました。そんななか、大きなきっかけになったのが2018年10月に実施した、ロゴなどのリブランディングです。同時に、以前まではバラバラだったカラーやデザインのトンマナも一気に整え、「共通言語」として使えるようにDesign Systemをつくることにしました。 北井孝直(@kitaj) ーバラバラだった? @tottie:Design Systemができるまでは、フリマアプリ「メルカリ」でつくられてきたデザインには「同じようで同じじゃない」ものがいくつかありました。ロゴに使われている赤色も、よ〜く見ると色が違っていたり。
メディア統括本部・技術横断室の谷です。組織横断の活動しながら、AmebaやAmebaマンガという事業に関わっています。実務としては、コード実装をメインに、UI設計やUX設計、最近ではユーザーインタビュー等のリサーチ業務をおこなっています。 この記事では私が立ち上げから2年くらいかけて関わってきたAmebaのデザインシステムについて、その全貌を解説します。 そして本日からデザインシステム「Spindle」のサイトを試験的に一般公開します。詳しくは記事後半にて。 まず前段のお話として、Amebaという事業について説明させてください。 Ameba事業の概要 Amebaはブログサービスであるアメーバブログを主としたサイバーエージェントのメディア事業の1つです。 多くの人はおそらく「アメブロ」や「ピグ」の印象が強いですが、関連事業やサービスとしてはマンガや占い、ニュースなど色々と展開をしています。
📝 はじめに こんにちは犬です。 デザインシステムをはじめる上で、 Figma の神プラグインを見つけたので共有します! わたしが携わっているプロジェクトでは、エンジニアとデザイナーの双方向のコミュニケーションツールとして Figma Tokens を採用しています。 📝 Figma本体 だけでは実現が難しい色の管理手法 Figma と フロントエンド実装時の色の管理については以下のように取り決めました。 # 色の定義と利用方法 1. Primitive colors を定義 ここで定義した色をサイト全体で使用する。 ※(注記) 定義はするものの、全ての色をサイト全体で利用するとは限らない。 基本色(赤、黄、青、、、など)からアルファ値や彩度、明度を機械的に算出して全カラーパレットを作成。機械的に出した色に微妙なものがあった場合は微調整する Primitive colors の例 red.10
はじめに ここ最近はデザインシステムの構築や支援を行なっています。そこで、デザインシステムを作ることが目的になっていることを感じることがあります。私はデザインシステムは作ることよりも、育てていく考え方が重要だと思っているので、その考えについてお伝えします、どなたかの参考になれば幸いです。 デザインシステムとは? まずはデザインシステムそのものについてです。デザインシステムの事例から学んでみます。 GoogleのMaterial Designは「チームがより高品質なデジタル体験を各OS上で構築するためのもの」と表しています。 Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the w
MTDDC Meetup TOKYO 2024 2024年11月23日 株式会社サイバーエージェント 原 一成 (@herablog) https://mtddc2024.mt-tokyo.net/speaker/roomD03.html
Webスタイルガイドは、本学のWebサイト管理者・運用担当者をはじめ、Webサイトに関わるすべての方が利用することができます。ご利用いただく際は、利用規約の記載事項を遵守し、最新の情報やデータをご利用いただくようお願いいたします。 更新履歴
この雑記を書く問題意識は、Tailwind CSSに対して向けられている世の人々の不満が、Tailwind CSSがコミットしていることから外れた、お門違いの期待の押しつけになっているのではないかと感じるところにある。 ライブラリやフレームワーク、道具にはそれが作られた目的があり、果たそうとするコミットメントがある。その圏内において果たされていないコミットメントに対する不満は、それ自体の存在意義にかかわる意味を持つが、しかし利用者が一方的に寄せた期待が果たされないことに対する不満はそうではない。 念押しするまでもないと思うが、これはTailwind CSSに対して不満を向けるべきではないという話ではまったくない。むしろ、その不満の下敷きとなっている Tailwind CSS への期待が Tailwind CSS 自体によってコミットされたものでないとしたら、不満を向けてもしょうがないのでは
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■しかくマジ価値サマリー(このお知らせでお伝えしたいこと) ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム開発に携わるエンジニアやデザイナーの皆様に、「vibes」を利用してシステムを構築いただく、またはコード等を参照いただくことで、社会全体としてアクセシビリティ向上の取り組みが広がることを目指しています freee株式会社(本社:東京都品川区、CEO:佐々木大輔、以下「freee」)は、freeeがこれまで培ってきたアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes(読み:ヴァイブス)」を公開しました。本デザインシステムを公開するこ
AWSは、マネジメントコンソールなど同社が提供する製品やサービスのWebアプリケーション画面を構築するために開発したデザインシステム「Cloudscape」をオープンソースで公開しました。 Cloudscape Design System, an AWS solution for building intuitive user experiences, is now open source! Cloudscape consists of guidelines to create web applications, along with the design resources and front-end components to streamline implementation.https://t.co/M8wKGqzH5E pic.twitter.com/9JOtkMF8Bi — A
UIUXデザイングループのグループ長を担当させていただいている小田と申します。 一般公開はしていないのですが、モノタロウも一貫したデザインや操作性でウェブサイトを提供するためデザインシステムを作り、現状のサイトに適用しています。 今回はモノタロウのデザインシステムのお話をしたいと思います。 デザインシステムの始まり これは数年前の話です。 何年も運営しているサイトだとよくある話ですが、見た目のスタイルが分散していき、その分のコードが積み重なっていき開発の負荷になります。 また、スタイルが分散していると使っている側のユーザーも、この機能はどういう機能なのかを理解する事に時間がかかります。 サービスの品質を上げるPDCAを早く回す為に土台(図1)を整える必要性があり、スタイルを統一したデザインシステムを構築して、ページに適用していくことが目標になりました。 分散していたスタイル: 作成したボタ
生まれ変わったらデザインシステムになりたいと思っているくらい、デザインシステムが好きなエンジニアの乗田です。 僕の入社の経緯や業務内容についてはこちらからご覧いただけます! デザインシステムとは デザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの原則や指針と、それらを実現するための仕組みの集合体です。デザインシステムのメリットは、低コストで高速に一貫性のあるデザインを実現しやすくなるという点にあります。 一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トーンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイントークンなどが含まれます。 しかしデザインシステムにおける必須要素の定義はありません。それ故にデザインシステムは、各組織にとって必要なデザイン原則やデザインアセットが集合した物と言い換えることもできるでしょう。 古い物ですと1975年に
だれでも・効率よく・迷わずに。 SmartHR Design Systemは、すべての人によりよい体験を届けるためのデザインシステムです。SmartHRに関わる人はどなたでも利用・参加できます。 デザインシステムとは?
HashiCorp、UIデザインシステム「Helios」をオープンソースで公開。UIコンポーネントやアイコンなど TerraformやVagrantなどで知られるHashiCorpは、同社製品のユーザーインターフェイス開発に使われているデザインシステム「Helios」をオープンソースで公開しました。 デザイン設計の原則やサンプルと共に、25種類のUIコンポーネントと数百のアイコンが含まれています。 Check out the #opensource launch of Helios, the Ember.js-based design system we use to design and build our better, more consistent product UIs. https://t.co/1KqpdTMIri — HashiCorp (@HashiCorp) Janua
An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.
海外の事例はいろいろあるので見てきたのですが、国内ではどんな会社が取り組んでいるのか、興味があったので調べてまとめてみました。 「おいおい、この会社が足りないぜ!」というものがあればコメントで教えていただけると喜びます。 Wantedly
Speaker : Yuito Kawashima ( https://github.com/yuitokawashima ) at 「Vue.js v-tokyo Meetup #20」 https://vuejs-meetup.connpass.com/event/318066/
ちょっと株式会社の KindBurger です! 本記事では、プロンプトだけでは表現しきれないデザイン原則を、デザインシステムを「コンテキスト」として与えることでどう改善できるのかを紹介します。 また、v0 にはサンプルのデザインシステムも用意されており、すぐに試すことができます 🎉 これを利用すれば、次のように一貫性のあるデザインが整ったサイトを簡単に生成できます。 v0 とは ざっくりいうと 「アイデアを素早くかたちにできる」 生成 AI ツールです。 自然言語のプロンプトや画像、Figma ファイルなどから、 React / Next.js / Tailwind CSS / shadcn/ui といったモダンな技術スタックのコードを生成してくれます。 さらに、汎用的な AI ツールとは異なり、Vercel エコシステムに最適化されている点も大きな特徴です。 より詳しく知りたい方は、
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
GMOペパボ株式会社は、「インターネットで可能性をつなげる、ひろげる」というミッションのもと、レンタルサーバーやドメインの取得、ホームページやネットショップの作成、ハンドメイド作品の売買やオリジナルグッズを在庫を持たずに販売できるサービスなど、多様な事業を、多様なブランドで展開しています。このマルチブランド戦略は、個性的なペパボのサービスを特徴づけるだけでなく、市場を確保しつづけるリスクヘッジとしても機能する一方で、サービスを超えてデザインを展開するのが難しいという側面もありました。 そこで、ペパボでは、各サービスが個別に考えていているようなデザインの原則やガイドライン、その実装としてのカラーパレットやコンポーネントライブラリなどのアセットのうち、重複しているものをすべてのサービスで使えるように一般化した、共通基盤デザインシステムを開発することにしました。ペパボでは、この共通基盤デザインシ
Figmaを絡めて新たなデザインシステム構築を手伝う仕事が生まれそうなので、調査がてらFigmaに公開されているデザインシステム系ファイルの情報をまとめました。 なお、海外のデザインシステムは大量に公開されており、特に有名企業のシステムはどこの記事でも紹介しているので、この記事では日本で公開されているFigma関連のファイルに限定して取り扱います。 検索する限りでは意外と日本企業が公開しているファイルは少ない。 なお、ここに掲載されている以外で公開されているファイルがありましたら@kgsiまでご連絡いただけると嬉しいです。 FALCON by SPEEDA コンポーネントごとにページを分けている VariantsはDefaultやLargeなどアッパーキャメルケースを採用 *書体はHiragino Kaku Gothic Proを指定 SmartHR UI by SmartHR 全コンポー
The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems, designed to be a reference for anyone building user interfaces.
A style library for React and/or React Native with a large typed superset of the React Native style API, with no outside dependencies in about 24Kb. A smart optimizer that makes your app fast with partial analysis, extracting CSS, flattening your tree, and removing code. Next, Webpack, Vite, Babel, Metro.
Atomic Design は難しい Webフロントエンド開発をしている人で Atomic Design を用いた経験がある方に会った時は、必ず 『Atomic Designどうですか?』と聞くようにしています。 大体の方はちょっと苦笑いをしながら『やっぱり難しいですねぇ』とか『試行錯誤しながらで...』みたいなことを教えてくれます。 私もメインの開発をする際に Atomic Design という枠組みを用いています。そして、同様に色々と悩んだのですが、このあたりについて納得がいく解釈ができたと思っています。 そこで、私の思う Atomic Design の難しさや、そう思う原因、どうやってそれを解消するかという点について、https://atomicdesign.bradfrost.com/ を適宜参照しながら共有したいなと思います。 そもそも Atomic Design 何やねん。な方
Wantedly では新卒含む新入社員向けに研修を毎年実施しています。これは「新入社員向け」といいつつ既存の社員も自由に参加できるものです。今年はこの研修のフォーマットを借りて、Wantedly のプロダクト開発を支える重要な概念のひとつである「Wantedly の UI デザインシステム」についての研修を、ソフトウェアエンジニアの @izumin5210 (筆者) とプロダクトデザイナーの @NishaMe で実施しました。 デザインの構造を正しく捉えることは、UI の実装を専門にしているかどうかを問わず、正しい実装 - 開発生産性が高く、ユーザにとっても使いやすい実装 - のための重要なポイントです。よってこの研修は「広義のフロントエンドエンジニア」、業務中に UI を実装することがある全てのエンジニアを対象としました。 Web フロントエンドエンジニアモバイルエンジニア専門ではないが
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見たり、社内のデザインシステム整備の仕事をやったりしています。 さて、2021年に開催した弊社カンファレンス #pixivdevmeetup にて発表しましたデザインシステムの Web 版実装が先日 OSS 化されました 🎉 1。GitHub と npm から利用できます。 github.com www.npmjs.com 発表時点では「pixiv-elements」という名称でしたが、公開にあたって「charcoal」という名前になりました。「charcoal(木炭)」とはデッサンの道具であり、線を引く、表現の基礎となる素材の一つです。また創作物を主役とするサービスの基盤として、それ自体は色を持たないモノクロの素材である、というニュアンスも含みます。 (ただし、npm パッケージのスコープは
Japan Digital Designの柳沢です。 三菱UFJフィナンシャル・グループの戦略子会社であるJapan Digital Design(以下JDD)でExperience Design Div.(以下XDD)に所属し、プロジェクトの推進や体験設計などを担当しています 第1回:三菱UFJ銀行アプリリニューアルとCXデザインの軌跡 第2回:理想の体験を描いて磨き直すCXデザインのプロセス 第3回:リニューアルを支えたFigmaのプロトタイプ活用 第4回:三菱UFJ銀行アプリのデザインシステム構築 👈 第5回:(仮)ビジュアルアセットのガイドライン開発 第6回:(仮)プロモーションマテリアル制作 連載記事一覧今回はデザインシステムの構築についてご紹介します。 最近ではデザインシステムを取り入れるプロダクトも多くなりました。三菱UFJ銀行アプリでもデザインシステムを取り入れており、導
こんにちは、GaudiyデザイナーのTORAJIRO(@jirosh1998)です。 『英単語アプリ mikan』の副業デザイナーとして、Figmaリファクタリング&デザインシステムの一歩目を構築した話を書こうと思います。 このnoteの最後に、今回作成した『mikan DesignSystem』のデータを公開していますので、ぜひご覧ください👋(mizoさんをはじめmikanのみなさん、具体的なアウトプットの公開まで許可いただき感謝です!心広すぎ!) 読んで欲しい人 - これからチームでデザインシステムを作っていきたい - コンポーネントライブラリをFigmaで構築したい - Figmaをリファクタリングして、デザイナーの作業効率を上げたい デザインシステム本題に入る前に、このnoteで書いている「デザインシステム」の定義について触れておきます。デザインシステムとは「良いデザインを『効率
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く