メインコンテンツへスキップ
 

マガジン一覧

nocoプロダクト開発ブログ

noco株式会社のプロダクト開発チームのブログです。 プロダクト設計、デザインUI/UX、テクノロジーについて記事を書いていきます。

「8割自動化」できた!FigmaMCPを使った超時短実装フロー

noco社ではこれまでもサービスサイトの実装効率化に取り組んできましたが、FigmaMCPの登場によって、その流れが大きく変わりました。 (過去行っていた効率化の取り組みはこちら) 本記事では、AIによる自動マークアップの具体的な手順と、実務の中で得られた成果を紹介します。 MCPを活用して実装を効率化したいと考えている方は、ぜひ本記事を参考にしてみてください。 事前準備必要なもの HTML/CSSの基礎知識 Figmaで作成されたデザインデータ VSCode(G

8

Dataformの組み込みアサーションで不正値を検出し、ワークフロー実行結果の安全性を担保する

こんにちは、ソフトウェアエンジニアの岩﨑です。 本記事では BigQuery Studio の Dataform において、組み込みアサーションを活用して不正値を検出することでワークフロー実行結果の安全性を担保する方法についてご紹介します。 はじめに下図のようなシステム構成のもと、アプリケーションから BigQuery のテーブルを参照しているケースを考えます。 このときアプリケーションが NULL や 重複値 などを想定していない場合、Dataform ワークフローの集

7

Cloudflare の Image Transformations と Workers を使った画像プロキシサーバー実装時の注意点

こんにちは、ソフトウェアエンジニアの遠藤です。 本記事では、Cloudflare Image Transformations と Cloudflare Workers による画像プロキシサーバーの検証時に直面した課題と解決策についてまとめました。 はじめに:現状の構成既存システムとして、以下の目的で既に用意されている画像配信サーバーが存在するものとします。 HTMLキャッシュを想定した、画像URLの固定化 アクセス権限のチェック etc. 内部実装としては、Amaz

10

Framer と v0 を使ったサービスサイト実装の効率化術

概要サービスサイトの実装工数を削減するために、Figma から HTMLのマークアップやスタイリングの自動化に AI を活用しました。この記事では、その具体的な取り組みと成果について紹介します。 前提:私のスキル Figma を日常的に使用している HTML や CSS の基本的な知識を持っている 課題と背景サービスサイトの実装では、デザインからコーディングまでの工程が手作業で行われることが多く、非効率的でした。特に、Figma データを HTML に変換する際の整形

10
もっとみる

Helpdog サポートのお役立ちブログ

「Helpdog サポートのお役立ちブログ」は、サポート業務に役立つ情報や改善のヒントを楽しくわかりやすくご紹介するブログです。