デザインのルール設計

本

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

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

#デザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デザインレビューの目的とガイドラインの役割について

私が事業部長を務めるサービスデザイン事業部のCXデザイングループではデザインの横断的な品質チェック、またデザインの共創を目的としたデザインレビューの取り組みを進めています。今回はデザインレビューを実施するにあたり見えてきた課題とその先について述べたいと思います。 1. デザインレビュー導入に至る背景今までレビューが皆無だったわけではなく、グループ内で相談をしたり、1on1で上長に相談することで、第三者の意見をうまく取り入れてきました。しかし、メンバー増加に伴うレビュー負荷を

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

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

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

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

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

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

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

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

デザイン組織をデザインする

2020年1月にSPEEDAのCDOに就任しました。3ヶ月後の4月からは、SPEEDA、FORCAS、INITIALといったB2B SaaSプロダクトを担当していたデザイナーがひとつの組織に集まり、B2B SaaS事業のCDOになりました。（ちなみに、速攻で育休取得したので、本当にカオスのスタートでした汗）あれから、約１年。多くの失敗を重ね、私たちのデザイン組織が成長していく中で、学び得た実践知をシェアします。新年度に、新しい組織を立ち上げ成長させていく方々のヒントになれ