Web制作

デザイン・制作

【手順】Figmaのバリアント命名を実装向けに揃える【Web制作】

Figma バリアント 命名で実装前に迷いが出る制作向けに、プロパティ名・値・階層の揃え方と8個ルール、Dev Modeで確認する手順を整理しました。
横断

【手順】CursorのProject Rulesを案件リポジトリごとに分ける【Web制作】

Cursor Project Rules 設定を案件ごとに分けたいWeb制作向け。リポジトリ単位の.cursor/rules、User Rulesとの役割分担、クライアント別の書き方例を手順で整理しました。
デザイン・制作

【設定】VS Code Workspace Trustを案件フォルダで分ける【Win11】

VS Code Workspace Trust 設定で、クライアント案件フォルダと個人実験用を分けたいWeb制作者向けに、Win11での信頼モード・tasks・拡張の制限手順と、誤実行を防ぐチェック項目を整理しました。
デザイン・制作

【手順】FigmaでゲームUIコンポーネント命名を案件ごとに揃える【納品前】

Figma コンポーネント 命名 ゲームUIで納品前に迷う人向け。Button/Icon/Modalの接頭辞とバリアント表記を案件テンプレに固定し、開発側が探しやすい階層に整える手順をまとめました。
デザイン・制作

【手順】WordPressへSVGを載せる前のサニタイズと軽量化【Figma書き出し後】

WordPress SVG アップロード前に、Figma書き出しSVGのサニタイズと軽量化で確認すべき項目を整理。メディアライブラリで止まる原因と、実装側が安全に使う手順をまとめました。
デザイン・制作

【手順】FigmaでOGP1200×630を案件ごとに量産する【納品】

Figma OGP 書き出しを1200×630で揃える手順を、フレーム命名からPNG一括書き出しまで整理。案件ごとに量産しやすいファイル構成と、納品前にクライアントへ渡すチェック項目もまとめました。
フリーランス

【手順】freeeで見積承認後の請求書下書きを5分で作る【Web制作】

freee 見積 請求書 作成で迷うWeb制作者向けに、見積承認後から請求書下書きまでの5分手順を整理。品目の引き継ぎ、源泉・インボイス番号、送付前チェックをまとめました。
デザイン・制作

【手順】ObsidianとCursor Rulesで制作メモを役割分けする【Web制作】

Obsidian Cursor 連携で、案件メモとAI編集用のルールを分ける手順を整理します。Vault構成、デイリーノート、Cursor Rulesの書き方と、WordPress修正範囲を固定する運用までまとめました。
デザイン・制作

【手順】Figmaのブランチでクライアント確認画面を分ける【制作】

Figmaのブランチでクライアント確認用の画面を本線から分け、差し戻しとマージの手順を整理します。Webディレクター向けに、共有URLの出し方と取りこぼし防止までまとめました。
横断

【手順】VS CodeのLive ServerでHTMLとCSSをプレビューする【静的ページ】

VS CodeのLive Server拡張でHTMLとCSSをブラウザ即時プレビューする手順。拡張の入れ方、index.htmlの開き方、更新が反映されないときの対処まで整理します。