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

本

デザインシステムの知見をまとめていくマガジンです。noteではプロダクトデザイナーを募集しています→https://open.talentio.com/r/1/c/note/pa… もっと読む

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

SmartHRのプロダクトデザインシステム史上最大のアップデートがはじまります。ー SmartHR Design Systemの現在地（2024年4月版）

こんにちは、SmartHR プロダクトデザイナーの@versionfiveです。 SmartHR Design Systemを公開して5年近くが経ちます。立ち上げから携わっている私から、SmartHRのプロダクトデザインシステムが現在直面している変化と、それに向けた私たちの取り組みについてお話ししたいと思います。振り返り：これまでの取り組みSmartHR Design Systemのこれまでの取り組みを、記事や書籍から簡単に紹介します。プロダクトのコンテンツを20

スタートアップのデザインチームにフィットするミニマムデザインシステム

こんにちは。akippaでデザイナーをしている横山です。今回はakippaのデザインシステム(※ミニマム)の構築を行なった話をしようと思います。皆さんはデザインシステムを何のために導入すべきと考えているでしょうか？複数人のチームで効率よく作業するため？誰が作っても一定のクオリティを担保するため？サービスの一貫性を担保しユーザーの学習コストを抑えるため？確かにデザインシステムには様々なメリットがあります。その旨み全て享受したい(願望)。実は過去にもデ

企業ブランドとサービスブランドをつなぐ「らしさ」を継承するデザインシステム

こんにちは、株式会社LIFULLでLIFULL HOME'SのUI・UXデザイナーとして働くぼこと申します！私がこの会社に入社して、ずっと関わり続けているものの一つに「デザインシステム開発」があります。 LIFULL企業ブランドのデザインガイドライン開発に2年、LIFULL HOME'Sサービスとしてのデザインガイドライン開発に4年、本業のかたわらで携わり続けてまいりました。また、LIFULL HOME'Sのデザインガイドラインを参照しながら、LIFULL HOME'S賃貸

デザインシステムイベント Framework by Figma開催！

今週からFigma主催のデザインシステムイベントであるFramework by Figmaが開催されます。知る人ぞ知る、2022のSchema以来のデザインシステムをテーマとしたイベントです。今回のFrameworkでは、各社のデザインシステムの取り組み、デザイナーとエンジニアの連携などのベストプラクティスや、そしてFigmaからの新しいお知らせがあります。このお知らせは、Figmaを使っている皆さんにとって待望のアレかもしれません（？） Frameworkは各国で開

開発チームみんなでつくるデザインシステム

ブルーモは一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。サービスリリース前のシードラウンド期からデザインシステムを構築し、運用している理由や、実際にどのようなシステムを作っているのかなど詳細を紹介します。また、デザインの品質を担保するために、デザイナーだけではなく開発メンバーのエンジニアがどのように関与しているのかなどもお伝えできればと思います。インタビュイーブルーモがデザインシステムを導入した

IPの世界観に寄り添う、マルチブランドなカラーシステム設計論

はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多か

デザインシステムを公開してくれている企業をまとめてみる

最近デザインシステムを構築しているので、勉強がてらデザインシステムを公開している企業をまとめてみる。一旦リンク集的に公開したあとに、コメントを付け加えていく想定📝 日本のデザインシステムSmartHR ラクスル "kamii" Cookpad "Apron" freee "vibes" 英単語アプリ mikan Ubie SPEEDA "FALCON" https://designsystem.uzabase.com/98768eba1/p/9727f8-s

「楽天カードらしさ」を追求した楽天カードのデザインシステムの導入と今後について

楽天グループはさまざまなサービスを展開しており、楽天カードのお客様においても楽天カードだけではなく楽天市場や楽天銀行など、ほかの楽天グループのサービスも多くのお客様にご利用いただいています。それぞれご提供するサービスは別ですが、お客様にとっては1つの「楽天ブランド」であるため、楽天グループ共通のデザインを踏襲しながらも、金融サービスに特化した顧客体験を提供できるよう、楽天カードのデザインチームによりカード事業独自で「楽天カードのデザインシステム」と呼ぶデザインシステムを構

皆で創るデザインシステム

・・・はじめに株式会社エムハンドの岩松です。アートディレクターとして、弊社のアウトプットの品質向上に注力しております。また、コンサルティング部のマネージャーと兼任で、今期（2024年11月）からデザイン部全体のボトムアップにも取り組んでおります。その一環として「皆で創るデザインシステム」を合言葉に、様々なプロジェクトを立ち上げ推進しています。デザインシステムというと様々な業種・業態で取り組みがあり、広く公開されている状況ですが…今回の記事では概念的なことは省略し、弊社

デザインシステムを積み上げた先には何が待っているのか？

こんにちは、SmartHRのプロダクトデザイナーをしているうえんつ（@wentz_design）です。最近は「プロダクトデザイン統括本部/プロダクトデザイン本部/労務プロダクトユニット/ユニット長」という肩書で生きています。最近本業のことをあまり発信できていなかったので、今回は去年１年間のプロダクトデザイナー視点で組織学習の観点でデザインシステムへの取り組みについて振り返ってみた話と、その中で得た気づきを「デザインシステムを積み上げた先には何が待っているのか？」という切り

増えすぎたブクマの替わりに。厳選！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ヶ月。日々新鮮な気持ちで働いています💪 はじめにこの記事は、かけだしデザイナーの目線で「デザインシステムって何？」の疑問に向き合った記録です。ちょっぴり長い記事ですが、私と同じような新人デザイナーに楽しんでもらえたら嬉しいです！最後に参考記事も紹介しているので、ぜ