マガジンのカバー画像

#デザインシステム 記事まとめ

298
デザインシステム関係の記事まとめ / #DesignSystems #デザインシステム / 運営メンバーも募集中。/
運営しているクリエイター

記事一覧

デザインシステム構築ってどうやって始めたんだっけ?

はじめまして。Sansanでプロダクトデザイナーをしている伊藤武尊です。2022年の新卒として入社し、名刺アプリ「Eight」のプロダクトデザイナーを経て、現在は、取引管理サービス「Contract One」 のプロダクトデザイナーをしています。 また、昨年の3月からはグループ会社のプロダクトデザイナーも兼務し、「結局いまどこの部署なんだっけ?」で有名な伊藤くんと言った具合です。 今日は、僕がまさに今直面している「デザインシステム構築ってどうやって始めたんだっけ?」をテーマに

誰も語らない真実~デザインシステム

ほとんどのチームに必要なのは、デザインシステムではなくコンポーネントライブラリです。 数か月を無駄にしている“混同” コンポーネントライブラリ=レゴブロック 再利用可能なUIコンポーネント(ボタン、入力欄、カードなど)を、明確なプロパティや状態とともにまとめたもの。 デザインシステム=レゴの説明書+工場 組織全体でコンポーネントを作り、維持し、進化させるための原則・プロセス・基盤。 よくある間違い 多くのチームは「デザインシステムを作ろう」と飛びつきますが、実際に解決

はじめてのデザインシステム制作で気づいたことまとめ。あとFigmaは、やっぱりいいね。

牧瀬です。 世の中には、様々なデザインシステムがありますが、実際に「制作するぞ」と脳が切り替わった状態で見るのと、アウトプットを目的として情報収集するのとでは雲泥の差がありますね。 ありがたいことに仕事でデザインシステムに携わらせてもらえる機会がありました。この記事では、僕の記憶と技術の定着を目標に、気づきや反省点を書いてみようと思います。やったーー!(実際のスクリーンショットやお仕事の内容は出てきません。) 作るのと眺めるのとでは、ぜんぜんちがういきなり当たり前の話です

どう使わせる?──正しく使われるデザインシステムの仕組みづくり

こんにちは、デザイナーのじうんです。 前回の記事でも触れましたが、デザインシステムは「作って終わり」ではなく、チームで育てていくものです。 ただ、実際に運用を続けていくと、こんな課題に直面することはありませんか? ルールはちゃんとあるのに、なぜか使われ方がバラバラ。新しい人が入るたびに同じ説明を繰り返して、それでも正しい使い方が浸透しないまま、現場では独自のルールがどんどん増えていく。 「あるあるだな…」と思った方も多いのではないでしょうか。 今回は、そんな「どうす

デザインシステムのリアルを語った夜 ─ JAM de NIGHT vol.02 登壇レポート

こんにちは。 MIXI デザイン本部 プロダクトデザイン室のジウンです。 先日、「デザインシステムのリアル」をテーマにしたイベント「JAM de NIGHT vol.02」に登壇しました。 主催メンバーの方から「デザインシステムについてお話ししませんか?」とお声がけいただきました。ちょうど社外への発信を検討していた時期だったこともあり、ありがたくお受けすることにしました。 オンラインでの登壇経験はあったものの、オフラインの場で登壇するのは今回が初めてでした。「デザインシ

DTCGのColorトークンの仕様が更新されている件

こんにちは! サイボウズのデザインテクノロジストの釜堀です。 私が所属しているkintone Design System Teamでは、デザインシステムの要素の1つとしてデザイントークンの運用を行っています。 今回は、Figmaの最新機能を利用してデザイントークンを運用する際に注意が必要な、「Colorトークンの最近の仕様」について書きたいと思います。 Figma VariablesのネイティブImport / Export皆さんは、10月下旬に開催されたFigmaの公

デザインシステムを進めたい理由

こんにちは、movでフロントエンドエンジニアをやっているAkoarumです。 現在、私はデザイナーと共に口コミコムのデザインシステムの策定を進めています。まだまだプロダクトに反映できる状態にはありませんが、これを進めるに至った経緯や思いをまとめたいと思います。 口コミコムのUIデザインのこれまで口コミコムはこれまでデザインシステムという考えは存在せず、デザイナーが独自に定めたパーツを使ってFigmaでデザインカンプを作成し、エンジニアが既存のコンポーネントを使いつつ独自に

Serendie Design Systemへようこそ!~三菱電機が提供するアジャイルなフロントエンド開発のためのデザインシステム~

はじめにはじめまして!三菱電機のSerendie Design Systemチームです。このnoteでは、私たちが開発・提供しているデザインシステム「Serendie Design System」についてご紹介します。 デザインシステムとは?デザインシステムとは、ウェブサイトやアプリケーションなどのデジタルプロダクトをデザイン・開発する際に必要となる、再利用可能なコンポーネントと明確なガイドラインをまとめたものです。 製品開発における一貫性と効率性を高めるためのフレーム

デザインシステムがAI時代に果たす役割

こちらの記事はカケハシ Advent Calendar 2025の21日目の記事になります。 こんにちは、カケハシの生成AI研究開発チームとMusubi Insightチームにてデザイナーをしている堤です。 今回は弊社の中で進めているAIフレンドリーなデザインシステムの一部についてお話ししたいと思います。すでに同じトピックで社内のエンジニアとデザイナーが記事にしているので、そちらもよければご覧ください。 はじめに進化するデザインシステムと「文脈」への回帰 デザインシス

謎解きに「デザインシステム」を取り入れよう

執筆にあたって本記事はNazotoki Designers’ Advent Calendar 2025に参加しています。 簡単に自己紹介をすると、私は謎解きサークルでの実績だけを持って、デザイン系のアルバイト・就職に突っ込んだ人間です。 なので、今は「謎解きのデザイナー」ではなく、UIデザイナーです。 それに「こないだ10,000字も書いたばっかりだしな」と思い、「謎解きのデザイナーにはなるな」みたいな尖った記事を書こうかと思ったのですが、もう少し真面目に書くことにしました

デザインシステムを「1から作り直したけど撤退した話」〜TVerデザインシステムV2お蔵入りから学んだこと〜

はじめに 今年の4月に入社したとりじるです! 入社してすぐに、TVerのデザインシステムを引き継ぐことになりました。 すでに存在しているデザインシステム(V1)があり、それをどう改修していくかを考える立場です。 今回は、 一度は新しいデザインシステム(V2)を作り、 それをあえてお蔵入りにし、 今はV1をブラッシュアップをする選択をした話です。 デザインシステムを1から構築したことがある人なら、 せっかく作ったのに、お蔵入り!?と思うかもしれません。 そんな、ちょっと珍

ニコニコ動画アプリのデザインシステムをFigmaを使って構築した話

こんにちは。ニコニコ動画デザイナーのすめし🍣です。 今回の記事はニコニコ動画アプリでのデザインシステム構築のプロセスを紹介します。 デザインシステムが存在しない既存の大規模プロダクトに対し、どのように構築や適用を行っていったか・採用した方式や理由、チームに与える影響などを書き記しています。同じような課題を持つ方の参考になれば幸いです。 なお、デザインシステムをゼロから構築したい方には当noteのこちらの記事がオススメです。 🏛️ プロダクトの歴史とデザインの負債 まず

結局「デザインシステム」って何?

こんにちは、スペースマーケットデザイン部の新井です。 今回は「Design systems デザインプロダクトのためのデザインシステム実践ガイド」を読み、デザインシステムについての概要・効果を中心にまとめました。(※運用の事例などは省いてしまったので、詳しくはぜひ本書をお読みください!) ・デザインシステムについて何となく分かるけど、うまく説明できない ・ガイドラインとの違いがよく分からない この記事が少しでも上記のような方の参考になれば幸いです。 ※この記事はスペース

デザインシステム、システムであれ

こちらの続きです。 以前こんな記事を書きました。 これは本の引用とリンク集で、実践知の無い記事です。 あれから数年が経ち、同じデザインシステムという言葉でも企業・組織、状況によって求められる役割が違うことを実感しました。 少し時間をおいた今、再びデザインシステムについて考えてみようと思います。 なんかすごい知見とかは無いです。 やっぱり言葉の定義が広すぎる「デザイン」も「システム」も言葉が広すぎるため、会社や人によって認識にブレがあります。これは以前からよく語られている