Webサイト作成の基本
どうも、AI駆動開発ラボ、大森です。
今回は、初心者向けの放送内容です。
Webサイトって、一体どうやって作るのかと、 そこにお金ってかかるんですか?みたいなことをですね、
初心者の方にも分かりやすく、大体こういうのを使って、 こういうふうに作るといいよっていうのをですね、
ご説明してみようかなと思います。
改めて、僕、大森って言うんですけど、 大体6年ぐらいWebサイト作りをやっています。
2年前ぐらいからAI駆動開発でWebサイトだけじゃなくて、 Webサービスとかスマホアプリとかゲームも作れるようになったんですよ。
そんな感じでWebサイトをずっと作ってきたので、 今までだったらこういうふうに作っていたけど、
今、この令和、AI駆動開発もできるという状態で、 どういう技術を使って、どういうサービスを使ったら一番楽だし無料だしいいのか?
みたいなことをですね、僕なりにいろいろ知見を持っているので、 それのお話をなるべく分かりやすく話してみようかなって思います。
まず結論なんですけど、Webサイトを作るのも公開するのもお金かかりません。 かからずにすることができます。
もちろんかかるやり方もあるんですけど。
ということで、どうやってお金かけずに作って公開するかなんですけど、
まず、Webサイトを作るプログラムみたいなことをする必要があります。
いろいろね、ノーコード、ローコードとかっていう、 どっかのサイトのサービスが出してて、
マウスクリックでポチポチ、この要素、この要素、 みたいな感じで作っていくっていうやり方もあるんですけど、
それだと、どんどん自分のやりたいようにやろうとすると、 ここからお金が得りますよとか、
ずっと〇〇で作りましたみたいなスカシが出るよみたいな感じで、 あまり自由度が高くないので、
今回は全部自分で作る、AI駆動開発でするっていうやり方の説明します。
で、プログラミング言語ってあるんですけど、いろいろあるんですし、 言語とかJavaScriptとかPHPとかいろいろあるんですけど、
僕的にですね、これが一番主流なんじゃないかなっていうのがあって、 Next.jsっていうのが多分一番今主流だと思います。
ウェブサイトを作るんだったら。
で、なんでこんなに主流だと思いますって言ってるかっていうと、 いろんなAI駆動開発のツールとかサービスがですね、
Next.jsとか、Next.jsの親戚のリアクトを使ってプログラムを作るよっていう風にしてるんですよ。
つまりだから、AIでなんかものづくりをするぞ、 そういうサービスを作るぞっていう人たちがこぞって使ってるプログラミング言語なので、
今一番勢いがあるし、これからもあまり伝えないんじゃねえかな、 しかもめっちゃ使いやすい、わかりやすいっていうのがあって、
Next.jsっていうのを今回使ってみたらいいと思ってます。
Next.jsっていうのがあります。
で、それを使ってどういう風に作るのか、 ざっくり簡単に言ってみると、
Next.jsのプロジェクトを作る、 Next.jsを始めるみたいなコマンドというか呪文というか文字があるんですね。
それ別にウェブ上に公開されてるんですけど、 create-next-app-at-latestとかって打つと、
にーんって頑張ってNext.jsのウェブサイトのデモ版みたいなのが出てくるんですよ。
ハローみたいな、ここから書き換えてねってします。
もうそこからはAI駆動の出番です。
AI駆動のツールに、こういうようなウェブサイトを作りたい。
例えば、日本でお菓子屋さんを始めようと思っていると、 こういう名前でこういう感じで、
画像素材とかこういう風に用意したから、 何かいい感じにしてって言うと、
アーダーコーダーやって、 じゃあ商品の一覧のページ作りましたよとか、
アクセスのページ作りましたよとかっていうのを AIがうまいことやってくれます。
Webサイトの公開
うまいことやれたとして、ここからもどうやって公開するかなんですけど、
二つのサービスを使います。
一つがGitHub、もう一つがBarcel、 この二つのサービスを使います。
どっちも無料で使えます。
まず、どうにかAI駆動開発でお菓子屋さんのウェブサイトができましたよとなったら、
それをエンジニア版のGoogleドライブみたいなところに保存するんですよ。
エンジニアの人が自分が書いたプログラム、 ソースコードって言うんですけど、
それを登録できるんですね。
もちろん公開にしてもいいし、非公開にしてもいい。
僕は非公開にして多分200ぐらい登録してます。
そこに登録します。
無料でアカウントを作って、それに登録します。
ひも付けますみたいなことをすると登録します。
それでウェブ上からあなたが作ったウェブサイトのプログラムが見れるようになりました。
もう一つサービスが登場してきます。
Barcel、V-E-R-C-E-L、Barcelっていうのがあります。
これ、今結構ウェブサイトを公開するんだったらこれ使うよねっていうような感じなんですけど、
このサービスのコンセプトがいろいろとめんどくさい設定とかあるけど、
そういうのなしでワンボタンでウェブに公開できるようにしようぜみたいな感じなんですね。
簡単にしようっていう感じのやつです。
僕がこれ知ったのも2年前とかなんですけどめちゃめちゃ感動したんですけど、
バーセルのアカウントを無料で作って、
GitHubっていうさっきのエンジニア版のGoogleドライブみたいなところとは連携して、
連携したら見れるんですよ。
お菓子屋さんのウェブサイト作ってるよねって。
じゃあバーセルさんにこれ公開してくださいっていうボタンを押すと、
ちょっと解析して、解析し終わったらウェブ上に公開されます。
ここまで全部無料です。
GitHubっていうのもプログラムを保存する先いくつかあるんですけど、
GitHubは一興だと思ってます。
バーセルもかなり一興、Next.jsもかなり一興な感じです。
バーセルさんにお願いしますって言ったら、
なんとかなんとかお菓子屋さん-バーセル.comみたいな、
これバーセルさんの名前がくっついちゃうんですけど、
バーセルっていう名前がくっついた状態で、
自分が作ったものがウェブ上に公開されます。
友達に見せてもいいし、お客さんに見せてもいいし、
もう一つのウェブサイト完成です。
ここまで全くお金がかかってません。
ここからはウェブ上に公開されることが分かったから、
AI駆動開発でもっとサイトをいい感じにしようとか、
こういう情報付けようってして、
そういうのをしたら保存して、
またGoogleドライブみたいなのを保存して、
保存したら勝手にバーセルさんが変えたねってして、
設定で変えられるんですけど、
変えてプログラム変えたねってしたら、
バーセルさんがいいよいいよって言って、
またウィーンって解析するねって解析してくれて、
勝手に変わってるっていう。
そこもこのスムーズなやりとりも無料なんですよ。
めちゃめちゃアクセスが増えたとか、
Webサイト作成の基本
めちゃめちゃ1日に何十回も更新するとかしてると、
バーセルさんちょっと有料になっちゃうんですけど、
僕いろいろサービスとかサイトもしてますけど、
アクセスがある程度あったりするのもあるんですけど、
あんまり有料にならない。
かなり懐が広いです。
めちゃめちゃいい。めちゃめちゃいいですね。
でもURLが私の店だったら、
私の店.comがいいよって方はですね、
ドメインって言うんですけど、
いろいろ買えるとこがあるんですけど、
ムームードメインってところで買ってるんですけど、
年額でも900円。すぐ安いんですよ。
安いんですけど、安いからポチって購入ってして、
バーセルさんにさっきのお菓子屋さんのホームページ、
このURLにしたいですよっていうふうなことをすると、
もう本当に簡単なんですけど、
URLですのホームページが見えるっていう。
ここまで全然ビジュアル的なものを見せずに、
口頭だけで話してみたんですけど、
なんとなく簡単そうに聞こえましたかね。
簡単です。
簡単そうに聞こえたなら、その通りで簡単です。
とはいえね、やったことないってなると、
すごくやっぱり一個ハードルが高くなるので、
今度なんか僕がその動画等でね、こういうふうにやりますよ。
ぴょぴょってやってみれたらなと思うんですけど、とにかく簡単です。
ウェブサイト、ぜひ1回自分で作ってみる。
自分のポートフォリオでもいいし。
みたいなの作ってみれると、
そこにこれから作ったものを入れようでもいいし、
ウェブサイト作りのお仕事って全然あると思うんですよ。
ココナラとかランサーズとかそういうのは低手数多だと思うので、
その単純に副業の口として一つ増えたりしていいんじゃないかなと思います。
ぜひこの話を聞いて、
なんかできそうな気がするなと思ったら、
まずNext.jsって調べたら説明書が出てくるんで、
説明書の最初、これを打ったらNext.jsが立ち上がるよってのがある。
それをしていただいたらそこからはもう、
どうぞどうぞAI駆動していただいて、
できたらGitHubとバーセルだけ覚えてくれれば、
GitHubだのバーセルなのでウェブサイトが公開できるって聞いたんだけどさ、
丁寧に聞いてもらったら多分すごく丁寧に教えてくれるんで、
あとはもう自分でああでもこうでもできるぜっていうような感じのことを思ってます。
AI駆動開発の楽しさ
今回はAI駆動開発ラボの開発にちょっと近い領域の話でしたけども、
AI駆動開発、AIを使って何かを開発するウェブサイトとかウェブサービスとか、
スマホアプリとかゲームとかっていうのをですね、
僕自身がプログラムっていうのが難しくて全然できなかったんですけど、
この2年間くらいかな、いろいろAIといろいろ頑張ってAI駆動頑張っていったら、
今すごくめちゃめちゃ早くめちゃめちゃいいものが、
何でもウェブサイトでもスマホアプリでもウェブサービスでもゲームでも作れるようになって、
超楽しいっていう感じなのでですね、
なるべくわかりやすいように、
エンジニアじゃないからもともとわかるんですよ、
難しい言葉使われるとウッってなるんですけど、
なるべくならないようにですね、
楽しそうやんって思ってもらえるようなお話をしていくっていう放送がこれ、
AI駆動開発ラボです。
今回はウェブサイトの作り方、どういう風に作るんだってお話しましたけど、
またね、スマホアプリはどうしたらいいんですかとか、
ウェブサービス、サーバーだとかデータベースがあるやつどうなんですか、
みたいなお話もですね、なるべく簡単にお話できたらなと思いますので、
そういうことに興味がある方いらっしゃいましたら、
ぜひぜひチャンネル登録、放送登録等してください。
この放送はですね、スタンドFMっていうポッドキャストアプリを
Hubに各種ポッドキャストのプラットフォームに
RSSで配信されております。
さらにYouTubeの方にもですね、
AI駆動開発ラボというYouTubeのチャンネルやってます。
そちらの方でもポッドキャストとして配信されてます。
YouTubeの方ではですね、このポッドキャストだけじゃなくて、
動画としてハッカソンに参加しましたよとか、
なんかそのAI駆動で面白いゲーム作ってみるよみたいな動画とか、
あとショート動画ではチャットGPTを作っている会社さんが最近出した
マジヤバ動画生成AIで作った動画をいろいろ出したり何たりしてみてます。
もうすぐチャンネル登録者数が1000人いきそうです。
ということでね、興味ある方いらっしゃいましたら、
ぜひYouTubeの方もチャンネル登録してくれるとありがたいです。
また今回の放送良かったよとか、ためになったよって方いらっしゃいましたら、
ぜひいいね・高評価をいただけると思われている以上の多分100倍ぐらい嬉しいです。
また今回の話でも何でも分からないよとか、
どうしてに使うみたいなことがありましたら、
ぜひコメントいただければ何でもお答えしたいと思います。
ということで、ここまでご清聴いただきどうもありがとうございました。
AI駆動開発ラボ大森でした。
それではまた次回の放送でお会いしましょう。
またね。
