事前準備ゼロ!AI「Claude」で60分・ホームページ作成入門

オンライン

事前課題はありません。写真も文章もこちらでご用意します。AI「Claude」で1枚つくり、フォルダとHTML・CSSの仕組みが分かります。

こんなことを学びます

■ この60分で、何ができるようになるか

ご自身のパソコンの中に、ブラウザで開けるホームページが1つできあがります。
そして、そのページをご自身で直せるようになります。

お持ち帰りいただくのは「作り方を見た記憶」ではなく、「自分の手で作って、直した経験」です。


■ ご準備いただくものは、ほとんどありません

・事前の課題はありません
・写真も、文章も、こちらでご用意してお渡しします
・専門のソフトのご購入や、月額のご契約もありません

ご予約後に、当日お使いいただく材料一式をお送りします。
ダウンロードだけ済ませた上でご参加ください。


■ 当日つくるもの

「渓谷の清流を望む古民家カフェ」のホームページを、題材としてご用意しています。

写真も、お店の情報も、こちらでそろえてあります。
ですので、当日は「何を書こう」で手が止まることがありません。

ご自身のお仕事のページに作り替える方法は、最後にお渡しする資料に書いてあります。
ご自宅で、そのまま試していただけます。


■ この講座が、ほかと違うところ

【1】フォルダの作り方から、いっしょにやります

「ファイルがどこにあるか分からない」
「拡張子と言われても、見たことがない」

こうしたところで手が止まる方は、実はとても多くいらっしゃいます。
そして、ここを飛ばしてしまうと、講座が終わったあとにご自分では何もできません。

本講座は、ここに15分を使います。いちばん時間をかけるところです。

【2】「AIが作ってくれた」で終わらせません

できあがったページを、ご自身の手で保存していただきます。

そのとき、こう分かります。
「index.html は、AIが作った不思議なファイルではなく、自分が名前を付けて保存した、ただの文書だった」

ここが分かると、これから先、何を見ても怖くなくなります。

【3】「直し方」まで持ち帰っていただきます

AIは、一度で思いどおりのものを出してはくれません。
ここでつまずいて、多くの方がやめてしまいます。

「こう言えば直る」という伝え方を、実際に直しながら覚えていただきます。
覚えていただく型は、3つだけです。


■ 分かるようになること

・ホームページが、フォルダの中の何でできているのか
・HTML と CSS と JavaScript が、それぞれ何をしているのか
・書いてある言葉を変えたいときは、どのファイルを触るのか
・見た目を変えたいときは、どのファイルを触るのか
・スマートフォンでの見え方を、どうやって確かめるのか


■ お持ち帰りいただくもの

1. 当日つくったホームページのファイル一式(ご自身のパソコンの中に残ります)
2. AIへお願いするときの指示文(プロンプト)
3. 「ここを直したい」ときの言い換え集
4. ご自宅で続きができる、発展プロンプト集(参加特典)
5. 発展プロンプトを当てていくと、どこまで行けるかを示した完成見本
 ※ 5番目の見本は、当日つくるものの見本ではないです。
  講座終了後。ご自宅で、参加特典を最後までした時の見本です。
 
■ なぜ「Claude」というAIを使うのか

生成AIには、それぞれ得意分野があります。

この講座で使う Claude(クロード)は、文章を考えるだけでなく、
Webページの中身そのもの(HTMLとCSS)をまとめて書き出すことが得意です。

無料の範囲でご受講いただけます。有料プランのご契約は不要です。


■ この講座では扱わないこと

あらかじめ、はっきりお伝えしておきます。

・独自ドメインの取得、サーバーのご契約、インターネットへの公開作業
 → どんな選択肢があり、いくらかかるかは最後にご説明しますが、
   実際の作業は本講座には含みません。
・ご予約・お支払い・会員登録などの仕組みづくり
・広告の出稿や運用
・お客様のサービスそのものの企画やご相談
・お写真のご用意(当日はこちらの素材をお使いいただきます)


■ 生成AIで作った画像について

・生成AIで作った画像は、他の方が似た画像をお使いになる可能性があり、
 独占してお使いいただくことをお約束できません。
・実在の人物・店舗・商品を模した画像は作りません。
・ロゴを生成AIで作ることは、おすすめしていません。
 商標として登録される前提の用途には向かないためです。


■ 講師について

自分の会社のサイトを、自分で作って公開し、サーバーの管理まで行っています。
神社の公式サイトを制作し、公開したあとも運用を続けています。
学習塾・サロン・士業・工務店・セミナー告知の5業種について、LPを制作しています。

「AIに作らせたことがある」ではなく、「AIで作ったものを、実際に公開して動かし続けている」
立場からお伝えします。
続きを読む

希望の日程で調整できます

現在開催日程はありませんが、開催リクエストを送ることで希望の日時で講座開催を相談できます。

開催予定エリアオンライン

価格(税込)¥3,000

受けたい
0人が受けたい登録しています

オンライン受講日程

価格(税込)¥3,000

オンライン受講料に含まれるもの

・60分のオンライン講座(Zoom)
・当日お使いいただく写真6枚と、指示文の一式
・当日つくったホームページのファイル一式
・「ここを直したい」ときの言い換え集
・ご自宅で続きができる発展プロンプト集と、完成見本

※ 通信費はお客様のご負担となります。
※ Claude は無料の範囲でご受講いただけます。有料プランのご契約は不要です。

この講座の先生

AIエージェントオーナー

 私は、現在AIエージェントを使って
「幼児・児童の算数や国語や百科事典的知識の習得の補助を中心に、触覚・味覚・嗅覚や運動能力育成の補助も、いくつかの言語習得とともに行えるプラットフォーム」
 アプリを開発しているオーナーです。
 AIエージェント開発の楽しい日々を過ごす中で、個別に何名もの方々から、AIエージェント開発のやり方を聞かれ、教えたりしたのを通し、さらに広い方々にも、この楽しさを味わっていただけたらと思い、講座開設をしようと思っています。
 ただ、以前に講師歴2年はあるものの、久しぶりなので、慣れも必要な感じもしてまして、始める...
+続きを読む

当日の流れとタイムスケジュール

【0:00〜0:08】はじめに

・本日のゴールの確認(60分後に何ができているか)
・ご参加のみなさまから、ひとこと
・つまずいたときの合図の決め方(お一人でも置いていかれないように)

※ 当日つくるのは、こちらでご用意した「古民家カフェ」のページです。
  ご自身のお仕事のページへの作り替え方は、最後の資料でお渡しします。


【0:08〜0:12】Webサイトは、3つの部品でできています

・HTML …… 何が書いてあるか(骨組み)
・CSS …… どう見えるか(見た目)
・JavaScript …… どう動くか

家にたとえると、間取り・内装・電気の配線です。
本日つくるのは、はじめの2つだけです。


【0:12〜0:27】フォルダをつくる(★本日、いちばん時間をかけるところ)

ここでつまずく方が、いちばん多いところです。
だからこそ、いちばん時間をかけます。

・ファイルの「拡張子」を表示する設定にします
 (.html や .png といった、名前の後ろの部分です)
・デスクトップに、今日の作業用のフォルダを1つ作ります
・その中に、画像を入れるフォルダをもう1つ作ります
・お渡しした写真6枚を、そこへ移します

この形ができた時点で、「ホームページとは何がどこにあるものか」が見えます。

全員の画面がそろうまで、先へは進みません。


【0:27〜0:40】AIに作ってもらい、自分で保存する

・Claude を開いて、お渡しした指示文をそのまま貼ります
・HTMLとCSSが出てきます
・それを、ご自身の手でファイルとして保存します
・保存したファイルを開くと、ブラウザにホームページが表示されます

ここで、大事なことが分かります。

「index.html は、AIが作った不思議なファイルではなく、
 自分が名前を付けて保存した、ただの文書だった」

※ このタイミングで、完成の見本をお見せします。
  生成AIは毎回わずかに違うものを出しますので、
  色や余白が少し違っていても正解です。


【0:40〜0:52】直す(★当日のいちばんの中身)

出てきたページは、たいてい、そのままでは思いどおりではありません。

・言葉を変えたい
・色を変えたい
・スマートフォンで見ると崩れている

ここで「どう言えば直るか」を、実際に直しながらお伝えします。

AIへの伝え方には、うまくいく型があります。「もっと良くして」では直りません。
本日はその型を、3つお持ち帰りいただきます。

言葉を変えると HTML が、見た目を変えると CSS が変わります。
2つの役割の違いが、ここで手を動かしながら分かります。


【0:52〜0:57】このあと、どうするか

作った1枚を、実際に世の中に出すには何が必要か。全体像だけご説明します。

・そのままファイルとしてお使いいただく場合
・無料の置き場に置く場合
・独自ドメインで公開する場合

それぞれ、何が必要で、いくらくらいかかるのか。

※ 公開の実作業は、本講座には含みません。判断材料をお持ち帰りいただくところまでです。

あわせて、ご自宅で続きができる発展プロンプト集をお渡しします。


【0:57〜1:00】ご質問

その場でお答えできないご質問は、後日メッセージでお返しします。


※ 進み方は、ご参加の方の状況により前後します。
※ 少人数で行いますので、途中でお声がけいただいて問題ありません。
続きを読む

こんな方を対象としています

■ こんな方に向いています

・ホームページを自分で作ってみたいが、何から手をつければよいか分からない方
・「ファイルがどこにあるか分からない」で、いつも手が止まってしまう方
・生成AIに興味はあるが、まだ触ったことがない方
・制作を誰かに頼む前に、自分でどこまでできるのか知っておきたい方
・以前どこかで習ったが、結局その後ひとりでは作れなかった方
・個人事業主の方、これから開業される方

パソコンの操作は、文字入力とコピー&ペーストができれば大丈夫です。


■ 正直に申し上げます。こんな方には向いていません

・すでにHTMLとCSSをご自身で書ける方
 → 物足りない内容になります。

・ご自身のお店やサービスのページを、本日中に仕上げたい方
 → 当日つくるのは、こちらでご用意した古民家カフェのページです。
   ご自身のものへの作り替え方は、お持ち帰りの資料でお渡しします。

・本日中に、独自ドメインでインターネットに公開したい方
 → 公開の実作業は本講座に含みません。全体像のご説明までです。

・パソコンをお持ちでない方
 → スマートフォン・タブレットだけでのご受講はできません。

・説明だけを聞いていたい方
 → 60分のうち、手を動かしていただく時間のほうが長い講座です。
続きを読む

受講する際は以下をお読み下さい

■ 事前にご準備いただくもの(★2つだけです)

【1】パソコン(Windows または Mac)
スマートフォン・タブレットのみでのご受講はできません。

【2】Claude の無料アカウント
前日までにご作成をお願いします。ご予約後のメッセージで、作成手順をお送りします。
本講座は無料の範囲で受講いただけます。有料プランのご契約は不要です。


■ ご予約後にお送りするもの

・当日お使いいただく写真6枚と、指示文の一式(zipファイル)
・Claude の無料アカウントの作り方

※ ダウンロードだけしてお越しください。展開のしかたは当日ご案内します。


■ あると進めやすいもの

・Zoomを見る画面と、作業する画面が分かれていると進めやすくなります
 (パソコンとタブレット、画面2つ、など)。1つでも受講いただけます。


■ その他

・録画・録音・画面の撮影はご遠慮ください。
・生成AIの結果は、同じ指示でも毎回変わります。講師と同じものが出るとは限りません。
 「違うものが出たときにどうするか」も、本講座の中身です。
・生成AIの無料枠には利用回数の上限があります。当日その上限に達した場合は、
 こちらで用意した完成ファイルをお渡しし、続きから進めていただけます。
・生成AIで作った画像は、他の方が似た画像をお使いになる可能性があり、独占してお使い
 いただくことをお約束できません。
・お渡しする写真・指示文は、ご受講いただいた方の練習用です。再配布はご遠慮ください。
・進み方は、ご参加の方の状況により前後します。
続きを読む
※ストアカでは講座に適用される保険を用意しています。詳しくはストアカ補償制度をご覧ください。

1週間以内にこの講座を
1人が予約しました

HTML・CSSのおすすめの先生HTML・CSSの先生を探す

HTML・CSSの関連カテゴリーから講座を探す

先生のスキルから探す