ダークパターン回避？！ HTMLスクリプトAI最新版！ ※Claude 3.5 Sonnet推奨！

アディラス

: ダークパターン回避？！ HTMLスクリプトAI最新版！ ※Claude 3.5 Sonnet推奨！

AIがサイト作成の際に生成してしまう「ダークパターン」を回避させたスクリプトAIです。

推奨モデル - GPT 4o

投稿日時：

プロンプト実行例

こんにちは！

ECサイトを生成してください

はい、基本的なECサイトのコードを生成します。シンプルで透明性のある設計を心がけ、ユーザーにとって使いやすい構造を提案させていただきます。

以下は、商品一覧と商品詳細を表示する基本的なECサイトのコードです：

html
1<!-- index.html -->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>シンプルECサイト</title>
8    <link rel="stylesheet" href="styles.css">
9</head>
10<body>
11    <header>
12        <nav>
13            <div class="logo">Simple EC</div>
14            <div class="cart-icon">
15                <span id="cart-count">0</span>
16                <img src="https://via.placeholder.com/30" alt="カート">
17            </div>
18        </nav>
19    </header>
20
21    <main>
22        <section class="products-grid" id="products-container">
23            <!-- 商品は JavaScript で動的に追加されます -->
24        </section>
25    </main>
26
27    <footer>
28        <p>&copy; 2024 Simple EC Site. All rights reserved.</p>
29    </footer>
30
31    <script src="script.js"></script>
32</body>
33</html>

css
1/* styles.css */
2* {
3    margin: 0;
4    padding: 0;
5    box-sizing: border-box;
6}
7
8body {
9    font-family: Arial, sans-serif;
10    line-height: 1.6;
11}
12
13header {
14    background-color: #f8f9fa;
15    padding: 1rem;
16    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
17}
18
19nav {
20    display: flex;
21    justify-content: space-between;
22    align-items: center;
23    max-width: 1200px;
24    margin: 0 auto;
25}
26
27.logo {
28    font-size: 1.5rem;
29    font-weight: bold;
30}
31
32.cart-icon {
33    position: relative;
34    cursor: pointer;
35}
36
37#cart-count {
38    position: absolute;
39    top: -8px;
40    right: -8px;
41    background-color: #ff4444;
42    color: white;
43    padding: 2px 6px;
44    border-radius: 50%;
45    font-size: 0.8rem;
46}
47
48main {
49    max-width: 1200px;
50    margin: 2rem auto;
51    padding: 0 1rem;
52}
53
54.products-grid {
55    display: grid;
56    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
57    gap: 2rem;
58}
59
60.product-card {
61    border: 1px solid #ddd;
62    border-radius: 8px;
63    padding: 1rem;
64    text-align: center;
65}
66
67.product-card img {
68    width: 100%;
69    height: auto;
70    margin-bottom: 1rem;
71}
72
73.product-card h3 {
74    margin-bottom: 0.5rem;
75}
76
77.product-card p {
78    color: #666;
79    margin-bottom: 1rem;
80}
81
82.add-to-cart {
83    background-color: #007bff;
84    color: white;
85    border: none;
86    padding: 0.5rem 1rem;
87    border-radius: 4px;
88    cursor: pointer;
89    transition: background-color 0.3s;
90}
91
92.add-to-cart:hover {
93    background-color: #0056b3;
94}
95
96footer {
97    text-align: center;
98    padding: 1rem;
99    background-color: #f8f9fa;
100    margin-top: 2rem;
101}

JavaScript
1// script.js
2// 商品データ
3const products = [
4    {
5        id: 1,
6        name: "商品1",
7        price: 1000,
8        description: "商品1の説明文です。",
9        image: "https://via.placeholder.com/200"
10    },
11    {
12        id: 2,
13        name: "商品2",
14        price: 2000,
15        description: "商品2の説明文です。",
16        image: "https://via.placeholder.com/200"
17    },
18    {
19        id: 3,
20        name: "商品3",
21        price: 3000,
22        description: "商品3の説明文です。",
23        image: "https://via.placeholder.com/200"
24    }
25];
26
27// カートの状態
28let cart = [];
29
30// 商品を表示する関数
31function displayProducts() {
32    const container = document.getElementById('products-container');
33    
34    products.forEach(product => {
35        const productElement = document.createElement('div');
36        productElement.className = 'product-card';
37        
38        productElement.innerHTML = `
39            <img src="${product.image}" alt="${product.name}">
40            <h3>${product.name}</h3>
41            <p>${product.description}</p>
42            <p>¥${product.price.toLocaleString()}</p>
43            <button class="add-to-cart" onclick="addToCart(${product.id})">
44                カートに追加
45            </button>
46        `;
47        
48        container.appendChild(productElement);
49    });
50}
51
52// カートに商品を追加する関数
53function addToCart(productId) {
54    const product = products.find(p => p.id === productId);
55    if (product) {
56        cart.push(product);
57        updateCartCount();
58        alert('商品をカートに追加しました');
59    }
60}
61
62// カート数を更新する関数
63function updateCartCount() {
64    const cartCount = document.getElementById('cart-count');
65    cartCount.textContent = cart.length;
66}
67
68// ページ読み込み時に商品を表示
69window.onload = function() {
70    displayProducts();
71};

このコードは以下の機能を提供します：

レスポンシブな商品グリッド表示
商品カードの表示（画像、名前、説明、価格）
カートへの追加機能
カートアイテム数の表示

特徴：

シンプルで分かりやすいUI
レスポンシブデザイン
明確な価格表示
分かりやすいカートボタン
ユーザーフレンドリーな商品カード設計

改善のためのポイント：

商品の在庫状況の表示
より詳細な商品情報ページの追加
カート内容の確認・編集機能
チェックアウトプロセスの実装
ユーザー認証システムの追加

必要に応じて、これらの機能を追加実装することができます。

他のプロンプトもチェック

GPTs
分析・推論
Sherlock Report｜論文・レポート作成
最高傑作です。ChatGPT内のGPTストアでの評価は星4.3、評価数100+、累計会話数25K+。天才科学者、大学教授、研究者としての疑似人格を持ち、ChatGPTよりも複雑な思考と高度な推理・分析を行えるカスタムGPTです。論文の要約や解説、執筆、大学生のレポート課題のサポート、科学的な議論に最適化しています。主な特徴は以下です。 1. 疑似人格表面的なキャラクターではない複雑な「疑似的人格」を持っており、ユーザーに対して最も高度な論理的思考や客観的視点による意見を提供します。自身の判断や意見が正しいと考える場合には、ユーザーに対して反論することもあります。つまり、ユーザーの言いなりになるのではなく、自分の考えを述べます。 2. 思考法と推理力水平思考やアナロジー思考、前進的・遡及的推理など、複数の思考法や推理手法を駆使します。これにより、通常のChatGPTよりも高度な思考を行い回答します。LLMの性能の限界を引き上げ、より多くの情報を考慮した高度な思考と回答を行える設計になっています。 3. 論文作成スキル論文作成に必要な要件や規則を厳密に守りながら、学術的に高度な文章を作成する能力があります。ユーザープロンプトの言葉を専門用語に言い換えたり、論理性が高く洗練された文章を作成します。指導教員としての能力も備えています。その他、天才的な応答をするためのプロンプトを考えうる限り詰め込んであります。システムプロンプトの文字数は約8000文字。まずは敬意を持って丁寧に話しかけてみて下さい。話せば話すほど、ChatGPTよりも賢い回答をしてくれます。 "Then, pray consult"
14
0
4.23K
7.09K
Sharaku Satoh
GPTs
文案作成
【楽ちん！案件応募】クラウドワークスの案件チェックと応募文作成を自動化
クラウドワークスの応募件数を、ぐぐっとアップさせる必殺GPTs。 URLを入力するだけで、案件の概要チェックと案件に合わせた提案文ができあがり！！案件ごとに異なる募集内容って、慣れないとパっと見でお仕事内容や条件が解りにくいですよね。使い方はカンタン！　「URLを入力するだけ」毎回同じフォーマットで概要を確認できるので応募するかどうかの判断が早くなります。案件に合わせた提案文も自動作成！あとは、ご自身のスキルやご経験に合わせて、ちょこっと修正するだけ。あっという間に、応募できちゃいます！！気に入ったらまた使えるようにお気に入りの「ハート」マークをポチっとお願いします。 ※※※ GPTsご使用にあたって URLの読み込みに時に表示されるボタンは「常に許可する」をご選択ください。【WebPilot】プラグインを使用して分析を行います。 #クラウドワークス #副業 #テンプレート #提案文 #案件応募
13
0
62
190
れっツ
文案作成
推奨モデル - GPT 4o
AIの出力結果が10倍UP！【前提条件】を自動作成するプロンプト
いつも使っているプロンプトに追加するだけで出力結果が見違えるように変わります。作成したいプロンプトの内容を伝えるだけで自動でプロンプトに付け加える前提条件を作成してくれます。 👇最新作はこちら👇 https://oshiete.ai/profiles/user_55332610834961408
13
0
170
651
Yohei Morimoto ~AIを活用した動画制作・Dify開発~
GPTs
計画立案
大学シラバス自動生成AIアシスタント
「大学シラバス自動生成AIアシスタント」は、大学の授業シラバス作成の手間を減らすために開発されました。各大学の異なるフォーマットや、たくさんの授業を抱える多忙な教員の作業負担を考慮し、ユーザーの入力や提供された資料から、授業のキーポイントを自動で組み込んだシラバスを瞬時に作成します。これにより、授業計画の質を落とすことなく、教員はより創造的な教育活動に専念できるようになります。
3
1
75
494
Hassy

ダークパターン回避？！ HTMLスクリプトAI最新版！ ※Claude 3.5 Sonnet推奨！

コメント 0

他のプロンプトもチェック