マガジンのカバー画像

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

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

記事一覧

デザインの基本原則を抑え、情報整理における5W1Hを決める。Takramと考える「ノンデザイナーズデザイン」ラクスル社内勉強会レポート

こんにちは、「RAKSUL DESIGN MAGAZINE」です。 デザイン・イノベーション・ファーム「Takram」と「RAKSUL」の2社で、定期的に開催している勉強会。 今回は「ノンデザイナーズデザイン」をテーマに、ノンデザイナーの方に向けて情報をわかりやすく伝えるための、デザインにおける基本原則を学ぶ会が行われました。 デザイナー職以外のビジネス職の方も、資料 / スライド作成などの作業は常日頃から行っています。しかし、作り方によっては意図していた内容が伝わらなかっ

スキ
12

エンジニアとデザイナーのコンポーネント品評会

カンムでデザイナーをしている osanai です。バンドルカードやPoolのデザインを担当しております。 アプリの改善を長年やっていると、デザインにおける一貫性の欠如が発生しがちです。意味合いは同じなのに画面ごとに色やサイズや異なっていたり、用途は同じなのに類似したデザインパターンが複数存在していたり、古いUIが一部の画面で残されたままになっていたり。 このような一貫性の欠如はデザイン負債とも呼ばれ、蓄積するとさまざまな運用コストが発生します。デザインパターンを適用すると

スキ
24

エンジニアも自己判断で活用できる、デザインシステムの運用

こんにちは!Monoxerでデザイナーをしているmoyoです😀 2019年頃から、アプリ、WEB管理画面のデザインやチーム拡張の仕組みづくりを担当しています。 皆さんの会社では、デザインシステム運用どうされてますか?モノグサ開発チームでは、2021年の始めからデザインシステムの運用と実装を行なっており、一歩目として、エンジニアが独自の判断でUI Componentを活用できることを大事にしています。 モノグサデザインシステムの目的もともとMonoxerではBootstra

スキ
25

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

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

スキ
96

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

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

スキ
256

ユーザー体験を最高にするkintone Design Systemsをつくってます

ユーザー体験を最高にするチームプロジェクトオーナーのsakitoです。 以前、kintone フロントエンドリアーキテクチャプロジェクトをスタートさせたブログ記事が公開されました。 今回はこの取り組みの一つのチームである「ユーザー体験を最高にするチーム 」について紹介します。 ユーザー体験を最高にするチームとは?kintoneのフロントエンドリアーキテクチャのアプリケーション構成はMonorepoを採用し、チーム単位でオーナーシップを担うことを意識しています。開発者視点

スキ
37

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

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

スキ
24

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

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

スキ
112

デザインシステムの目的を考える

デザインシステムの目的とは? と問われるとあなたはどんな風に答えるでしょうか? おそらく「ユーザに一貫性のある体験を提供するため」「デザイン資産を再利用できるようにして生産性を上げるため」そんな答えが一般的だと思います。私もそんな感じで捉えていましたし、間違いなくそれらはデザインシステムの効能だと思います。 が、細かいところをよくよく考えると「一貫性とは具体的にどこが一貫していることを指すのか」「一貫性を優先させることによってユーザの不利益になるシーンもあるがそれは本末転

スキ
259

デザイントークンって何?

「デザイントークン」 最近はよく使われている言葉だと思うのですが、意外と日本語での情報がないのでまとめてみました。 W3C の定義実はデザイントークンには W3C という標準化団体でのワーキンググループがあります。 これが絶対の定義と思う必要はないと思いますが、共通の定義としては便利だと思うので引用するとこの W3C では という定義がされています。 実態としては至極シンプルなものですが、もっと分かりやすくするために具体例を見てみようと思います。 上記では色の値とそれに

スキ
227

minneのブランドを反映したカラーパレットができるまで

こんにちは。 GMOペパボ株式会社のハンドメイドマーケットサービス「minne」でデザイナーをしております、sziaoreoです。 前回の記事では「minneのブランドを反映したイラストができるまで」のお話について紹介させていただき、その時「次はカラーパレットについて書くぞ〜」と言ってしまったなぁということを思い出し、書きに参りました。 ということで、こちらの記事では「サービスのブランドからどのようにカラーパレットを考えたか」 を中心に、カラーパレットの制作過程についてご紹

スキ
187

SmartHR Blueカラーチップv1.0を制作したので知ってほしい

こんにちは! ごぶさたしております。SmartHRでデザインをやっている関口(sekig)です。 SmartHRコミュニケーションデザイングループ、通称「コムデ」でデザイン周辺のディレクション全般をやっているのですが、今回いろんな方に知ってほしい取り組みがあり筆をとりました。 みてくれ。 https://smarthr.design/basics/colors/printguideline/ カラーチップをつくった今回、当社のコーポレートカラー SmartHR Blue

スキ
138

みんなで使うから、ブランドが強くなる。SmartHR Design System リニューアルのおしらせ

おつかれさまです、コムデ(コミュニケーションデザイングループ)のsamemaruです。ブランドマネジメントという、ブランド気にする係をしています。 お知らせです! 本日、SmartHR Design Systemがサイトリニューアルしました!🎉 2020年6月のリリースから約1年半。社内外で徐々に認知され、現在は毎日数百ユーザーにアクセスしていただいています。いつも使ってくれている方にも、これまであまり接点がなかった方にも、いいところがたくさん増えたので、リニューアルの

スキ
126

みんなに知ってもらいたいデザインシステムのこと

この記事はクラウドワークス Advent Calendar 2019 の15日目になります。 みなさんこんにちは。2019年の10月よりクラウドワークスで働いております@yamanokuです。 普段は勉強会やカンファレンスに行ったり、インターネットを徘徊したり、飲酒をしたり、一児の父をやっていってます。現在はフロントエンドエンジニアとしてデザインシステムを作るチームにジョインしています。 今回はそのデザインシステムについて、どういったときに必要となるのか、エンジニア・デザ

スキ
37