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

本

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

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

#UIデザイン

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

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

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

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

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

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

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

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

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

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

カラーパレット作成の参考にした記事、他社のデザインシステム

株式会社アンドパッドでUIデザイナーをしている、よつくらです。アンドパッドのデザインシステムでカラーパレットの作成を担当しています。カラーパレットの作成・更新を何度も行ううちに「これもっと早く知っておきたかった….」と思うようなことがいくつかあったので記事にまとめました。この記事で触れている内容UIデザインに必要なカラーパレット（アンドパッドのデザインシステムではリファレンスカラーと呼ばれる）の作成・更新に必要な知識、他社事例この記事で触れていない内容ブランドカラー

２週間で爆速整備したデザインシステムと運用ルールを公開

こんにちは、カウシェDesignerの@Kana Kikuchiです。サービスのデザイン運用って難しいですよね。カウシェはリリースから約2年が経過するプロダクトですが、つい1年前まではデザインシステムやFigmaの運用ルールがおざなりの状態でした。そこで今回は、そんな適当デザイン運用から、ある程度の運用ルールが整うまでの怒涛の2週間について記載し、整備したデザインシステムやFigma運用ルールをご紹介したいと思います！なぜやったか1人でデザインしていたカウシェに

プロダクトと共に成長するデザインシステム

こんにちは！ Uzabase SaaS Design Division所属、SPEEDAのUIデザインを担当している進藤です。今回は日頃の業務で多くかかわっている、デザインシステムについての記事を書いてみました。 SPEEDA Design System ”FALCON”DESIGN BASEでは2021年12月にSPEEDA Design System ”FALCON”をリリースし、2022年4月にはVer2にアップデートしました。まだまだミニマムではありますが、粛

「完璧」を目指さないデザインシステムのコンテンツ作り

電子契約サービス「クラウドサイン」プロダクトデザインチームの佐藤です。先日公開された「デザインシステムを作る上で最初にやることとは？」では、デザイナーチームで実現させたいゴールからブレイクダウンし、zeroheightでデザインシステムを作ることになった経緯をお伝えしました。今回は連載の第2回目として、デザインシステムのコンテンツ作りについてお伝えしたいと思います！連載の目次第1回　デザインシステムを作る上で最初にやること第2回　デザインシステムのコンテンツ作り（

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

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

DesignSystem"FALCON"ver2.0を公開するまでの話

こんにちは。SPEEDAのUIデザイナーのあんざいです。先日大幅にアップデートされたFigmaの機能に合わせて、SPEEDA Design System "FALCON"もアップデートして2022/07/01にver2.0を公開しました！今回は公開までの流れとデザインシステムの更新をFigmaアップデートに合わせて行う際の注意点などを紹介したいと思います。公開までの流れSPEEDAでは実際に使用してるマスターファイルと公開ファイルは分けているので、下記のような順番で

デザインシステム【アイコンデザインルール設計】〜プロセス大解剖〜

エクサウィザーズでAIプロダクトのUI/UXデザイナーを担当している吉田です。前回はデザインシステムのアルゴリズムを活用したカラーパレット開発についてご紹介しました。今回はアイコンのデザインをどのように定義していったかのプロセスをご紹介します。デザインシステムを開発する前の状態エクサウィザーズは 2016年に AI スタートアップ会社として起業してから、「AIを用いた社会課題解決を通じて幸せな社会を実現する」というミッションのもと、10 個以上の AI プロダクトを開発し

デザインシステム初心者が勉強会を開いて知った泥臭く生々しい5つの運用ヒント

ここ数年よく耳にするようになった「デザインシステム」という言葉。なんとなくチームの生産性を上げる方法論くらいには理解しているけど、本を読んでも教科書的な話しか無くていまいちピンとこない、と思った人は多いのではないでしょうか。私もそう感じる中の一人でした。デザインシステムは業種、職種、組織規模、事業形態によって目指すべき形が変わるものです。また、組織の中で定着させるための定型的なフォーマットが無いので、なかなか本格的に手が出しにくい、やってはいるものの上手くいってるか分から

まずはちいさくはじめよう！デザインシステム勉強会

ノゾエです（@conoito）最近お世話になっている坪田さん（@tsubotax）の手配で、吉竹さん（@ryo_pan）をお招きし、デザインシステム勉強会を開催していただきました。坪田さん：「これって内容をnoteとかにまとめて書いたりしても大丈夫ですよね？」吉竹さん：「いいですよお」とのことでしたので、ありがたくまとめさせていただきました〜〜〜感謝です🙏 ちなみにこの勉強会開催は１ヶ月前の話です。遅くなってすみません（ずっと下書きに書きかけが眠ってい