Webデザインのモーション集サイトを作りました 🔖 52

個人開発の一環でWebデザインのモーションのアイデアを集めたサイトを作りました。掲載されているコードは自由にお使いいただけます。https://web-motion-catalog.com/このサイトのコンセプトやどのような作りになっているのか紹介します。 サイト概要W

React デザインパターン 🔖 438

はじめに長らくReactを雰囲気で書いてきました。コンポーネントを作り、propsを渡し、状態を管理する基本的な概念は理解していたものの、より体系的なアプローチや設計パターンについては深く考えずにコードを書いていました。しかし、より大規模で保守性の高いアプリケーションを構築する

デザインシステム MFUI を MCP サーバー化して社内に提供した話 🔖 46

はじめにこの記事は、弊社で開発しているデザインシステム MFUI のコンポーネント情報を AI コーディングアシスタントに効率的に提供するために開発した Model Context Protocol (MCP) サーバーの実装と活用方法について解説します。なお、MFUI の詳

Vueでも! デザインシステムをMCPサーバー化してみた 🔖 1

話題のMCP(Model Context Protocol)を活用し、Vue3/Vuetifyベースのデザインシステム向けに独自サーバーを実装。LLM連携による開発効率化、実装ノウハウ、課題を詳解します。

画面デザインの裏側を公開 - 「いつ・誰が使うか」から考える 🔖 3

エンジニアが Figma のデザインを実装するときに見るべきポイント 🔖 1

デザイナーの白川です。 主にプロダクトのUIをデザインしています。 前回はデザイナー向けに「Figma で実装イメージを効果的に伝えるためのデザインのコツ」という記事を書きました。 developers.play.jp 今回の記事ではエンジニアさん向けにFigmaのデザインを実装

スマートラウンドのデザインシステムのこれまでとこれから ~第1回 エンジニアとデザイナーの協業開始 ~ 🔖 1

はじめにはじめまして、株式スマートラウンドでチーフテックリードをしているtsukakei1012です。私たちの会社では、エンジニアとデザイナーが協力してUIコンポーネントやルールを整備する「デザインシステム」を重視しています。今では、社内で誰もが当たり前に使うコンポーネントが

社内のデザインシステムをMCP化したので事例を紹介！ts-morphを使ったアプローチの実装・プロンプト例をまとめて解説 🔖 181

こんにちは！株式会社エス・エム・エスでエンジニアをしている @_kimuson です。今回は、社内のプロダクト開発で利用しているデザインシステムを MCP 化して提供し、社内のデザインシステムを活用した自然言語によるコーディング環境を整備したので、事例を紹介します！ デザイ

FigmaデザインをHTMLコードへ自動変換する方法 🔖 286

Windsurfでデザインカンプからコードを一切書かずにWebサイトを作ってみた 🔖 1

こんにちは、インハウスマーケティング部のりこぴんです！ Webサイトのイメージ画像を送るだけでそれに沿ったコードを一瞬で生成できるAI、その名も「Windsurf」。 WindsurfはAI機能を搭載したコーディングアシ […]

社内デザインシステムをMCPサーバー化したらUI実装が爆速になった 🔖 654

はじめにこんにちは、普段 Ubie で症状検索エンジンユビー(https://ubie.app/)の開発をしている江崎です。最近、Cursor エディタや GitHub Copilot などのコーディングアシスタントツールが進化し続けていますが、社内固有のデザインシステムとの

Javaデザインパターン勉強におすすめGitHub 🔖 1

はじめにJavaのデザインパターンを勉強する際に参考にしているサイトはいくつかありましたが、実際にプロジェクト階層になっていて、ソースが確認しやすい方法がなかなか見つからず悩んでいました。しかし…

Spindleへの新規コンポーネント追加を通じて学んだデザインシステムにおける設計の大切さ 🔖 1

はじめに 芝浦工業大学 デザイン工学部 1年の関口匠弥 ( @newt239 )です。2024年3月 ...

4人のデザインエンジニアに聞く！ estieでの仕事とその面白さ 🔖 2

こんにちは、estieでUIデザイナーのマネージャーをしているKioです。 弊社のデザインチームには「デザインエンジニア」という職種があります。同じ「デザインエンジニア」という肩書きでも、各社によって役割が異なりますし、弊社内でも各メンバーが自らの強みを元に多様な活躍をしています

デザイン→実装を瞬時に！Figma-MCPが消す開発現場のストレス 🔖 52

はじめにこんにちは、みなさん！最近、フロントエンド開発の勉強を始めた初心者プログラマーの私ですが、デザインとコーディングの間のギャップに悩んでいました。Figmaでデザインされたものを実際のコード…

Ruby on Rails の View に React 製社内デザインシステムを導入した話（freeeサイン） 🔖 28

はじめに by @solt9029 freeeサインの開発に携わっているソフトウェアエンジニアの塩出（@solt9029）です。 freeeのプロダクトには、freee会計やfreee人事労務をはじめとし、非常に多くのものが存在します。このような状況下で、各プロダクトがそれぞれ独

エンジニア×デザイナーの壁をぶっ壊す！MVPデザインの本質と4つの共創テクニック 🔖 1

この記事では、デザイナーとエンジニアに起きがちな「思考のズレ」の解消法(カップルにも使えるかもw)を紹介します。 カップルが同じ「週末の計画」について話しているのに、なぜか会話がかみ合わない... …

デザインエンジニア組織拡大の背景 ーフロントエンドとデザインの力で事業を加速 🔖 1

こんにちは、estieでUIデザイナーのマネージャーをしているKioです。estieには既に4人のデザインエンジニアが在籍していますが、さらなる事業成長に向けて新たな仲間を募集しています。 estieのデザインエンジニアは、フロントエンド開発やプロダクトデザインを通じて、事業の成

RubyKaigiの公式スケジュールアプリ今年もやります、デザインを大幅刷新しましたよ！ 🔖 2

こんにちは、プロダクトエンジニアのkinoppydです。ついにやってきましたね、RubyKaigiの季節ですよ。あまりにもRubyKaigiが待ち遠しくて、もう気持ちは松山の鯛みたいなもんですな。 さて、RubyKaigiでは毎年公式スケジュールアプリ Schedule.sele

UIデザイン・生成AIの関係を交えながら「Tailwind CSS」を観察する 🔖 1

タイトルにもありますが、今回はUIデザインと生成AIとの関係からTailwind CSS（ユーティリティクラスを主に使用するCSSフレームワーク）について考えていこうと思います。今更Tailwind CSSの話をするのか？と考える方もいらっしゃるかもしれませんが、スタイリングの

コードでデザインを作り、管理するという発想 🔖 1

はじめに最近は生成AIを使ってこれまでのソフトウェア開発をどう効率化できるかをひたすら模索しています。特に、「デザインからフロントエンドの実装の工程において、どのようにデザインからコードをシームレスに生成できるのか」と言うことを考えていたのですが、ある時ふと思いました。「コ

ノンデザイナーの開発チームで『ノンデザイナーズ・デザインブック』読書会を行いました 🔖 1

開発グループ2（通称：kobitoチーム）のチームリーダーをしている前川です。今回は、チームメンバーを中心に『ノンデザイナーズ・デザインブック』という本の読書会を行いました。 kobitoチームでは以前『ルールズ・オブ・プログラミング』の読書会を行いました。その後、Angular

色だけに頼らないデザインとは？色彩検定UC級の視点から考えるWebアクセシビリティ 🔖 1

はじめに最近、ウェブアクセシビリティの重要性がますます高まっています。2024年4月1日に障害者差別解消法の改正が施行されたこともあり、ウェブアクセシビリティへの関心が一層高まっています。今回…

デザインシステム「ITANDI BB UI」とそれを支えるStorybookの紹介 🔖 3

こんにちは！イタンジのFrontend Unit所属の薄羽です。2024年3月に中途入社しました。好きなnpmパッケージは @emotion/react です。 イタンジのFrontend Unitには主務で薄羽と西野が在籍しており、デザインシステム「ITANDI BB UI」の