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

個人開発の一環でWebデザインのモーションのアイデアを集めたサイトを作りました。掲載されているコードは自由にお使いいただけます。 このサイトのコンセプトやどのような作りになっているのか紹介します。 サイト概要 Webデザインにおける様々な動きに注目して、そのプリミティブな要素を紹

「IR Hub」のロゴデザインができるまで 🔖 1

こんにちは！ 新規事業開発室にてデザイナーをやっているitoです！ この記事では先日Gunosyからリリースされた適時開示プラットフォーム「IR Hub」のロゴデザインができるまでの経緯を簡単に共有できればと思います。 IR Hubとは？ IR Hubとは、あらゆる情報開示⁨⁩に

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

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

React デザインパターン 🔖 454

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

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

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

React デザインパターン 🔖 454

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

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

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

Ubie の SWE 3 人で、『デザインシステムをMCPサーバー化したらUI実装が爆速になった』の話を深掘る｜oliva 🔖 68

gurichanとolivaは、プロダクト「症状検索エンジン ユビー」を開発するソフトウェアエンジニア（今回のMCPサーバーの利用者）です。 sosukeは、アプリケーション基盤チームのソフトウェアエンジニア（今回のMCPサーバーの提供者）として、開発者体験の向上に取り組んでいま

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

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

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

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

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

FigmaデザインをHTMLコードへ自動変換する方法 - GMOインターネットグループ グループ研究開発本部 🔖 287

1. はじめに こんにちは、次世代システム研究室のT.D.Qです。 デザインとコーディングの間にあるギャップを埋める新しいアプローチとして、FigmaでデザインされたウェブUIを自動的にHTML/CSSコードに変換する方法が注目されています。特に、オープンソースのFigma Co

【開発者に聞いた】ソニー・ホンダ「協業の仕方」をAFEELA 1のデザインから解き明かす 🔖 13

コンテンツブロックが有効であることを検知しました。 このサイトを利用するには、コンテンツブロック機能（広告ブロック機能を持つ拡張機能等）を無効にしてページを再読み込みしてください。 ✕

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

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

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

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

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

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

日本語「Gmail」でも本文の下書きや校正補助機能「Help me write」が利用可能に／好みの内容やデザインのメールを作成できる 🔖 24

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

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

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

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

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

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

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

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

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

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

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

Windowsのブルースクリーンがブラックスクリーンにデザイン変更、技術情報も非表示へ【やじうまWatch】 🔖 36

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

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

フォルクスワーゲンに物理ボタンが復活、デザイン責任者は「重要な機能をタッチスクリーンに委ねるという過ちを決して繰り返さない」と約束 🔖 205

フォルクスワーゲンが、空調制御などの重要な機能を物理ボタンに戻すことを計画していると話しました。ここ数年、フォルクスワーゲンはこれらの機能をタッチスクリーンで管理するデザインを採用していたのですが、不評でした。 Volkswagen reintroducing physical

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

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

AIだと簡単で便利！ UIデザイン用に色彩理論に基づいたカラーパレットやUIコンポーネントを生成してくれる無料ツール -ColorMagic 🔖 37

AIを使って日本語テキストや画像からカラーパレットやグラデーションやUIコンポーネントを生成してくれるツールColorMagicの日本語版が登場したので、紹介します。 入力されたプロンプトや画像を元に色彩理論に基づいてカラーパレットを生成し、配色の調整や配色を使用したグラデーショ

Figmaで作ったデザインが自動的に生成AIでWebアプリに。「Bolt.new」がFigmaインポートに対応 🔖 208

Figmaで作ったデザインが自動的に生成AIでWebアプリに。「Bolt.new」がFigmaインポートに対応 AIにフルスタックアプリの生成を指示できるサービス「Bolt.new」を提供するStackBlitzは、Bolt.newの新機能としてFigmaで作ったデザインのインポ

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

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

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

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

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

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

#iPhone17 Proの新デザインが判明？金属とガラスの背面構造が見えてきた 🔖 11

iPhone 17シリーズのダミーモデルに、これまでにない新たな特徴が見つかりました。リーカーの投稿によると、iPhone 17 Proモデルでは、背面が金属とガラスに分かれた構造になっている可能性があります。これは単なるデザイン変更ではなく、Appleが新しい素材構成に取り組ん

デザインエンジニア組織拡大の背景 ーフロントエンドとデザインの力で事業を加速 🔖 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」の