デザインのルール設計

本

デザイン原則、デザインシステム、ガイドラインの考え方や運用について理解を深めるためのまとめ

運営しているクリエイター: かやま

#デザインシステム

🍳半熟なデザインシステムを育てていく - noteの事例あれこれ振り返り

先日開催された「半熟デザインシステム vol.1」に、note社から登壇させていただきました。たくさんの方にご参加していただけて、とてもありがたかったです！オフライン開催ならではの、リアルな取り組みや悩みについてディスカッションできて、登壇しながらもとても勉強になりました。今回はそのなかでお話しした、noteのデザインシステムの取り組みについて、内容を振り返りつつ、補足できるポイントも合わせてのまとめです。イベント全体がまとまったレポートは、こちらの記事に書いていただ

IPの世界観に寄り添う、マルチブランドなカラーシステム設計論

はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多か

デザインシステム完全版｜Figmaでの作り方、事例など【2024年版】

このドキュメントの目的デザインガイドライン・システムに関する理解を深め、UIUXを通したプロダクト価値の最大化が業界として底上げされるといいなと思っています。あとは、私rikikaが個人的にいろいろなお仕事で作らせて頂く機会をいただくのですが、そのたびに事例や作り方のハウツーが目まぐるしく変わっていき、インターネット上に情報が散らばっていると感じていたのでそのsingle source of truthの役目を担いたいという気持ちもあります。とはいえ、絶対これが正し

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

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

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

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

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

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

クラシルのWebチームでデザインシステムを少しずつ構築していっている話

delyのWebチームでプロダクトデザイナーをやってるkassyです。現在、Webチームではデザインシステムを少しずつ導入しています。今日はその取り組みについてご紹介したいと思います。今回の作業を行ったチームのメンバー構成デザイナー × 1 フロントエンドエンジニア × 2 フロント兼サーバーサイドエンジニア × 1 デザインシステムとはなにかとはいえデザインシステムと言われてもなんのこっちゃな方もいると思うので、カンタンに説明します。ざっくりいうとデザイナ

クックパッドのデザイン品質を支える Apron Design System の構築

こんにちは、クックパッド株式会社デザイン戦略部のふじけん(@kenshir0f)です。デザイン戦略部に異動してからは全社横断のデザイン品質の向上の仕組みづくりを担当していますが、今回はレシピサービス「クックパッド」のデザインシステムの整備で取り組んでいることを紹介したいと思います。大規模サービスにおけるデザインガイドラインの世代交代クックパッドでは約10年前にクックパッドらしいUIを簡単に実現することができる Sara という CSS ベースのUIフレームワークが生ま

Figmaのリファクタリングからはじめるデザインシステムの構築

こんにちは、GaudiyデザイナーのTORAJIRO（@jirosh1998）です。『英単語アプリ mikan』の副業デザイナーとして、Figmaリファクタリング&デザインシステムの一歩目を構築した話を書こうと思います。このnoteの最後に、今回作成した『mikan DesignSystem』のデータを公開していますので、ぜひご覧ください👋（mizoさんをはじめmikanのみなさん、具体的なアウトプットの公開まで許可いただき感謝です！心広すぎ！）デザインシステム本

SaaSプロダクト開発には欠かせない。Takramと考える『デザインシステム』ラクスル社内勉強会レポート

こんにちは、「RAKSUL DESIGN MAGAZINE」です。近年、国内外のB2B、マーケットプレイス企業で導入されている「デザインシステム」。プロダクト開発には欠かせない考え方となっており、特に画面数の多いB2B向けのSaaSプロダクトにおいてはデザインシステムの作成はマストになりつつあります。要はデザインシステムをしっかりと設計することが、ひいては事業成長につながるわけです。今回Takramのメンバーをラクスルにお招きし、デザインシステムの考え方やメリットにつ

デザインシステムは、作ってからが本番。

デザインシステムってどうやって作るの？運用どうするの？について考える。こんにちは、クックパッドデザイン推進部部長のいちはらです。クックパッドのレシピサービスにはapronというデザインシステムがあります。それが、この度Figma Communityに公開しました👏 ほんの一部ですが公開しましたので、このデザインシステムを作って得た気づきや、その後のことを一問一答形式で書いていこうと思います。この記事が、ガイドラインやデザインシステムについてお悩みの方の参考になればい

【永久保存版】デザインシステム「カラーパレット」を徹底調査しました

サービスのカラーパレットをバージョンアップさせるべく、デザインシステム「カラーパレット」を調べることになりました。開発チームからの要望としては「どうせ新しくするなら、漏れのない状態を目指したいね」ということで、iOS/Androidのガイドラインから始めて、話題になっていたAmebaスピンドル、さらに他社のデザインシステムも含めて徹底的に調査しました。先に調査結果ですが、大枠でまとめるとこのような形となりました。・色は、明度差も含めたトーンをパレットとして持ってお

デザインシステム：みんなでデザインするための共通言語

じわりじわりではあるものの「デザインはみんなでするもの」という認識が広まりつつあります。私たちのライフスタイルは多様化し、サービスに対する期待値の高まり、社会の複雑化、未来を予測することがより困難になっていることなど様々な要因により、私たちがサービスを作る上で持つべきマインドセットに大きな変化が求められています。これまではユーザーのことを中心に考えてサービスを作っていればよかったのに、ユーザーを取り巻く環境を理解した上でサービスを作ることが求められるようになったのもその一

行政サービスにおける“デザインシステム”とは何か

Goodpatchの行政デジタル化リサーチチームです。今週から毎週月曜日にこちらのマガジンにリサーチ内容を発信していきます。よろしければフォローをお願いします！今週から6月の初めにかけては、以下の2つのテーマを隔週で扱っていきます。 1.『8か国のデザインシステムから見る行政デジタルサービスの指針』ー 4月26日，5月10日，24日，6月7日に公開予定（4本立て） 2.『世界の行政におけるサービス設計のガイドラインの意義』ー 5月3日，17日，31日に公開予定