CONTENT
ここから
16:9、4:5、9:16など用途別の画像生成プロンプトを作る
この教材では、Google Apps ScriptのWebアプリで、画像プロンプトメーカーを作ります。
前回は、テーマから企画書を作るアプリを作りました。
今回は、その企画をもとに、画像生成AIに入れるための画像プロンプトを自動で作ります。
画像そのものを作るのではなく、まずは画像AIに渡すための「指示文」を作ります。
企画を入力する
↓
比率を選ぶ
↓
ボタンを押す
↓
AIが画像プロンプトを作る
↓
コピーして画像生成AIで使う
画像生成は、最初の指示でかなり変わります。
なんとなく「おしゃれに」と書くより、比率、光、構図、余白、レンズ、f値を入れると、使いやすい画像になりやすいです。
このページで完成するもの
今回作るのは、次のようなアプリです。
| 項目 | 内容 |
|---|---|
| 入力 | 企画タイトル、ターゲット、雰囲気、画像にしたい場面 |
| 選択 | 16:9、4:5、9:16、1:1 |
| AI生成 | 画像生成AIに入れるプロンプト |
| 表示 | Web画面に表示 |
| 保存 | スプレッドシートに履歴保存 |
今回のゴールはこれです。
用途に合った画像プロンプトを、
ボタン1つで作れるようにする
1. 画像比率を先に決める
画像は、使う場所によって形が変わります。
| 比率 | 使う場所 | 目的 |
|---|---|---|
| 16:9 | Webサイト、YouTube、スライド | 横長のメイン画像 |
| 4:5 | Instagram投稿 | スマホで見やすい投稿画像 |
| 9:16 | ストーリー、ショート動画 | 縦長のスマホ画面 |
| 1:1 | SNS、アイコン風投稿 | 正方形で使いやすい |
迷ったら、まずはこの2つで大丈夫です。
Webサイト用：16:9
SNS投稿用：4:5
2. 今回作るファイル
今回も2つだけです。
Code.gs
index.html
| ファイル | 役割 |
|---|---|
| Code.gs | Gemini APIを呼び出し、画像プロンプトを作る |
| index.html | 入力画面と結果表示を作る |
3. 事前準備
Googleスプレッドシートを作ります。
https://sheets.google.com/
ファイル名は、次にします。
AI画像プロンプトメーカー
スプレッドシートからApps Scriptを開きます。
拡張機能
↓
Apps Script
プロジェクト名も、次にします。
AI画像プロンプトメーカー
4. APIキーを確認する
前回と同じ GEMINI_API_KEY を使います。
Apps Scriptの左側の歯車アイコンから確認します。
プロジェクトの設定
↓
スクリプト プロパティ
次の名前で保存されていればOKです。
| プロパティ | 値 |
|---|---|
| GEMINI_API_KEY | 自分のGemini APIキー |
APIキーは人に見せないでください。
コードに直接書かず、スクリプトプロパティに保存します。
5. Code.gsを貼り付ける
Code.gs の中身をすべて消して、次のコードを貼り付けます。
const SHEET_NAME = '画像プロンプト履歴';
const MODEL_NAME = 'gemini-2.5-flash';
function doGet() {
setupSheet_();
return HtmlService
.createHtmlOutputFromFile('index')
.setTitle('AI画像プロンプトメーカー')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function generateImagePrompt(formData) {
validateFormData_(formData);
setupSheet_();
const prompt = buildImagePrompt_(formData);
const result = callGemini_(prompt);
saveHistory_(formData, result);
return {
ok: true,
text: result,
message: '画像プロンプトを作成しました。'
};
}
function buildImagePrompt_(formData) {
return `
あなたは、画像生成AIに入れるプロンプトを作るプロのクリエイティブディレクターです。
次の企画情報をもとに、画像生成AIで使いやすいプロンプトを作ってください。
【企画タイトル】
${formData.title}
【ターゲット】
${formData.target}
【雰囲気】
${formData.tone}
【画像にしたい場面】
${formData.scene}
【画像比率】
${formData.ratio}
【用途】
${formData.media}
以下の形式で出してください。
1. 日本語プロンプト
2. 英語プロンプト
3. 撮影設定
4. 入れない方がよいもの
5. 文字入れの余白指示
6. 画像を良くするための修正プロンプト
条件：
・プロのカメラマンが撮影したようなリアルな写真にする
・50mmレンズ、f2.8、柔らかい自然光を基本にする
・背景はほどよくぼかす
・主役が分かりやすい構図にする
・文字は入れない
・ロゴは入れない
・人物の顔ははっきり写さない
・指定された画像比率に合う構図にする
・あとからテロップを入れやすい余白を残す
・初心者がそのままコピーして使える形にする
`;
}
function callGemini_(prompt) {
const apiKey = PropertiesService
.getScriptProperties()
.getProperty('GEMINI_API_KEY');
if (!apiKey) {
throw new Error('GEMINI_API_KEY が設定されていません。');
}
const url =
'https://generativelanguage.googleapis.com/v1beta/models/' +
MODEL_NAME +
':generateContent?key=' +
encodeURIComponent(apiKey);
const payload = {
contents: [
{
role: 'user',
parts: [{ text: prompt }]
}
],
generationConfig: {
temperature: 0.7,
maxOutputTokens: 1300
}
};
const options = {
method: 'post',
contentType: 'application/json',
payload: JSON.stringify(payload),
muteHttpExceptions: true
};
const response = UrlFetchApp.fetch(url, options);
const statusCode = response.getResponseCode();
const responseText = response.getContentText();
if (statusCode !== 200) {
throw new Error('Gemini APIエラー：' + responseText);
}
const json = JSON.parse(responseText);
const text = json.candidates?.[0]?.content?.parts?.[0]?.text;
if (!text) {
throw new Error('AIの回答を取得できませんでした。');
}
return text;
}
function saveHistory_(formData, result) {
const sheet = SpreadsheetApp
.getActiveSpreadsheet()
.getSheetByName(SHEET_NAME);
sheet.appendRow([
new Date(),
formData.title,
formData.target,
formData.tone,
formData.scene,
formData.ratio,
formData.media,
result
]);
}
function getRecentPrompts() {
setupSheet_();
const sheet = SpreadsheetApp
.getActiveSpreadsheet()
.getSheetByName(SHEET_NAME);
const lastRow = sheet.getLastRow();
if (lastRow <= 1) {
return [];
}
const values = sheet.getRange(2, 1, lastRow - 1, 8).getValues();
return values
.map((row) => {
return {
createdAt: formatDate_(row[0]),
title: row[1],
ratio: row[5],
media: row[6],
result: row[7]
};
})
.reverse()
.slice(0, 5);
}
function setupSheet_() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
let sheet = ss.getSheetByName(SHEET_NAME);
if (!sheet) {
sheet = ss.insertSheet(SHEET_NAME);
}
if (sheet.getLastRow() === 0) {
sheet.appendRow([
'作成日時',
'企画タイトル',
'ターゲット',
'雰囲気',
'画像にしたい場面',
'画像比率',
'用途',
'画像プロンプト'
]);
}
}
function validateFormData_(formData) {
if (!formData) {
throw new Error('入力データがありません。');
}
const requiredFields = [
['title', '企画タイトル'],
['target', 'ターゲット'],
['tone', '雰囲気'],
['scene', '画像にしたい場面'],
['ratio', '画像比率'],
['media', '用途']
];
requiredFields.forEach(([key, label]) => {
if (!formData[key] || String(formData[key]).trim() === '') {
throw new Error(label + 'を入力してください。');
}
});
}
function formatDate_(date) {
if (!date) return '';
return Utilities.formatDate(
new Date(date),
Session.getScriptTimeZone(),
'yyyy/MM/dd HH:mm'
);
}
6. index.htmlを作る
Apps Scriptの左側にある「＋」を押します。
＋
↓
HTML
ファイル名は次にします。
index
index.html の中身をすべて消して、次のコードを貼り付けます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<base target="_top" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI画像プロンプトメーカー</title>
<style>
:root {
--bg: #f7f8fb;
--card: #ffffff;
--text: #111827;
--muted: #6b7280;
--line: #dbe3ee;
--primary: #7c3aed;
--primary-dark: #6d28d9;
--soft: #f3e8ff;
--success: #16a34a;
--danger: #dc2626;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: linear-gradient(180deg, #fbf8ff 0%, #eef2f8 100%);
color: var(--text);
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
line-height: 1.7;
}
.page {
width: min(1100px, calc(100% - 32px));
margin: 0 auto;
padding: 32px 0 48px;
}
.hero {
padding: 28px;
margin-bottom: 20px;
border: 1px solid var(--line);
border-radius: 24px;
background: var(--card);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.badge {
display: inline-flex;
padding: 6px 12px;
border-radius: 999px;
background: var(--soft);
color: var(--primary);
font-size: 13px;
font-weight: 800;
}
h1 {
margin: 18px 0 8px;
font-size: clamp(28px, 5vw, 44px);
line-height: 1.15;
letter-spacing: -0.04em;
}
.lead {
margin: 0;
color: var(--muted);
}
.grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 20px;
}
.card {
border: 1px solid var(--line);
border-radius: 24px;
background: var(--card);
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
overflow: hidden;
}
.card-header {
padding: 20px 22px;
border-bottom: 1px solid var(--line);
background: #fbfdff;
}
.card-header h2 {
margin: 0;
font-size: 20px;
}
.card-header p {
margin: 4px 0 0;
color: var(--muted);
font-size: 14px;
}
form {
padding: 22px;
}
label {
display: block;
margin-bottom: 14px;
font-weight: 800;
}
.hint {
display: block;
margin: 2px 0 6px;
color: var(--muted);
font-size: 13px;
font-weight: 500;
}
input,
textarea,
select {
width: 100%;
border: 1px solid var(--line);
border-radius: 14px;
padding: 12px 14px;
background: #ffffff;
color: var(--text);
font: inherit;
outline: none;
}
textarea {
min-height: 96px;
resize: vertical;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
button {
border: 0;
border-radius: 14px;
padding: 12px 18px;
cursor: pointer;
font: inherit;
font-weight: 900;
}
button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.primary {
background: var(--primary);
color: #ffffff;
}
.primary:hover {
background: var(--primary-dark);
}
.secondary {
background: #eef2f7;
color: #111827;
}
.message {
margin: 0 22px 22px;
padding: 12px 14px;
border-radius: 14px;
display: none;
font-weight: 800;
}
.message.success {
display: block;
background: #ecfdf5;
color: var(--success);
}
.message.error {
display: block;
background: #fef2f2;
color: var(--danger);
}
.loading {
display: none;
padding: 14px;
margin: 0 22px 22px;
border-radius: 14px;
background: #fffbeb;
color: #92400e;
font-weight: 800;
}
.loading.show {
display: block;
}
.result {
padding: 22px;
}
.result-box {
min-height: 440px;
padding: 20px;
border-radius: 18px;
background: #111827;
color: #f9fafb;
white-space: pre-wrap;
overflow-wrap: anywhere;
font-size: 15px;
}
.result-empty {
color: #9ca3af;
}
.recent {
padding: 0 22px 22px;
}
.recent-item {
padding: 14px 0;
border-top: 1px solid var(--line);
}
.recent-item:first-child {
border-top: 0;
}
.recent-title {
margin: 0;
font-weight: 900;
}
.recent-meta {
margin: 2px 0 0;
color: var(--muted);
font-size: 13px;
}
.small-button {
margin-top: 8px;
padding: 8px 12px;
border-radius: 10px;
background: #eef2f7;
color: #111827;
font-size: 13px;
}
.empty {
color: var(--muted);
font-size: 14px;
}
@media (max-width: 920px) {
.grid,
.row {
grid-template-columns: 1fr;
}
.hero {
padding: 22px;
}
}
</style>
</head>
<body>
<main class="page">
<section class="hero">
<span class="badge">6-5 画像プロンプトメーカー</span>
<h1>画像AIに伝わる<br />指示文を作る</h1>
<p class="lead">
16:9、4:5、9:16など、使う場所に合わせた画像プロンプトを自動生成します。
</p>
</section>
<section class="grid">
<div class="card">
<div class="card-header">
<h2>画像の材料を入力</h2>
<p>短くて大丈夫です。あとでAIが整えてくれます。</p>
</div>
<form id="promptForm">
<label>
企画タイトル
<span class="hint">例：放課後カフェマップ</span>
<input
id="title"
type="text"
placeholder="企画タイトル"
required
/>
</label>
<label>
ターゲット
<span class="hint">例：学校帰りに友達と寄れる場所を探している学生</span>
<input
id="target"
type="text"
placeholder="誰に届けたいか"
required
/>
</label>
<label>
雰囲気
<span class="hint">画像全体の印象を決めます</span>
<select id="tone" required>
<option value="">選択してください</option>
<option value="明るい・親しみやすい">明るい・親しみやすい</option>
<option value="おしゃれ・落ち着いた">おしゃれ・落ち着いた</option>
<option value="かわいい・やさしい">かわいい・やさしい</option>
<option value="かっこいい・シャープ">かっこいい・シャープ</option>
<option value="シンプル・分かりやすい">シンプル・分かりやすい</option>
</select>
</label>
<label>
画像にしたい場面
<span class="hint">例：夕方のカフェ、ノートとドリンク、手元のアップ</span>
<textarea
id="scene"
placeholder="どんな画像にしたいか"
required
></textarea>
</label>
<div class="row">
<label>
画像比率
<span class="hint">使う場所に合わせて選びます</span>
<select id="ratio" required>
<option value="">選択してください</option>
<option value="16:9">16:9｜Webサイト・スライド</option>
<option value="4:5">4:5｜Instagram投稿</option>
<option value="9:16">9:16｜ストーリー・ショート動画</option>
<option value="1:1">1:1｜SNS正方形投稿</option>
</select>
</label>
<label>
用途
<span class="hint">どこで使う画像か</span>
<select id="media" required>
<option value="">選択してください</option>
<option value="Webサイトのメインビジュアル">Webサイトのメインビジュアル</option>
<option value="SNS投稿画像">SNS投稿画像</option>
<option value="ショート動画の背景画像">ショート動画の背景画像</option>
<option value="発表スライド用画像">発表スライド用画像</option>
</select>
</label>
</div>
<div class="actions">
<button class="primary" type="submit" id="generateButton">
画像プロンプトを作る
</button>
<button class="secondary" type="button" id="sampleButton">
サンプル入力
</button>
<button class="secondary" type="button" id="clearButton">
クリア
</button>
</div>
</form>
<div id="loadingBox" class="loading">
AIが画像プロンプトを作っています。少し待ってください。
</div>
<p id="messageBox" class="message"></p>
</div>
<div class="card">
<div class="card-header">
<h2>生成された画像プロンプト</h2>
<p>コピーして、画像生成AIに貼り付けて使います。</p>
</div>
<div class="result">
<div id="resultBox" class="result-box">
<span class="result-empty">ここに画像プロンプトが表示されます。</span>
</div>
<div class="actions">
<button class="secondary" type="button" id="copyButton">
プロンプトをコピー
</button>
</div>
</div>
<div class="card-header">
<h2>最近作ったプロンプト</h2>
<p>最新5件を表示します。</p>
</div>
<div class="recent" id="recentPrompts">
<p class="empty">まだ履歴がありません。</p>
</div>
</div>
</section>
</main>
<script>
const form = document.getElementById('promptForm');
const generateButton = document.getElementById('generateButton');
const sampleButton = document.getElementById('sampleButton');
const clearButton = document.getElementById('clearButton');
const copyButton = document.getElementById('copyButton');
const loadingBox = document.getElementById('loadingBox');
const messageBox = document.getElementById('messageBox');
const resultBox = document.getElementById('resultBox');
const fields = {
title: document.getElementById('title'),
target: document.getElementById('target'),
tone: document.getElementById('tone'),
scene: document.getElementById('scene'),
ratio: document.getElementById('ratio'),
media: document.getElementById('media')
};
form.addEventListener('submit', (event) => {
event.preventDefault();
const formData = getFormData();
setLoading(true);
showMessage('', '');
google.script.run
.withSuccessHandler((result) => {
setLoading(false);
resultBox.textContent = result.text;
showMessage(result.message || '画像プロンプトを作成しました。', 'success');
loadRecentPrompts();
})
.withFailureHandler((error) => {
setLoading(false);
showMessage(error.message || '作成に失敗しました。', 'error');
})
.generateImagePrompt(formData);
});
sampleButton.addEventListener('click', () => {
fields.title.value = '放課後カフェマップ';
fields.target.value = '学校帰りに友達と寄れる場所を探している学生';
fields.tone.value = '明るい・親しみやすい';
fields.scene.value =
'夕方のカフェ。テーブルの上にノート、スマホ、ドリンクが置かれている。学生の手元だけが見える。';
fields.ratio.value = '16:9';
fields.media.value = 'Webサイトのメインビジュアル';
showMessage('サンプルを入力しました。自由に書き換えてください。', 'success');
});
clearButton.addEventListener('click', () => {
form.reset();
resultBox.innerHTML =
'<span class="result-empty">ここに画像プロンプトが表示されます。</span>';
showMessage('', '');
});
copyButton.addEventListener('click', async () => {
const text = resultBox.textContent.trim();
if (!text || text === 'ここに画像プロンプトが表示されます。') {
showMessage('コピーするプロンプトがありません。', 'error');
return;
}
try {
await navigator.clipboard.writeText(text);
showMessage('プロンプトをコピーしました。', 'success');
} catch (error) {
showMessage('コピーできませんでした。手動で選択してコピーしてください。', 'error');
}
});
function getFormData() {
return {
title: fields.title.value.trim(),
target: fields.target.value.trim(),
tone: fields.tone.value.trim(),
scene: fields.scene.value.trim(),
ratio: fields.ratio.value.trim(),
media: fields.media.value.trim()
};
}
function setLoading(isLoading) {
generateButton.disabled = isLoading;
generateButton.textContent = isLoading
? '作成中...'
: '画像プロンプトを作る';
loadingBox.classList.toggle('show', isLoading);
}
function showMessage(text, type) {
if (!text) {
messageBox.textContent = '';
messageBox.className = 'message';
return;
}
messageBox.textContent = text;
messageBox.className = 'message ' + type;
}
function loadRecentPrompts() {
google.script.run
.withSuccessHandler(renderRecentPrompts)
.withFailureHandler(() => {
document.getElementById('recentPrompts').innerHTML =
'<p class="empty">履歴を読み込めませんでした。</p>';
})
.getRecentPrompts();
}
function renderRecentPrompts(prompts) {
const container = document.getElementById('recentPrompts');
if (!prompts || prompts.length === 0) {
container.innerHTML =
'<p class="empty">まだ履歴がありません。</p>';
return;
}
container.innerHTML = prompts
.map((item) => {
return `
<div class="recent-item">
<p class="recent-title">${escapeHtml(item.title)}</p>
<p class="recent-meta">
${escapeHtml(item.createdAt)}｜${escapeHtml(item.ratio)}｜${escapeHtml(item.media)}
</p>
<button class="small-button" type="button" onclick="showPrompt('${encodeURIComponent(item.result || '')}')">
プロンプトを見る
</button>
</div>
`;
})
.join('');
}
function showPrompt(encodedText) {
resultBox.textContent = decodeURIComponent(encodedText);
}
function escapeHtml(value) {
return String(value)
.replaceAll('&', '&')
.replaceAll('<', '<')
.replaceAll('>', '>')
.replaceAll('"', '"')
.replaceAll("'", ''');
}
loadRecentPrompts();
</script>
</body>
</html>
7. 保存する
コードを貼り付けたら保存します。
Command + S
Windowsの場合は、
Ctrl + S
です。
8. Webアプリとして公開する
右上の「デプロイ」を押します。
デプロイ
↓
新しいデプロイ
種類は、次を選びます。
ウェブアプリ
設定は次の通りです。
| 項目 | 設定 |
|---|---|
| 説明 | 6-5 AI画像プロンプトメーカー |
| 次のユーザーとして実行 | 自分 |
| アクセスできるユーザー | 自分のみ |
デプロイ後に表示されるURLを開くと、画像プロンプトメーカーが表示されます。
9. 動かしてみる
画面が開いたら、まず「サンプル入力」を押します。
そのあと、次を押します。
画像プロンプトを作る
少し待つと、右側に画像プロンプトが表示されます。
スプレッドシートには、自動で 画像プロンプト履歴 シートが作られ、生成結果が保存されます。
10. 生成結果の見方
生成されたプロンプトでは、まずこの3つを確認します。
画像比率が入っているか
文字なし・ロゴなしになっているか
余白の指示が入っているか
さらに、次のような撮影設定が入っていれば使いやすいです。
50mmレンズ
f2.8
柔らかい自然光
背景をほどよくぼかす
この4つは、画像を少しプロっぽく見せるための基本セットです。
11. うまく出ない時
画像がAIっぽくなりそう
プロンプトに、次の言葉を追加します。
リアルな写真
プロの広告写真
自然な色味
柔らかい自然光
文字が入ってしまいそう
次を強めに入れます。
文字は入れない
ロゴは入れない
読めない文字を入れない
看板文字を入れない
テロップを入れる場所がない
次を入れます。
上部に余白を残す
左側に余白を残す
タイトルを後から入れやすい構図
背景がぼけすぎる
f値を上げます。
f1.8
↓
f2.8
↓
f4
背景も少し見せたい時は、f4 が使いやすいです。
12. 今日の提出物
この回の提出物は、次の3つです。
1. WebアプリURL
2. 生成された画像プロンプトのスクリーンショット
3. スプレッドシートの履歴スクリーンショット
余裕がある人は、実際に画像生成AIに貼り付けて、画像も1枚作ってください。
最低限は、これでOKです。
用途に合った画像プロンプトが作れた
13. チェックリスト
| チェック | 内容 |
|---|---|
| スプレッドシートを作った | |
| Apps Scriptを開いた | |
| GEMINI_API_KEYを確認した | |
| Code.gsを貼り付けた | |
| index.htmlを作った | |
| index.htmlを貼り付けた | |
| Webアプリとしてデプロイした | |
| WebアプリURLを開いた | |
| サンプル入力を押した | |
| 画像プロンプトを作るを押した | |
| 画像プロンプトが表示された | |
| 履歴がスプレッドシートに保存された |
まとめ
今回は、画像生成AIに入れるための画像プロンプトメーカーを作りました。
大切なのは、画像をいきなり作ろうとしないことです。
まずは、AIに伝える言葉を整えます。
比率
用途
場面
雰囲気
光
レンズ
f値
余白
入れないもの
これらを入れるだけで、画像の完成度は大きく変わります。
今日作ったアプリは、次の制作にそのまま使えます。
企画書
↓
画像プロンプト
↓
メインビジュアル
↓
SNS画像
↓
LP制作
画像は、企画の第一印象です。
うまく言葉にできるようになると、作れる世界が一気に広がります。