Hatena Blog Tags
はてなブログ トップ
デザインシステム
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

デザインシステム

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
KENTEM TechBlog•9日前

Panda CSS🐼でコンポーネントライブラリを作る ── RSC時代の選定理由から実運用まで

この記事は、 テックブログ強化月間 リレーブログ企画2026 参加の記事です。 2年ほど前、社内のデザインシステムを基にフロントエンド向けのコンポーネントライブラリを実装することになり、スタイリングライブラリとして最終的にPanda CSSを採用しました🐼 本記事では、Panda CSS（以下 Panda）の選定背景から、理解の前提となる周辺知識、既存プロジェクトへの導入のしやすさ、基本的な使い方、運用上の注意点等を順に紹介していきます。 Pandaを理解するための前提知識 PostCSS カスケードレイヤー cva (class-variance-authority) なぜPandaなのか🐼…

#Panda CSS#デザインシステム#フロントエンド

関連ブログ

UPSIDER Techblog•24日前

数字で知る、アプリ進化の裏側 2025

この度、Mobile Teamのこの1年間の活動をご紹介します。 2025年4月1日から2026年3月31日までの期間、私たちは開発スピードとUI/UXを高めるべく、多岐にわたる開発と技術的な取り組みを行ってきました。本記事では、その成果の一部をご紹介します。 期間中にリリースされた主要な機能一覧 まずは、この1年間でMobile Teamがリリースした主要な新機能や改善点をご紹介します。 ※これらの機能にはUPSIDERまたはPRESIDENT CARDどちらかのみで提供されているものを含みます。 証憑自動紐付け これまで請求書回収メール機能から使用できていた、証憑の自動紐付け機能をアプリか…

#Flutter#モノレポ#AI開発#デザインシステム#生産性向上
エンジニアの思い立ったが吉日•2ヶ月前

Google公式「DESIGN.md」とは？AIがデザインを"読める"時代の新標準を徹底解説

「AIでUIを作ってもらったら、毎回デザインがバラバラで結局デザイナーが全部直すことになった」 心当たりはないだろうか。Claude CodeやCursorに「かっこいいLPを作って」と頼むと、確かに動くコードは出てくる。でも色がページごとに違う、フォントに統一感がない、ボタンの大きさがなんとなく合っていない。そういう経験を繰り返してきたエンジニアは多いはずだ。 この問題の本質は「AIにデザインの文脈が渡っていない」ことにある。いくら優秀なコーディングエージェントでも、プロジェクトのブランドや設計思想を知らなければ、毎回ゼロから想像するしかない。 2026年4月21日、Googleがその課題に…

#DESIGN_md#AIコーディング#ClaudeCode#デザインシステム#生成AI#AIエージェント#GoogleLabs#UIデザイン
freee Developers Hub•2ヶ月前

要求から体験への変換を、AIが検証する時代のデザインシステム

はじめに 現在freeeでAIフィジビリティ検証基盤のPdMをしています。Jです。もともとはフロントエンドエンジニア、デザインエンジニア、プロダクトデザイナーとキャリアを渡り歩いてきました。 どの職種にいても感じていたのは、要求が画面になり体験になるまでの変換のたびにロスが発生する、という問題です。デザイナーがFigmaで描いた画面をエンジニアが実装すると、見た目のズレで差し戻しが入る。デザインシステムのコンポーネントが標準化されても、画面全体の組み立て方（どのパターンを使い、要素をどう配置し、状態遷移をどう設計するか）は各チームの解釈に委ねられていた。コンポーネントが揃っていても、組み合わせ…

#AIエージェント#デザインシステム
ITANDI Engineer Blog•3ヶ月前

Frontendチームが取り組んでいること16選

はじめに こんにちは！Frontendチームの薄羽です。イタンジはRubyKaigiのスポンサーになるなど、Rubyに力を入れている会社だと思われていますが、実はフロントエンドも頑張っています！そこで、頑張りをみなさんに知ってもらうために、今回は「Frontendチームが取り組んでいること16選」を紹介します！ Frontendチームとは イタンジのFrontendチームにはエンジニアとデザイナーが所属しており、「プロダクトUIを横断的に見ること」を目的としています。エンジニアはプロダクトUIを構築するコードとそれを守るテスト自体の品質管理、デザイナーはUXも含めたプロダクトのデザインを頑張っ…

#デザインシステム#フロントエンドエンジニア
Cloudbase Tech Blog•3ヶ月前

Cloudbaseのデザインシステムコンポーネント設計

はじめに こんにちは、Cloudbaseでプロダクトデザイナーをしているtaka (@nukotsuka)です。 CloudbaseはクラウドセキュリティのCNAPP SaaSで、フロントエンドはNext.js + Chakra UI v2で構築しています。 今回は社内デザインシステムコンポーネントの設計についてお話しします。 このライブラリで提供しているのが CBコンポーネントです。CBButton や CBDialog、CBSelect といった CB プレフィックスのついたUIコンポーネント群で、Cloudbaseのデザインシステムのコンポーネントライブラリとして機能しています。エンジニ…

#フロントエンド#デザインシステム
MicroAd Developers Blog•3ヶ月前

保守運用を楽にするデザイントークン導入

マイクロアドでフロントエンドエンジニアをしている大石です。 フロントエンド領域で欠くことのできない"デザイン"に課題はありませんか？ 仮実装フェーズから最終成果物まで、非デザイナーでもデザインを行うケースは多々あります。 非デザイナーのフロントエンドエンジニアでも、根拠を持ってUIを組み立てられる仕組みがあると開発が一気に楽になります。 今回は、Vue.jsを採用しているプロダクトでデザイントークンを導入し、デザインと開発のワークフローを改善したプロセスを共有します。 TL;DR 課題: デザインプロセスに明確なルールがなく、スタイルの一貫性とアクセシビリティが崩れていた 解決策: デザイント…

#Webフロントエンド#デザイン#デザインシステム
RAKUS Developers Blog | ラクス エンジニアブログ•4ヶ月前

デザイナーと事業戦略をつなぐ UXライティングガイドラインのつくり方

こんにちは。 株式会社ラクスで、楽楽精算のプロダクトデザインチームのリーダーをしているimamuです。 ラクスでは現在、「ベストオブブリード」戦略から「統合型ベストオブブリード」戦略へ進化を目指し、製品開発を進めています。 www.rakus.co.jp www.rakus.co.jp 私たちプロダクトデザイン組織でも、デザインガイドラインの整備やUIリニューアルを行っています。 tech-blog.rakus.co.jp note.com その一環として、UXライティングガイドラインについても共通化と各製品への浸透を目指して取り組んでいます。 でも実はこのライティングガイドライン、私たち自身…

#UXライティング#デザインシステム#楽楽精算#ラクス
Safie Engineers' Blog!•6ヶ月前

「どう進めるか」から考えた、0からの挑戦！1年4ヶ月でデザイナーとエンジニアが「共創」し、デザインシステムを導入した話

この記事はSafie Engineers' Blog! Advent Calendar 22日目の記事です。 こんにちは、セーフィー 企画本部 デザインセンターの木村です。デザインOpsグループのグループリーダーをしています。 デザインシステムを用いたSafie Viewer（セーフィー ビューアー）のUIリニューアルを行い、無事2025年8月にリリースすることができました！ この記事は、「デザイナーとエンジニアで作るデザインシステム 」シリーズ第2回目の記事です。 デザイナー3名がエンジニア・PdMと協力し、Safieのメインプロダクトである「Safie Viewer」にデザインシステムを導…

#デザインシステム#UIUXデザイン#UIリニューアル#エンジニア連携#プロダクト開発
SEN PRODUCT BLOG•6ヶ月前

デザインシステム導入に向けたエンジニアの取り組み

こんにちは😃 千株式会社でソフトウェアエンジニアをしているh_rym(@RyMer_9)です。 SEN Advent Calendar 2025 13日目の記事を担当します。 私は普段、幼保園の先生向けに撮影の依頼などをサポートするプロダクトの開発に従事しております。 今回はそのプロダクトに対してデザインシステムを反映した話と今後の展望をお話しようと思います。 👇これまでの取り組みはこちらをお読みください👇 第1回 プロダクト横断デザインシステム導入のあゆみ／（１）輪読会で共通認識を作る篇 - SEN PRODUCT BLOG 第2回 プロダクト横断デザインシステム導入のあゆみ／（２）共通スタ…

#デザインシステム#Tailwind CSS