みなさん、こんにちは～！夏 生(なつき)です
今回はChatGPTとCodepenを使って目の色に合わせてアイシャドウ選びを
手伝ってくれるWebアプリを作ってみました！
アプリの完成形
こちらがアプリの完成系です。
目の色と値段を設定することでおすすめの商品を具体的に教えてくれます。
See the Pen SUTEKI-EYES by Natsuki.K (@OomammaloO) on CodePen.
そして初めてChatGPTに触れたのこともあり、いい機会なので
こちらのQiitaの記事のWebアプリの作り方についても一部ChatGPTに書いてもらいました！
今回、このようなアプリを作った理由は
自分が売り場で働いていた時に、化粧品の知識がなくお客さまからのご質問にスムーズに回答できなかった経験からです。
特に色に関する質問は難しく塗ってみないことには...なんてことも多々あったので
ChatGPTに接客を手伝ってもらうことにしました。
今は裏方で商品の仕入れをしていますが、店舗のオペレーションを改善することも私の仕事ですので何か手助けできるものがないかという思いもあります。
以下にはこのアプリを作るきっかけにもなった
誰でもお客さまに接客できるようにするためにこんなのあったらいいな！を書いておりますので参考に読んでいただけたら幸いです。
Codepenで作る「アイシャドウの色選びアプリ」
では早速Codepenを使って作成した「アイシャドウの色選びアプリ」について紹介します。
その名も 
SUTEKI-EYES
名前の由来は特にありません。
アイシャドウの色選びアプリでは味気がなさ過ぎたのでつけてみました。笑
このアプリはユーザーの目の色に基づいて適切なアイシャドウの色と商品を提案するシンプルなWebアプリです。
使用したツール
アプリができるまでのChatGPTへのプロンプト
ChatGPTにうまく指示ができていない部分もあり途中経過や失敗したことの記載が
できていなかったのでChatGPTを使ってアプリを作るにあたっての詳しいプロンプトや
直面した問題と解決策を紹介します。
1. 目の色
まず最初に
といきなり聞いてみたところ
See the Pen プロトタイプ① by Natsuki.K (@OomammaloO) on CodePen.
案外、エラーなく形になりました。
しかし中身をよく見ると目の色が4色しか選択できませんでした。
（そもそもそこまで考えが至らなかった）
そこでアジア圏で主に使うことを想定していたのでそこに合わせた目の色を増やしてもらうことにしました。
すごい！増えた！しっかり色の提案もしてくれました。
場合によってもっと選択肢を増やしたり、カラーコンタクトのブランド・色番から選択できるようにしても面白いかなと思いました。
2. アイシャドウの商品提案
続いて具体的な商品提案です。
色味の提案も大事ですが売り場では具体的な商品を提案しなければならないため以下のプロンプトを入力します。
目の色に合う具体的なアイシャドウをサジェストしてくれるようになりました。
コードを表示
<h1>アイシャドウの色選びアプリ</h1> <!-- ページの見出し -->
<p>あなたの目の色に合ったアイシャドウの色と商品を提案します。</p> <!-- アプリの説明 -->
<!-- ドロップダウンメニュー（目の色を選択する部分） -->
<label for="eye-color">目の色を選択してください:</label>
<select id="eye-color" onchange="suggestEyeshadowColor()"> <!-- メニューが変更されたときにJavaScript関数を呼び出す -->
<option value="">選択してください</option> <!-- デフォルトの選択肢 -->
<option value="dark-brown">ダークブラウン</option> <!-- ダークブラウンの目 -->
<option value="medium-brown">ミディアムブラウン</option> <!-- ミディアムブラウンの目 -->
<option value="light-brown">ライトブラウン</option> <!-- ライトブラウンの目 -->
<option value="brown">ブラウン</option> <!-- ブラウンの目 -->
<option value="blue">ブルー</option> <!-- ブルーの目 -->
<option value="green">グリーン</option> <!-- グリーンの目 -->
<option value="hazel">ヘーゼル</option> <!-- ヘーゼルの目 -->
</select>
<!-- アイシャドウの色の提案と商品提案を表示する部分 -->
<div id="suggestion" class="color-suggestion"></div>
<script>
// アイシャドウの色と商品を提案する関数
function suggestEyeshadowColor() {
const eyeColor = document.getElementById('eye-color').value; // ユーザーが選んだ目の色を取得
const suggestionDiv = document.getElementById('suggestion'); // 提案を表示する<div>を取得
let suggestion = ''; // 提案内容を保存する変数
// 選ばれた目の色に基づいて提案を変更
switch (eyeColor) {
case 'dark-brown':
suggestion = 'ダークブラウンの目には、ゴールドやブロンズ、深いブルーのアイシャドウがよく似合います。おすすめの商品: "キャンメイク パーフェクトスタイリストアイズ #14"、"セザンヌ トーンアップアイシャドウ #06"、"ケイト ブラウンシェードアイズN BR-6"。';
break;
case 'medium-brown':
suggestion = 'ミディアムブラウンの目には、コッパーやピーチ、モーヴのアイシャドウが美しく映えます。おすすめの商品: "キャンメイク シルキースフレアイズ #04"、"セザンヌ ナチュラルマットシェーディング #01"、"ケイト ヴィンテージモードアイズ BR-1"。';
break;
case 'light-brown':
suggestion = 'ライトブラウンの目には、ライトピンクやベージュ、ソフトグリーンのアイシャドウがおすすめです。おすすめの商品: "キャンメイク パーフェクトスタイリストアイズ #07"、"セザンヌ シングルカラーアイシャドウ #04"、"ケイト クラッシュダイヤモンドアイズ GD-1"。';
break;
case 'brown':
suggestion = 'ブラウンの目には、紫や青のアイシャドウがよく似合います。おすすめの商品: "キャンメイク ジュエリーシャドウベール #01"、"セザンヌ グロスアップアイシャドウ #02"、"ケイト スーパーシャープライナーEX BK-1"。';
break;
case 'blue':
suggestion = 'ブルーの目には、オレンジやブロンズのアイシャドウが美しく映えます。おすすめの商品: "キャンメイク シルキースフレアイズ #05"、"セザンヌ トーンアップアイシャドウ #01"、"ケイト ブラウンシェードアイズN BR-1"。';
break;
case 'green':
suggestion = 'グリーンの目には、赤系やモーヴのアイシャドウがおすすめです。おすすめの商品: "キャンメイク パーフェクトスタイリストアイズ #12"、"セザンヌ トーンアップアイシャドウ #05"、"ケイト ヴィンテージモードアイズ RD-1"。';
break;
case 'hazel':
suggestion = 'ヘーゼルの目には、ゴールドやアースカラーのアイシャドウがぴったりです。おすすめの商品: "キャンメイク シルキースフレアイズ #03"、"セザンヌ トーンアップアイシャドウ #04"、"ケイト クラッシュダイヤモンドアイズ BR-1"。';
break;
default:
suggestion = '目の色を選択してください。'; // 目の色が選択されていない場合のメッセージ
break;
}
// 提案を表示する<div>にテキストを設定
suggestionDiv.textContent = suggestion;
}
</script>
ブランドの指定
欧米のブランドに限定して出てきてしまうので
具体的に紹介したい商品のブランド名・メーカー名もプロンプトに入力しましょう。
3. 価格選択の追加
商品特性上プライスレンジが広いですのである程度価格が絞れるようにしていきます。
See the Pen プロトタイプ② by Natsuki.K (@OomammaloO) on CodePen.
目の色と価格を設定することでおすすめのアイシャドウを出してくれるようになりました。
ちゃっかり背景色が変わっていますが
background-color: #ccff99; /* ページの背景色を黄緑色に設定 */
で変えられます。
背景色はChatGPTに指示するよりも自分で好きな色や背景を探して組み込んだほうが
結果にブレがなかったのでおすすめです。
ここまでくれば後は細かい修正をして完成です。
最終的に私は背景色と提案商品を1つではなく3つ提案するよう指示しました。
まとめ
ここまで読んでいただいた皆さん、ありがとうございます。
Webアプリの機能に関して、まだまだ追加したい機能やもっとこうできたらいいのに、
というものはありますが試行錯誤しながらChatGPTに指示を出しWebアプリを自分で作れたというのはいい経験になりました。
今回、意外とエラーがでなかったのですがその理由としては
- 指示を簡潔に書く
- したいことを明確に伝える
- 変な助詞や接続詞を入れない
ということに気を配っていたからではないかと思います。
エラーが出なかっただけでおかしくなるのは何度かあって、
おすすめのアイシャドウとおすすめの商品が別々に出たりしました。
最初に指示したことがいつの間にか勝手になかったことにされたりもします。
ChatGPTは自分では考えていない
ということは常に念頭に置いておきたいですね。
ChatGPTへのプロンプトは私と同じように打っても同じものが仕上がるとは限らないのが面白いところでもありますので皆さんも是非codepenとChatGPTでWebアプリを作ってみてください！
余談
ここからChatGPTに書いてもらったものを紹介します。（一部修正あり）
アプリの概要
このアプリケーションは、ユーザーが目の色を選択すると、
その目の色に合ったアイシャドウの色を提案します。
また、いくつかの具体的な商品も一緒に提案されます。
例えば、目の色がブルー■の場合、オレンジ■やブロンズ■のアイシャドウが提案され、
商品名も表示されます。
使用したツール
用語
- HTML: Webページの基本的な構造を作成するために使用。
開発の手順
1. HTMLの基本構造を作成
まずは、Webアプリの基本的なHTML構造を作成します。以下はそのコードです。
このコードを使えば作動しますが具体的な解説もしていきます。
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>アイシャドウの色選び</title>
<style>
body {
background-color: #ADFF2F; /* 背景色を黄緑色に設定 */
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
color: #333;
}
label, select, button {
margin-top: 10px;
display: block;
}
</style>
</head>
<body>
<h1>あなたの目の色に合うアイシャドウを選びましょう！</h1>
<label for="eyeColor">目の色を選択してください:</label>
<select id="eyeColor">
<option value="dark-brown">ダークブラウン</option>
<option value="medium-brown">ミディアムブラウン</option>
<option value="light-brown">ライトブラウン</option>
<option value="brown">ブラウン</option>
<option value="blue">ブルー</option>
<option value="green">グリーン</option>
<option value="hazel">ヘーゼル</option>
</select>
<label for="priceRange">価格帯を選択してください:</label>
<select id="priceRange">
<option value="under-1000">1000円以下</option>
<option value="1000-1500">1000円〜1500円</option>
<option value="1500-2000">1500円〜2000円</option>
<option value="2000-2500">2000円〜2500円</option>
<option value="over-2500">2500円以上</option>
</select>
<button onclick="showSuggestions()">おすすめを表示</button>
<h2>おすすめの商品:</h2>
<p id="suggestions"></p>
<script>
function showSuggestions() {
var eyeColor = document.getElementById("eyeColor").value;
var priceRange = document.getElementById("priceRange").value;
var suggestions = '';
switch (eyeColor) {
case 'dark-brown':
suggestions = getSuggestionsForDarkBrown(priceRange);
break;
case 'medium-brown':
suggestions = getSuggestionsForMediumBrown(priceRange);
break;
case 'light-brown':
suggestions = getSuggestionsForLightBrown(priceRange);
break;
case 'brown':
suggestions = getSuggestionsForBrown(priceRange);
break;
case 'blue':
suggestions = getSuggestionsForBlue(priceRange);
break;
case 'green':
suggestions = getSuggestionsForGreen(priceRange);
break;
case 'hazel':
suggestions = getSuggestionsForHazel(priceRange);
break;
default:
suggestions = '目の色を選択してください。';
}
document.getElementById("suggestions").innerHTML = suggestions;
}
function getSuggestionsForDarkBrown(priceRange) {
switch (priceRange) {
case 'under-1000':
return 'おすすめの商品: <br>- "キャンメイク ジュエリーシャドウベール #01" (900円) <br>- "セザンヌ トーンアップアイシャドウ #02" (780円) <br>- "ケイト シャドーカスタマイズ BR-1" (980円)';
case '1000-1500':
return 'おすすめの商品: <br>- "キャンメイク パーフェクトスタイリストアイズ #14" (1200円) <br>- "セザンヌ グロスアップアイシャドウ #03" (1100円) <br>- "マジョリカマジョルカ シャドーカスタマイズ BE286" (1250円)';
case '1500-2000':
return 'おすすめの商品: <br>- "ケイト クラッシュダイヤモンドアイズ PK-1" (1800円) <br>- "マジョリカマジョルカ ヌードメイクジェム" (1700円) <br>- "メイベリン ヌードパレット ブラッシュドヌード" (1500円)';
case '2000-2500':
return 'おすすめの商品: <br>- "ケイト デザイニングブラウンアイズ GN-1" (2200円) <br>- "マジョリカマジョルカ シャドーカスタマイズ OR481" (2300円) <br>- "メイベリン シティミニパレット ソーシャルライト" (2400円)';
case 'over-2500':
return 'おすすめの商品: <br>- "ルナソル アイカラーレーション EX16" (3000円) <br>- "シャネル レ キャトル オンブル #268" (3400円) <br>- "ディオール サンク クルール クチュール 079" (3500円)';
default:
return '価格帯を選択してください。';
}
}
// 他の関数も同様に変更します
function getSuggestionsForMediumBrown(priceRange) {
switch (priceRange) {
case 'under-1000':
return 'おすすめの商品: <br>- "キャンメイク ジュエリーシャドウベール #03" (850円) <br>- "セザンヌ トーンアップアイシャドウ #06" (800円) <br>- "ケイト シャドーカスタマイズ BR-2" (900円)';
case '1000-1500':
return 'おすすめの商品: <br>- "キャンメイク パーフェクトスタイリストアイズ #17" (1300円) <br>- "セザンヌ グロスアップアイシャドウ #05" (1200円) <br>- "マジョリカマジョルカ シャドーカスタマイズ GR162" (1400円)';
case '1500-2000':
return 'おすすめの商品: <br>- "ケイト ヴィンテージモードアイズ BR-2" (1900円) <br>- "マジョリカマジョルカ シャドーカスタマイズ OR481" (1800円) <br>- "メイベリン ヌードパレット トープヌード" (1500円)';
case '2000-2500':
return 'おすすめの商品: <br>- "ケイト マルチカラーアイシャドウ BR-1" (2400円) <br>- "マジョリカマジョルカ ヌードメイクジェム" (2300円) <br>- "メイベリン シティミニパレット サンセットブロンズ" (2200円)';
case 'over-2500':
return 'おすすめの商品: <br>- "ルナソル ベルベットアイズ EX02" (3100円) <br>- "ディオール バックステージ アイパレット 002" (3200円) <br>- "シャネル レ キャトル オンブル #226" (3500円)';
default:
return '価格帯を選択してください。';
}
}
// 他の色の関数も同様に3つの商品を提案する内容に変更します...
</script>
</body>
</html>
-
showSuggestions()関数:
ユーザーが選んだ目の色と価格帯の選択肢を取得します。
選択された目の色に基づいて、それぞれの色に対応する関数を呼び出しておすすめ商品を取得します。
取得したおすすめの商品をHTML要素（<p id="suggestions">）に挿入します。 -
getSuggestionsForDarkBrown(priceRange)関数:
ユーザーが「ダークブラウン」の目の色を選んだ場合のおすすめ商品を、価格帯ごとに返す関数です。各価格帯に対応する商品リストを返します。
他の目の色（medium-brown, light-brown, brown, blue, green, hazel）に対しても同様の関数が定義されており、それぞれに対応する商品リストを返します。
このページは、ユーザーの選択に基づいてJavaScriptを使用して動的にコンテンツを更新し、
選択した目の色と価格帯に合ったアイシャドウのおすすめを表示します。
主要な機能
- 目の色と価格帯の選択: ユーザーがドロップダウンメニューから目の色と価格帯を選ぶと、アイシャドウのおすすめが表示されます。
- 動的な提案表示: 選択された条件に基づいたおすすめ商品を表示します。
せっかくの機会ですので冒頭にも書いた通りアプリだけではなくQiitaの記事もChatGPTに書いてもらいました。
これが意外と難しく、
このコードでWebアプリつくったから、マークダウン記法で説明して
というのは簡単なのですが間にこういう失敗をした、とか途中経過はこうなった、という説明を画像も組み込んでしてほしかったのですが、うまくプロンプトに書き込めませんでした。
しかもこの味気無さ。
指示するので終わりではなく返ってきた内容を細かくひも解くことも重要
なので時間はかかりましたが書いてもらった部分と加えて自分の言葉での解説もしてみました！
9月1日追記
修正①
完成系に載せていたアプリに不備が見つかりました。
ダークブラウンの目の色にしか反応せず表示される商品が変わりませんでした。
全然気づかなかった。。。
皆様申し訳ございません。そしてご指摘ありがとうございます。
See the Pen プロトタイプ３⃣ by Natsuki.K (@OomammaloO) on CodePen.
（前の完成だと思ってたやつ。。。）
修正したものを完成形のところにに新たに載せております！
修正②
ChatGPTに書いてもらった解説にHTML以外の記載がありましたので削除しました。
私もよくわからないままHTMLのところに張ったのになあ。と思っていたので
普通に間違いでした。失礼いたしました。
実はもう1個作った
実は、もう1つ作りたかったものがあって、今回のWebアプリよりも前に構想してたものです。
時間を割いたものの難しく考えすぎて作り切れず今回は泣く泣くWebアプリのみ紹介しました。
ですが再度時間をいただきましたので今まで勉強した知識を活用して再挑戦してみました。
かなり単純なものではありますが別記事にしましたので是非に。。。
まだまだ改良の余地はありますが自由度が上がりました。
ずっとチャットボット形式で手助けしてくれるものが欲しかったので一歩近づいた、という感じです。
時間さえあればもっと改良したいし今回のWebアプリと相互で使用できるようにしてみたいです。