デザイン・制作

デザイン・制作

【手順】Figma Dev Modeを制作現場で使う手順

Figma Dev Modeはデザインから実装への橋渡し。ディレクター兼コーダー向けに、現場で使う手順と入れない方がいいケースを整理します。
デザイン・制作

【ガイド】フリーランス向けVS Code拡張機能の選び方

VS Codeの拡張機能は入れすぎると重くなる。フリーランスのWeb制作向けに、必須級・あると便利・入れない方がいいものを整理します。
デザイン・制作

【手順】Figma Motionでプロトタイプの動きを作る手順

Figma Motionでプロトタイプの動きを作る手順を、現場で使える順番で解説します。イージング、時間軸、レビュー時の見せ方、実装への渡し方までまとめました。
デザイン・制作

【ガイド】Figma Code Layersはデザイナーに何が変わるか

Figma Code Layersがデザイン現場に与える変化を整理。デザイナーとエンジニアの境界、Inspectの見え方、導入時の注意点を私の視点で解説します。
デザイン・制作

【手順】Figma Variablesでデザインと実装のズレを減らす手順

Figma Variablesで色・余白のトークンを整え、実装のCSS変数と名前を揃える手順。小さく始めてデザインとコーディングのズレを減らす運用をまとめました。
デザイン・制作

【設定】Cursorを制作現場で使うときの初期設定と運用ルール

Cursorを制作のメインエディタにする初期設定と運用ルール。`.cursor/rules`、AIの線引き、クライアント案件での秘密情報管理まで、フリーランス向けに解説します。