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

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

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

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

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

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

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

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

はじめにこんにちは、普段 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」の