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

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

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

大規模デザインシステムを作る：いかにしてアメリカ連邦政府のデザインシステムを作り上げたか - カタパルト式！スープレックス！！

2017/10/11 531 users スープレックス government system 原文

2017 - 10 - 11 大規模デザインシステムを作る：いかにしてアメリカ連邦政府のデザインシステムを作り上げたか 翻訳記事 UX デザイン 海外 Twitter Google Pocket 原文： "Building a large-scale design system: How we created a design system for the U.S. government" by ... 続きを読む

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

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

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

デザイナーが押さえておきたい、2018年のウェブデザイントレンド6個まとめ【完全ガイド】 - PhotoshopVIP

2018/04/19 398 users ウェブデザイン PhotoshopVIP 復活 現状 影響

2018年になってここまで、ウェブデザインにとって驚くべき年を迎えています。これまで何年もかけて進化してきたデザインが、デザインシステムやタクタイルデザインのような新しいトレンド、また楽しく元気なレトロスタイルの復活などにつながっています。これまで以上に、ウェブデザインの現状と今後の流れを考えることが重要になってきます。 この記事では、 2018年にもっとも影響を及ぼしている、6つの最新ウェブデザ... 続きを読む

膨大なデザインシステムを細やかに検索・参照できる。デザインシステムプラットフォーム『Adele』。UXPinから｜小山和之｜Kazuyuki Koyama｜note

2018/01/19 257 users Adele UXPin プロトタイピングツール Note 検索

膨大なデザインシステムを細やかに検索・参照できる。デザインシステムプラットフォーム『Adele』。UXPinから プロトタイピングツールやデザインシステム制作ツールを提供する UX Pin は、様々な企業・サービスが公開しているデザインシステムやデザインガイドライン等をまとめた、 デザインシステムプラットフォーム『 Adele 』 を公開した。 リリース当初は43のシステムが登録されている。検索機... 続きを読む

margin, paddingなど、レスポンシブに対応したスペースをCSSで効率的に定義する方法 | コリス

2018/11/27 234 users padding margin Calc rem コリス

Webページやスマホアプリのレイアウトに使用する、margin, paddingなどのスペースをCSSで効率的に定義する方法を紹介します。 em, remの相対的な単位を使い、calc()を効果的に活用し、拡張性やメンテナンス性にも優れたデザインシステムを構築できます。 Create your design system, part 4: Spacing by CodyHouse 下記... 続きを読む

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

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

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

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

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

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

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

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

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

新しくなったMaterial Designのココに注目！最近のUI要素・コンポーネントのデザインや使い方がしっかり学べる | コリス

2018/05/11 168 users 皮切り コリス コンポーネント オープンソース 毎月

先日開催されたGoogle I/O 2018で、Material Designは大きくアップデートされました。 ロードマップ によると、今回のアップデートを皮切りに、これからも毎月リリースされ、Material Designはその表現力を高める機能を充実していくとのことです。 Material Design Material DesignはGoogleが提供するオープンソースのデザインシステムで、... 続きを読む

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

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

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

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

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

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

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

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

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

Pairsのデザインシステムを運用してみて。デザイナー視点のツール編? - eureka design

2019/04/22 149 users pairs デザイナー視点 ツール編

こんにちは！ 以前、Our Little Design Systemの記事を書いたNipperです。 あれから随分と月日が経ち、そういえばあんな記事を書いていたけど、その後どうなんだ？っと思っているeurekaファンの方も多いでしょう。 安心してください。ちゃんと運用してますよ。 続きを読む

待機状態のUIについて整理してみる(デザイン編)

2021/05/05 141 users Introduction 待機状態 ローディング デザイン編

Introduction 概要 待機状態 UI のデザインについての記事です。 待機状態 UI というのは、ローディングや情報の処理待ち時に用いられる UI のことです。 ここで待機状態の UI と読んでいる理由は、各デザインシステムやガイドラインなどで言い方が違うため。 この記事ではデザインガイドラインや既存のデザインシステム... 続きを読む

Githubがデザインシステムを作るまでの道のり（前編） | UX MILK

2018/04/25 130 users GitHub Etsy UXPin プロトタイピング 道のり

Jerry Cao氏は、UXPinのコンテンツストラテジスト。プラットフォームのワイヤーフレーミングとプロトタイピングを行うためのアプリ内およびオンラインのコンテンツを開発しています。 Diana Mounter氏はGithubのプロダクトデザイナーおよびデザインシステムのリーダーです。 デザインと開発において15年近いキャリアをもつ彼女は、Etsyでシニアデザイナーを務めた後、2015年末にGi... 続きを読む

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

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

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

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

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

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

世界を変えるためのデザインシステム - Speaker Deck

2019/11/16 114 users Speaker Deck 世界

All slide content and descriptions are owned by their creators. 続きを読む

UXエンジニアが知っておきたいデザインシステムの原則 | Goodpatch Blog

2018/09/27 111 users UXエンジニア 工程 原則 エンジニア 定義

Featured image: Business vector created by Freepik UXエンジニアという言葉を聞いたことがありますでしょうか。 私もここ数年で聞くようになった言葉です。UXエンジニアという仕事はまだ生まれたばかりで、定義が曖昧ですが、私は一言で言えば「UXデザインをする、もしくはその工程に関わるエンジニア」のことだと考... 続きを読む

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

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

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

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

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

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

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

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

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

デザインシステムに採用する色を決める5つのルール : could

2017/08/28 103 users could コンポーネン ルール デザイナー 自社

UI デザイン デザインシステムに採用する色を決める5つのルール 本格的なデザインシステムを作るための練習として色から始めるのをオススメします。自社のコミュニケーションの課題を発見するためにも、色の調査を始めてみてはいかがでしょうか。 始めの一歩としての色共有 ひとりのデザイナーに頼らず、チームで運用できる体制を作るためにも デザインシステム は有用なツールです。しかし、様々な UI コンポーネン... 続きを読む

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

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

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