デザインのルール設計

本

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

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

「誰もがつかえる」を目指す、noteのイラストシステム設計の裏側

2024年3月13日に開催されたFigma Japan2周年記念イベントTHE WAYS WE WORKに登壇しました。本記事は「誰でもつかえる」を目指す、noteのイラストシステム設計の裏側」というテーマでお話させていただいた内容です。 noteのイラストシステム「JOY」とは？2024年3月13日、noteのイラストシステム『JOY』を発表いたしました。この「JOY」という名称には、誰もが楽しく、楽にイラストを作成できるように、という想いが込められています。イラ

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

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

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

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

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

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

noteのイラストが新しくなりました！イラストリニューアルの裏側

こんにちは。noteでイラストレーターをしているKimです。 2022年11月頃に、イラストをリニューアルすることが決まり、動き出してまるまる半年。この記事では、新しいnoteのイラストには、どのような思いが込められているのか、「noteらしさ」をイラストで表現する過程でどんな課題と向き合い、どのように乗り越えてきたのか、制作の裏側をオープン社内報として公開します。オープン社内報とは？一般的には社員しか見ることのできない「社内報」をだれでも見られるように公開するこ

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

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

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

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

【2022】minneのアクセシビリティを振り返る

GMOペパボでminneというハンドメイドマーケットサービスのデザイナーをしています、たるたる（@tarutaruio）です。 GMOペパボデザイナー Advent Calendar 2022 の12日目。この記事では、2022年に行ったminneのアクセシビリティ向上の取り組みについて振り返ろうと思います。 minneとアクセシビリティminneでは、「ものづくりの可能性を広げ、誰もが創造的になれる世界をつくる」というミッションを掲げています。アクセシビリティ向上は、こ

クラシルの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 ではという定義がされています。実態としては至極シンプルなものですが、もっと分かりやすくするために具体例を見てみようと思います。上記では色の値とそれに

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

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

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

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