デザインシステム

デザイン負債 デザイン要件の切り出し Design Requirements 1/3 Design Requirements 2/3 Design Requirements 3/3 方針策定 採用技術 デザイン仕様 工数削減の試み LLMの選定基準とプロンプト例 人間とLLMの分業 有効だったプロンプトの紹介 プロンプト例1: 詳細なガイドラインを作る プロンプト例2: ダブルチェック 結果 振り返り これからやりたいこと 登壇者はこの方 野口 航己 氏 コミューン株式会社 テックリード/フロントエンドエンジニア スタートアップ企業を中心にソフトウェアエンジニアとしてモーションデータ解析、決済…

パーソルキャリアが提供するダイレクト・ソーシングサービス「dodaダイレクト（旧doda Recruiters）」は、2023年12月に名称を変更し、さらなるサービス拡大に向けて着実に歩みを進めています。一方、ダイレクトソーシング市場全体が急速に発展していることから、立ち上げ当初より運用してきたアーキテクチャの再構築が求められている状況です。 そこで今回は、dodaダイレクト アーキテクチャ再構築PJT（以下リアーキPJT）に内包される「デザインシステム」に注目します。UXデザイナーとフロントエンドエンジニアが協業し、プロダクトの利便性と開発効率の向上をどのように目指しているのでしょうか。本プ…

こんにちは、デザインマネージャーの清水です。 私たち「プロダクトデザイン課」は、お客様の業務課題を解決するため、全プロダクトのUI/UXデザインを担っています。 あらゆるプロダクトにとって、最良のUXを目指すことは必然だと思います。 私たちもまた、お客様にとってより使いやすいプロダクトを提供するため、継続的にUX改善に取り組んでいます。 先日のブログ「ラクスのプロダクトデザイン組織紹介― 顧客価値を高める新たな挑戦」では、継続的なUX改善の一環である「UI刷新」プロジェクトについてご紹介しました。 ここでの「刷新」とは、既存UX（お客様の使い勝手に大きく影響する配置や導線）を急激に変更するとい…

こんにちは！イタンジのFrontend Unit所属の薄羽です。2024年3月に中途入社しました。好きなnpmパッケージは @emotion/react です。 イタンジのFrontend Unitには主務で薄羽と西野が在籍しており、デザインシステム「ITANDI BB UI」の開発とプロダクトのフロントエンドを横断的に見ること*1を主な仕事としています。 今回はITANDI BB UIとそれを支える「Storybook」を紹介します。 ITANDI BB UI イタンジには、物件管理や申込管理など、様々な機能が存在します。それらの機能は別々のチームで開発されており、同じ見た目や振る舞いのコン…

こんにちは、カイポケ開発部の城内と、株式会社グッドパッチUIデザイナーの乗田拳斗です。 現在、エス・エム・エスはグッドパッチと介護/障害福祉事業者向け経営支援サービス「カイポケ」のリニューアルプロジェクトを行っています。今回は本リニューアルプロジェクトにて行っているエンジニアとデザイナーの連携についてご紹介します。 エス・エム・エスとグッドパッチの取り組みについてはこちらのブログもご覧ください。 goodpatch.com 背景 カイポケは15年以上の歴史の中で介護事業のさまざまなサービス種類に対応を進め、現在は4万を超える事業所へサービスを提供しています。 高齢化が進む日本社会では、介護領域…

こんにちは、デザイナーの長尾です。2024年の8月からAssuredにジョインし、プロダクトデザインを担当しています。今回は、その一環として取り組んでいるデザインシステム構築についてお話しします。 着手した当初は「何をすべきか」「どこまでやるべきか」が分からず、手探りで進めていました。また、プロダクトの開発タスクと並行で行うため、デザインシステムに費やす時間をなかなか捻出できないという課題感もありました。 ですが、以下のようなことを大切にしながら、すこしずつ形になってきたので、振り返りを兼ねてこれまでのプロセスをまとめてみます。これからデザインシステムを始めようという方の参考になれば幸いです。…

前置き バレルファイル自体の賛否については今回は触れないこととします。 はじめに こんにちは。enechainで働いている takurinton です。 enechainのデザインシステムではコンポーネントをindex.tsという名前のバレルファイルに集約し、それをエントリポイントとしてビルドして公開しています。つまり、新しくコンポーネントを追加しても、そのコンポーネントを公開するためにはindex.tsにexportを追加する必要があります。 // index.tsの中身 import Button from './Button'; import Input from './Input'; …