Skip to content
AI制作

Web制作の最短ワークフロー（むらさき丸流）

コードを書くたびに詰まる、どんなフォルダ構成にすればいいかわからない、AIへの指示がうまく伝わらない——私がつまずいた原因のほとんどは、最初の設定や環境構築でした。

この記事では、私（むらさき丸）が今現在実際に使っている5ステップのワークフローを紹介します。「正解のやり方」ではなく、あくまで自分にとっての最適解として辿り着いた流れです。

ひとつ前提をお伝えしておくと、このワークフローはデザインをAIに任せないスタイルを前提にしています。Figmaでのデザインは自分で作り込んでから次の工程に渡す、という流れです。「AIに全部やってもらえばいい」と考えている方には合わないかもしれませんが、仕上がりのクオリティを自分でコントロールしたい方には再現しやすい流れだと思います。

ワークフローの全体像

ステップツールやること
1geminilogoGemini案件の要件・構成を整理する
2figmalogoFigmaデザインカンプを作る
3antigravitylogoAntigravityFigmaデザインをHTMLに実装する
4locallogoLocalPC上のWP環境で動作・表示を確認する
5テストサイト（エックスサーバー）本番前に実環境で最終確認する

各ツールに「得意なことだけ」をやらせるのがポイントです。役割が混ざると管理が複雑になります。

実践ステップ

Step 1：Geminiで案件の要件を整理する

制作を始める前に、「何を作るか」を言語化する工程が意外と重要です。ここを飛ばすと、デザイン途中で「そもそも何を伝えたいサイトだっけ？」と迷走します。

Geminiには以下の型で相談するのがおすすめです。

案件概要をまとめるプロンプトの型：

プロンプトをコピー 
目的：〇〇（例：個人のポートフォリオサイト）、ターゲット：〇〇（例：採用担当者）、必要なページ：〇〇（例：トップ・実績・お問い合わせ）。この情報をもとに、サイトの構成案とページごとに載せるべきコンテンツをまとめてください。

Geminiが出力した構成案をそのままFigmaの設計に持ち込むことで、デザイン作業がスムーズに進みます。

Step 2：Figmaでデザインカンプを作る

コードを書く前にFigmaでデザインを固めることで、実装してから気づく手戻りがほぼなくなります。

Figmaで最低限決めておくべきこと：

  • カラーパレット（メイン・サブ・背景・テキストの4色）
  • フォントと文字サイズのルール
  • PCとスマートフォンそれぞれのレイアウト

ここで決めた内容が、次のAntigravityへの指示の根拠になります。「なんとなく」でデザインを渡すのではなく、色コードやフォント名を明示できる状態にしておきましょう。

Step 3：AntigravityでFigmaデザインを実装する

まず、PC上に空のフォルダを作ります（例：test0612）。次に、Antigravityを起動して「New Project」からそのフォルダを開きます。これがAntigravityの作業場所になります。

フォルダを開いたら、最初に以下のプロンプトを送信してディレクトリ構造を作成します。

ディレクトリ構造作成プロンプト：

プロンプトをコピー 
今回構築するのは「WordPressのテーマ開発・テスト環境」です。
「Local site/test0612」の中に、WordPressのテーマ開発に必要な以下のディレクトリ構造を作成してください。

/ (test0612フォルダ直下)
├── style.css             (WordPressテーマのメタデータを含む)
├── functions.php         (テーマの機能設定用)
├── index.php             (WordPressのメインテンプレート)
├── header.php            (ヘッダーテンプレート)
├── footer.php            (フッターテンプレート)
├── src/
│   ├── css/              (Tailwind等のソース用)
│   ├── js/
│   └── assets/           (画像用)
└── package.json          (npmビルドツール設定用)

また、style.cssにはWordPressテーマとして認識されるためのヘッダーコメント（Theme Name: test0612など）を記述してください。

構造が整ったら、FigmaのデザインカンプをAntigravityに渡して実装に入ります。このとき渡す素材は2つです。

  1. FigmaのDev Modeのリンク（PC版・SP版それぞれ）
  2. デザインカンプを書き出した画像データ

実装指示プロンプト：

プロンプトをコピー 
# 依頼内容
添付したデザイン画像と、以下のFigma Dev Modeの情報を基に、
WordPressのトップページ（front-page.php）のコーディングをお願いします。

# Figma参照データ
- PC版デザイン: https://www.figma.com/design/〜〜〜
- SP版デザイン: https://www.figma.com/design/〜〜〜

# 実装の要件
1. WordPressのテーマとして動作するように、適切なテンプレートタグ（get_header(), get_footer()など）を使用してください。
2. デザインの再現性を高めるため、CSSは必要に応じてレスポンシブ対応（メディアクエリを使用）をお願いします。
3. 画像は添付ファイルを配置してください。
4. HTMLの構造は、SEOおよびアクセシビリティを考慮したマークアップ（header, main, footer, sectionタグなど）で作成してください。

# 進め方
まずは、デザインから解析した「HTML/CSSの構造案（ロードマップ）」を提示してください。
私の確認後、具体的なコード生成に移ってください。

最後の「進め方」がポイントです。いきなりコードを生成させるのではなく、まず構造案を出させて確認を挟む流れにすることで、大幅な手戻りを防げます。修正がうまくいかないときはFireShotなどで問題箇所を画像で渡すのが最速です。

Step 4：Local（アプリ）でWordPress環境を立ち上げて確認する

Local（localwp.com）でWP環境を構築したら、以下の手順でStep 3で作ったテーマと接続します。

  1. LocalのサイドバーからサイトURLの横にある「WP Admin」をクリック
  2. WordPressの管理画面が開くので、「外観」→「テーマ」に進む
  3. Step 3で作成したテーマ（例：test0612）が一覧に表示されているので「有効化」をクリック

これで接続完了です。以降はAntigravityで修正するたびに、Localのブラウザプレビューにリアルタイムで反映されます。

Step 5：テストサイトにアップして最終確認する

Localで問題がなくなったら、テストサイト（WP環境）にアップして実環境での動作を確認します。

Localでは気づけない、テストサイトで初めてわかること：

  • フォントの読み込み速度
  • 外部サービス（お問い合わせフォーム、Googleマップ等）との連携
  • 実際のスマートフォン実機での表示

このワークフローを支える土台：サーバー選びも手を抜かない

テストサイトを持つには、信頼できるサーバーが必要です。サーバーの速度や安定性が低いと、動作確認のたびに待ち時間が発生し、ワークフロー全体のテンポが崩れます。

初心者が重視すべき条件：

  • 表示速度が速い
  • 管理画面が直感的に使える
  • WordPressを簡単に導入できる
  • サポートが充実している

私個人としては、国内シェアNo.1クラスの実績があり、テスト用のサブドメインも簡単に作れるX Serverがおすすめです。お得なお試し期間もあるので、まず触れてみるのがおすすめです。

広告▶︎

エックスサーバー

まとめ

紹介したワークフローを一言で表すと、「考える工程」と「作る工程」を分離することです。

  1. Geminiで考える（要件整理）
  2. Figmaで設計する（デザイン）
  3. Antigravityで作る（実装）
  4. Localで確かめる（WordPress動作確認）
  5. テストサイトで検証する（公開確認）

各ステップの役割が明確なので、詰まったときに「どこで止まっているか」がすぐわかります。これが、作業時間の短縮より大きな効果——「迷って止まる時間がなくなる」——につながります。ぜひ、自分のプロジェクトに合わせてカスタマイズしながら使ってみてください。

関連記事