日本語

简体中文
English
繁體中文
한국어
Español
Français
Deutsch
العربية
Tiếng Việt

日本語

简体中文
English
繁體中文
한국어
Español
Français
Deutsch
العربية
Tiếng Việt

Appearance

デザインとプログラミングAgentでウェブサイトを設計する ​

本章の概要 ​

本章では、デザインと開発がAIを通じてどのように完璧に連携できるかを紹介します。あなたはプロダクトマネージャーの役割を担い、「デザインAgent」にロゴデザイン、カラースキーム、ページレイアウトを指示し、その後「プログラミングAgent」と協力してビジュアル稿を実行可能なコードに変換します。アイデアの構想からウェブサイトの公開まで、フルパイプラインのAI活用開発フローを体験し、一人でチームを務められるようになります。

1. 入門ガイド ​

1. チュートリアルの紹介 ​

AIデザインAgentとコーディングAgentを使って、ゼロから完全なウェブサイトを構築しましょう。

  • デザインAgent：ロゴ、ウェブページレイアウト、カラースキームなどのビジュアル要素の作成を担当
  • コーディングAgent：あなたがプロンプトで指定した要件とレイアウトに基づいて、HTML/CSS/JSなどの実際のコードを記述し、実行可能なウェブサイトを構築

2. デザインAgentとコーディングAgent ​

  • デザインAgent：あなたが提供するプロンプトに基づいて、画像、ページモックアップ、デザインスタイルを生成するAI。
  • Mastergo
  • Lovart
  • Figma MCP
  • コーディングAgent：あなたがプロンプトで要求した機能とレイアウトに基づいて、実際のコード（HTML/CSS/JSなど）を記述するAI。
  • Z.AI
  • Trae
  • Cursor
  • Lovable

2. デザインAgentを使ってロゴを作成 ​

1. ロゴデザイン時に考慮すべき重要要素 ​

ロゴは、ウェブサイトの第一印象を決定づける重要な要素の一つです。AIデザインAgentから満足のいく結果を得るには、プロンプトで希望するロゴのタイプを明確に説明する必要があります。

  1. ブランド名 / テキスト
  • ロゴに含める必要のあるテキスト（例：ウェブサイトタイトル、ブランド名など）。
  1. スタイル（ムード / 雰囲気）
  • ロゴが伝えたい全体的な感覚や雰囲気。
  • 例：ミニマル、キュート、シンプル、モダン、レトロ、未来感など。
  1. カラースキーム（任意）
  • ロゴの配色は、ウェブサイト全体の基調と一致させることが望ましい。
  • 具体的な16進数カラーコードや、大まかな色調（寒色、暖色など）を指定可能。
  • 例：#171721（黒）、#FF7130（オレンジ）。
  1. 形状（シェイプ / 構造）
  • ロゴに特定の形状や構図が必要かどうかを明確にする。
  • 例：円の中にテキスト、アイコン＋テキストの組み合わせ、アイコン中心のロゴなど。
  1. アイコン / シンボル要素（任意）
  • ロゴに含めたい図形や記号。
  • 例：本のアイコン、稲妻のシンボル、AI関連の図形、抽象的なジオメトリックパターンなど。

2. ロゴデザインのプロンプト作成 ​

プロンプト例

「ミニマルスタイルのロゴをデザインしてください。ブランド名は 'My First Website'。
黒 (#171721) とオレンジ (#FF7130) を使用し、テキストを円の中に配置してください。」
「ブランド名 'AIID' のロゴをデザインしてください。
全体的に未来感があり、クリーンでシンプルなスタイルに。メインカラーは青と白。
AIを象徴する抽象的な図形とテキストを組み合わせ、透明背景のPNGで書き出してください。」

3. Agentにデザインを依頼 ​

  • 上記のプロンプトを入力 → Agentが生成した複数のデザイン案を比較。

4. 最終ロゴを決定 ​

  • 草案の中から一番好きなバージョンを選択してダウンロード。

3. ウェブサイトの構造を計画 ​

1. 基本セクションを理解する ​

ウェブサイトの制作を始める前に、どのメニュー（セクション）を含めるかを計画することが重要です。メニューの設計は、訪問者に何を見せたいか、そしてどのような行動をとってほしいかによって決まります。 一般的に、ウェブサイトは Home / About / Contact などの基本セクションで構成されます。

2. 構造スケッチを自分で描く（任意） ​

ウェブサイトの目的に基づいて、簡単なメニュー構造を書き出すことができます。

基本メニュー ​

  1. Home
    1. 訪問者がウェブサイトに入って最初に見るメインページ
    2. 通常、ロゴ、ヒーローエリア、短いキャッチフレーズや紹介文が含まれる
  2. About
    1. あなたが誰か、またはプロジェクト/サービスの目的を紹介
    2. 個人ポートフォリオ：自己紹介＋略歴
    3. サービス系ウェブサイト：ビジョン、目標、コア機能
  3. Contact
    1. 連絡先情報（メールアドレス、電話番号、ソーシャルメディアリンクなど）
    2. シンプルなお問い合わせフォームを追加することも可能

オプションメニュー ​

  1. Services / Projects

    1. 提供するサービスや、プロジェクト/ポートフォリオの紹介
    2. 通常、リストやカード形式で表示

  2. Gallery

    1. 画像、写真、デザイン作品の展示用

  3. Blog / News

    1. 記事、ニュース、ログの公開用

  4. FAQ

    1. 訪問者からよくある質問と回答のまとめ

3. カラースキームの選択（任意） ​

すでにロゴがある場合や、特定のカラーリングでウェブサイトをデザインしたい場合は、プロンプトにカラーコードを直接指定することもできます。

例： #171721, #872B97, #FF7130, #FF3C68

カラースキームが思い浮かばない場合は、配色ウェブサイトやキーワード検索でインスピレーションを見つけることもできます。

  • Googleでキーワード検索して配色を探す

4. ウェブサイトデザインのプロンプト作成 ​

プロンプト例

「Home、About、Contactの3つのセクションで構成されるシングルページウェブサイトをデザインしてください。
配色は #171721、#FF7130、#FF3C68 を使用。
全体的にモダンでシンプルなスタイルに。」

4. デザインAgentを使ってウェブサイトを設計 ​

1. プロンプトを入力 → デザイン稿を生成 ​

  • プロンプトに計画した構造と選択した配色を記載。

Mastergoプロンプト例

2. デザイン稿を確認し修正意見を提示 ​

自分のニーズに合わせて、Agentにフィードバックを提出できます。例えば：

  • 「派手すぎるので、全体的にもっとシンプルなスタイルに変更して。」
  • 「フォントを変えて。」
  • 「カラーリングを調整して。」
  • 「この部分を削除して。」

3. 最終デザインを確定 ​

デザイン稿を複数回修正して満足したら、このデザインをコードに変換し、コーディングAgentが理解して作業を続けられるようにします。

デザインをコードに変換する方法はプラットフォームによって異なりますが、通常はデザインプラットフォーム内で特定のプラグインをインストールして使用します。

Mastergoの例

  1. Mastergoプラグインサイトを開き、seal を検索。

  1. デザインページに戻り、四角アイコン（プラグイン） をクリック。

  1. コードに変換したいデザイン領域を選択し、Generate ボタンをクリックしてコードを生成。

5. コーディングAgentを使ってウェブサイトを構築 ​

1. HTML/CSS/JSの基本概念を理解する ​

ウェブサイトは本質的に3つの言語で構成されています：

  • HTML（HyperText Markup Language） → 構造（骨組み）
  • CSS（Cascading Style Sheets） → スタイル（外観）
  • JavaScript（JS） → 機能（インタラクション）

この3つが連携して、私たちが見る完全なウェブページを構成します。

  1. 🏗️ HTML（構造）
  • ページに「何を表示するか」を定義
  • テキスト、画像、ボタン、リンクなどの要素を配置
  • 建物の 壁と骨組み に相当

例

html
<h1>こんにちは！</h1>
<p>これが私の最初のウェブサイトです。</p>
<a href="contact.html">お問い合わせ</a>
  1. 🎨 CSS（スタイル）
  • 「コンテンツをどのように表示するか」を決定
  • 文字サイズ、色、余白、背景、ボタンの形状などを制御
  • HTMLに「服」とビジュアルスタイルを与える

例

css
h1 {
  color: #FF7130;   /* テキストカラー */
  font-size: 36px;  /* フォントサイズ */
  text-align: center; /* 中央揃え */
}

body {
  background-color: #171721; /* 背景色 */
  color: white; /* デフォルトテキストカラー */
}
  1. ⚙️ JavaScript（JS）（機能）
  • ウェブページをユーザーとインタラクティブにする
  • ボタンクリック、メニュー展開、画像スライダー、フォーム送信などの動的効果を実現
  • HTML/CSSが静的な骨組みと外観だとすれば、JSはウェブページを「活かす」 脳 に相当

例

javascript
function showAlert() {
  alert("ボタンがクリックされました！");
}
html
<button onclick="showAlert()">クリックして</button>

2. コーディングAgentにコードを生成させる ​

プロンプト例

「Home、About、Contactセクションを含むシングルページウェブサイトのHTMLとCSSを書いてください。
配色は #171721、#FF7130、#FF3C68 を使用。
背景は黒、テキストは白にしてください。」

3. ウェブサイトを実行 ​

ラフコードが生成されると、Agentは通常プロジェクトを自動的に起動し、生成されたウェブページを表示します。

Agentを再起動した場合や、ウェブページが表示されない場合は、次のようなプロンプトを入力してください：

"Please activate the project"

Agentがプロジェクトを再起動しプレビューページを開くので、現在の効果を確認しやすくなります。

4. 簡単な修正を行う ​

引き続き自然言語でラフデザインを微調整できます。例えば：

  • 「ボタンをもっと大きくして。」
  • 「フォントを太くして。」

5. ウェブサイトのテキスト内容を修正 ​

Agentが生成した初期版のウェブサイトには、通常、自動生成されたプレースホルダーテキストが含まれています。実際のシナリオに近づけるために、事前に実際の内容を用意し、Agentに置き換えてもらうことができます。

応用例：AIIDウェブサイトのAboutページを更新

  1. Aboutページに表示したい内容を事前に書く。Agentが理解しやすいように、Markdown形式で保存すると便利。

  1. ダイアログでAgentに、そのファイルの内容を指定ページに適用するよう指示。

  1. 内容適用後の更新版を確認。

6. 画像を挿入 ​

特定の画像（ロゴや背景画像など）を追加したい場合は、まず画像をプロジェクトフォルダにアップロードし、プロンプトでページのどの位置にこれらの画像を使用するかを指定します。

  • 例：

  • 結果：

6. デザインとコードの統合 ​

1. デザインファイルとウェブサイトコードを統合（任意） ​

デザインAgentからコードファイルをダウンロードした後、それらを現在のプロジェクトディレクトリに移動し、コーディングAgentにこれらのデザインコードと既存プロジェクトの統合を依頼できます。

  • 例：

  • 結果：