公開日: 2025-07-12著者: Yov in YovStudio
今回やること
前回は第 3 話で作成したアプリに「人への優しさ」を加えてみました。最低限使えるようにはなりましたが、まだまだ細かい課題が残っています。今回は残りの課題に対応していきましょう。
残っている課題は以下の通りです。
第 3 話の残課題
- 初期表示で顔文字を選択しても何も起きない。
- ダークモードへの切り替えやテーマカラー変更が保存されない。
第 4 話の残課題
- 曜日ラベルの位置がおかしい。「Sun」が一番上にくるべき。
- 月ラベルの位置がブラウザの幅によってずれてしまう。
- マスが横のマスとくっついているので、縦方向のように少し余白を入れたい。
- マスのデフォルト色をもう少し目立たないようにしたい。
- 相変わらずライトモードの色が見えづらい。（特に😞と😐の色）
再掲：前回作成したアプリの画像
対応方針
さて今回もより具体的なプロンプトを作成するため、課題ごとにどう対応すべきかを決めていきましょう。各課題に対し、以下のような対応方針で進めることにします。
1. 初期表示で顔文字を選択しても何も起きない。
現在日付を選択した状態で初期表示すればよさそうです。
2. ダークモードへの切り替えやテーマカラー変更が保存されない。
モードやテーマカラーをローカルストレージに保存するように処理を追加すればよさそうです。
3. 曜日ラベルの位置がおかしい。「Sun」が一番上にくるべき。
『Sun』から始まるように、曜日ラベルの順番を整えてみましょう。
4. 月ラベルの位置がブラウザの幅によってずれてしまう。
月ラベルの位置が列に対して固定になるように調整してみましょう。
5. マスが横のマスとくっついているので、縦方向のように少し余白を入れたい。
マスの横にも、単純に余白を加えれば対応できそうです。
6. マスのデフォルト色をもう少し目立たないようにしたい。
マスのデフォルト色をもう少し目立たないように調整してみましょう。
色の調整方針も少しだけ具体的に指示してみます。
7. 相変わらずライトモードの色が見えづらい。（特に😞と😐の色）
😞と😐の色をもう少し濃くするように調整してみましょう。
今回使うプロンプト
対応方針をベースにプロンプトを作成しました。
今回も改善なので、前回のチャットに継続して送ってみますよ。
作成済みの「MOOD TRACKER」のWebアプリを改善します。
以下の目的と前提条件に基づき、変更内容をすべて反映してください。
## 目的
ユーザーの視点に立って、視認性や使いやすさを改善する
## 前提条件
- コードは HTML / CSS / JavaScript で構成された前回のアプリの続きとして書いてください。
- React や外部ライブラリは使わず、ブラウザ上でローカル実行できるようにしてください。
- コードは省略せず、すべてフルで提供してください。
## 変更内容
1. 【初期表示の日付】
- 初期表示時、現在日付を選択している状態で表示してください。
2. 【モードとテーマカラーの保存】
- ライトモード/ダークモードやテーマカラーの変更がされた場合、ローカルストレージに保存し、初期表示時に反映するようにしてください。
3. 【曜日ラベルの順序】
- 縦軸の曜日ラベルを「Sun」から始まるように並べ替えてください。（Sun〜Sat の順）
4. 【月ラベルの位置調整】
- 月ラベルが表示される位置が横幅に依存してずれてしまう問題を修正してください。
- マスの列に対して正確に位置づけられるよう調整してください。
- 1月より前の12月は不要です。
5. 【マスの横方向の余白】
- マスの横方向にも縦方向と同じくらいの間隔を持たせてください。
6. 【マスのデフォルト色の調整】
- 現在の淡いグレーを、さらに控えめな色（より透明度を高めるなど）に変更してください。
7. 【ライトモードの色の視認性】
- 特に😞や😐が見えにくくなっているので、色合いをもう少し濃く調整してください。
- ライトモードでも明度差が感じられるような配色にしてください。ChatGPT からの返答
今回も 60 秒前後で「コード」と「改善内容の適用済み要素」が返ってきました。
返ってきた内容は以下の通りです。
※補足：同じプロンプトでも、ChatGPT は状況によって違った回答を返すことがあります。自分で試してみたら全然違う結果になった、というのもよくあることです。その違いも含めて楽しんでもらえればと思います。
コード
コードは長いので折りたたんでいます。
コード内に含まれるコメントも含め、すべて ChatGPT が作成したものです。
コードはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MOOD TRACKER</title>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
<style>
:root {
--bg-light: #f0f0f0;
--bg-dark: #1e1e2f;
--text-light: #333;
--text-dark: #eee;
--glass-bg: rgba(255, 255, 255, 0.15);
--glass-border: rgba(255, 255, 255, 0.3);
--neutral-light: rgba(0, 0, 0, 0.05);
--neutral-dark: rgba(255, 255, 255, 0.08);
}
body {
margin: 0;
font-family: sans-serif;
background: var(--bg-light);
color: var(--text-light);
transition: background 0.3s, color 0.3s;
}
body.dark {
background: var(--bg-dark);
color: var(--text-dark);
}
.glass {
backdrop-filter: blur(12px);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 1rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.controls {
display: flex;
gap: 1rem;
}
select, button {
padding: 0.4rem 0.8rem;
border-radius: 6px;
border: none;
font-size: 1rem;
}
.calendar {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 1rem;
}
.year-section {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.week-row {
display: flex;
overflow-x: auto;
gap: 4px;
position: relative;
}
.month-labels {
display: flex;
gap: 4px;
padding-left: 36px;
font-size: 0.8rem;
margin-bottom: 4px;
}
.month-labels span {
width: 16px;
text-align: center;
}
.day-col {
display: flex;
flex-direction: column;
gap: 4px;
}
.days-with-labels {
display: flex;
}
.day-labels {
display: flex;
flex-direction: column;
gap: 4px;
margin-right: 4px;
font-size: 0.75rem;
padding-top: 16px;
}
.day {
width: 16px;
height: 16px;
border-radius: 3px;
cursor: pointer;
background: var(--neutral-light);
box-sizing: border-box;
transition: transform 0.1s, border 0.2s;
}
body.dark .day {
background: var(--neutral-dark);
}
.day:hover {
transform: scale(1.3);
}
.day.selected {
border: 2px solid #000;
}
body.dark .day.selected {
border: 2px solid #fff;
}
.legend {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
margin: 1rem;
}
.mood-row {
display: flex;
gap: 0.5rem;
}
.mood-icon {
font-size: 2rem;
cursor: pointer;
opacity: 0.6;
}
.mood-icon.active {
opacity: 1;
}
.theme-selector {
margin-left: auto;
}
#selectedDateDisplay {
font-size: 1rem;
font-weight: bold;
}
</style>
</head>
<body>
<header class="glass">
<h1>MOOD TRACKER</h1>
<div class="controls">
<select id="themeColor">
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="purple">Purple</option>
<option value="orange">Orange</option>
</select>
<button id="toggleMode">Dark Mode</button>
</div>
</header>
<div class="calendar" id="calendar"></div>
<div class="legend glass">
<div id="selectedDateDisplay">日付を選択してください</div>
<div class="mood-row">
<span class="mood-icon" data-mood="1">😞</span>
<span class="mood-icon" data-mood="2">😐</span>
<span class="mood-icon" data-mood="3">🙂</span>
<span class="mood-icon" data-mood="4">😊</span>
<span class="mood-icon" data-mood="5">😁</span>
</div>
</div>
<script>
const calendarEl = document.getElementById('calendar');
const themeSelect = document.getElementById('themeColor');
const toggleModeBtn = document.getElementById('toggleMode');
const moodIcons = document.querySelectorAll('.mood-icon');
const selectedDateDisplay = document.getElementById('selectedDateDisplay');
let currentTheme = localStorage.getItem('theme') || 'green';
let selectedDate = new Date().toISOString().split('T')[0];
let isDarkMode = localStorage.getItem('mode') === 'dark';
if (isDarkMode) document.body.classList.add('dark');
themeSelect.value = currentTheme;
toggleModeBtn.textContent = isDarkMode ? 'Light Mode' : 'Dark Mode';
let moodData = JSON.parse(localStorage.getItem('moodData') || '{}');
function getColorScale(mood, theme, isDark) {
const palette = {
light: {
green: ['#cce8da','#98d1b6','#63bc92','#33a66e','#198f56'],
blue: ['#d1f2f9','#9edbf0','#68c6e6','#30b0dc','#008ac1'],
red: ['#ffd6d6','#ff9c9c','#ff6c6c','#ff3c3c','#d10000'],
purple:['#e6d9f0','#d1aee4','#b77dd7','#9f49cb','#7d2ea6'],
orange:['#ffeacc','#ffd099','#ffb566','#ff9a33','#cc6f00']
},
dark: {
green: ['#1a2f25','#246647','#2ca37a','#34dca0','#6fffc8'],
blue: ['#12333e','#14627c','#168bb5','#18b1dc','#68e0f5'],
red: ['#3d1e1e','#842323','#d33434','#f95858','#ffaaaa'],
purple:['#2f1e35','#562b63','#813a94','#a856c0','#ce9ef0'],
orange:['#3f2c1a','#7c4c00','#b36a00','#ff8c1a','#ffc180']
}
};
return palette[isDark ? 'dark' : 'light'][theme][mood - 1];
}
function formatDateKey(date) {
return date.toISOString().split('T')[0];
}
function buildCalendar() {
calendarEl.innerHTML = '';
let allDates = Object.keys(moodData);
let years = [...new Set(allDates.map(d => d.split('-')[0]))];
if (!years.includes(new Date().getFullYear().toString())) years.push(new Date().getFullYear().toString());
years = years.sort((a, b) => b - a);
const dayLabels = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
years.forEach(year => {
const section = document.createElement('div');
section.className = 'year-section';
section.innerHTML = `<h2>${year}</h2>`;
const monthLabels = document.createElement('div');
monthLabels.className = 'month-labels';
const weekRow = document.createElement('div');
weekRow.className = 'week-row';
const startDate = new Date(`${year}-01-01`);
const endDate = new Date(`${year}-12-31`);
const firstSunday = new Date(startDate);
while (firstSunday.getDay() !== 0) firstSunday.setDate(firstSunday.getDate() - 1);
const labelDays = document.createElement('div');
labelDays.className = 'day-labels';
dayLabels.forEach(d => {
const label = document.createElement('div');
label.textContent = d;
labelDays.appendChild(label);
});
const dayWrapper = document.createElement('div');
dayWrapper.className = 'days-with-labels';
dayWrapper.appendChild(labelDays);
let lastMonth = -1;
for (let d = new Date(firstSunday); d <= endDate; d.setDate(d.getDate() + 7)) {
const col = document.createElement('div');
col.className = 'day-col';
const cellMonth = d.getMonth();
if (lastMonth !== cellMonth) {
const label = document.createElement('span');
label.textContent = `${cellMonth + 1}月`;
monthLabels.appendChild(label);
lastMonth = cellMonth;
} else {
const blank = document.createElement('span');
blank.textContent = '';
monthLabels.appendChild(blank);
}
for (let i = 0; i < 7; i++) {
const cellDate = new Date(d);
cellDate.setDate(cellDate.getDate() + i);
if (cellDate.getFullYear().toString() !== year) continue;
const key = formatDateKey(cellDate);
const day = document.createElement('div');
day.className = 'day';
const mood = moodData[key];
const isDark = document.body.classList.contains('dark');
if (mood) {
day.style.background = getColorScale(mood, currentTheme, isDark);
}
if (selectedDate === key) {
day.classList.add('selected');
}
day.title = key;
day.onclick = () => openMoodSelector(key);
col.appendChild(day);
}
dayWrapper.appendChild(col);
}
section.appendChild(monthLabels);
section.appendChild(dayWrapper);
calendarEl.appendChild(section);
});
selectedDateDisplay.textContent = selectedDate;
}
function openMoodSelector(dateKey) {
selectedDate = dateKey;
selectedDateDisplay.textContent = dateKey;
moodIcons.forEach(icon => {
icon.onclick = () => {
const mood = parseInt(icon.dataset.mood);
moodData[dateKey] = mood;
localStorage.setItem('moodData', JSON.stringify(moodData));
buildCalendar();
};
});
buildCalendar();
}
themeSelect.onchange = () => {
currentTheme = themeSelect.value;
localStorage.setItem('theme', currentTheme);
buildCalendar();
};
toggleModeBtn.onclick = () => {
document.body.classList.toggle('dark');
const isDark = document.body.classList.contains('dark');
toggleModeBtn.textContent = isDark ? 'Light Mode' : 'Dark Mode';
localStorage.setItem('mode', isDark ? 'dark' : 'light');
buildCalendar();
};
buildCalendar();
</script>
</body>
</html>チャットの回答
改善内容をすべて反映しました。今回の更新で以下の点が実現されています：
✅ 改善内容の適用済み要素
1. 初期表示日付の選択
・ページ読み込み時、当日の日付が選択済みとして表示されます。
2. モードとテーマカラーの保存
・ダーク／ライトモードとテーマカラーの選択がローカルストレージに保存され、次回起動時に自動反映されます。
3. 曜日ラベルの順序
・縦軸の曜日ラベルが Sun〜Sat に変更されました。
4. 月ラベルの正確な位置
・各週の最初の日付（月変わり）に合わせて、月名を正しく表示。
・12月の表示ずれ防止（翌年分を含めない）も対応済み。
5. マスの横方向の余白
・横方向にも 4px の余白を追加し、縦とバランスの取れたレイアウトに改善。
6. マスのデフォルト色の調整
・未入力マスの背景色の透明度をより高く設定し、より控えめな印象に。
7. ライトモードの視認性改善
・😞 や 😐 に対応する配色をやや濃く調整し、明度差を強化。
ご確認の上、さらに調整したい点があればお気軽にどうぞ。動作テストやモバイル対応の強化なども可能です。思ったより改善されていない
さぁどうなるでしょうか。
とりあえず動きを見たい方は下記リンクからどうぞ。
動作確認用デモページ
実際に手元で動かしてみたい方は、下記からダウンロード後、zip ファイルを展開して中に入っている index.html を実行してみてください。
zipファイルをダウンロード
── おや？今度はマスのデフォルト色が薄くなりすぎていてカレンダーを認識しづらくなってますね…。曜日ラベルや月ラベルも思っていたような改善がされていないようです。
今回作成したアプリの画像
-
ライトモード
-
ダークモード
えーと…少し整理してみますよ。
- 【初期表示の日付】
- 初期表示時、現在日付を選択している状態で表示してください。
これは一見すると初期表示で現在日付を選択しているように見えますが、顔文字を選んでもカレンダーに反映されないようでした。初期表示でそのまま顔文字を選択できる状態になるという思い込みがありましたが、ChatGPT にはそのあたりは伝わっていなかったようです。
「初期表示で気分を登録できるようにしてください」という指示を加えるべきだったのでしょう。
- 【モードとテーマカラーの保存】
- ライトモード/ダークモードやテーマカラーの変更がされた場合、ローカルストレージに保存し、初期表示時に反映するようにしてください。
問題なく実装されたようです。
- 【曜日ラベルの順序】
- 縦軸の曜日ラベルを「Sun」から始まるように並べ替えてください。（Sun〜Sat の順）
「Sun」からはじまるようになりましたが、カレンダーの行に対して配置が一段下にズレています。
前回の時点では「Sun」が下にはみ出ていたので、「Sun」が先頭になればズレも解消されると思いましたが、配置はズレたまま順番だけが変わっています。
配置のズレも調整するように指示をする必要があったようですね。
- 【月ラベルの位置調整】
- 月ラベルが表示される位置が横幅に依存してずれてしまう問題を修正してください。
- マスの列に対して正確に位置づけられるよう調整してください。
- 1月より前の12月は不要です。
挙動は特に前回と変わっていません。
それどころか左右両端のマスが縦 7 マスではなくなってしまっています。
前年分と翌年分のマスが削られてしまったようですが、「1月より前の12月は不要です。」を誤解釈されてしまった可能性があります。
前年分と翌年分のマスが削られるのはそれはそれで悪くはないですが、曜日ラベルと位置が全く合っていないので調整が必要です。
- 【マスの横方向の余白】
- マスの横方向にも縦方向と同じくらいの間隔を持たせてください。
ChatGPT からの返答によると、横方向にも 4px の余白を追加したとのことですが、表示を見た限り余白はありません。
- 【マスのデフォルト色の調整】
- 現在の淡いグレーを、さらに控えめな色（より透明度を高めるなど）に変更してください。
ライトモードでは、マスが薄すぎてカレンダー全体が見えづらくなっています。
ダークモードはもう少し薄くてもよいですが、程よい感じに見えます。
- 【ライトモードの色の視認性】
- 特に😞や😐が見えにくくなっているので、色合いをもう少し濃く調整してください。
- ライトモードでも明度差が感じられるような配色にしてください。
最後に少し調整を加えるかもしれませんが、現時点ではひとまず視認できる色合いになったので OK とします。
伝えたつもり、伝わってない現実
ここまで、細かい調整項目をプロンプトで伝えて改善を依頼してきましたが、やってみるといろいろな「行き違い」が起こることがわかりました。
たしかに、今回のプロンプトも「一見すると丁寧」ですが、「実は伝えきれていない」部分があったようです。
たとえば、
- 「初期表示日付を選択」に対して → 実際には「気分が登録できる状態」にしてほしかった
- 「Sun から始まるように」に対して → ラベルの順序だけ直り、ズレはそのまま
- 「1月より前の12月は不要」に対して → 前後のマスが削られて曜日ラベルとずれる結果に
などなど。
これらは単なる「失敗」というよりも、人間と AI の「前提の違い」が露呈した良い事例です。 今回のような細かい調整を AI に伝えるには、「何をどうしたいか」だけでなく、「なぜそうしたいか」や「現在のどこが問題か」まで含めて伝えないと、なかなかうまく伝わらないことがあるようです。
次回は、この「行き違い」をどうリカバリするか、試していきますよ。