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

本

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

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

ルールではなく補助線 ─ユーザー数2,000万人超のサービスにおける、Design Systemを立ち上げた話

こんにちは、メルカリDesign Systemの立ち上げと運用を担当したデザイナーのtottieです。この記事では、メルカリの抱えていたデザイン上の課題をDesign Systemの導入で改善したお話をご紹介いたします。なぜDesign Systemを導入したの？Design Systemを導入した理由は、大きく分けて２つあります。１つめは、開発における課題です。導入を決定した当時（2018年）、メルカリはスタートアップから急成長したサービスだったため、開発チーム

社会インフラを支える東芝のデザインシステム

こんにちは。UIデザインチームの松島です。最近「デザインシステム」という言葉を良く聞くようになりました。私達もその有用性を感じて、TOSHIBA SPINEXデザインシステムを2020年から運用しています。（TOSHIBA SPINEXについてはこちらをご覧ください。）今回は、私達が「デザインシステム」を試行錯誤しながら作ってきたお話をします。 1. デザインシステムとはデザインシステムとは、サービスアプリの一貫した使用体験を効率的に実現するために、色彩計画やレ

noteのイラストが新しくなりました！イラストリニューアルの裏側

こんにちは。noteでイラストレーターをしているKimです。 2022年11月頃に、イラストをリニューアルすることが決まり、動き出してまるまる半年。この記事では、新しいnoteのイラストには、どのような思いが込められているのか、「noteらしさ」をイラストで表現する過程でどんな課題と向き合い、どのように乗り越えてきたのか、制作の裏側をオープン社内報として公開します。オープン社内報とは？一般的には社員しか見ることのできない「社内報」をだれでも見られるように公開するこ

FigmaのSlotを活用したらデザインシステム管理が超絶楽になった話

いつも大学や英語の勉強についての記事を書いてますが、今回はデザイナーとして働いている私が知った技術的なことについてまとめていきたいと思います。改めて軽く自己紹介昨年の11月よりファインディ株式会社でUI/UXデザイナーとして働いております。ファイディで働くのはとても楽しく、また周りの優秀な人達に囲まれて自分もメキメキと成長を感じています。（ここに関しては入社半年エントリー記事で詳しく書く予定）普段はプロダクトの魅力を高めるために様々な取り組みを行っています。その中でも

デザイナーチームからデザインチームへ！ユーザー体験を最高にするチームへの生まれ変わり

こんにちは！kintone Design Teamのsakito(@__sakito__)です！私は2023年1月からkintone Design Teamのチームリードやプロダクトのデザインプロセスなどを考えることになりました。その中の1つとしてkintone Design Teamの構成を大きく変更しました。今回はチームの構成を変更した経緯や課題だったこと、変更してから感じている手応えを紹介します。似たような課題を抱えている方の参考になれば幸いです。チーム

デザイントークンが適切に使われているかをチェックするlinterの開発

はじめまして。noteでインターンをしている学生エンジニアです。 noteには Palette と呼ばれるデザインシステムがあり、主にPaletteに関わるタスクを行ってきました。今回はその中で取り組んだデザイントークンが適切に使われているかをチェックするlinterの開発についてお話します。 noteにおけるスタイリング環境とデザイントークンlinterの開発はスタイリングに関する負債解消の一環で行われました。これまでデザイントークンは存在していたものの、プロダクトでき

Figmaでminneのイラストモジュールができるまで

こんにちは。 GMOペパボ株式会社のハンドメイドマーケットサービス「minne」でデザイナーをしております、sziaoreoです。以前「minneのブランドを反映したイラストができるまで」の記事を公開しましたが、そのイラストをより簡単に活用できるように、Figmaでのモジュール化にチャレンジしてみました。そのままではモジュールに展開するのが難しい状態だったイラストに対して行った作業ステップや、モジュール化してみての気づきについてご紹介していきたいと思います。（Fig

フィルターコンポーネントの使い分けを定義したお話し

こんにちは！ Uzabase SaaS Design Division所属、SPEEDAのUIデザインを担当している進藤です。突然ですが、SPEEDAには業界・企業・特許などたくさんのデータが格納されており、それらを利用して調査や分析を行うためにプロダクトのいたることろにフィルター機能が存在します。ユーザーに提供しているコア機能の一つですが、使用するコンポーネントがきちんと定義されておらず、デザインする際、毎回選定に苦労していました。そのため、よ〜〜〜く見てみると同じ

優れたデザインシステムでコスト削減、増収を叶える。デザインとROIの関係

こんにちは。FRACTA ブランドクリエイティブ局大野です。 2022年はスタートアップ冬の時代と言われ米国テックの株価暴落やウクライナ侵攻を始めとした環境不安など激動の一年でした。事業者やブランドはコストカット、キャッシュ引き締めを強いられるなど影響はさまざまなところに及んでいると思います。そんな時代だからこそ、自分たちが何者であるか、どこに力を注いでいくのか、といったブランディングがより重要に。そして自分たちの価値を伝えていく上でクリエイティブやデザインの重要性は高

自社のデザインシステムに適したデザイントークンを考えたお話

こんにちは。ていてい（@dbko1991）です。今は株式会社カミナシでプロダクトデザイナーをしています。自分は中国出身で、火鍋🥘を食べて冬を楽しんでいます。では本題です。このnoteでは、カミナシで実施した「自社のデザインシステムに適したデザイントークンの検討」について、検討の背景や運用に至った流れ、試行錯誤したことについてお話します。これからデザイントークンを検討し始める方に少しでもご参考になれたら嬉しいです。 ※ 初歩的なnoteなので、すでにデザイントークンを

kintoneのデザインシステムを作る「Mantleチーム」とは？（後編）#CybozuDesignPodcast

オープニング（00:00）Tobi／皆さんこんにちは！デザイナーのTobiです。この番組はサイボウズデザイン＆リサーチグループのメンバーが日々の活動や取り組みを雑談形式で紹介するコンテンツです。デザイン・リサーチ・アクセシビリティを軸にサイボウズデザイン&リサーチグループの今をお届けしつつ、メンバーの人柄やチームの雰囲気をお伝えします。 Tobi／今回はkintoneのユーザー体験を最高にする活動をするチーム、Mantleチームの紹介の後編となります。前回はMantleが

そのデザインシステムは投資対効果をもたらしますか？

2022年現在、ユーザーインタフェースのデザインやその開発について語る上で「デザインシステム」はどのような組織においても話題に上がるトピックではないでしょうか。かく言う私もデザインシステムに強い関心を持っており、業務にてデザインシステムの構築・維持に取り組んでいる他、過去には私が魅力的だと思うデザインシステムを紹介するブログ記事を執筆しました。 0. デザインシステムの導入における障壁昨今はデザインシステムを構築した事例や構築の方法論の共有も盛んとなっており、その強い話

Figmaからさまざまなカラートークンを生成して最高の色世界を保守する noteUIDev#1

この記事は、Figma 開発 Advent Calendar 2022 の17日目の記事です。こんにちは 🐈 ぼくは CDO 室直下のデザインシステムプロジェクトで、コンポーネントライブラリ開発をしている UX エンジニアです。デザインと実装を繋いで、一貫性のある体験を提供することをテーマ取り組んでいます。これから少しづつ日々のチームでの開発 note を書いていきますので、お時間あればお付き合いください◎ _ _ これはデザイナーが把握している色世界を、実装側にい

Spectrum版 minneのブランドを反映したイラストができるまで

こんにちは。GMOペパボ株式会社の「minne」というサービスでデザイナーをしている sziaoreo です。minneのブランディングとアートディレクションを行っています。 minneとは？minneは、国内最大級のハンドメイドマーケットです。アクセサリーやファッションアイテム、インテリア雑貨などだけでなく、食品や時を超えた技術が詰まったヴィンテージのアイテム、さらなるものづくりを促す素材や、手作りキットなどが売り買いされています。そして自分の手だけでつくることはもち