デザインシステム知見まとめ

本

noteにある様々なデザインシステムの知見をまとめていくマガジンです。良い記事を選定してくれる運営メンバーも募集中です。

運営しているクリエイター

増えすぎたブクマの替わりに。厳選！UIギャラリーサイト10選📸

UI・Webデザインのギャラリー集・アーカイブ集は、デザイナーにとっては、とてもありがたい存在ですよね。ですが、ブラウザのサイトブックマークもいつの間にか膨大な数に…。どれがなんのサイトだったっけ😕？？ちょっと自分用に整理をするためにも、最新のサービスが掲載されているUIギャラリー・Webサイト集を、厳選！10個で集めてみました📸 （10個でもスクショのソース量としては、十分でした）このnoteの使い方サイトブックマーク替わりに使ってください🙏 📱アプリ系

日本・海外のデザインシステム総まとめ【56事例＋α】

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今日は、WEB上に公開されているデザインシステムをとにかくたくさん集めました。業種や規模、国内外の企業問わず、デザインシステム（スタイルガイドも含む）と名の付くものを、見つけられた範囲ですべて収集しています。多数のデザインシステムの比較・検討をしたい際など、データベース的にお役立ていただけたら幸いです。 ※以下の目次、異次元の長さになっています。開く際はご注意ください…🐲 はじめに🗒掲載方法について

クロンデザインシステムのカラーパレットをリニューアル

オンライン医療事業部プロダクトデザイナーのL.Tです。久々の投稿ですが、今回は自社プロダクト「クロン」のデザインシステムのカラーパレットをリニューアルした話をお伝えします。 AS ISのカラーパレットの問題点以前から社内デザイナーからクロンデザインシステムにあるカラーパレットについて、いくつか改善リクエストが上がっていました。具体的には、彩度（Saturation）が揃っていない（同じ色相内で鮮やかなもの、鈍いものが混在）全色並べた時にグラデーションレベルが

「デザインシステム」って何？新人WEBデザイナーがインターネットの海を泳いでみた

はじめまして！株式会社Rabeeの新人デザイナーのakaneと申します。元々はWEBメディアの編集者をやっていましたが、昨年の秋に未経験からWEBデザイナー（UIデザイナー）に転職しました。デザイナー歴4ヶ月。日々新鮮な気持ちで働いています💪 はじめにこの記事は、かけだしデザイナーの目線で「デザインシステムって何？」の疑問に向き合った記録です。ちょっぴり長い記事ですが、私と同じような新人デザイナーに楽しんでもらえたら嬉しいです！最後に参考記事も紹介しているので、ぜ

翻訳記事：デザインシステムチームなしでデザインシステムを構築する

某DSチャネルで上がってきて目に止まり、わりと参考になるな、と思って9月頃に翻訳したまま寝かしていた記事🤣ですが、師走の忙しい時期とはいえ、頑張って🎄前に公開。デザインシステム Advent Calendar 2023 の20日目の記事です。一部のメガベンチャーみたいに豊富な社内リソースがある企業は別として、たぶん、現状のほとんどの国内企業の状況ってこんなんじゃないのかな？と思います。昨今、「デザインシステムやってます！」ってのは会社のブランディングや採用時の強みにも

「私たちがデザインシステムを作っている理由」のドキュメントを公開

どうも、kintone Design Teamのsakitoです。今回は私たちがデザインシステムを作っている理由を社内向けに説明しているドキュメントを公開します。デザインシステム作ること自体を言語化するのに役に立ててれば幸いです。ここからが実際に社内に公開しているドキュメントになります。デザインシステムとは？まずはデザインシステムにそのものについてです。デザインシステムは独自の用語ではなく、プロダクトを構築するにおいて世界的に使用される概念になります。例えば有名なも

デザインシステムを開発の文化にしたことで専任チームを解散できた話

こんにちは。Uniposプロダクトデザイン責任者のmybです。こちらの記事はSaaS Designアドベントカレンダー9日目の記事になります。遅刻して大変申し訳ありません！！！🎄 2021年のUIリニューアルをきっかけに、サブプロジェクトとして発足させたデザインシステムPJ。もともとの目的がデザインシステムを開発の品質基盤にすることだったので、PJ発足時からチーム解散を一つの大きな目標にしており、今年、ついにデザインシステムチームの解散をし、コミュニティ的に現場で

デザインシステム改善:デザイナーとエンジニアで一緒に進めるコンポーネント整理

こんにちは。ヤフーメディア統括本部企画デザイン本部デザイナーの芦田です。3年前にヤフートップページのデザインシステム導入を担当した経験を活かし、現在担当しているサービスにおけるデザインシステムの改善を進めてきました。改善の中でも、デザイナーとエンジニアが密接に連携して進めたコンポーネントの整理は、特に大変だったものの、多くの学びがありました。今回は、そのコンポーネントの整理をどのように進めたかを共有します。デザインシステムとはデザインシステムは、デジタルプロダクト

10年ものアプリのダークモード化プロジェクト、カラー設計の舞台裏

こんにちは、ニューズピックスのプロダクトデザイナー、吉川（よっしー）です。先日、ニューズピックスアプリがダークモードに対応しました。以前からご要望を多くいただいており、昨年末から取り組みはじめ 9月にAndroid版リリース、10月にiOS版もリリースが完了しました。 2013年から今年で10周年を迎えたニューズピックスアプリ。その10年間の歴史を持つアプリをダークモード対応するためのカラー設計についてお伝えしていきたいと思います。対応範囲アプリの全階層すべて適用す

知る・触れる・楽しむ carbon design system と design system

はじめにみなさん、こんにちは。いつもIBM UX Communityをご覧いただきありがとうございます。 IBM UX CommunityのUXデザイナー、前壮一郎です。現在、IBMの新しく立ち上がった部門ICE（ IBM Client Engineering ）でUXデザイナーをしています。近年、デジタルプロダクトの世界は急速に進化しています。ユーザーはますます高い期待を持ち、多様なデバイスやプラットフォームを通じてシームレスな体験を求めています。私は、この複雑

【Figma】10 万通り以上のイラストが生成できるモジュールを公開しました

こんにちは。株式会社くふう AI スタジオでデザイナーをしている miya です。今回、どなたでも簡単にイラスト生成できる「イラストモジュール omiso」を Figma Community に公開しました。作成したきっかけ前回 Zaim のイラストシステムを構築する際に、イラストモジュールを作成しました。 Zaim のイラストは、課題として「描く人によって微妙に絵柄が異なる」「塗り面があったりなかったりし、汎用性に欠ける」といった課題がいくつかありました。そこで

Webアクセスの93%にデザインシステムを届けた実践方法

デザイン推進部の村山です。今回はレシピサービスのデザインシステムである「Apron」を用いたデザインリニューアルの取り組みについて紹介したいと思います。 PCデザインリニューアルプロジェクト「Taranome」デザイン推進部では2021年末から2022年3月までTaranomeというPCのデザインリニューアルプロジェクトを行っていました。長く手の入っていなかったPCWebの主要ページであるTOP、レシピ詳細、検索結果、レシピの投稿/編集画面をApronベースのデザインに変更

翻訳記事：プロジェクト・メタクロシス：如何にしてUIキットを世界的なムーブメントに変えたか @frog のデザインシステム

お仕事する機会がある方々には、デザインシステムを作るというのは、かっこいいデザイン原則を決めることでも、きれいなFigmaデータの構造を作ることでも、力技でロジカルっぽいデザイントークンを作ることでもなく、デザインと実装の運用方法（DesignOps）や継続的な組織体制（DesignOrg）を作ることだよく伝えてる。とはいえ、おしゃれなデザインシステムのドキュメントのウェブサイトが公開することのほうが実績っぽくて組織としてもやってる感あるあるでどうしてもそちらに注目されが

どなたでも利用できる、イラストレーション・アイコン素材集を配布します

デジタル庁では、行政手続をわかりやすくするためのイラストレーションやアイコン素材集の制作をおこなっています。 2023年の始めにプロジェクトが発足し、これまでデジタル庁の四半期報告会見資料や、重点計画資料で活用をおこなってきました。これらの素材集を、府省庁や自治体、事業者の方々など、どなたでも活用ができるように配布をはじめます。 Figma Communityで公開しているデジタル庁デザインシステムから、ウェブやアプリケーションで利用ができる素材を6月中に配布開始予定です。