マガジンのカバー画像

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

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

記事一覧

デザインシステム啓発のためのアプローチ|kintone Design Systemのオンボーディング改善とリリースブログ

こんにちは。kintone Design Systemチームのトビ(@0b1tk)です。 8月になり夏真っ只中ですね!アドベントカレンダーならぬアツい"夏フェス"が開かれているサイボウズのブログ祭り「CYBOZU SUMMER BLOG FES'24」で、noteを久々に執筆しています🍉 この記事はデザインシステムの社内啓発についてです。 プロダクトデザイン業界で「デザインシステム」に耳目が集まってから数年。ただ作って終わりではなく、ステークホルダーを巻き込みながら開発の軌

翻訳記事:コストセンターとしてのデザインシステム

あっという間に9月です。日本のデザインシステム業界でも最近はデザインシステムのROIやコストの件が注目されているせいなのか、個人的にこの数週間で数回この話が出ました。🌴本のせいですかね? 書籍の影響なのかはさて置き、先日訳したデザインシステムのROI記事への「スキ♡」がちょっとだけ増えました👏🏻 ということで、最新「Uniform」の記事も訳してみました。 以下、記事の翻訳。 コストセンターとしてのデザインシステムby Design System University

試し読み:『デザインシステムの育て方』 監訳者まえがき

2024年8月28日刊行の『デザインシステムの育て方:継続的な進化と改善のためのアプローチ』より、本書の監訳者 長谷川恭久氏による「まえがき」を紹介します。スタートアップから大きな組織まで、さまざまな規模でのデザインシステムに携わってきた長谷川さんの視点から、デザインシステムを「作る」のではなく「育てる」ということ、その重要性について示していただきました。ぜひご一読ください。 監訳者まえがき─長谷川恭久 プロダクトと捉えたときのデザインシステム デザインシステムを構築する

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

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

FigmaでLightning Design System v2 UI Kitを使って画面デザイン

こんにちは。木村です。 私はエンジニアですが、Lightning Design SystemのUI Kitを使ってFigmaで画面デザインをするにあたって、やり方が少しわかってきたのでチュートリアル形式でノウハウを共有したいと思います。そして、劇的に使いやすくなったSLDS UI Kitのv2がいつの間にかリリースされていたので、v1との違いについても触れながら解説します。 Figmaに詳しい方には当たり前のことばかりだと思いますので、回れ右していただくか、改善点を教えて

『デザインシステムの育て方』🌴本、読んだ

日本語出たらいいなーと思っていたらさくっと出てくれた『デザインシステムの育て方』、@yhassyの🌴本、8月28日に発売。 原書は、去年の2023年11月末に出版された『Design That Scales』。8ヶ月で出版されたのでわりとタイムリーです。 が、内容がタイムリーか?と言うと、実はSketch全盛期の真っ只中の執筆だったはずなので、読まれた方は少し感じたかもしれませんが、若干内容に時代を感じる部分もあるのも事実。「え、そこ語るならFigmaについて書くべきでし

機能パターンを定義しよう -デザインシステム構築奮闘記⑥-

こんにちは!atama plus プロダクトデザイナーのヌマタ @n_m_ta です。 この連載は、スタートアップのインハウスデザイナーたちが、デザインシステムを1から構築する様子をまとめ、誰かの参考になればという趣旨ではじめました。 デザインシステムの構築に至るまでの経緯や、プロダクトの概要についてはこちらをご覧ください。 前回は、色を決めました。今回は、機能パターンについてお伝えします。 本記事は、2019年に実施した取り組みをまとめたものです。 機能パターンに期待

小さく始めて大きく育てる、私たちが実践したデザインシステムの作り方

こんにちは、HENNGEプロダクトデザイナーのAnnaです。この記事では、私たちが小さく始めて大きく育てたHENNGE Oneのデザインシステム作成と公開までの経緯についてお話しします。 はじめにデザインシステムとは、例えば建築物の足場のようなものです。デザインに構造と一貫性をもたらし、全員がスムーズに作業を進められるよう、私たちを土台から支えてくれます。しかし、建築物が様々にあるように、デザインシステムの在り方もまた異なります。私たちHENNGEのUI/UXデザインチーム

【長寿プロダクトの進化】カラーパレット再設計への挑戦

こんにちは〜!サイボウズのプロダクトデザイナーをしているおごし(@ogoshi_cy)です。 最近はイベントノベルティグッズ制作記事を書いていましたが、普段はkintoneのデザイン改善や新機能デザインを行っています。 今回は、デザイン改善として行った「カラーパレット再設計」についてお話します。 1|カラーパレットを整理する理由十余年以上使われているkintoneは、デザイン側も歴史は長く、様々な検討がなされてきました。長い歴史の検討中に生まれた色たちは、時が経つにつれ、

フロントエンドエンジニアがデザインテクノロジストのお仕事をしてみた話

Design Stageではデザイナー・デザインテクノロジストを中心にデザインに関する各種ノウハウや取り組みなどを発信します。 こんにちは。サイボウズ24新卒フロントエンドエンジニアのsaku(@sakupi01)です。 弊社の開発新人研修には、「2週間、興味のあるチームの体験に行ける」というコンテンツがあります。 私はその一環としてkintone Design Systemチームにデザインテクノロジスト職能として体験に行きました。 今回は、新卒(フロントエンド)エンジ

Central と Local モデルで進化するデザインシステムの拡張と戦略

こんにちは、sakito です。 現在、私はサイボウズでプロダクトデザイン全体の戦略を担当しています。その中でも、デザインシステムの活用とその促進は非常に重要なテーマです。 この記事では、デザインシステムを「Central」と「Local」という 2 つのモデルに分けて解説し、それぞれを活用する戦略について考察します。 デザインシステムの階層化デザインシステムは、通常、特定のプロダクトに結びついていますが、一つのプロダクト内でも、管理画面やユーザー画面など、異なる用途があ

Design Systemを学びたいデザイナーへ

こんにちは、UX/UIデザイナーのShannenです。 直近2年ぐらい、ずっとDesign System(下記DS)TeamでDSの構築&運用しています。マスターになったとは言えないが、デザイナーはよくDSに誤解したり、勉強しようとしてもわからなったりするのを実感して、この記事を書きました。 もしかしてDSに興味があるデザイナーの力になれば幸いです。 DesignSystemをやるには認識してもらいたいこと作業ベースのスキルを学ぶなら、GoogleやYutubeで検索すると

翻訳記事:デザインシステムチームの投資収益率(ROI)

さまざまな企業やチームのデザインシステムプロジェクトを支援し、アドバイザーとして関わる中で、必ず話題になるテーマの一つが「どうやってデザインシステムやチームそのものの費用対効果を社内で説得するか?」というのがあります。 結論から言うと、デザインシステムは企業活動の一環であり、成果物としてのアウトプットでない事を理解する必要があります(もちろんFigmaファイルを作ることでもない!😁)。つまり、デザインシステムを進めるためには、企業活動として必要なコストの予算化(しかもかなり

デザインシステム前編〜プロローグ(作成編)〜

シナジーマーケティング株式会社で、CRMのプロダクトSynergy!のデザインを担当しています吉開と申します。今回は、デザインシステムを作成した際にどんなこと考えてどんな課題を解消しようとしたかについてお話しします。 なぜ、デザインシステムが必要だと考えたのか開発体制でいうと、エンジニアとデザイナー職は、それぞれ別グループに所属していて、そこからプロダクトごとのチームにアサインされる形で一緒にサービスを作ります。「Synergy!」という1つのサービスの中で機能別にチームが