【PR】商品情報と写真だけ渡して、1ページの告知サイトを作ってもらった｜Kimi K3｜ノーコード制作

※この記事は、PR記事です。

告知したいものが手元にあって、1ページだけのサイトを作りたい。

そう思ったときに決めることが、意外と多いです。見出しの言葉、載せる順番、色、スマートフォンでの見え方、押してほしいボタンの置き場所。商品の話をしたいのに、その手前に道具の話が並びます。

今回は、その1ページを丸ごとKimi K3にお願いしました。渡したのは、商品情報を書いたテキストが1枚と、商品写真が1枚です。

返ってきたのが、このページです。

ページの構成も、見出しの文章も、配色も、HTMLとCSSも、Kimi K3が決めています。私がサイトのコードへ手を入れたところは、1か所もありません。

架空の商品なので、実在のお店ではありません。作り方のほうは、そのまま自分の商品やイベントへ置き換えられます。

Kimiを触ったのは、今回が初めてでした。

🌙 そもそもKimiって、どこのAI？

Kimiは、Moonshot AIという会社が提供しているAIサービスです。

入口が2つあります。ひとつは一般向けのKimi。チャットのほかに、調査、ウェブサイト、スライド、文書、シート、Agentなどが案内されています。もうひとつがAPI Platformで、こちらは開発者向けに、使った分だけ支払う形でモデルを直接呼び出せます。

今回いただいた利用環境は、後者のAPI Platform側のものです。一般向けKimiの会員機能とは別枠なので、そこは分けて見ています。

その利用環境を反映させるところで、さっそく手が止まりました。引き換えのボタンが見つからず、「どこー」と聞いています。右上にありました。

Kimi K3は、そのAPIから`kimi-k3`という名前で呼び出せるモデルです。公式のGitHub、技術レポート、Hugging Face、APIドキュメントで、公開と提供を確認できます。K3が公開されたことは、ReutersやAPでも報じられました。

使う前に、確かめるところから始めています。見たのは、この6つです。

• 運営している会社と公式サイト

• モデルが公開されていること

• APIが実際に提供されていること

• 技術資料があること

• 第三者の報道があること

• 利用規約とプライバシーポリシーの記載

標準の規約では、入力と出力がサービスの提供や改善などに使われ得るとされています。プライバシーポリシーにも、入力を含む情報の保管についての記載があります。

ここまで見て、公開情報と、自分で作った架空のデータなら試せそうだと判断しました。個人情報や取引先の資料は持ち込まない、という線を先に引いています。あとは、手を動かすだけです。

☕ 架空の「秋限定どんぐりラテ」で試す

今回の題材は、「喫茶みどりの小径」という架空のお店の「秋限定どんぐりラテ」です。価格も販売期間も住所も、この記事のために作りました。

商品写真も、記事用に自分で用意しました。Kimiへ渡す入力の側の1枚です。

渡したのは、この2つだけです。ページの構成も、文章も、配色も、実装方法も、K3に任せました。

役割も先に分けています。サイトの構成・文章・デザイン・HTML・CSSはKimi K3。私の側で使っているOpenAI Codexは、その手前と後ろを持ちました。公式情報の調べもの、架空データの用意、APIへの受け渡し、安全の確認、時間の記録、できあがった画面の確認です。サイトのコードは、最初から最後までK3が書いています。

途中で、一度だけ回り道をしました。

公式には、Codexという開発ツールへK3を直接つなぐ設定方法が案内されています。今回もその手順で接続して、モデルまでは無事に届きました。そこから先は、私の環境でCodexデスクトップから起動した子プロセスが読み取り専用で、ファイルの書き出しまでは進んでいません。今回の実行環境で起きたことなので、そのまま別の入口へ移りました。

選んだのは、K3のAPIを直接呼ぶ方法です。この場合、モデルは自分でファイルを保存しないので、「作ったファイルをJSONで返してください」という受け渡し用の指示だけを足しました。返ってきた`index.html`と`style.css`は、保存先の安全を確かめたうえで、中身をそのまま保存しています。

📝 最初に決めるのは、7項目だけ

サイトを頼む前に決めたのは、7つです。

• 紹介するもの

• 届けたい相手

• 相手の困りごと

• 提供できる価値

• 価格・日時などの基本情報

• よくある質問

• 読者にしてほしいこと

どんぐりラテなら、「680円（税込）」「2026年9月21日から11月30日まで」「提供は11:00から18:00」「オーツミルクへの変更は＋80円」「どんぐりそのものは原材料に使っていない」あたりです。よくある質問も、アレルギーや持ち帰りなど5つ用意しました。

決めごとは、ひとつだけ。決まっていないことは、決まっていないまま残す。足りないところは、AIではなく自分で埋めます。

同じ形を空欄にすると、こうなります。

【1】紹介するもの
- 名前：
- 一言でいうと：

【2】届けたい相手
- 主な相手：
- その人が置かれている状況：

【3】相手の困りごと
- 困っていること：
- いまの方法で不便なこと：

【4】提供できる価値
- できること：
- 他と違うところ：
- 書いてはいけない効果・断定：

【5】基本情報
- 価格：
- 日時・期間：
- 場所・提供方法：
- オプション：
- 数量・受付条件：

【6】よくある質問
- Q1：／A1：
- Q2：／A2：
- Q3：／A3：

【7】読者にしてほしいこと
- いちばんしてほしいこと：
- その移動先：
- 次にしてほしいこと：

【使ってよい素材】
- 画像：
- ロゴ：
- 公開済みURL：

【補ってはいけない情報】
- 実績／口コミ／効果／人物・連絡先：

※決まっていない項目は空欄にせず、「未定・公開ページには表示しない」と書く

📨 一度目の依頼と、返ってきたサイト

送った依頼文は、これだけです。

このフォルダにあるbrief.mdとproduct-image.pngを使い、ローカルで確認できる1ページ告知サイトを完成させてください。公開・外部送信は行わないでください。

115.80秒後に、`index.html`と`style.css`が返ってきました。

秋の色でまとまった1ページでした。上から順に、商品写真を大きく置いた冒頭、商品説明のカードが3枚、価格と販売期間と提供時間の表、アレルギーの案内、店舗情報、よくある質問。「価格・期間を見る」ボタンは価格表へ移動し、質問は押すと開きます。

架空の店舗であることも、ページのいちばん上といちばん下に書かれていました。ここは頼んでいないところです。

人が決めるところも、2つ見つかりました。

ひとつは、店舗情報の表にある「電話番号・SNS 要確認」という行です。渡した情報に電話番号もSNSもなかったので、作らずに残してくれています。判断としては正しくて、あとは公開ページに載せるかどうかを決めるだけでした。

もうひとつは、日本語の中に英語が混ざっていたところ。takeout、変更option、oat milk、decaf、nut allergyの5か所です。

手を入れたいと思ったのは、この2つだけでした。

🔧 見えた分だけを、そのまま返す

修正を頼むときは、直し方を指定しないようにしました。色やコードの書き方まで先回りせず、画面で起きていることと、どうなっていてほしいかだけを書いています。

初回画面を確認すると、日本語本文の中に takeout、変更option、oat milk、decaf、nut allergy が混在し、読み手によっては不自然です。また、店舗情報に「電話番号・SNS 要確認」という未確定項目がそのまま表示されています。briefの事実を変えず、一般の日本語読者が自然に読め、未確定情報を公開ページへ残さない状態に改善してください。

105.23秒で戻ってきたページでは、takeoutがお持ち帰りに、変更optionが変更オプションに、oat milkがオーツミルク、decafがカフェインレス、nut allergyがナッツアレルギーへ変わっていました。「電話番号・SNS 要確認」の行も、きれいに外れています。

変わったのは`index.html`だけで、`style.css`は1バイトも動いていません。価格も販売期間も提供時間も、渡したとおりのままでした。

修正は、この1回で足りました。3回まで返すつもりで用意していた枠が、2回分そのまま残っています。

🔍 完成したサイトを確認する

画面幅を変えても、収まりは変わりませんでした。スマートフォン相当の360px、タブレット相当の768px、パソコン相当の1440px。どの幅でも中身が画面の内側にきちんと収まり、文字も欠けずに読めます。

「価格・期間を見る」を押すと価格表へ移動し、質問は開閉します。キーボードだけで操作したときも、いま選ばれている場所が枠で分かりました。写真には説明文が入っていて、外部への通信は0件。エラーの記録もありません。

上から下まで、通して眺めます。いちばん上に架空であることを断る帯があり、その下に窓辺のラテの写真。商品名とリード文に続けて、680円が大きく置かれています。そこから価格と販売期間の表、アレルギーの囲み、押すと開く5つの質問へ。渡した7項目は、渡した順番のままではなく、ページとして読める並びに変わっていました。

口から出たのは、一言でした。

💰 時間と費用と、人がやったこと

初回生成と修正1回を合わせて、APIが動いていた時間は221.03秒でした。読み書きした量は、合計21,904トークンです。

このあいだ、OpenAI Codex側からKimiの作ったサイトのコードへ手を入れた回数は、0件でした。

人の手が入ったのは、この5つです。

• 架空の商品情報を書く

• 商品写真を用意する

• APIとファイルを受け渡す仕組みを作る

• 保存先の安全を確かめる

• 画面を見て、起きていることを言葉にする

最後のひとつが、いちばん効いていました。「英語が混ざっている」「まだ決まっていない行が出ている」を見つけたのは、人のほうです。そちらに何分かかったかは、測っていません。

公式の単価は、2026年9月12日時点で、入力が100万トークンあたり3.00ドル（同じ内容を再利用できたときは0.30ドル）、出力が15.00ドルと案内されています。トークン数と突き合わせれば、おおよその見当はつきます。税やアカウントの条件は別に案内があるので、正確なところは公式の価格ページが確実です。

今回いちばん実務に近かったのは、日本語の表記と、まだ決まっていない情報は、公開前に人が見るというところでした。この1回を挟めば、残りはずいぶん任せられそうです。

🧰 自分の告知ページを作るための持ち帰りセット

手順は3つです。

1. 入力シートを自分の内容で埋めて、公開してよい画像を1枚用意する

2. 初回の依頼文を送る

3. 返ってきた画面を見て、起きていることをそのまま返す

公開する前に見ておくところも、まとめてあります。

【事実】
□ 名前、価格、期間、時間、場所、オプションが正しい
□ 入力していない実績、人気、口コミ、人物が追加されていない
□ 健康、安全、収益、効果を保証していない
□ 「要確認」やダミーの文字が残っていない

【権利・プライバシー】
□ 画像、ロゴ、フォント、文章を公開できる
□ 個人情報、取引先情報、非公開資料が入っていない
□ APIキーなどがコードや画面へ出ていない
□ 架空の情報を使った場合、実在すると誤解されない

【使いやすさ】
□ 360px、768px、1440pxで横スクロールと文字切れがない
□ ボタンとリンクが正しい場所へ移動する
□ キーボードだけで操作でき、選ばれている場所が分かる
□ 画像に内容を表す説明文がある
□ 見出しの順序が自然で、色だけに意味を頼っていない

【公開・計測】
□ 申し込み先や購入先を実機で確認した
□ アクセス解析や外部スクリプトの有無を確認した
□ 用途に必要な表示を人間が確認した
□ AIが作ったことだけを理由に、安全・正確と判断していない

APIまでは少し遠い、という場合は、一般向けのKimiにWebsitesという入口も案内されています。今回試したのはAPI経由なので、そちらの手応えはまだ持っていません。入口が2つある、というところまでです。

🔌 私はどうやってK3へお願いしたのか

APIは、画面上でKimiに話しかける代わりに、別のソフトからKimiへ仕事を渡すための受付口です。今回、その受付まで商品情報と画像を運んだのがOpenAI Codexでした。

役割を分けると、私が担当したのは、載せたい情報と画像の用意、APIキーの発行、完成画面の確認です。CodexはAPIへの受け渡し、返ってきたファイルの保存、処理時間とトークン数の計測を担当しました。サイトの構成・文章・デザイン・HTML・CSSを作ったのはKimi K3です。

ここで正直に書くと、私はPythonコードを自分で書いて実行していません。私がやったのは、Codexに「Kimi K3のAPIを使って、商品情報と画像からサイトを作りたい」とお願いしたことです。つまり私は、Pythonをすらすら書いた人ではなく、Codexにお願いした人です。サイト制作の部分では、自分でコードを書かずに完成まで進められました。

出てくる言葉も、先に整理します。

• `APIキー`：KimiのAPIを利用するために、自分のアカウントで発行する秘密の鍵

• `Python`：商品情報と画像をK3へ送り、返事をファイルとして保存するために使った道具

• `SDK`：PythonからKimiのAPIへ接続しやすくするための部品

• `index.html`：ブラウザで開く、サイト本体のファイル

• `style.css`：色や文字、余白など、サイトの見た目を決めるファイル

方法A．Codexに接続作業を任せる

Codexのような開発支援AIを使っている場合は、APIへ送るための接続作業をまとめて頼めます。ファイル名や保存場所が分からない状態からでも、たとえば次のように伝えられます。

方法B．自分で接続する

自分で同じ接続を動かす場合は、次の4段階になります。ここではWindowsとPython 3.9以上を使います。サイトのHTMLやCSSを自分で書く手順ではなく、K3へ材料を渡し、返ってきた2ファイルを保存するための手順です。

B-1．APIキーを作る

Kimi API Platformへログインし、左側の`API Keys`から`Create API Key`を開きます。名前は自分が用途を判別できるものにして、使うProjectを選びます。

作成後に表示されるAPIキーは、あとから同じ値を確認できません。安全な場所へ保存し、記事、画面写真、公開するHTMLには載せないようにします。ここでキーまで見せると、チュートリアルより先に反省会が始まります。この画像にも値は入れていません。

公式のK3クイックスタートでは、K3の利用開始には最低1ドルのチャージが必要と案内されています。チャージ額によって利用上限も変わるため、自分のアカウントに表示される条件を確認してください。今回の検証は、提供いただいたAPI利用環境で行っています。

B-2．Pythonと公式SDKを準備する

公式クイックスタートでは、Python 3.9以上とOpenAI SDKを使う方法が案内されています。APIの接続先をKimiへ変えることで、同じSDKから`kimi-k3`を呼び出せます。

PowerShell（Windowsで命令を入力する画面）を開き、SDKを入れます。

python -m pip install --upgrade "openai>=1.0"

続けて、そのPowerShellを開いている間だけ使う環境変数へAPIキーを入れます。引用符の中は、自分のキーへ置き換えます。

$env:MOONSHOT_API_KEY = "ここに自分のAPIキー"

B-3．3つのファイルを同じフォルダへ置く

空のフォルダを1つ作り、次の3つを入れます。

• `brief.md`：先ほどの7項目を埋めた文章を保存したメモ

• `product-image.png`：サイトへ載せる、公開してよい商品画像1枚

• `make_site.py`：下にあるPythonコードをそのまま保存したファイル

`brief.md`の「brief」は、制作に必要な情報をまとめた指示書という意味です。商品名や価格などを書いた日本語のメモを、ここではこの名前で保存しています。商品画像も、コードから見つけられるように`product-image.png`という名前へそろえます。

kimi-site/
├─ brief.md
├─ product-image.png
└─ make_site.py

import base64, json, os
from pathlib import Path
from openai import OpenAI

brief = Path("brief.md").read_text(encoding="utf-8")
image = base64.b64encode(Path("product-image.png").read_bytes()).decode("ascii")

request_text = f"""次の商品情報と添付画像を使い、ローカルで確認できる
1ページ告知サイトを作ってください。入力にない事実は補わないでください。
画像は product-image.png を相対パスで参照してください。

<brief>
{brief}
</brief>

index.html と style.css の全文を、次の形のJSONだけで返してください。
{{"files":[{{"path":"index.html","content":"..."}},
{{"path":"style.css","content":"..."}}]}}
"""

client = OpenAI(
    api_key=os.environ["MOONSHOT_API_KEY"],
    base_url="https://api.moonshot.ai/v1",
)

response = client.chat.completions.create(
    model="kimi-k3",
    response_format={"type": "json_object"},
    messages=[{
        "role": "user",
        "content": [
            {"type": "text", "text": request_text},
            {"type": "image_url", "image_url": {
                "url": f"data:image/png;base64,{image}"
            }},
        ],
    }],
)

package = json.loads(response.choices[0].message.content or "{}")
allowed = {"index.html", "style.css"}

for item in package.get("files", []):
    path = item.get("path", "")
    if path not in allowed:
        raise SystemExit(f"許可していない出力です: {path}")
    Path(path).write_text(item["content"], encoding="utf-8")

B-4．K3を呼び出す

3つのファイルがあるフォルダへ移動し、次を実行します。ここでAPI利用料が発生します。

python make_site.py

応答が正常なら、同じフォルダに`index.html`と`style.css`ができます。`index.html`をブラウザで開けば、まずは自分のパソコン内で確認できます。公開URLを作る作業は、このあとに使うホスティングサービス側で別に行います。

今回の実行では、この基本形へ保存先の確認、時間とトークンの計測、エラー時の停止を足しました。最初は架空の情報か、公開してよい情報だけで小さく試すと、画面を見ながら次の修正を決められます。

🌰 向いていそうな人と、人の手が効くところ

今回の範囲で言えば、材料は揃っているけれど、構成と文章とデザインとスマートフォン対応をまとめて形にする時間がない人と、相性がよさそうでした。ひとりで告知まで抱えている方や、担当がひとりしかいない現場を思い浮かべています。

人の手が効くところも、はっきりしています。日本語の表記をそろえる最終確認、まだ決まっていない項目の扱い、規約や法令の表示をどうするかという判断。個人情報や機密資料を入力に含めたいときも、渡す前に条件を確かめるところからです。

人の出番は、そのあたりに集まっていました。7項目を渡してから、スマートフォンで開けるページになるまでは、ほとんどK3が進めています。

🍂 おわりに

できあがった1ページは、いまも自分のパソコンの中で開きます。架空のお店なので、お客さんは私ひとりです。

販売期間は、2026年9月21日から11月30日まで。まだ誰も来ていない喫茶店が、フォルダの中で今日も10:00から19:00まで開いています。

ま、いっか。

✍️ あとがき

ここまで読んでくださり、ありがとうございます。

引き換えボタンを探して「どこー」と言っていたところから始まって、最後は画面幅を3つ並べて眺めていました。作ったのはほとんどKimi K3で、私がやったのは、材料を渡すことと、画面を見て気づいたことを言葉にすることだけでした。

Kimi AIの魅了が少しでも伝わっていると嬉しいです。

「フォロー」や「スキ」をしていただけると励みになります！
今後ともよろしくお願いいたします！

#KimiK3 #Kimi #MoonshotAI #生成AI #AI活用 #AIコーディング #バイブコーディング #ノーコード #API #Web制作 #Webデザイン #LP #レスポンシブデザイン #プロンプト #業務効率化 #仕事術 #ひとり仕事 #個人事業主 #スモールビジネス #小さなお店 #商品紹介 #イベント告知 #販促 #ツールレビュー #やってみた #PR記事