ホームページ作成の概要
おはようございます、しゅうへいです。この番組では、1年後のあなたが楽になるヒントを、瀬戸内海の島から毎日流行をお届けしております。
はい、ということで、借金も返済日がもうちょっとで近づいてますね。10月31日かな。たぶん平日金曜日だから、たぶん末日だったはず。
いや、60万がなくなりますね。はい、ということで、無事また支払えたら、11月頭にね、報告をしたいと思います。もう本当に大変ですよ、いろいろね。
まあ、いろいろやってるんですけども、今日はですね、3,000円格安でホームページを作る方法ということで、これ最短1日でできます。
はい、その方法を今日はね、解説したいと思います。で、久しぶりにこのワードを使いますけど、バイブコーディングですね。
バイブコーディング、雰囲気コーディングって言って、いわゆるプログラミング知識とかわからなくて、僕もわからないですね。
わからなくても、いわゆるホームページだったりとか、ちょっとした簡単なゲームだったりとか、商品訴求のLPだったりとか、そういったことができるんです。
しかもね、当時僕も始めた頃って、たぶん今年の夏ぐらいだったと思うんですけど、あの頃よりもね、なんかもっとやりやすくなってます。
今日は、お店さんとか店舗さんでホームページ作りたいけど、どんな内容にしたらいいかもわからないし、そこから全部写真撮影やってもらうというと、
30万かかって、メンタルランスコストも月何千円とかかかって、また入れ替えるって言ったらその時数万円、しかもどれぐらい効果が出るかわかんないみたいな痛みってやっぱあるじゃないですか。
そういった時はですね、自分で作ればいいんです。
しかもね、僕、実は赤字60万のコワーキングスペースで今年の夏に、いわゆるこのAIコーディング、バイブコーディングのセミナーをやったらね、
60代ぐらいの隣の島に住んでるおばちゃんが作ったんですよ、自分で。もちろん最終デプロイリンク発行まではちょっと間に合わなかったんだけど、
でも多分、教えたら多分できると思います。あとちょっとだったから本当に。ってぐらい、本当ね、中学生か小学生でもできるね。
まあまあ中学生ぐらいから本当に60代の方でも実はできるっていうものなんですよ。やってみたくないですか。
で、今日はですね、じゃあ実際にどんな流れでやってらいいのか。なんで3000円なのかみたいな。
もうちょっとその辺を本当にネット知識ゼロでも、あ、それをやればいいんだねってことがわかるように今日は解説していきますので、ぜひよかったらちょっとイメトレしながら聞いていただけると嬉しいです。
必要なツールの紹介
で、ステップとしてはね、だいたい3から5ぐらい。僕はちょっと今日考えながら話すんで、すいません。考えながらって実際僕がやった手順で話していくので、いくつかポイントがちょっとずれるかもしれませんが、
3から5ステップありますね。まあちょっと手短にいきますね。詳しく知りたい方はですね、僕ノートにまとめてますので、そのノートちょっと情報少し古いけど、とはいえ今年の記事なので、
それちょっと見てもらえるといいかなというふうに思います。で、まずですね、もうまあステップ1、めっちゃ簡単。チャットGPTを契約してください。はい。以上。
チャットGPT、いわゆる無料で使えるんだけど、20ドルぐらいのプランで大丈夫です。あのプロプランってやつかな。今だと多分3000円ぐらい。で、これチャットGPT以外でも一部できるんですけど、例えばクロードコード、クロードコードっていうのもありますので、
僕ね、ちょっと使ってみた感じ、いや、実はね、これ嘘ついてて3000円じゃなくて6000円なんですよ。なんでかというと、チャットGPTも使ったし、クロードコードも使ったから、まあ別にどっちかでもできるんだけど、
なんかちょっと今回両方、結構割と両方使っちゃうんですけどね。まあ両方使う。まあ一個でも大丈夫です。だからチャットGPTまたクロードコード、どちらも20ドル3000円でスタートできます。で、その後ね、Windsurfっていうね、あのアプリケーション、これはいわゆるまあ難しい言葉で言うとエディターっていう言葉ですね。
エディター。うん、なんかよくわかんないくて大丈夫。あの、僕もわかんないから。あのWindsurfっていう無料アプリがあるので、あ、これ一応MacBook前提ね。あ、でもWindowsもあるわ。全然Windowsもあるので、Windowsと似てるんだけどWindsurf、Windsurfっていうね無料アプリを調べたら大丈夫です。あのノートに載ってますね。
これをインストール。チャットGPT契約Windsurfを無料アプリインストールして、でその後にもうWindsurfの中でチャットGPTのコーデックスっていうね、いわゆるそのコーディングに特化したものがあるんですよ。要するにサイトを作るとかゲームを作るとかね、そういうこうプログラミングに特化したコーデックスっていうものをチャットGPTが作っておりまして、オープンエアが作っておりまして、それをWindsurfの中で起動します。
はい、でここまでできたらもうね7割できたって言ってもいいぐらい。過言ではない。過言ではないです本当に。もうここで7割ぐらいできてる。で、あとはですね、もう作りたいものを依頼するだけです。そうでこれね、要するにそのViveコーディングって何がすごいかっていうと、自然言語で依頼ができるんですよ。
で、自然言語ってよくわかんないじゃん。自然言語つまり、お母さんにカレー作ってっていうやつ。で、あれどこ行ったかなとかで伝わるやつです。だってさ、あれなんてわかんないじゃん。前の文脈とかがあるわけでしょ。
で、これ生成AIの歴史とか調べるとですね、面白い。ニューラルネットワークとか、あとはね、畳み込み型ニューラルネットワークなんかよくわかんないんだけど、僕も。そういうのであれとかがわかるようになっていったんだって。だからGoogleの2017年トランスフォーマーっていうのが本当に大きな転換点だったらしいんですけど、あれとかそれがAがわかるようになってると。
で、そのあれとかそれとかいい感じにして、要するにサイトができちゃうわけですよ。ホームページを作りたいから、まずはステップバイステップで手順を教えて、そして自分がいいよって言ったら始めてみたいなことができるわけです。本当に目の前に人がいて、で、その人はプログラミング知識めちゃくちゃ持ってて、何でもできるみたいな感じ。
逆にこっちが言葉を知らないと逆にね。こんな感じがいいんだけど、こんな感じでどう伝えたらいいのかわかんないとかあるじゃん。でもこれがですね、また進化しててですね、クロードコードになるんですよ。チャットで見ても同じことできると思うんですけど、いわゆるサイトをスクショするんですよ。
なんかこんなサイトにしてほしいと言ったら、このサイトをスクショして、そしてそれをクロードコードにペタッと貼るんですね。ウィンドサーフの中で。そんなら貼り付けができて、そのままこれはこの画像とかこのサイトはこうなってるんでこうしますねみたいな。で、これがねちょっと前までできなかったの。
僕も久しぶりにちょっと触ったからびっくりしたんだけど、いわゆるちょっとニッチな話するんだけど、ウィンドサーフ内になんかね、画像をペタッて貼れなかったんですよ。細かい話を言うと、一回フォルダに入れたりとかしてね、貼ることはできたんだけど。
なんかその、いわゆる今チャットGPTとかもさ普通のインターフェースあるじゃないですか。普通に僕らが聞くアプリとかで聞くやつ。あれって画像貼り付けられるじゃん。で、スクショしたやつをコピペしてパタッて貼って、でこれどうなってるとかこれについて教えてここが分かんないとか聞けるわけですよ。
そうだから、いわゆるこの今の初期設定とかも含めて分かんなかったら画面をスクショしてチャットGPTに聞くみたいなことをやってたんですね。でもそれってさ2つのアプリをこう交互に行き来したりするのめんどくさかった。
そしたらさ、今日見たらクロードコードがすごい画面自体が見やすくなってて、でそのクロードコードのチャット欄のところにさもうスクショで貼り付けてってそのまま聞けるんですよね。
マジかと思って。こんな便利になってんだと。しかもめっちゃ表示が分かりやすくなってるから、クロードコード挫折した人今ならめっちゃ楽だと思う。簡単になってると思います。
で、ちょっとごめんなさい脱線しました。この話はもう覚えなくていいです。だから分かんないことがあったらAIに聞けばいいということで進めていくんだけど、
シンプルなデザインでホームページ作って、例えばさ別に全く真似するわけじゃないから自分が好きなホームページとかちょっと見てみて、こんな感じにしてつったらほんとそんな感じになります。
で、それができたら、要するにサイトを作ってって言ったらサイトのその構造ができていくので、ここにこの画像を入れてとか、でそれはパソコンのフォルダから読み込ませるってことができます。
パソコンのフォルダから読み込ませる。パソコンのフォルダにAIがアクセスできるんです。で、この画像をここに貼り付けてとか、なんか拡張紙がさ、なんかJPEGとかPINGとかなんかHEKとかなんかあるじゃん。
なんかHEKHEKってあるじゃん。なんかHEKだと上手く入らないみたいな時があるんですけど、それもJPEGに変えてくれたりとかするんですよ。ちょっと怖いと思うかもしれないけどすっごい便利です。
だからあのフォルダの整理とかも実はそれでできたりするんですけど、まああの僕はあんま使ってないけどね。
で、そんな感じでこう使いたい写真とか入れて、ペットのね雑誌風のサイトを作りたい。ね、瀬戸さんの雑誌風のサイト作ったりしたら可愛いよね。成長記録みたいな。
ホームページ作成の基礎
そしたらそのちっちゃい頃から大きい頃まで写真入れといて、まあなんかその写真のフォルダの中に001002って入れとけば001から小さい順に並ぶとか1歳2歳3歳みたいな感じで、ちょっと日本語だとね、あの理解しない時があるので。
バグる時があるので、ファイル名はちょっと英語とか数字とかの方がいいです。そんなら1,2,3,4,5歳みたいな感じで、だんだんそのね、瀬戸さんの成長記録とかも作れたりしますね。
で、そういう風に1回できたら、それは今ローカルって言ったらパソコンの中でしか見れない。パソコンの中で一応サイトっぽくしてるので、それをどこから、ブラジルからアクセスしても見れるようにするっていうのがデプロイっていうものなんですけど、
ここからがちょっとね、難癖がちょっとあります。で、あまり聞いたことない、いわゆるGitHubとバーセルっていうものがあるんですね。うん、なんじゃそりゃ。
GitHubとバーセル、これを使ってます。で、何をやってるかというと、GitHubのアカウント、これ誰でも作る、Gmail作るみたいな感じで、で、GitHubのアカウントを自分のメールアドレスで作って、
で、その後にバーセルっていうね、サービスがあります。これもなんかもうそのメールアドレス取るみたいなイメージ、ちょっと全然違うんだけど、バーセルに登録する、もうノートのアカウント作るみたいな感じ、GitHubバーセルのアカウント作って、
で、そしたら、そのWindowsサーフの中で、要するにGitHubにログインとかができたりするんですね。ちょっとよく言ってる意味わかんないと思うけど、GitHubの中じゃない、そのWindowsサーフのアプリの中でコーデックスなりクロードコード立ち上げてたら、
GitHubにそこでログインするんですね。んなら、もうそこのコーデックスのAIが勝手にGitHubにアクセスして、GitHub内にリポジトリっていうものがあるんですけど、なんかフォルダみたいな感じ。で、フォルダっていうのはと言ってもなんかそのちゃんと履歴が残るフォルダ。
ちょっと前のバージョンに戻すみたいなことができるフォルダがリポジトリって言うんですけど、正確な説明じゃなかったらすみません。そんなイメージです。で、このGitHubのリポジトリを作り、要するにサイトの情報とか全部上げるわけですね。そこにフォルダにポーンと上げる。
そしたらそのリポジトリに入っているフォルダに入っているものを、いわゆるデプロイっていうのは置くみたいな感じですけど、要するにリンク発行するというか、みんな世の中の人が見れるようにするっていう。LLCハウスのホームページ作ったんですけど、それが見れるようになったっていう。それがデプロイって言うんですけど、それをバーセルでデプロイする。
これも全部コーデックスに言えばいいんです。AIに言えばいいんです。GitHubでリポジトリ作って、ログインしたいんでログインさせてって言ったらログインできるし、バーセルでログインしたいって言ったらログインできるし、デプロイしたいって言ったらデプロイできる。そうしたらみんながアクセスできます。サイトとしてできる。
あとは、いわゆる独自ドメイン。このバーセルとかでデプロイすると最後バーセルアップとかになるので、自分の例えばしゅうへい村上.comみたいなやつで最後デプロイしたときは、ちゃんとその独自ドメインになるようなものにすればよくて、これバーセルに確か月に1000円か2000円払えば勝手にデプロイできますし、バーセルを使わなくても一応できるみたいです。僕はやったことないんだけどね。
バーセルのサーバーを使うのかちょっとよくわかんないんですけど、バーセルのサーバーを使わずに多分Xサーバーとかのサーバーにアップロードして、それで独自ドメインで設定するんだと思うんですけど、バーセルでやるのがめちゃくちゃ楽ですね。
フリーランスコミュニティの形成
なのでちょっと確かに毎月毎月お金はかかるんだが、でもこれ作れるので、これ作れるとなるとですね、お店のホームページとかでちょっと作ってみるのも僕ありかなと思いますね。ちょっと僕もね、本当はできたらいいんだけどね、なんかまあこれはちょっともうちょっと時間ができたらやってみたいなっていうぐらい、やってる間結構楽しいですよ、サイト作るって感じがあってね。
なので慣れるとね、たぶん2個3個って本当に1日の中で作れるようになると思うので、ぜひ気になる方はね、やってみてください。なので今日の流れ含めてですね、ノートに書いてますので気になる方は見てみてください。
で、こういったですね、やっぱ最新情報AIとかが学べるようなね、ちょっとコミュニティを今作っておりますので、フリーランスの学校のサブスクプランというものを今作ろうとしています。
キャンプファイヤーっていうね、クラウドファンディングやるサイトがあるんですけど、そこで作ります。で、毎月毎月だいたい約3000円ぐらいのセミナー、こういった例えばAIのセミナーとかが毎月毎月最新バージョンで届きますので、届くというかみんなでライブ講義するので、毎月AIがあるかどうかちょっとわかんない。
その月のテーマによるんですけど、で、みんなで学んで、SNS学ぶ日、インスタを学ぶ日、日というか月みたいな感じで学んでいって、まあ2200円です。3000円ぐらいのセミナーから2200円払ってたらもう毎月受けられる。で、あとはアーカイブだったりとか、だいたい5万円分ぐらいの動画講義にいつでもアクセスができて、僕もいるので公開コンサルだったりとか、なんかチャットで相談乗るみたいなことができるようなね、コミュニティ。
フリーランスとか副業が続く、100年変わってない働き方を100歳まで全ての人が楽しく働いて、定年のない社会を作っていくっていうね、そういうプロジェクト型のね、ちょっとコミュニティをやりますので、ぜひですね、フリーランス組合というかフリーランスのそういった環境、インフラを自分たちでちゃんと自前で育てていくぞと。
自分たちで道を作るようなもんですよ。水道ちゃんとカンカンカンってやって、そして自分たちがそのフリーランスっていう、街の中でね、楽しく生きていく。そして100歳まで楽しく働いていく。能動的に働いていくみたいな、そんなコンセプトでやってますので、ぜひですね、ちょっとフリーランスを一人にしないっていうコンセプトがありますので、今ちょっと孤独だなって周りにそういう人がいないなって方はですね、そのキャンプファイアのコミュニティ楽しみに待ってくれると嬉しいです。
そういう反応があるとね、僕も頑張る。頑張れよ。勝手に頑張れよ、それはね。はい、なのでぜひあのポッドキャスト聞いてくれてる方もコミュニティに入ってね、一緒に僕もいつも毎日いるので、そこで切磋琢磨できると嬉しいです。ということで今日も聞いていただいてありがとうございました。この後も心地いい時間を過ごしてください。バイバイ。
