デザインのルール設計

本

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

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

#UIデザイン

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

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

４年間、7色だけでUIをデザインし続けた話

2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。漫画アプリ「GANMA!」僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。オリジナ

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

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

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

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

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

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

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

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

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

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

もう散らかさない！チームでFigmaの色管理

この記事は「フルリモートデザインチーム Goodpatch Anywhere Advent Calendar 2020」の10日目の記事です。フリーランス&Goodpatch Anywhereで、グラフィックやUIデザインなど見た目周りを専門にデザインしているハマダナヲミと申します。文字とビールが好きです。複数人でデザイン作業をする際、課題になってくるのは色のルールや管理方法ではないでしょうか。Goodpatch Anywhereでは最小2人、最大4人を超えるUIデザ

iOSのデザインから考えるヤコブ・ニールセンの 10ヒューリスティックス | UI/UX Weekly vol.13

世の中には数多くの「デザイン原則」が存在します。その中でも、UIデザインやユーザビリティに関して最も広く使われている原則として、ヤコブ・ニールセンが提唱した「10のユーザビリティヒューリスティックス(Ten Usability Heuristics)」があります。（以下10ヒューリスティックス） UIデザインやUXデザインに関わる方であれば一度は聞いたことがあるかもしれません。今回はその10のヒューリスティックを見直して、iOSのデザインを例にまとめてみたいと思いま

2020年、事業会社の開発組織で機能するデザインシステムを目指して #1 背景と原則編

こんにちは！株式会社スペースマーケットデザイン部の伊東です。リモート勤務が常態化した中で、デザイン部としても"これからの働き方"を模索した上での試みが増えています。例えばリモートランチや、週2のチェックイン（仕事へ入り込む前の朝にアイスブレイク的に行われるリモート雑談。毎回簡単なテーマを設定して話します）、Figmaを活用したペアデザインなどです。まだまだ課題も残しているのが実際の所ではありますが、完全リモートの体制以前と比べて仕事の効率を損なわないよう各々が意識しな

デザインシステムのプロジェクトの実践で学んだ3つの大切なノウハウ

この記事は、2019年3月8日にクラウドワークスデザイナーブログで執筆した記事です。こんにちは。クラウドワークスのデザインシステムのデザインを担当している小林です。昨年末の「CrowdWorks Advent Calender 2018」3日目の記事で、これまでのクラウドワークスのデザインシステムを作ってきた過程での失敗を書かせていただきました。この記事を書くにあたり、これまでのプロセスや今の問題点を振り返ることができました。また、この記事を書いたときは、デザイ

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

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