ToolShare Lab

ToolShare Lab / AIに任せる前の、最低限の土台

AIの出力を
読める・直せる・指示できるようになる

「ChatGPTやCursorに作らせればいい」——それは間違っていません。でも出てきたコードを読めないと、直せないし、次に何を指示すればいいかもわかりません。
AIでとにかく作りたい人も、これから独学で学ぶ人も、副業や受託でコードを納品する人も、最初に必要な土台は同じです。記事と「試すAIプロンプト」で、HTML→CSS→JS→TS→Reactの土台を最短で身につけます。

6週分 公開中のレッスン
¥0 受講料
100% 無料・登録不要

AIで作る前に、なぜ土台がいるのか

ChatGPTやCursor、Claudeに「ランディングページを作って」と頼めば、それらしく動くHTMLとCSSが数秒で返ってきます。便利です。でも、出てきたコードを見て「これで合っているのか」「なぜこう書かれているのか」がわからないと、そこで止まります。1箇所だけ直したいのに、AIに丸投げして意図と違う結果が返ってくる——を繰り返すことになります。

必要なのは、コードを全部自分で書けるようになることではありません。AIの出力を読んで、間違いに気づいて、自分の言葉で直せるだけの最低限の土台です。それさえあれば、AIは何倍も速く正確に動くパートナーになります。

この教材は、その土台だけを最短距離で届けるために作りました。月額のスクールも、高額な教材も要りません。正しい順序で、正しい深さを、AIと一緒に手を動かしながら理解していく。それだけです。

「AIでとにかく作りたい」人にも、「これから独学でWeb制作を学ぶ」人にも、「副業や受託でコードを納品する」人にも、最初に必要な土台は同じです。この先の深さやツールは進む方向で変わっても、この土台だけは共通して効きます。

— ToolShare Lab 運営者

AI時代でも、スクールも商材もいらない6つの理由

完全無料・登録不要

メールアドレスもクレジットカードも不要。URLを開くだけで全レッスンにアクセスできます。広告もうるさく出しません。

AIで試す実践課題付き

各レッスンに「AIで試す」ブロックがあります。AIに作らせた出力を読み比べ、自分の手で直す。写経ではなく、読んで直す力が確実に身につきます。

AIが間違えやすい点を先回り

AIがよく間違えるポイント、初心者がよく詰まるポイントを、レッスンごとに先回りして解説します。

ToolShare Lab連携

CSS生成・JSON整形・カラーパレット等、当サイトの100種類以上の無料ツールを学習教材として活用します。

AI時代の最新スタック

AIが生成するコードの前提になる、2026年時点の技術スタックを扱います。HTML/CSSからReactの基礎まで、AIの出力を読むために必要な範囲をカバーします。

次の一歩まで見える設計

土台を身につけたあと、自分のポートフォリオやLPをAIと一緒に形にする、独学を続ける、副業や受託の一歩を踏み出す——どの進み方でも、次に何をすればいいかがわかるようにします。

土台ロードマップ

ナビに任せて走ってもいい。
ただし手元に、一枚の地図。

Phase 1

HTMLを読める土台を作る

Week 01〜04 / 公開中

Webページの設計図であるHTMLを身体に染み込ませる。書き方だけでなく、AIが出力したHTMLを見て「なぜそう書かれているか」を読み解けるようになることがゴール。

  • Week 01

    HTMLって何？ — Webページが表示される仕組み

    「WebサイトはなぜURLを打つだけで表示されるのか」「HTMLとは結局なんなのか」を、コードを書く前に理解します。最初の1ファイルを作って、自分のブラウザで開くまでが目標。

    学ぶこと: Web の仕組み / ブラウザ / HTMLファイルの作り方 / VS Code導入

    第1週を読む
  • Week 02

    テキストを書き表す — 見出し・段落・リスト・強調をマスターする

    HTMLで「文章」を表現する方法を学びます。h1〜h6・p・ul・ol・strong・em の使い分け。「ただ文字を書く」のとは違う、HTMLの「意味付け」の感覚を掴みます。料理レシピページを1ページ完成させます。

    学ぶこと: 見出しタグ / 段落 / リスト / 強調 / セマンティック思考

    第2週を読む
  • Week 03

    画像・リンク・テーブル・フォーム入門 — テキスト以外を全部覚える

    img / a / table / form / input。Webサイトの主要な要素をすべて触ります。属性の書き方、相対パスと絶対パスの違い。個人プロフィールページを完成させます。

    学ぶこと: 画像挿入 / リンク / 表 / フォーム要素 / 属性 / パス

    第3週を読む
  • Week 04

    セマンティック・メタタグ・アクセシビリティ

    header / nav / main / article / section / footer の使い分け。SEOの土台になるメタタグ。スクリーンリーダー対応の基礎。「正しく書く」感覚を身につけます。

    学ぶこと: セマンティックHTML / metaタグ / SEO基礎 / aria属性入門

    第4週を読む
Phase 2

CSSを読める土台を作る

Week 05〜06 / 公開中、この先はComing

HTMLの構造に「見た目」を与えるCSSを学びます。セレクタとプロパティの基本から、AIが書いたCSSの余白や配置のズレを読み解けるようにします。Flexbox・Gridなどのレイアウト技術は、この先の土台として準備中です。

  • Week 05

    CSSの世界 — セレクタとプロパティ

    CSSがどうHTMLに作用するかを理解します。セレクタの種類、優先順位（詳細度）、プロパティと値の関係。「カスケード」の意味を体で覚えます。

    学ぶこと: セレクタ / 詳細度 / カスケード / 色 / フォント

    第5週を読む
  • Week 06

    ボックスモデル・配置の基本

    marginとpaddingの違いがわからない、要素が思った場所に配置できない。初心者が必ず躓くここを徹底攻略します。display / position / float の使い分けまで。

    学ぶこと: box-sizing / margin / padding / border / display / position

    第6週を読む
  • Coming

    Flexbox・CSS Grid — 配置の土台を広げる

    要素を横並びにするFlexboxと、2次元レイアウトを組むCSS Grid。AIが生成したレイアウトCSSを読み解けるようになるための続きです。準備でき次第、順次公開します。

    扱う予定: Flexbox / CSS Grid / メディアクエリ / レスポンシブの基礎

    準備中
Phase 3

JavaScript土台

Coming

HTMLとCSSだけでは作れない「動き」と「ロジック」。AIが書いたJavaScriptを読んで、変数・関数・条件分岐・DOM操作・fetchで何をしているかがわかる土台を準備中です。

  • Coming

    JavaScriptの土台 — 変数・関数・DOM操作・fetch

    「なぜ動くのか」を読み解ける最低限のJavaScript。準備でき次第、HTML/CSS土台と同じ形式（記事+AIで試すブロック）で公開します。

    扱う予定: 変数とデータ型 / 関数・条件分岐・ループ / DOM操作とイベント / fetchと非同期処理

    準備中
Phase 4

TypeScript土台

Coming

型でAIのミスを未然に防ぐ考え方。JavaScriptの土台の上に、型注釈を読んでAIの出力を安全にチェックできるようになる土台を準備中です。

  • Coming

    TypeScriptの土台 — 型を読んで、AIのミスに気づく

    「なぜこの型エラーが出るのか」を読み解ける最低限のTypeScript。JavaScript土台の公開後に着手します。

    扱う予定: 基本の型 / interface・type / 関数の型注釈 / AIが書いた型エラーの読み方

    準備中
Phase 5

React土台

Coming

UIを部品（コンポーネント）化するReact。フロントエンド求人の多くが前提にする技術を、AIと一緒に読み書きできる土台として準備中です。

  • Coming

    Reactの土台 — コンポーネント・state・propsを読む

    AIが生成するReactコンポーネントの構造を読んで、自分で直せるようになる最低限の土台。土台Part 1（HTML/CSS）の完成後に着手します。

    扱う予定: コンポーネント / props・state / useEffect / AIが作ったコンポーネントの読み方

    準備中

さあ、始めよう

最初の一歩は「Week 01: HTMLって何？」を読むことです。
何も準備は要りません。スマホでもPCでも、今すぐ始められます。

Week 01 を読む

※ 現在、HTML/CSS土台 Part 1（Week 01〜06）を公開中。この先の土台（Flexbox・Grid・JavaScript・TypeScript・React）は準備でき次第、順次公開します。

よくある質問

本当に無料ですか？途中で課金されたりしませんか？

はい、本当に完全無料です。クレジットカード登録もメールアドレス登録もありません。記事内に広告（Google AdSense・アフィリエイト）がありますが、本文の閲覧には一切影響しません。

AIでコードを書けるのに、なぜHTML/CSSを学ぶ必要があるのですか？

AIは速く動くコードを作れますが、それが意図通りかどうかを判断するのは人です。出力を読めないと、間違いに気づけない・的確に直せない・次に何を指示すればいいかもわからない、という状態になります。この教材は「ゼロから全部書けるようになる」ためではなく、「AIの出力を読んで直せる」ための最低限の土台を届けるものです。

パソコンを持っていなくても始められますか？

Phase 1（HTML土台）まではスマホでも読めますが、Phase 2以降は実際にコードを書く必要があるためPCが必要です。中古でも構いません。Windows/Macどちらでも進められます。

本当にスクールに行かなくても大丈夫ですか？

大丈夫です。スクールの最大の価値は「強制力」と「質問できる環境」ですが、強制力は自分で作れますし、質問はAI（ChatGPT・Claude・Cursor）やStack Overflow、X（旧Twitter）で十分代替できます。スクールに払う数十万円があれば、その分の時間を学習に使った方が絶対に伸びます。

1レッスンどのくらいの時間が必要ですか？

1レッスンあたり、読んで実際に手を動かして1〜2時間が目安です。公開中のHTML/CSS土台（Week 01〜06）を通しで進めるなら、6〜12時間程度で一周できます。忙しい方は無理せずマイペースで進めてください。「完走すること」が最重要です。

この土台を身につけたら、何ができるようになりますか？

AIが出力したHTML/CSSを読んで、意図通りかどうかを判断し、間違っている部分を自分で直せるようになります。「AIでとにかく作りたい」人ならそれで十分です。「これから独学でWeb制作を学ぶ」人なら、この先のCSS/JS/TS/Reactの土台に進むための足場になります。「副業や受託でコードを納品したい」人なら、AIが作ったコードをそのまま納品して事故る、を避けられるようになります。どこまで進むかは人それぞれですが、最初に必要な土台はこの教材でカバーします。

Reactは学べますか？TypeScriptは？

Reactの土台は、HTML/CSS土台 Part 1の完成後に着手する予定です（準備中）。TypeScriptも同様に、JavaScript土台の公開後に扱う予定です（準備中）。Vueなど他のフレームワークは現時点でスコープ外ですが、HTML/CSS/JavaScriptの土台があれば、AIの助けを借りてどのフレームワークにも応用が効きます。