inflearn logo
知識共有
inflearn logo

【無料特別講座】コーディングなしでAIと作る自分のコンテンツアーカイブサイト――紫色のAIっぽさを消すデザインルール・出典アコーディオン・KakaoTalkプレビューカードを14分で実践

ブログ・Instagram・Notionに散らばった自分のコンテンツを一か所に集めようとするとき、コーディングなしでAIにWebサイトを作らせると、なぜ同じような紫のグラデーション・ガラス効果・絵文字の多用(AIスロップ)になってしまうのかを解説。実際に運用中の静的サイト(ainewground.com · gptssam.com)のコードをもとに、DESIGN_RULES.mdというデザインの憲法、単一JSONによる静的ビルドと✔/△で出典を分けるアコーディオン、0秒で即時解放するGuideGateとメールアドレスの入力ミス補正、KakaoTalk用1200×630のプレビューカード、3段階のデプロイ検証まで、14分で完成させます。

3名 が受講中です。

難易度 入門

受講期間 無制限

AI
AI
prompt engineering
prompt engineering
claude
claude
AI
AI
prompt engineering
prompt engineering
claude
claude

この講座で身につくこと

  • コードを1行も書く前に、DESIGN_RULES.mdで紫のグラデーション・ガラス効果・絵文字の多用を禁止し、4色のトークンと韓国語の改行(keep-all)を固定する方法

  • 記事が数十本に増えても番号がずれない単一JSONの静的ビルド構造と、一次確認済みの事実(✔)・推論(△)を分けるHTML5出典アコーディオンの実装方法

  • 有料サーバーなしで上部35%を無料公開し、メールドメインの入力ミス(gamil.com・navr.comなど)を検出して、0秒で本文を開くGuideGateの設計方法

  • カカオトークで共有しても崩れない1200×630のOpen Graph(OG)カードの絶対パス設定、最新エイリアス(og-card-latest.png)、デプロイ前の3段階検証ルーチン

GPT先生の無料特別講義/本編6本/5ページの実践キットPDF+無料Web実習ツール(W1)

コーディングなしでAIにWebサイトを作ってもらうと、
なぜどれも同じ紫のグラデーションとリンク切れになってしまうのでしょうか?

ブログ、Instagram、Notionに散らばった自分の記事やガイドを、自分のドメインのアーカイブサイトにまとめたい個人クリエイター、講師、専門家向けのAI活用特別講座です。コーディングAI(Claude、ChatGPT、Geminiなど)に漠然とサイトを作ってと頼むと、目に痛い紫色のネオン風ダークモード(AIスロップ)や不自然な韓国語の改行、動作しない偽ボタンが出てきます。実際に運用中の静的サイト(ainewground.comおよびgptssam.com、2026年11月5日時点のコード)をそのまま解剖し、デザインの憲法の宣言から、出典を分けるアコーディオン、0秒で即時解放する購読ゲート、KakaoTalk用1200x630プレビューカード、デプロイ前の自動検証まで、14分で完成させます。

デザイン憲法を固定

コーディング前にDESIGN_RULES.md一枚で紫色のネオングラデーションを根本から排除し、6トークンのクリームパレットと韓国語単語の改行(keep-all)を固定する

出典アコーディオンとゲート

単一JSONの静的ビルド + 一次確認の原文(✔)と二次参考資料(△)を分けたアコーディオン + ドメインの誤字6種を自動修正し、0msで即時解除(GuideGate)

カカオトークカードとデプロイ監査

各記事専用のタイトルが入ったKakaoTalk 1200x630 Open Graph(OG)カードの自動合成 + /latest 302リダイレクト(2500msフォールバック) + デプロイ前の12項目監査

自分のコンテンツサイトを作ろうとして、こうした壁に一度でもぶつかったことがある方は、ぜひご確認ください。

AIにすっきりしたサイトを作ってほしいと頼んだのに、どうして何度も紫色のネオン背景やガラスカード、ロケットの絵文字ばかり出てくるのでしょうか?

記事が15本、80本と増えるにつれて、HTMLファイルを手作業でコピーしていたら、メニューや前の記事へのリンクがすべて壊れてしまいました。

無料ガイドPDFを配布して読者のメールアドレスを集めたいのですが、有料のWebサイトビルダーや重い会員データベースサーバーを毎月契約しなければなりませんか?

カカオトークのグループチャットに記事のURLを共有したら、プレビュー画像が空欄になったり、古いタイトルが更新されなかったりします。

四つとも、コーディングスキルが足りないからではなく、AIに最初に渡すべきデザインルールのファイルや静的ビルドの構造、OGメタタグの基準を提示していなかったことが原因です。第1講から第6講まで、実際に運用中のサイトのコードをそのまま使って、わかりやすく解説します。

完成品:実際に運用中のエディトリアル静的アーカイブサイトを支える3つの重要な構造構造

理論用のサンプルではなく、講師のGPTssam先生が実際に数十本のブリーフィング記事と15本の実践ガイドを公開・運営している静的サイト(ainewground.comおよびgptssam.com、2026年11月5日時点)の実際の設定ファイルとスクリプトを1:1で照合しました。

1段階目のデザイン憲法:紫色のAIスロップを排除し、6トークンでエディトリアル組版を実現する

보라색 네온 그라데이션 AI 슬롭 화면과 DESIGN_RULES.md 6토큰 크림 팔레트 및 한글 word-break keep-all 에디토리얼 조판 비교 화면

基本方針(DESIGN_RULES.mdおよびstyle.cssの6トークン):AIに抽象的な形容詞でデザインを指示すると、学習データの平均値である紫色のネオン・ダークモードになります。コードを1行も書く前に、プロジェクトのルートに[DESIGN_RULES.md]を置き、紫色のグラデーション、ガラス効果(blur)、装飾用の絵文字を禁止したうえで、クリーム色の紙の背景(#fffae7)、墨色の本文(#2f2d2d)、アクセントカラーの赤(#d02e2e)など6つのトークンと、韓国語の単語途中での改行を防ぐ設定(word-break: keep-all)を固定します。

第2段階 コンテンツの信頼性と購読転換:単一JSONビルド、出典分離アコーディオン(✔/△)、0ms即時解放ゲート

단일 JSON 정적 빌드 파이프라인과 1차 확인 원문 및 2차 참고 자료 분리 아코디언, 상단 35퍼센트 무료 공개 및 0밀리초 즉시 해금 GuideGate 설계 화면

単一のJSON(guides.json)による静的ビルドと✔/△の出典別アコーディオン:記事が増えてもHTMLを手動で複製せず、単一のJSON配列からbuild.pyで全ページ、番号、RSS、サイトマップを一括生成します。本文の下部には標準的なHTML5の<details>アコーディオンを設置し、公式法令や標準文書である✔一次確認済みの原文と、解説および参考資料である△二次参考資料を明確に分けて表示します。

0msの楽観的な即時アンロック(GuideGate)と韓国ユーザーによくあるメールアドレスの誤入力6種を自動修正:本文の上部35%は検索エンジンと初めて訪れるユーザー向けに無料で公開し、メールアドレスを入力すると、サーバーの応答を待たずにCookie(365日)とlocalStorageを使って0msで即時アンロックします。同時に、韓国のユーザーが間違えやすいgamil.com、navr.com、hanmial.net、daum.entなど6種類の誤入力を、送信直前に自動修正します。

3段階のメッセンジャー配信とデプロイ検証:KakaoTalk 1200x630 OGカード、/latest 302リダイレクト、verify_site.pyによる自動監査

카카오톡 1200x630 오픈그래프 미리보기 카드 자동 합성과 슬래시 latest 2500밀리초 폴백 리다이렉트 및 verify_site.py 배포 전 6대 자동 감사 화면

カカオトークの1200x630 OGカードと/latestの単一リンク、verify_site.py:各記事のタイトルと要約を埋め込んだ1200x630 PNGを自動合成し、https://から始まる絶対パスにリンクします。Instagramやオープンチャットのプロフィールには/latestのURLを1つだけ掲載し、最新の記事へ自動で302リダイレクトします(外部の応答が遅い場合は2500msでタイムアウト後、/new/にフォールバック)。デプロイ直前にはverify_site.pyを実行し、壊れた内部リンク、空のアンカー(href="#")、OG画像の相対パス、誇張表現として禁止されている語句を1秒で一括チェックします。

ボトルネック 1 / 紫色のAIスロップとハングルの文字化け

DESIGN_RULES.md 6トークン固定

ネオングラデーションとガラス効果を禁止し、紙のクリーム色(#fffae7)、墨色(#2f2d2d)、アクセントカラーの赤(#d02e2e)とword-break: keep-allを最初に宣言します。

ボトルネック2/出典への不信と購読離れ

✔/△ 出典の分離と0ms解放

一次確認済みの原文(✔)と二次参考資料(△)を折りたたみ式アコーディオンで分け、冒頭の35%を無料公開した後、メールアドレスの誤入力修正と0ms即時解放を組み合わせます。

ボトルネック3/KakaoTalkの空欄とリンクのトラブル

1200x630の絶対パスと自動監査

投稿ごとの1200x630 OG PNGの絶対パスとキャッシュ更新(?t=バージョン)、/latestの2500msフォールバック、デプロイ前のverify_site.pyによる6項目の監査を自動化します。

すぐにコピーして使える設定・コードテンプレートのサンプル

第1回講義資料PDFと無料Web実習ツール(W1)には、デザインルール、単一のJSONスキーマ、出典アコーディオン、GuideGate、/latestリダイレクトなど、5種類の実践テンプレート(T1~T5)が収録されています。そのうち2つを先行してご紹介します。

実践テンプレートの例:DESIGN_RULES.mdの宣言文(T1)と韓国語メールの誤字修正および0msでの解禁(T4)

テンプレートT1(DESIGN_RULES.md エディトリアル6トークンおよびスロップ禁止ルール)

1. 禁止事項:紫・青のネオングラデーション(linear-gradient)、backdrop-filterによるガラス効果、タイトル前の装飾用絵文字、href="#"の空アンカーボタンは一切使用しない。
2. 色は6トークンに固定:背景クリーム(#fffae7)、補助バンド(#f6eed2)、本文の墨色(#2f2d2d)、補助グレー(#57534e)、アクセントレッド(#d02e2e)、強調ティール(#0f766e)のみ使用する。
3. 韓国語の組版:すべての見出しと本文、表のセルにword-break: keep-all; overflow-wrap: break-word;をデフォルトで適用し、単語が途中で分割されないようにする。

テンプレート T4(GuideGateドメインのよくある誤入力6種類を自動修正し、0msで即時解放)

読者がメールアドレスを入力して送信をクリックすると、gamil.com、gmial.com、navr.com、nver.com、hanmial.net、daum.entなど6種類のよくある入力ミスを正規表現で即座に修正した後、サーバーの応答を待たずにdocument.cookie(max-age=31536000)とlocalStorageに解放状態を先に記録し、0msでガイド全体を表示して、Webhookの送信はfetch keepalive: trueでバックグラウンド処理する。

講義終了後に持ち帰る3つのこと

要点を凝縮した動画6本と3問の確認クイズ

DESIGN_RULES.mdの宣言、単一JSONの静的ビルドと出典を分けたアコーディオン、0msのGuideGate、KakaoTalk用1200x630 OGカード、公開前検証を凝縮した全6回のレッスン+自動解説付きクイズ

2. 授業資料 PDF 5ページ(c18_creator_media_site_kit.pdf)

6つの設計基準表、3者比較表、コピー&ペースト用テンプレート5種(T1~T5)、配布前の12項目監査チェックリスト、AIコーディングプロンプト3種(P1~P3)。第1回講義の右上にある【授業資料】からすぐにダウンロードできます。

3. 無料Web実習シミュレーター(W1)の常時活用

紫色のAIスロップと6トークンのエディトリアルをリアルタイムで切り替える機能、✔/△の出典アコーディオンとメールアドレスの誤字修正を体験できる機能、カカオトーク用1200x630プレビューカード生成ツールを、ログイン不要ですぐにお試しいただけます。

6つのレッスンで確認する順序

第1講

【完成品を先に】コーディングなしでAIにウェブサイトを任せるときに生じる5つの失敗原因を確認し、無料ウェブ実習ツール(W1)で6トークンのデザインルール、出典アコーディオン、カカオトーク共有カードの完成版を先に体験します。

第2講

【デザインルール】コードを書く前に、DESIGN_RULES.mdの1ページで紫のネオングラデーションとガラス効果を根本から排除し、クリーム色の6トークンパレットと日本語の改行ルール(word-break: keep-all)を固定します。

第3講

【出典アコーディオン】記事が84本に増えても番号がずれない単一JSON(guides.json)による静的ビルド構成と、一次確認用の原文(✔)と二次参考資料(△)を分けるHTML5アコーディオンを実装します。

第4回

【無料ガイド解放】有料サーバーなしで本文の上部35%を無料で閲覧できるようにし、韓国人がよく間違えるメールドメインの誤入力6種類を検出して、CookieとlocalStorageで0秒で本文を開くGuideGateを完成させます。

第5講

【カカオトーク共有カード】カカオトークで共有した際、投稿ごとに専用のタイポグラフィカードを表示する1200x630 OG PNGの絶対パス設定と、プロフィールの単一リンク「/latest」への302リダイレクト(2500msフォールバック)を構築します。

第6講

【デプロイ前の3段階検証】デプロイ直前に、壊れたリンクや空のアンカー、相対パスのOG画像、禁止ワードを1秒で検出するverify_site.pyによる自動監査と、3種類のプロンプト(P1~P3)の実行ルーチンで仕上げます。

プロンプトエンジニアリングとクリエイターの役割分担

プロンプトエンジニアリング:デザイン憲法と静的ビルド仕様をAIコーディングツールに委ねる

サイト制作前にClaudeなどのAIに渡す3段階のビルドプロンプト(P1〜P3)

人工知能(AI)コーディングツール(Claude、ChatGPT、Gemini、Cursorなど)に漠然と「おしゃれなブログを作って」と指示すると、管理不能なスパゲッティコードができあがります。授業資料のPDFに収録されているプロンプトエンジニアリングテンプレート3種(P1〜P3)のように、DESIGN_RULES.mdの6トークンとkeep-all組版(P1)、単一のJSONスキーマと✔/△出典アコーディオンおよび0ms GuideGate(P2)、1200x630 OGカードの合成とverify_site.pyによる自動検証(P3)を明確な基準として指示すれば、コーディングの知識がなくても、一貫性のある静的アーカイブサイトを構築できます。

コンテンツの企画と配信で人が直接対応すべきこと

AIビルドプロンプト(P1~P3)が支援すること

DESIGN_RULES.mdに基づくstyle.cssの6トークンとレスポンシブレイアウトのコード作成(P1)

単一のJSON(guides.json)静的ビルダー(build.py)と出典アコーディオン、GuideGateの実装(P2)
投稿ごとの1200x630 OG PNG自動合成スクリプトとverify_site.py検証ツールの作成(P3)

制作者が直接決定し、確認すること

記事本文の作成および一次公式原文(✔)と二次参考資料(△)の出典リンク照合確認
購読フォームのWebhook接続先の設定および個人情報収集に関する案内文の最終確認
デプロイ直前にモバイルの375px画面での改行を確認し、KakaoTalkの「自分に送信」でOGカードを実証確認する

この講座ではないもの

重いフルスタックWebフレームワーク(React/Next.jsの応用)や有料決済PGとの連携、特定の閲覧数や広告収益を保証する講座ではありません。

実際に運用中の静的コンテンツアーカイブサイト(ainewground.com および gptssam.com、2026年11月5日時点のコード)の設計ルールと検証スクリプトに基づき、非開発者の制作者がAIに明確な基準を指示して、自分のドメインのサイトを作成・運用する方法を扱う実践的な教材です。

サンプルコードおよび設定画面内のアカウントメールアドレス、内部作業パス、Webhook識別値は、不透明な単色ボックスで隠しています。講義音声はAI音声(TTS)です。

次の講義

GPT先生をフォローしておくと、次回の実践AI活用特別講座のお知らせをすぐに受け取れます。

自分のサイトのデザイントークンやOGカードの設定に迷ったら、次のように確認しましょう。

授業資料PDFのプロンプト(P1~P3)には、実際の顧客メールやAPIキーは含めず、HTML/CSS/JSONの構造だけを入れて、まずAIにチェックしてもらいましょう。
さらに知りたいことやAIによるWeb制作のヒントは、質問掲示板やオープンチャットで一緒に共有します。

次のような方に
おすすめです

受講対象

  • ブログ・Instagram・Notionに散らばった自分の記事やガイドを、自分のドメインのアーカイブサイトにすっきりまとめたい個人クリエイター・講師・専門家

  • コーディングなしでAIを使ってウェブページを作ってみたものの、紫色のネオンが目立つダークモードや韓国語の不自然な改行、リンク切れのせいで公開をためらっていた方

  • 高額な有料ウェブビルダーのサブスクリプション料金を払わずに、無料ホスティングで読者向けのメール購読ゲートとKakaoTalk共有カードを自動化したい方

前提知識

  • HTML・CSSのコーディング経験がまったくなくても理解できるよう、実際に運用中の静的サイトの画面と設定テンプレート5種類(T1~T5)を使って説明します。

  • 準備物:授業資料PDFのAIプロンプト(P1~P3)を貼り付けるAIツール(Claude・ChatGPT・Geminiなど)および無料のWeb実習ツール(ainewground.com)

こんにちは
gptssamです。

261

受講生

9

受講レビュー

4.6

講座評価

14

講座

AIエージェントのワークフローとコンテンツ自動化システムを研究・構築するGPT先生です。

話題のグローバルAI技術とワークフローを自ら実装・検証したうえで、非開発者でも10分で自分のコンピューター上に同じものを再現できるよう、実行記録・プロンプト仕様・オープンソースのスターターキットをファイルごと公開し、教えています。再生回数や収益といった誇張された約束ではなく、実際に何が機能し、どのように検証したのかをデータとコードでお見せします。

[主な研究および講義分野]

  • AIエージェント & 第二の脳の構築:Claude Code · Google Antigravity · Karpathy LLM Wikiに基づく知識コンパイルおよび業務自動化

  • AI動画・コンテンツ制作システム:Google Flow(Veo) · TTS · エージェントを組み合わせたファクトチェックおよび自動レンダリングパイプライン

  • 整合性検証の自動化:台本・Wiki・データの壊れたリンクと事実関係を網羅的に検査するLintパイプライン

[公式チャンネルおよびオープンソース実習室]

もっと見る

受講レビュー

まだ十分な評価が集まっていない講座です。
ぜひ最初のレビューをお寄せください。

gptssamの他の講座

知識共有者の他の講座はこちら

似ている講座

同じ分野の他の講座を見てみましょう!

無料