マガジンのカバー画像

#デザインシステム 記事まとめ

218
デザインシステム関係の記事まとめ / #DesignSystems #デザインシステム / 運営メンバーも募集中。/
運営しているクリエイター

#デザインガイドライン

【学習におすすめの情報】デザインガイドライン・デザインシステムを見てみよう

こんにちは デジタルハリウッド動画教材開発の人です。 冬は大好きな季節です。雲一つない快晴の朝に広がる青々とした空、透明度の高いキリっと冷えた空気が朝の寝ぼけた頭をリフレッシュしてくれますね。 さて、今回はデザインにまつわるお話。デザインを考えるときに、どんな感じでまとめたらよいかわからない~><という皆様!いろいろな企業・団体がデザインガイドライン・デザインシステムというものを作っているのをご存じでしょうか? ■デザインガイドラインとは? デザインガイドラインとは、製品

クライアントワークでも活かせる! 全社で使えるデザインシステムの制作秘話

そもそもデザインシステムとは?最近様々な企業で発表されている「デザインシステム」ですが、デザインシステムと一口に言っても人によって解釈が異なったり、私も以前は何となくコンポーネントがまとまっているもの…?程度の認識でした。 デザインシステムの定義は企業によっても多少異なりますが、デザイン指針や優れたデザインの定義を文章でまとめたもの(デザイン原則)と、それを実際のデザインとして具現化し、UIやコンポーネントにまとめたもの(デザインガイドライン)の2つが組み合わさったものが主

デザインシステムの運用と活用

クックパッドの開発に携わっているデザイナーの茅島です。 今回はレシピサービスに関わるプロダクトデザイナーとして、実際にどうデザインシステムを運用, 活用しているのか紹介します。 いつからあるかクックパッドには2013年からデザインシステムがあります。最初はOSごとの実装にフォーカスされているデザインシステムでしたが、適宜更新され続けていて、最近ではサービスや用途に合わせて分けています。 どんな内容かレシピサービスのデザインシステム apron は内容の一部を2020年から

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

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

先行デザインからデザインシステムを作るメリット

デザインをするためのルールやアセットを整備することで、製品の拡張や複数製品の開発に対して、効率的で統一した開発ができるようにする仕組みを「デザインシステム」と呼んでいます。 デザインシステムに近いものとしてデザインガイドラインがありますが、これにUIコンポーネントなどのデザインツールを統合することで「使える」ガイドラインにすることがデザインシステムの特徴となっています。 またいつまでも使えるように維持していくために、デザインシステムの運用面でも、製品を中心とした開発からデ

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

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

デザインシステムをアジャイルで。カラーシステムは機能性から

今回は以前ご紹介した、「 デザインシステムをアジャイルで構築する方法 」というnoteの展開で色彩に関してさらに後から詰めた部分のご紹介をいたします。  ―  デジタルメディアの色彩が持つメンタルモデル 前回のnoteでは個別の色合いに関してどのように役割を考えたか記載していなかったので、今回はその点においても少しご説明したいと思います。 私はAFTの色彩検定1級をかなり昔にとっているのですが、色彩設計もまた、デジタルメディアに最適化した体系がないと言うのが現状ではないか

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

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

意匠法改正でデザイナーは何に気をつけたらいいのか

2020年4月に、意匠権に関わる法律「意匠法」が改正されます。 今回の意匠法改正では、UIに関わる部分が大きく変更されます。いろいろ学ぶ機会がありインプットしていく中で、特にWebやスマホアプリに関わるデザイナーに意匠法を知る、または調べるキッカケになればと思ったのと少しの願いを込めて書きました。 何が変わるのか詳しくは特許庁のサイトで自ら確認して頂きたいが、UIに関わる点では、「画像」が保護対象に加わっています。画像という単語には違和感がありますが、この「画像」は、ソフ

アメリカ政府のWebデザインシステム(1)

United States Web Design Systemというアメリカ政府が公開しているwebデザインのガイドラインがあります。ソースコードがgithubで公開されていてデザイナー向けのSketchファイルもダウンロードできる充実のデザインシステムです。面白い素材なので何回かに分けて読んでみたいと思います。 ドキュメントが開発者向けとデザイナー向けに分かれているのも、ちゃんと読む人を想定して作っている感じがして好感度高いです。 日本はどうかなと思って「日本政府 w

デザインシステムをアジャイルで構築する方法

はじめまして。デジタルメディア アラウンド15年生のデザイナーMoritomoです。今所属しているRettyで最近Twitter+note熱が高くなっているので、現在手掛けている、とある突貫リニューアル(部分改修)で、エンジニアさんと改善を加えながら進めることの出来たデザインシステム構築の体験談をご紹介させていただきます。  ―  そもそもデザインシステムは必要か?デザインシステム作るぞーと気張ってみたものの、資料化した頃には疲れ果てていて、誰かに渡しておしまい。絶対そうな