# Claude Codeで作る公式サイト講座 こんにちは。フリーランスの学校の周平です。ということで、AI活用でマネタイズしたい、稼ぎたいという人向けの具体的なステップとして、 ホームページ制作というのがあるんですけど、それをどうやって始めたらいいかというのを今日は簡単に解説をしたいと思います。 実際、クロードコードとかコーデックスでホームページを作るための動画講座は無料で60分で出しておりまして、 その講座の中にはキットというのが、キットというか手順書みたいなのが入っていて、その手順書をそのままダウンロードしてクロードコードとかコーデックスに投げたら、 素早くホームページ制作をしてくれますので、これを使っても多くの方がホームページ作られてますので、コミュニティメンバーも作れましたとかって報告をいただいておりますので、 ぜひそれを活用してみてください。じゃあそういったものをどういうふうにやるかっていう具体例を今日は長らききで理解できるような感じで10分ぐらいで話していきたいと思います。 まず使うものとしては、クロードコードかコーデックスです。プランとしては3000円プランで一旦大丈夫。 もちろんちょっとたまにリミットがきながらで止めたり休んだりしながらかもしれませんけど、3000円からOKです。 チャットGPTの有料プラン、3000円プランに課金してる人はもうそれだけでOKです。そこからコーデックスっていうアプリをダウンロードしてきて、パソコンですね。 そこからそのチャットGPTで契約してるアカウントでログインしたらそのままコーデックスが有料プラン使えますので、それでまずは十分ですと。 そこからまず作りたいホームページをまずは言ってみてください。コーデックスとかにこんなものを作りたいっていうね。 まずはデモでいいので自分の公式サイトとかでいいと思います。自分の発信とかのリンクをまとめたようなものでもいいと思うので。 あとはこれからAI活用していく上でこういった相談を受けてますよっていうデモのちょっとLPみたいなものでもいいと思います。 それのものを作りたいから3パターンぐらいでコーデックスに画像を作らせてください。もしクロードコードでやる場合は一旦チャットGPTとかで画像生成させたほうがいいと思います。 こういうサイトを作りたいのでMockでまずはイメージ映像3パターンぐらい出してみてください。別に5パターンでもいいですよ。 出させますと。そして出てきたらそれを元にこの3パターン目がいいなと思ったらコーデックスの方はそのまま3パターン目でこれでホームページを作り始めてください。 このときにさっき言ったホームページ作成手順書みたいなのがあるのでそれをダウンロードしてこれを使って始めてくださいというような指示をしてください。 ここまででまず最初もう7割ぐらい完成です。クロードコードの場合は一緒ですね。チャットGPTで画像を作らせてそれを持ってきてこんな感じで作ってください。 なんでこういうふうにMockって言って実際のイメージ映像を先に作らせるかというとイメージで渡したほうが早いんですよね。僕らがもっとシンプルでとかモダンでとかビジネス系でって言ってもなんかちょっと違うのが出てくるので まずは自分がこれっぽいなっていうイメージを作らせます。カフェオーナーの方に見せるならカフェで綺麗な感じとかいろいろ可愛い感じとかポップな感じとかあるじゃないですか。 それを出すといいです。もし参考になるサイトとかがあったらそれをそのままURL渡してこんな感じにしてほしいっていうのでいいと思います。もちろん丸パクリはダメですけどね。 ちなみに僕の公式サイトとか丸パクリしてもらっても大丈夫です。文言とか別ですよ。僕の情報だからね。デザインとかは全然丸パクリしていただいて全然大丈夫です。 その上でまずはできました。実装に入りますねという風になるので今度はそれをコーデックスにクロードコードが作り始めてくれます。さっきの手順書を渡せばね。 そこからクラウドフレアといういわゆるホームページとかを世界に公開するために必要な置き場所サーバーというものがあります。 そこに置きます。このクラウドフレア上に置けるのでそれはもう本当コーデックスとかクロードコードから直接クラウドフレアに行けます。 最初はねクラウドフレアのアカウントを作らないといけないと思いますのでそれはメールアドレスとかまたはGitHubのアカウントある人はGitHubのアカウントとかで作れますので まずはクラウドフレアっていうもののアカウントを取ってください。この辺りもわからなかったらコーデックスとかクロードコードに聞きながらAIに聞きながら進められるのでスクショしながら聞いてみてください。 それでできたら一旦仮デプロイというかデプロイというかリンク化して誰でも見れるようにすることなんですけどバーって出てきたらそこからでも直せます。 ここに画像を入れてほしいとかここにこういうものを入れてほしいとかって直せたりとかするのでその画像を入れると。画像の入れ方としては自分のパソコンの中に画像があればその画像をファイルパスを取って渡せばいいです。 アップロードしてもいいんですけどどっちでもいいです。ファイルパスかアップロードで渡してあげたらちゃんとそのサイト上にも画像が載るようになります。 すごいですよね。それでできてじゃあもう公開ですよとかクライアントに渡しますよという場合はドメインというものを設定しないといけないんですよ。 もちろんそのままでもいいんですけど多分なんかしゅうへいむらかみ.devとかってなってます。このままでもいいんですけど商用利用OKです。 これはそのまま商用利用そこから物を売ったりとかそれを売ったりしても全然大丈夫です。すごいですよね。それでもいいんですけどやっぱりしゅうへいむらかみ.comとかしまなみカフェ.comとかちゃんとしっかりとドメインにしておきたいじゃないですか。 クラウドフレア上で契約をすれば大丈夫です。もちろんお名前.comとかxサーバーとかでドメイン取ってきてもいいんですけどその接続とかちょっとめんどくさいのでクラウドフレア上でクレカで決済してドメイン取るのが早いかなと思いますね。 っていうような流れです。だからめちゃくちゃ簡単に作れてこのデザインをするまでにクラウドデザインっていうクラウドのデザイン向けツールがあったりしてそこを挟んでもいいんですけどチャッピーメースコーデックスでやる場合とかは結構デザインも見た目を与えればそれっぽくしてくれるのでそれでやっていくといいかなというふうに思います。 それでも公式サイト作れますのでもしクライアントに渡したいときはドメインはクライアントに取ってもらってこっちから設定をすることもできますし例えば作ったものを無料で渡してあげるなり3万5万とか格安で渡してあげてただリンクとか画像とか入れ替えたいなっていうふうに思う場合は月々1万円ぐらいで補修のサポートをさせてくださいみたいな感じでできますので。 はいあのそういうふうに使ってとか提案をして仕事につなげていくのがねいいかなというふうに思いますでそこからですねまぁ実際そのサイトを見せたりしてこんなんが家で作れるんですかってびっくりすると思うのでこういったものをじゃあ自分で作れるようになりたいっていう場合は例えば月々5万円ぐらいで初期設定最初2時間ぐらい付き合ってあげてわかんないときはラインカーまたはその店舗とか会社とかに行ってまあこういうふうにやったらできますよってこうレクチャーをしてあげるみたいな仕事にも多分つながると思うので そんな感じでホームページを作れる状態まで行くと結構広がります提案の幅がねそもそもホームページ作れる人ってそんなにいないですからねこんなに今簡単に作れるんだけどめちゃくちゃ簡単に作れるからこそやっぱそのなんていうかその欲しいっていう人に対して簡単に渡せるのとそれを作れるようになりたいっていう人にその講義とかセミナーとかもできるし何より喜んでもらえますので はいそんな感じでクラウドコードまたはコーデックスとそのクラウドフレアっていうのを組み合わせるとむちゃくちゃすごいことができますねさらにここからですねウェブアプリというものを作れます例えば飲食店であればライン登録してくれた人にいきいきメール送るのめんどくさいですよねラインするのめんどくさいですよねっていったらそのアプリから何々さん今日は誕生日ですねっていうので自動で送ることができたりとかもちろんLステップかませばできるんですけどLステップの契約料金とかもかかったりとかしますので そういう意味ではそうやってウェブアプリ作ってそこで顧客管理をしたいとかっていう飲食店とかまたは業務効率化ツールを作って情報共有が社内でもっとできるようになりたいとか売り上げダッシュボードを作っておきたいとかそういう社内向けのツールとかも作れるようになるのでクラウドフレアで公式ページ作れると今度はクラウドフレアワーカーズっていうウェブアプリ向けのシステムがあってそれを使うとまたさらに面白いことができますのでこの辺りもクラウドコードとかコーデックスとか コーデックスの画面から直接言えばできます一時的にクラウドフレアをいじったりとかワーカーズをいじる必要はほとんどないのでこれが普通の自然言語何々してあれしてこれしてクラウドフレアでこうしてとか言えば進んでいくっていうのがすごく革命なのでまずはこれを体験してほしいですほとんどお金かからないですから3,000円とクラウドフレアの無料版で全然大丈夫ですしもしドメイン取るとしても年間で言うと多分1,000円か2,000円か3,000円かそんなもんなので そうそれぐらいで本当に公式サイトを作って運用ができるっていうところまでいけますので本当に革命ですよねまずはこの辺りからぜひ進めてみてください詳しいやり方は公式サイトの作り方動画が無料でありますので学習サイト見てみてくださいこのフリーランス学校の学習サイトもまさに僕がゼロからクラウドフレアのワーカーズで作ってますのでこんなのが作れる時代なんですよねすごい本当にいろいろできることが増えてきてますのでぜひ皆さんそういうことをやってみてください であとこういったエア活用でマネタズしたいなっていうけどどうやって計画立てていいかわかんないどうやって進めていいかわかんない自分一人で考えてると悶々として時間が経っちゃうなっていう方は僕個別面談Zoomで15分やっておりまして皆さんのお悩みとかゴールを聞いてそのために必要なロードマップを15分でお話聞いて作ってその後PDFでも無料で渡しておりますので気になる方はロードマップ作成会15分で無料でやってますので見てみてください で今月の後8月もうすでに50枠埋まっておりまして一旦ちょっと募集を止めているんですがおそらくこの月曜日ぐらいにまたねあの追加の募集がいくつか出せそうだと思いますのでまずはLINE登録してお待ちいただけたらいいかなというふうに思います今日貼っている学習サイトからも飛べますのでぜひ見てみてくださいということで今日も聞いただきありがとうございましたこの後も心地いい時間を過ごしてくださいバイバイ