Codex連携 / 非公式のFigmaガイド
FigmaとCodexでWebデザインを実装する流れ
FigmaはWebデザイン、ワイヤーフレーム、UI設計を目で確認しながら整理しやすいツールです。一方で、Figmaの見た目をそのまま公開サイトにするには、HTML/CSS、レスポンシブ、内部リンク、公開前確認の工程が必要になります。このページでは、Figmaで設計した内容をCodexへ渡し、静的HTMLやCSSの実装へ進める時の考え方を、初心者向けに整理します。
このサイトはFigmaの公式サイトではありません。Figmaの基本的な使い方や、Webデザイン・UI設計・ChatGPT/Codexとの組み合わせ方を初心者向けに整理する非公式のガイドです。機能・料金・提供状況は変更される可能性があるため、重要な判断ではFigmaの公式情報も確認してください。
このページの役割
Figma設計からCodex実装へ進むページです。画面設計、ワイヤーフレーム、UI構造をHTML/CSSへ渡す流れを中心に扱います。
全体の流れを見たい場合は Codex側のWeb制作 も参考にしてください。
関連する読み順
- まず全体像を見る：Codex側のWeb制作
- このページで詳しく見る：Figma側のCodex連携
- 次に確認する：HTML/CSS実装 / 公開前チェック / Canva側のHTML/CSS化
似ているページとの違い
- Figmaは設計・UI構造寄りの入口です。
- Canvaは素材・資料・見た目案寄りの入口です。
FigmaとCodexの役割分担
Figmaは画面の設計、余白、見出し、カード、ボタン、スマホ幅の見え方を考える場所として使いやすいです。Codexは、その設計をもとにHTML/CSSへ落とし込み、既存のファイル構成、共通CSS、sitemap、公開前チェックを見ながら実装する作業に向いています。Figmaだけで完成、Codexだけで完成と考えず、設計と実装の役割を分けると進めやすくなります。
ワイヤーフレームから実装へ進める流れ
最初にFigmaでページの目的、見出し、情報の順番、PC幅とスマホ幅の見え方を整理します。次に、Codexへ対象ページ、参考にするFigma画面、実装範囲、使ってよいCSS、触らないファイルを伝えます。Figmaの見た目を完全再現しようとしすぎるより、読みやすさ、保守しやすさ、スマホ表示で崩れないことを優先すると実用的です。
共有リンク・編集権限・素材の注意
Figmaの共有リンクをCodexへ渡す場合は、閲覧だけでよいのか、編集権限が必要なのか、公開範囲が広すぎないかを確認します。クライアント名、未公開デザイン、社内資料、個人情報、ロゴ、写真素材が含まれる場合は、共有前に必要な範囲へ絞ります。素材やフォントの利用条件も、公開前に確認が必要です。
Codexへ渡す指示の書き方
Codexへ依頼する時は、作りたいページ、参考にするデザイン、見た目の優先順位、既存の共通CSSを使うか、触ってよいファイル、触らないファイル、停止条件を分けて書きます。例えば、HTML/CSSだけ触る、AdSenseやrobots.txtは触らない、未作成URLへリンクしない、秘密情報を入れない、といった条件を明記すると安全です。
実装後に確認すること
実装後は、title、meta description、canonical、robots、noindexの有無、内部リンク404、スマホ390px相当の表示、横スクロール、文字の重なりを確認します。Figmaの見た目に近いかだけではなく、公開サイトとして読めるか、検索向けの最低限のタグが入っているか、公式誤認や著作権上の問題がないかも見ます。
非公式ガイドとしての注意
このページはFigmaやCodexの公式ガイドではありません。仕様、画面、料金、提供範囲は変わる可能性があります。重要な判断では提供元の最新情報も確認してください。AIの出力やデザイン案をそのまま公開せず、著作権、素材、ロゴ、個人情報、クライアント情報、秘密情報を人間が確認してから進めます。
AIガイド群
FAQ
figmaguide.jpはFigmaの公式サイトですか？
いいえ。このサイトはFigmaの公式サイトではありません。初心者向けに使い方や考え方を整理する非公式のガイドです。
料金や機能はこのサイトだけで判断できますか？
料金、機能、提供状況は変わる可能性があります。重要な判断ではFigmaの公式情報も確認してください。
FigmaとCodexでWebデザインを実装する流れは初心者でも読めますか？
専門用語をできるだけ分けて説明し、最初に確認したいポイントから読めるように構成しています。