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

『みてね』のビジュアルガイドラインができるまで。その背景とプロセスを聞いた

こんにちは。 MIXI デザイン本部デザイナーリレーショングループです。『家族アルバムみてね』（以下、『みてね』）では、誰もが『みてね』に関するデザインを高品質に、効率的に行えるように、また一貫性のあるユーザー体験を提供するために、デザインコンセプトやロゴ、カラー、写真に関するガイドライン、各種 UI コンポーネントを取りまとめたデザインシステムを運用しています。デザインシステムのなかでもビジュアルガイドラインの策定を主導したのが、ビジュアルデザインチームの4名で

「デザインシステム」って何？新人WEBデザイナーがインターネットの海を泳いでみた

はじめまして！株式会社Rabeeの新人デザイナーのakaneと申します。元々はWEBメディアの編集者をやっていましたが、昨年の秋に未経験からWEBデザイナー（UIデザイナー）に転職しました。デザイナー歴4ヶ月。日々新鮮な気持ちで働いています💪 はじめにこの記事は、かけだしデザイナーの目線で「デザインシステムって何？」の疑問に向き合った記録です。ちょっぴり長い記事ですが、私と同じような新人デザイナーに楽しんでもらえたら嬉しいです！最後に参考記事も紹介しているので、ぜ

Token(トークン)とDesign System(デザインシステム)の違いとは？

Design token(デザイントークン)という名前が普及してからしばしの時は経ちますが、いまだによくトークンを理解しきれていません。そんなデザイナー歴18年目になる私なりに、Tokenを理解し、わかりやすく伝えようと思い記事を書いています。どこまで正確かはわかりませんが、今現在の私の理解を書き綴りますので、解釈は自己責任でお願いします。トークンの必要性さて、デザイントークンとはなんでしょう？色々な記事があるものの、すごくわかりやすくてこれを見れば一目稜線

日本・海外のデザインシステム総まとめ【56事例＋α】

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今日は、WEB上に公開されているデザインシステムをとにかくたくさん集めました。業種や規模、国内外の企業問わず、デザインシステム（スタイルガイドも含む）と名の付くものを、見つけられた範囲ですべて収集しています。多数のデザインシステムの比較・検討をしたい際など、データベース的にお役立ていただけたら幸いです。 ※以下の目次、異次元の長さになっています。開く際はご注意ください…🐲 はじめに🗒掲載方法について

10年ものアプリのダークモード化プロジェクト、カラー設計の舞台裏

こんにちは、ニューズピックスのプロダクトデザイナー、吉川（よっしー）です。先日、ニューズピックスアプリがダークモードに対応しました。以前からご要望を多くいただいており、昨年末から取り組みはじめ 9月にAndroid版リリース、10月にiOS版もリリースが完了しました。 2013年から今年で10周年を迎えたニューズピックスアプリ。その10年間の歴史を持つアプリをダークモード対応するためのカラー設計についてお伝えしていきたいと思います。対応範囲アプリの全階層すべて適用す

Design Reflections: Design Systems Reimagined/デザインシステムの再構築

Surface&Architectureのjournalでは、S&Aの新しいメンバーでトルコ出身のMerve（メルヴェ）によるデザインレポートを全10回にわたり公開していきます。レポートでは、毎回2023年のデザイントレンドをテーマとして設定し、グローバルな視点で考察していきます。テーマ「デザインシステムの再構築: 個性と効率の架け橋」The design system we explore in this series refers not only to a coh

知る・触れる・楽しむ carbon design system と design system

はじめにみなさん、こんにちは。いつもIBM UX Communityをご覧いただきありがとうございます。 IBM UX CommunityのUXデザイナー、前壮一郎です。現在、IBMの新しく立ち上がった部門ICE（ IBM Client Engineering ）でUXデザイナーをしています。近年、デジタルプロダクトの世界は急速に進化しています。ユーザーはますます高い期待を持ち、多様なデバイスやプラットフォームを通じてシームレスな体験を求めています。私は、この複雑

Figmaの使いやすいDesign Systemの作り方~Color,Font,Variants~

私ごとですが、ついにデザイナー歴が17年を超えてきました。時代の変化とともにツールや常識も変わりつづけています。現在はFigmaがUIツールとしては一強で、UIデザイナーの方はほとんどの方が使われているのではないかと思います。とても使いやすく管理もしやすいツールですが、使い方を理解していないと混乱を招いたり、自分しか使えないコンポーネントも作り得てしまいます。今回はUI,UXでいうと10年以上携わってきた私が経験を通して考える、使いやすいFigmaのVariant

¥150

デザインシステム開発優先度の「難しさ」と「対策」

こんにちは、ログラスのデザイナー高瀬です。今回はデザインシステムの理想と現実について話していきたいと思います。デザインシステムって素晴らしいけど、いざ実装しようとするとプロジェクトの扱いや開発優先度の調整って難しいですよね？今回はそんなデザインシステムにまつわる開発優先度と対策の話をしていきたいと思います。デザインシステムは美しくも辛いデザインシステム導入の目的や方法に関して、今では優良なnoteや書籍がたくさんあり私もとても参考にしました。ユーザーの体験・ブランド

小学生でも分かる？Design System

今回は、デザインシステムの入門用に記事を作成しました。専門的な知識になると、途端に言葉が難しくなったり、理解に時間がかかりますよね。なので、今回は小学生に教えるイメージで記事を書いてみました。デザインシステムについて、詳しく学ぶ前段階に役立つかもしれません。既に理解ある方も、おさらいしていきませんか。デザインシステムってなぁにデザインシステムとは、デザインに関するルールや規則の集まりだよ。例えば、色の使い方や文字の大きさ、形やデザインのパターンなど、デザインに

開発者のためだけにつくらないデザインシステム

本記事は2022/11/2に開催されたSchema by Figma Tokyoにてお話させていただいた内容になります。内容を記事用にアレンジした内容になっています。この記事を見ている方はデザインシステムの取り組んでいるまたは、始めようとしていたり、興味がある方々だと思います。いきなりですが、あなたが想像するデザインシステムのターゲットは誰でしょうか？想像していたターゲットはこの中にいましたか？まず最初に思い浮かべるのはデザイナー・エンジニアなどではないでしょうか？

インハウスデザインチームが挑んだ「SMBCデザインシステム」の裏側

より多くのお客さまに当行を選んでいただくため、デザインの品質をさらに高める——そんなミッションのもと、SMBCインハウスデザインチームでは1年半にわたり、ある大きなプロジェクトに取り組んできました。それが、「デザインシステム」の設計・構築です。 2021年度のグッドデザイン賞では、デザインを活用した顧客体験の向上に向けた取り組みの一つとして、このデザインシステムも受賞の対象となりました。今回は、私たちがどのようにデザインシステムを構築していったのか、プロジェクトの裏側を

デザインシステム【アイコンライブラリ】〜一般公開の裏側〜

エクサウィザーズで開発しているアイコンライブラリを、MIT ライセンスで一般公開しました。個人、商用利用にかかわらず、どなたでもご使用いただけますので、ぜひご活用ください！この記事では、アイコンライブラリを一般公開した目的や、社内で取り組んだことを紹介させていただきます。デザインシステムを公開しようと考えている方の参考になれば幸いです。前回の「アイコンデザインルール設計」も、合わせてご覧ください。デザインで社会に貢献する「デザインシステムを自社だけにとどまらず、社

デザインシステム【アイコンデザインルール設計】〜プロセス大解剖〜

エクサウィザーズでAIプロダクトのUI/UXデザイナーを担当している吉田です。前回はデザインシステムのアルゴリズムを活用したカラーパレット開発についてご紹介しました。今回はアイコンのデザインをどのように定義していったかのプロセスをご紹介します。デザインシステムを開発する前の状態エクサウィザーズは 2016年に AI スタートアップ会社として起業してから、「AIを用いた社会課題解決を通じて幸せな社会を実現する」というミッションのもと、10 個以上の AI プロダクトを開発し

フォローしませんか？

#Design

『みてね』のビジュアルガイドラインができるまで。その背景とプロセスを聞いた

「デザインシステム」って何？新人WEBデザイナーがインターネットの海を泳いでみた

Token(トークン)とDesign System(デザインシステム)の違いとは？

日本・海外のデザインシステム総まとめ【56事例＋α】

10年ものアプリのダークモード化プロジェクト、カラー設計の舞台裏

Design Reflections: Design Systems Reimagined/デザインシステムの再構築

知る・触れる・楽しむ carbon design system と design system

Figmaの使いやすいDesign Systemの作り方~Color,Font,Variants~

デザインシステム開発優先度の「難しさ」と「対策」

小学生でも分かる？Design System

開発者のためだけにつくらないデザインシステム

インハウスデザインチームが挑んだ「SMBCデザインシステム」の裏側

デザインシステム【アイコンライブラリ】〜一般公開の裏側〜

デザインシステム【アイコンデザインルール設計】〜プロセス大解剖〜

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

フォローしませんか？

#Design

『みてね』のビジュアルガイドラインができるまで。その背景とプロセスを聞いた

「デザインシステム」って何？新人WEBデザイナーがインターネットの海を泳いでみた

Token(トークン)とDesign System(デザインシステム)の違いとは？

日本・海外のデザインシステム総まとめ【56事例＋α】

10年ものアプリのダークモード化プロジェクト、カラー設計の舞台裏

Design Reflections: Design Systems Reimagined/デザインシステムの再構築

知る・触れる・楽しむ carbon design system と design system

Figmaの使いやすいDesign Systemの作り方~Color,Font,Variants~

デザインシステム開発優先度の「難しさ」と「対策」

小学生でも分かる？Design System

開発者のためだけにつくらないデザインシステム

インハウスデザインチームが挑んだ「SMBCデザインシステム」の裏側

デザインシステム【アイコンライブラリ】〜一般公開の裏側〜

デザインシステム【アイコンデザインルール設計】〜プロセス大解剖〜

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