ここまでのあなたは、AIに「考えごと」を委託してきました。この章から、次元が変わります——「作ること」の委託です。文書、Webページ、動くツール。作れる人は、世の中で常に少数派でした。その壁が、いま崩れています。この章の終わりに、あなたの名前で公開された成果物が、インターネット上に1つ存在します。それは第6章で収益への入口になる、あなたの最初の「実物」です。
🎬 第5章 冒頭動画
この節で分かること：構築の3レイヤーの全体像。自分がどこまで行くかの地図。
「作る」と一口に言っても、レベルがあります。このコースでは3つのレイヤーで整理します。
レイヤー1：文書・デザイン成果物——提案書、案内チラシの文面、画像、資料。今日から作れます。 レイヤー2：Webページ・簡易ツール——自分のホームページ、計算ツール、紹介ページ。コードが読めなくても、公開まで行けます。この章の主戦場です。 レイヤー3：アプリ・自動化——スマホアプリ、業務の自動化。ここは「地図を見せる」ところまで。挑戦は希望者の領域です。
大事な前提を一つ。構築の委託で、あなたに求められるのは技術ではありません。要件を言葉にする力と、出てきたものを確かめる力——つまり第2章の言語と第4章の検証眼、すでに持っているものです。プログラミングを学ぶのではなく、プログラミングが「できる相手」に正しく頼む。司令塔の仕事は、ここでも変わりません。
そしてこの章には、明確なゴールがあります。あなたの公開物を1つ、世に出すこと。眺めて終わりの章ではありません。作って、公開して、URLを持ち帰ってください。
%% title: 構築の3レイヤー
flowchart BT
L1["<b>レイヤー1</b><br/>文書・デザインの成果物<br/>─ 必要なもの：要件の言語化と検証眼"]
L2["<b>レイヤー2</b><br/>Webページ・動くツール<br/>🚩 本章のゴール：公開物1点<br/>─ 必要なもの：要件の言語化と検証眼"]
L3["<b>レイヤー3</b><br/>アプリ・自動化<br/>─ 必要なもの：要件の言語化と検証眼"]
L1 --> L2 --> L3
style L3 fill:#ffffff,stroke:#E8B04B,stroke-width:3px,color:#0A1124この節で分かること：「仕事の道具」から「独立した成果物」へ。作品として作る感覚。
第3章で資料は作りました。ここでの違いは、誰かに届けるための独立した成果物を作ることです。例えば：趣味の活動の案内文、フリマの商品説明、イベントの告知文、自己紹介ページの原稿。
やり方は第2章の技術で足ります。4要素で頼み、二段で作り、注文で育てる。一つだけ、成果物づくりならではの追加ルールを渡します。「誰が・どこで・何秒で読むか」を必ず指定する——「インスタで3秒で目に留まる告知文」と「じっくり読まれる案内ページ」では、正解の形がまるで違うからです。読者の解像度が、成果物の質を決めます。
実演14では、架空の「週末パン教室」の案内文とキャッチコピーを、読者指定の有無で作り比べます。ここは肩慣らしです。次の節から、いよいよWebに出ます。
この節で分かること：HTMLを知らなくても、Webページは「注文」で作れる。
Webページの実体は、HTMLというテキストファイルです。そして、AIはHTMLを書くのが得意中の得意です。つまり——あなたがページの「要件」を言えれば、ページは存在できる。
頼み方の型を渡します。
これで、AIはデザイン込みの1枚のHTMLを出してきます。実演15では、この注文から始めて、「色をもう少し落ち着いた青系に」「経歴の並びを新しい順に」と日本語の注文だけでページが変わっていく様子を見せます。コードは1行も読みません。読まなくていいのです——あなたの仕事は、表示された結果を見て判断すること。
ここで第0章の言葉が効いてきます。作る作業は委託する。どう見せたいか、何を載せるかの判断は、渡さない。ページの中身はあなたの人生から出てくるもので、そこだけはAIに書けません（自分コンテキストが、ここでも素材になります）。
この節で分かること：作ったページを、URLにする。無料で、今日中に。
ローカルで表示できたページを、世界がアクセスできるURLにします。使うのは無料の公開サービスです（実演16で実際の手順を最初から最後まで見せます）。本コースではNetlify Drop（無料アカウント）を使います。手順は実演16と、章末の配布物「公開手順メモ」を参照してください。原理だけ本文で押さえます：
Netlify の場合、アップロード直後のページは非公開（Private）の状態で作られます。画面の「Make public」を押して公開に切り替えると、誰でも開けるURLになります（実演16で見せます）。
かかる費用はゼロ。かかる時間は、慣れれば10分です。「Webサイトを持つ」ことが特別だった時代は、本当に終わりました。
公開の前に、公開物の3つの掟を確認してください。
この3つを通ったら、公開ボタンを押してください。あなたのURLが生まれる瞬間です。ワークの成果物は、このURLになります。
%% title: 構築から公開までの流れ
flowchart TB
A["要件を言葉に"] --> B["AIがHTML生成"]
B --> C["注文で調整"]
C --> D{"3つの掟<br/>チェック"}
D --> E["無料サービスで公開"]
E --> F(["あなたのURL誕生"])
F -.->|"第6章へ"| G["収益への入口"]
E ~~~ G
style D fill:#ffffff,stroke:#E8B04B,stroke-width:3px,color:#0A1124この節で分かること：「表示するだけ」から「動く」へ。ツールも同じ頼み方で作れる。
Webページが作れたなら、実は「動くツール」まであと一歩です。計算機、診断チェッカー、カウントダウン——ボタンを押すと何かが起きるものも、同じHTMLファイル1枚に収まります。頼み方も同じです。
「貯金目標の計算ツールを作ってください。目標金額と毎月の積立額を入力すると、達成までの月数が表示される。HTMLファイル1枚で。スマホでも見やすく」
実演17では、この一文からツールが生まれ、「利回りも入力できるように」と機能が追加されていく様子を見せます。注目してほしいのは、機能追加も日本語の注文で済むことです。
そしてここが、仕事に跳ね返るポイントです。「うちの業務のこの計算、いつもExcelで手作業だな」——そう思ったものは、ツール化の候補です。自分の現場の小さな不便を、自分で道具にして解決する。第6章で扱う「本業内価値化」の種は、たいていこの辺りに落ちています。
一つ注意。お金の計算を扱うツールを他人に使わせる場合は、計算の正しさを必ず検算し、「概算です」の注意書きを入れてください。作れる力には、作った物への責任がついてきます（第0章の3原則、ここでも現役です）。
この節で分かること：委託を極めた先の地平。アプリ、そして動画。地図だけ渡します。
最後に、この先の景色を見せます。
私はAIとの協働で、スマホアプリを作り、ストアで公開し、日々の業務の自動化を運用しています。それができた理由は、特別な才能ではありません。この章であなたがやったことと、原理がまったく同じだからです。要件を言葉にし、AIに作らせ、確かめ、注文で育てる——規模が大きくなっただけです。
規模が大きくなると、新しく必要になる考え方が3つあります。私が実践から学んだものを、概念だけ渡します。
実演18では、AIとの協働でアプリが組み上がっていく様子を観覧デモとして見せます。手を動かす必要はありません。「ここまで来られるのか」という地平線を、目に焼き付けてください。
挑戦したくなった人へ。必要な道具は増えますが、原理はこの章で全部渡しました。そして挑戦しない人へ——それでいいのです。レイヤー2まで来たあなたは、もう「作れる側」の人間です。
もう一つの地平線——動画。 作れるものの範囲は、文書・Webページ・ツールで終わりません。AIと組めば、短い紹介動画も、ゼロから作れます。カメラも、マイクも、撮影の場所もいりません。
作り方は5工程です。どの工程にも、AIに頼める部分があります。
使う場面は、たとえば次の3つです。
原理は、この章でやってきたことと同じです。要件を言葉にし、AIに作らせ、確かめ、注文で育てる。文書やWebページが「動画」に変わり、声と組み立ての工程が加わっただけです。
観覧デモ「AIで動画を作る」では、実演14と同じ「週末のパン教室」を題材に、30秒・3場面の紹介動画を、この5工程で頭から作って見せます。台本の生成から、動画ファイルができあがり、再生されるまで。あなたが再現する必要はありません。 知っておいてほしいのは、「作れるもの」の範囲が、動画まで広がっているということです。
たとえば、この講座の章冒頭動画も、この方法で作っています。
「作りましょう」と、この章の冒頭で言いました。ここまで来たあなたには、その言葉の重さが変わって聞こえるはずです。次の第6章では、その力をお金に変える道を設計します。
🎬 実演14「読者を決めて作る」
🎬 実演15「自分のWebページを作る」
🎬 実演16「世界に公開する」
🎬 実演17「動くツールを作る」
🎬 実演18「アプリ構築の世界（観覧デモ）」
🎬 観覧デモ「AIで動画を作る」
目的: 0→1の「1」の中核。修了要件ではないが、実践認定バッジの要件。
手順（所要2〜4時間・週末推奨）
気づきの問い: 公開ボタンを押す直前、何を感じましたか。その感情（誇らしさでも、怖さでも）が、第6章で扱う「世に出す人の心理」の入口です。
回答メモ
月額サポートにご加入の方は、講師に見てほしいワークを公式LINEへ送れます
私の自己紹介ページを作ってください。・名前: {ニックネーム} ・仕事: {職種} ・できること: {3つ} ・趣味: {2つ} ・連絡: {方針} ・雰囲気: {形容詞2つ} ・HTMLファイル1枚で完結。スマホでも見やすく{活動名}の紹介ページを作ってください。読者: {誰}。伝えたいこと: {3点}。参加・購入への導線: {何をしてほしいか}。雰囲気: {形容詞}。HTMLファイル1枚で完結。スマホ優先{計算内容}のツールを作ってください。入力: {項目}。出力: {結果}。HTMLファイル1枚。スマホでも見やすく。数字は3桁区切り。概算である旨の注意書きを小さく{テーマ}のセルフチェックツールを作ってください。質問{数}問にはい/いいえで答えると、タイプ別の結果とアドバイスが表示される。質問と結果文も提案して。HTMLファイル1枚。※医療・投資判断に踏み込む内容にしないこのページ（ファイル添付）を改善してください。直したい点: {点}。守ってほしい点: {点}。変更箇所を先に一覧で説明してから、修正版を出してください公開手順メモ（Netlify Drop）（実演16の要約。画面の表示名はサービスの更新で変わることがあります）
index.html にして、フォルダに1つだけ入れる（公開はフォルダ単位。トップページは index.html という名前にします）※公開の前に、5-4の「公開物の3つの掟」（個人情報・著作権・責任）を必ず確認してください。
5問・合格基準4問正解・再受験可。合格すると進捗に記録されます。