マガジンのカバー画像

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

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

#UIデザイナー

デザイナーに向けたデザインシステムを作る

こんにちは、Onjiです。 今回は、社内で使用しているデザインシステムの見直しに携わる機会をいただき、進めていく中で得た知識や整理した内容をご紹介させていただきます。（PCやタブレットでの閲覧推奨） 🍞 デザインシステムの見直しBrewusは受託開発を行う企業で、新規デザインファイルを立ち上げる頻度が多く、テンプレートが必要でした。これまではカラー/フォント/コンポーネント等、Figma上で別々のテンプレートとして管理され、案件ごとに複製をして使用していました。 しかし、U

Onji [UI/il…

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

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

東芝 UIデザイン

クライアントワークでも活かせる！ 全社で使えるデザインシステムの制作秘話

そもそもデザインシステムとは？最近様々な企業で発表されている「デザインシステム」ですが、デザインシステムと一口に言っても人によって解釈が異なったり、私も以前は何となくコンポーネントがまとまっているもの…？程度の認識でした。 デザインシステムの定義は企業によっても多少異なりますが、デザイン指針や優れたデザインの定義を文章でまとめたもの（デザイン原則）と、それを実際のデザインとして具現化し、UIやコンポーネントにまとめたもの（デザインガイドライン）の2つが組み合わさったものが主

鄭昇（ていのぼる）@R…

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

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

よつくら

デザインシステムの運用と活用

クックパッドの開発に携わっているデザイナーの茅島です。 今回はレシピサービスに関わるプロダクトデザイナーとして、実際にどうデザインシステムを運用, 活用しているのか紹介します。 いつからあるかクックパッドには2013年からデザインシステムがあります。最初はOSごとの実装にフォーカスされているデザインシステムでしたが、適宜更新され続けていて、最近ではサービスや用途に合わせて分けています。 どんな内容かレシピサービスのデザインシステム apron は内容の一部を2020年から

Yuki Kayash…

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

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

kasane.shin…

スタートアップ唯一のデザイナーが、デザインシステムを構築する方法

こんにちは。アルプのデザイナーの大澤（@Tadaki）です。 Taras Savytskyi さんに掲載許可をいただき、「スタートアップ唯一のデザイナーが、デザインシステムを構築する方法」の記事を翻訳させていただきました。 私自身そうなのですが、スタートアップではやることが多岐にわたり、デザインシステムを構築しようにも中々手が回らない状況です。記事では、素早くデザインシステム構築するための知見をまとめた素晴らしい内容となっているのでぜひご覧ください。以下記事内容になります

Tadaki

デザイン・実装の生産性を上げるための7つの考え方

デザイナーによるデザインにも、エンジニアによる実装にも、 「生産性」の問題はつきものかと思います。 プロダクト開発ではエンジニアとデザイナーが力を合わせて設計・実装をしていくわけですから、デザインの生産性を考える上で、実装上の生産性も同時に考える必要が出てきます。 （一般的に、デザインと実装効率を上げるためには多くの組織がデザインシステムを構築・運用するというアプローチを取るのではないでしょうか。） デザイン視点から、デザインと実装の生産性向上への取り組み方について考え

ミカサ トシキ

視認性を意識したデザインシステムのアップデート

こんにちは！アルプのデザイナーの大澤 (@Tadaki) です。 サブスクリプションの契約や請求の管理を SaaS として提供する Scalebase というプロダクトのデザイナーをしています。 先日、Scalebase のデザインシステムについて記事を書きました。実は最近このデザインシステムの視認性に関わる部分を大きくアップデートしています。 今回のデザインシステムのアップデートでは、主に「色の選択基準の明確化」「アイコンの視認性の向上」「情報の階層化」をしています。

Tadaki

業務を効率化させるデザインシステムとは？

こんにちは！アルプのデザイナーの大澤 (@Tadaki) です。 先日デジタル庁でデザインシステム勉強会の記事が公開されましたね。活用事例として私が所属するアルプでのデザインシステムについて紹介できればと思います。 アルプではサブスクリプションビジネスを行う企業向けに、今まで手作業や自社開発がスタンダードだった契約や請求の管理を SaaS として提供する Scalebase というプロダクトを開発しています。 Scalebaseの開発では、日々プロダクトチームのメンバー

Tadaki

デザインシステム of ダッチデザイン

こんにちは！Hallo！ 健康管理システムCarely(ケアリィ)の導入を通じて働くひとと組織の健康を創る事業を展開している株式会社iCAREの高橋名人 (@zouzei8to10)と申します！ 突然ですが、みなさんはオランダという国にどういったイメージを持っていますか？ 私はオランダのデザイン、通称「Dutch Design(ダッチデザイン)」が大好きです。大学時代に首都アムステルダムからユトレヒト、デルフト、ロッテルダムをめぐりダッチデザインを訪ねる旅に行ったことが

SaaSで働く高橋名人

デザインシステムとは引き出しを設計することである

こんにちは！ 健康管理システムCarely(ケアリィ)の導入を軸に働くひとと組織の健康を創る事業を展開している株式会社iCAREの高橋名人 (@zouzei8to10)と申します！ さて、 前回デザインシステムプロジェクトについて書き始めてから、4ヶ月ほど経ちました。 見た目のUser Interfaceの部分にはなかなか現れにくいですが着実にシステムとしてUIパーツのdocumentationとコンポーネント(共通化されたフロントエンドパーツ)への置き換えが進んでいま

SaaSで働く高橋名人

デザインシステムをアジャイルで。カラーシステムは機能性から

今回は以前ご紹介した、「 デザインシステムをアジャイルで構築する方法 」というnoteの展開で色彩に関してさらに後から詰めた部分のご紹介をいたします。 　―　 デジタルメディアの色彩が持つメンタルモデル 前回のnoteでは個別の色合いに関してどのように役割を考えたか記載していなかったので、今回はその点においても少しご説明したいと思います。 私はAFTの色彩検定１級をかなり昔にとっているのですが、色彩設計もまた、デジタルメディアに最適化した体系がないと言うのが現状ではないか

ayakoMorito…

デザインシステムをアジャイルで。タイポグラフィックマトリックスをデジタルの世界に

以前、「 デザインシステムをアジャイルで構築する方法 」という記事を初めてのnoteで書いたのですが、アジャイルで進めた為、また少し具体的に詰めた部分を今回はタイポグラフィ編でお送りします。 　―　 課題のおさらいデザインシステムという言葉が出てくる前からデザインガイドラインと言うものが存在していましたね。 私はあれを名前の通り、ブランド保持のための方法をガイドとして載せているものと解釈していて、質の良いものは分かりやすいが、基本的には、 社外へのブランドリソース提供の為に

ayakoMorito…