マガジンのカバー画像

UIデザインのはなし

113
実際に実務で参考にできそうな、UIデザイナーさんのお役立ち記事をまとめています。
運営しているクリエイター

#デザインシステム

デザインシステムを始めるときの流れと考慮すること

こんにちは。StockmarkのProduct Designer 駒ヶ嶺です。 以前、デザインシステムを始めた経緯と進め方を紹介しましたが、実際にデザインシステムを始めようとした時に対して情報に過不足があるように感じ始めました。 そこで今回は今ならどのような考え方を持って進めるかということも踏まえ、デザインシステムの運用を開始するにはどうしたら良いか、また運用を開始した後のことについても紹介していこうと思います。 デザインシステムの目的を明確にするこの記事に興味を持った

デザインシステムを改善!Figma のコンポーネントライブラリの整理でやったこと 7 点

家計簿サービス Zaim のデザイナーの今泉です。 今回はデザインシステムの一部、コンポーネントライブラリをリファクタリングした事例をご紹介します。 デザインシステムとはデザインシステムとは、良いデザインを『効率的』かつ『一貫性』をもって提供するための仕組みです。コンポーネントライブラリはデザインシステムの一部で、画面のデザインやボタン、リストなどの UI パーツの集まりです。 Zaim のデザインは Figma で作成し、コンポーネントライブラリも Figma 上で管

🗂️ Design Materials:デザインシステム・チェックリスト。デザインシステムの計画、構築、および拡張に役立てよう!

今回はデザインシステムの計画、構築、および拡張に役立つオープンソースのチェックリストをご紹介します。 他の言語と同様に、デザイン言語は、プロダクトデザインへのアプローチを通じて視聴者とコミュニケーションをとるための系統的な方法です。 これは、一貫したカスタマーエクスペリエンスの基礎です。 デザイン言語 他の言語と同様に、デザイン言語は、プロダクトデザインへのアプローチを通じて視聴者とコミュニケーションをとるための系統的な方法です。 これは、一貫したカスタマーエクスペ

スタートアップ唯一のデザイナーが、デザインシステムを構築する方法

こんにちは。アルプのデザイナーの大澤(@Tadaki)です。 Taras Savytskyi さんに掲載許可をいただき、「スタートアップ唯一のデザイナーが、デザインシステムを構築する方法」の記事を翻訳させていただきました。 私自身そうなのですが、スタートアップではやることが多岐にわたり、デザインシステムを構築しようにも中々手が回らない状況です。記事では、素早くデザインシステム構築するための知見をまとめた素晴らしい内容となっているのでぜひご覧ください。以下記事内容になります

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

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

業務を効率化させるデザインシステムとは?

こんにちは!アルプのデザイナーの大澤 (@Tadaki) です。 先日デジタル庁でデザインシステム勉強会の記事が公開されましたね。活用事例として私が所属するアルプでのデザインシステムについて紹介できればと思います。 アルプではサブスクリプションビジネスを行う企業向けに、今まで手作業や自社開発がスタンダードだった契約や請求の管理を SaaS として提供する Scalebase というプロダクトを開発しています。 Scalebaseの開発では、日々プロダクトチームのメンバー

日本国内でデザインシステムに取り組んでいる会社・事例をまとめてみた

海外の事例はいろいろあるので見てきたのですが、国内ではどんな会社が取り組んでいるのか、興味があったので調べてまとめてみました。 「おいおい、この会社が足りないぜ!」というものがあればコメントで教えていただけると喜びます。 WantedlyAtama plusCyberAgentCookpadGMOペパボSmartHRVisionalIncrementsiCareREADYFORfreeeYahoo!メルカリfluct いかがだったでしょうか?各社の取り組みや実際に運用し

我が Design-Frontend Ops論〜フロントエンド開発を加速するためのデザイン - 仮説編〜

先日こんなツイートをしたのですが 思いの外反響があり、もっと具体的に聞いてみたい・ディスカッションしてみたいというお声をいくつかいただきました。 せっかくの機会なので、現状自分が考えるデザインとフロントエンドの接合の最適化、カッコ良くいうと「Design-Frontend Ops論」を語っていこうかなと思います。 ※ 予防線貼っておくと、まだ全然実践できていないので話半分に聞いてください。タイトルに"仮説編"とついているのはそのためです。 ※ 一緒に探求してくれる気概あ

Atomic Design と Figma の組み合わせでデザインが便利になる|デザインシステムの作り方

スマートキャンプデザインブログ、デザイナー/エンジニアのhaguriです。 ユーザー体験の統一化のために大切な「デザインシステムの作り方」について紹介します。(スマートキャンプでもまだまだ模索中......) スマートキャンプでは、インサイドセールスに特化したCRM「Biscuet(ビスケット)」という新サービスを発表をしました。 まだ開発中のサービスですが、このBiscuet(ビスケット)のデザインシステムの考え方を紹介していきます。 上記のランディングページ(LP

デザイン原則を作って、プロダクト設計における譲れないことを固めよう - デザインシステム構築奮闘記③ -

こんにちは!atama plus UX/UIデザイナーのヌマタ @n_m_ta です。 私たちは現在、デザインシステムの構築に取り組んでいます。この連載は、スタートアップのインハウスデザイナーたちがデザインシステムを1から構築する様子をレポートして、参考にしていただければという趣旨ではじめました。 デザインシステムの構築に至るまでの経緯はこちらをご覧ください。プロダクトの概要も載っています。 前回、『Design Systems』をデザイナーたちで読み、進め方の検討を行い全