【衝撃】Claude Design × gpt image 2で外注で100万レベルのWebサイトを作成する様子を日本一わかりやすく実演解説します!【AI活用】 transcript

このAIでエンジニアの仕事は変わります 。外注すると200万以上かかるプロ品質 のウェブサイトをAIを使ってわずか数 時間で作れるとしたらどうですか?どうも Webブ業界14年AIプログラミング スクールシード代表権エジアの生徒です。 今回はクロードデザイン、クロードコード 、チャatGPTの連携でプロ使用の ウェブサイトを作る方法をご紹介します。 実際に僕は自分でコーディングする他AI でウェブサイトやアプリを作っていて こんなLPやこんなブログサイトを作って 運用しています。今回紹介する方法は再現 性が高く公開までできて実際のビジネスで 運用できるものです。そして実際AIで 今回作成したウェブサイトはこんな感じ。 なかなかいいクオリティだと思います。 しかもかかる費用はわずか20ドル。是非 最後までご覧ください。先に結論だけ言い ます。AIでクオリティの高い ウェブサイトを作るに大事なのは ディレクション力です。実際のWEWeb 制作会社ではWebディレクターが企画、 設計進捗管理を行いデザイナーや エンジニアに指示を出してウェブサイトを 作っていきます。AIを使う場合も同じで 、AIに的確に指示を出して ディレクションができればいいサイトが 作れます。僕はエンジニアですが、以前の 職場では業界ではまあまあ有名な会社で ウェブディレクションを行っていました。 受中していたウェブサイトは単価最低でも 100万円以上。今日はそこで培った ノーハウを活用してAIをディレクション していきます。かなり大量のプロンプトを 使うので皆さんがいざ作ろうと実践した時 にコピフできないと結構しんどいと思い ます。というわけでどのタイミングでどの シールを出せばいいかをまとめたチート シートを作りました。欲しい方は概要欄 からシード公式のLINEに登録いただい てメッセージでWeb制作とメッセージを 送ってください。無料でダウンロード用の リンクが送られてきます。では次の賞から 実際に画面を映しながらウェブサイトを 作成する様子をお見せします。 はい。じゃあまず最初のステップなんです けども、クロードデザインを開いての前に ですね、よいしょ。やることがありまして 、それ何かと言うと、これから作りたい ウェブサイトのデザインですね。どんな デザインがいいのか。参考となるサイト、 3ピックアップしていただきたいです。 実際に人間のデザイナーさんに依頼する時 も、ま、どんなウェブサイト作りたい かって参考サイトとなるデザインをですね 、ま、2ピックアップするっていうのは、 ま、よくやる、え、手法でございます。で 、どうやってピックアップするかって言う と、例えばこのムーオルブとか、え、 Webデザインクリップとか、あとは参考 デザイン[音楽]とかですね。はい。こう いう風にウェブサイトのデザインまとめて くれてるサイトたくさんありますので、 こういうとこからピックアップ[音楽]し ます。もね、結構大体はしてくれてるので 、え、ま、例えば唐揚けトンマで行くか、 え、あるいはこういった[音楽]、ま、 雰囲気でゴライズするか、ま、色々あるん ですけども、こういった、え、カテゴリー から、え、ピックアップして、え、例えば 今回だったらブラックって言うと、はい、 ま、この辺からちょっとピックアップし てくみたいな感じですね。ピックアップ する時にいくつかポイントがあるんです けども、1つがまず、え、2すぎると さすがに著作権的に問題が出てきます。 はい。丸パクいいじゃねえかって1目で 分かるのはNGすぎないように、ま、2つ から3つのサイトを参考にします。で、 その間を取るって感じですね。ただ、ま、 あまりに遠すぎるデザインのサイト ピックアップするとこれはね、あのAI君 も混乱しちゃうので、なるべく似たような トンマナのサイトを23ピックアップする のが良いです。それから、ま、同じ業界と か類事企業のサイトはなるべく避けた方が いいかと思います。ま、そうすることで 丸パくりになっちゃうリスクっていうのが 回避しやすいかなと[音楽]いうとこです ね。で、ウェブサイトピックアップしたら ですね、スクリーンショットいくつか、え 、撮って欲しいです。具体的にはまず、え 、ヒーローイメージ23枚。ヒーロー イメー[音楽]ジっていうのはこういった ウェブサイトの最初のここですね。ま、 ファーストビューとも言ったりしますけど も、ま、顔になる部分、ここのスクショを 、ま、こんな感じで取るっていうのを [音楽]、ま、参考サイト23であれば 23枚まず取ります。で、それから、え、 次はメインとなるウェブサイト。例えば これをメインにしようと思ったら、え、 この下のセクションとかですね、トップ ページの、え、スクショ何枚か取りますと 、こういった部分とか、ま、こういった 部分とか、それから仮想ページの スクリーンショットも、ま、トップと 真ん中あたりとかで何枚か取ってください 。これをPCとスマホ両方で、え、取り ます。ま、なので今PC版でこうスクショ 取りましたけど、こうよとはい。ま、 こんな感じスクショ、スマホ版の思いをし てあげる。具体例をお見せすると今回僕は ですね、ま、うちの会社のエコポレト サイトを、ま、黒系で、え、作りたいなと 思いますので、え、そんな感じでちょっと 黒系のウェブサイト3つピックアップ [音楽]してですね。はい。こんな感じで ヒーローイメージ3つちょっと撮ってみ ました。で、それからパソコン版の、え、 トップページのスクショが、ま、こんな 感じで取らせてもらって、仮想ページの スクショ、こんな感じで[音楽]取らせて もらっております。で、スマホ版も同様 ですね。はい。こんな感じ。続いて デザインのガイドラインを作っていきます 。2本見せするとこんな感じなんですけど 、こんな感じでマークダウンで記述して ですね、ま、トンマだったり配色だったり ポントだったり、え、スペースだったり レイアウトのルールとかをブわと書くもの [音楽]になります。で、ただこれね、 01で作んのめちゃくちゃ大変なのでAI 君に作ってもらいましょう。使うAI何で もいいんですけど、今回クロードコードと クロードデザインが主軸なので、ま、 クロード君に作ってもらおうと思います。 そしたらですね、必要なプロンプトがある んです[音楽]けども、はい。ま、こんな 感じでウェブサイトで使うための、え、 デザインMD作ってください。っていう プロンプトとで、あと添付するものがいく つかあるんですけど、まずは、え、先ほど 撮ったスクリーンショットのPC版の メインとなるサイトのトップページの スクショ何枚かですね。ま、今回は ちょっと日産さんのサイトですね。 ちょっとスクショ取らせてもらったので これをはい、貼ります。あとは、え、 先ほどお見せしたデザインMDのテンプレ ですね。はい。これもあります。ま、これ ね、あの、LINE特定に含めてので、 よかったら使ってください[音楽]。で、 これでポチっと押します。ちなみにですね 、あのデザインMDジェネレーターみたい なサイトっていくつかあって、ま、こんな ことしなくてもですね、URLをポンと 入力してボタンポチるだけでデザイン無理 出力してくれ[音楽]るっていうのがね、 あるんですけども、ただそういうサイトっ て大体英語で必要されたりとか、ま、 ちょっと余計な情報がいっぱい入ってる ものもね、多かったりするので、こういっ たやり方多分確実かなと思います。 [音楽]はい。で、しばらく経ったら こんな感じでデザインMD作っていただき ました。なんですけど、ここで終わりでは なくてさらにアップデートを加えます。 って何かと言うと、え、先ほど用意した スクリーンショットですね。これの、え、 今度仮想ページ。これもね、あの、 スクリーンショット撮ってもらったかと 思うんですけども、[音楽]こいつをペッ 貼って追加のリクエストです。仮想ページ の、[音楽]え、スクリーンショットも、 え、添付しますので、これを踏まえて必要 に応じてデザインMDをアップデートして ください。こんな感じで。よいしょ。 さらにデザインMDをアップデートして もらいます。 はい。で、ここでアップデートが終わり ました。で、最後ね、ごめんなさい。もう 1個ねの、1手間あります。で、何かって 言うと、今度はスマホのデザインですね。 はい。え、これも添付してあげまして、 最後にスマートフォンのデザインの スクリーンショットも添付するので、これ を踏まえて必要に応じてデザインmムda をアップデートしてください。はい、これ でもう1回更新してもらいます。で、これ で最後です。ポイントは1度にたくさんの デドを渡しすぎるとAも混乱してなんか 法則性が分かんないよってなっちゃうので 、まずこれ、次これ、それで最後これって いう風に、ま、3つぐらいにね、分けて、 え、送っ[音楽]てあげるとより精度の 高いデザインmができます。 はい。で、デザインがね、できましたので 、これダウンロードしたいと思います。 こんな感じでざっと中身見て問題ないから ね、確認するといいかなと思うんですけど 、[音楽]オムネね、ちゃんとできてるん じゃないかなと思います。というわけで デザインMDはね、これを使っていき ましょう。ちなみにデザインMDを用意 する手段って他にもいくつかありまして、 例えばAソムJPですね。この リポジトリーなんかは結構有名度この日本 語のサイトのデザインをこうまとめてくれ てたりとか、あとは例えばこれですね、 えっと、デザインMDのジェネレーターっ ていうやつがあるんですけど、これURL 入れるとですね、デザイン出力してくれ たりします。ま、ちょっとね、海外サイト にしか対応してないみたいなんで、ま、 こういったAppleとかストライプとか ですね、有名のやつなんかは一通りあるん ですけど、ま、こういったね、はい、 ところを活用するのもありかなと思います 。続いてはですね、コンテンツMDという ものを作ります。これ何かと言うと、皆 さんがこれから作るウェブサイトのページ にどんなテキストをどんな構成で載せる かっていう情報をまとめたマークダウン ファイルになります。あとテンプレをお 見せするとこんな感じの[音楽]ものに なってまして、実際に僕が値を入れたもの がこちらになります。これをね、1から 作るのめんどくさいと思うんですけど、ま 、何も情報がない人は手で書いてもらう しかないんですけど、何かウェブサイトに 載せるための情報を既でに持ってる方、 例えば、え、ま、PDFの資料でも、ま、 ウェブサイトのリニューアルだったら急 サイトの、え、URLでもいいので、ま、 それとセットでAIに投げると作ってくれ ます。このテンプレもですね、ま、 LINEの特定に置いときますので、 よかったら使ってもらえたらと思うんです けども、どんな風にやるかっていううと、 こんな感じでですね。はい、これを [音楽]よいしょ。もっと貼ってあげて プロンプトとしてはい。こんな感じでこの 資料から混んで作ってくださいみたいな。 はい。で、あと[音楽]は添付するPDF なり、ウェブサイトのUなりをセットで 貼って入力するという形でコンテを作って みてください。 はい。じゃあお疲れ様でした。ようやくね 、え、素材が揃えましたんで、こっから 黒ドにデザイン作ってもらいます。という わけで、まずは黒ドデザインにアクセスし たらですね、え、このメニューがいくつか あるんですけど、プロトタイプを選択して ください。で、そうするとプロンプトの ところに、え、このプロトタイプってのが 追加されます。プロトに何入力するかなん ですけど[音楽]も。よいしょ。はい。 こんな感じのプロプトを使います。え、 まずプロのウェブデザイナーとしてサイト を作成してください。で、これは、ま、何 のサイト作るかによるんですけど、今回は LPでは[音楽]なく複数ページの コンポレートサイトでいきたいと思います んで、こうですね、今回はトップページ 1度にね、色々やらせちゃうとパンクし ちゃうんで、まずはトップページ[音楽] のみと。で、見比べたいので、まずは3案 作成してくださいと。はい。ここも ポイントで、え、いきなりですね、バーっ と1枚作ってもらうより3案作ってもら うっていう風にする方がより精度が高い です。で、参考データとして、え、 コンテンツ[音楽]MDとデザインMDを 、え、添付します。先ほど作成したこの2 つのファイル[音楽]を添付しますと。 それからまたトンマナの参考イメージとし て3つの参考性トップページのファースト のスクショも送ります。ヒーロ1[音楽] から3ということで、1番最初にですね、 用意した、え、このヒーロー異なるサイト ですね。[音楽]はい。3つ3。これを 添付します。3の内容なんですけども、 ただ3作ってくれるはなくて、[音楽] ここですね、デザイン優勢でシンプル料理 。うん。で、コンテンツMDの方をかなり 優先してくださいっていうのと、え、逆 ですね。ま、え、コンテンツMDのない テキスト[音楽]優先で必ずあの省略とか しないでこれ入れてくださいねってやつ。 それと、え、その間中間[音楽]デザイン 優勢すんのかコンテンツ優勢すんのかあ いうので3案作ってもらうって[音楽] いう感じですね。で、まずはページ全体の 上位50%だけ作成してください。もっと も今残して残りをしてあげてもらいます。 ということで、で、これも実際人間の デザイナーさんに依頼する時の、ま、 ベストなやり方なんですけども、いきなり こう酸っぱしってもらうんではなくて、 まずはファーストビューだけ作ってもらう で、3案ぐらい作っ[音楽]てもらって、 え、いいものを残してそっから作り込んで くっていう過程がね、いいですと。で、 さらにですね、スキルをいくつか追加して ます。ここからですね、選んでもらって やって欲しいのがまずフロントエンド デザイン。これはデザインからAIポサを なくすっていう[音楽]スキルですね。え 、それからインタラクティブプロトタイプ 。はい。これ入れると、ま、 インタラクティブな、ま、 JavaScriptとかもね、入れて くれます。それから、えっと、ワイヤー フレイム。これも入れておくとより ウェブサイトぽくなってくるということ ですね。で、モデルは、ま、なるべくね、 いいものを選びましょう。え、今僕撮影 期間ではね、ファブルが使えるんですけど も、これやっちゃうとなんかちょっとチー トっぽくなっちゃうかなと。皆さんが見 てる頃にはね、ファブル使えなくなってる かもしれないので、ちょっとオパス4.8 でね[音楽]、行ってみようと思います。 よいしょ。 はい、というわけで3案ね、作ってもらい ました。うん。まだね、この状態だと正直 微妙です。なので、とりあえずね、1個 だけ残してそれをブラッシアップしていき ます。比較的これが1番いいかなと思うん で、こいつを残していきたいと思い [音楽]ます。フィードバックなんです けども、え、部分的に直す場合はですね、 ま、コメントまたはエディット機能って いうの使っていくことができます。 エディットは何かって言うと、あんまりね 、できること多くないんですけども、ま、 寿司って言うとテキスト変えたい時とか うん。は結構使えますね。うん。 [咳払い] ビッグバグスみたいな感じでなんか他はね 、こう色々パラメーターあるんですけど、 他正直ちょっと使いづらくて、ま、で フォントのサイズ変えるとかな。うん。 あんまりね、やれること少ないんですけど も、テキストいじるだけだったらオッケー ですと。それができたらこれセーブして あげて、部分的に修正指示したい時が コメント機能ってのがあるんで、これで 例えばこの辺ですね、ロゴのこの色が気に 食わないのでロゴの色は白にするとはい。 いう風にアドコ[音楽]メントってして あげると、とりあえず1個追加されました と。あとは、えっと、この辺の、え、光 ですね。光、 光の エフェクトも白色[音楽]に、この テキストは削はで、コメント追加していき ます。これで、え、まとめてチェック [音楽]してあげて鮮度っていう風にして あげると、これ一気に修正してくれます。 で、これをちょこちょこ繰り返していて、 とりあえず、え、100点のヒーロー イメージを作るってところまで持っていき たいと思います。え、ちなみにモデル Favroを使った場合の必要結果が こちらです。さすがにね、やっぱいいです ね。クオリティが断違いというか。はい。 グラフィック表現がね、素晴らしいです。 これが1目で、え、2目がこれね、 ちゃんとクリックしたりとかマウス オーバーでも追従してくるようなすごい 表現をしてくれておりますと。で、3案目 がこれですね。これもすごい。これを 踏まえてファーストビュー作る際の、え、 ポイント2つあるかなと思ってまして、1 つはやっぱりなるべく、え、いいモデル 使った方がいいなっていうところです。 もしね、この動画ご覧になってる時に皆 さんがファブル、あの、気軽に使えない 状況かもしれないですけども、少なくとも このファーストビュー作るタイミングだけ では最高モデルのものを使用すると、ここ 1番難易度高いところですけど、1番ね、 重要な部分でもありますんで、ま、モデル 1番いいものを使って、で、それが決まっ たらそれ以降はあのモデルを下げて、え、 利用するって形が取れると多分1番いい ですね。それからもう1つ目は2回は必ず 修正させることっていうのが大事です。 実際ファブルで出力させた時も1目はあの あんまり良くなかったんですよ。ま、3 アトもいまいだよっていうことで結構具体 的にここがダ目っていうフィードバックを したん[音楽]ですね。で、2回目 やり直させた場合にこういう風に、ま、 大幅にですね、改善してくれたっていうの がありますので、いいモデルを使って2回 をやり直させるっていうのが踏まえると すごくいいクオリティのものが出来上がる と思いますんで、是非試してみてください 。はい。で、修正繰り返してね、ここまで 持ってくことはできました。で、このあっ たトップページの残りの下の部分ですね、 [音楽]え、作ってもらいたいと思います 。ちょっとね、あの、やりすぎるとこんな 感じで、ま、トクンかなり使っちゃってる から新しくチャット開き直した方がいいよ みたいなメッセージ出ること[音楽]あり ます。人段落してればね、新しいチャット にするのもで問題ないので、新しくね、え 、チャット[音楽]開き直してから、え、 やっていこうと思います。で、そうしまし たら案1のトップページ[音楽]の、え、 残りの部分を作成してください。はい。と いう風にしてあげます。ちょっとね、あの 、スキルをもう1回足さないとリセットさ れちゃってるので[音楽]めんどくさいん ですけど、え、ワイヤーフレームと フロントエンドデザイン[音楽]とあとは インタラクティブプロトタイプ。この3つ はですね、もう1回設定した上でもう1回 先度送ります。はい、というわけでトップ ページの、え、残り全部ね、作ってもらえ ました。ま、ちょっと全然いまいのところ あるんで修正はしていきたいんですけども 、え、それはおいおいやるとして、え、 先ほどのコンテンツMDのところにですね 、ま、画像を入れるみたいなところを書い てあるとこんな感じで、え、とりあえず プレSホルダーで作ってもらってます。で 、これクリックするとですね、もう画像を ここに差し込むことができるんですよね。 [音楽]すでになんか持ってる画像があれ ば、ま、これをそのままベッド貼って あげると、ま、こんな感じではまり [音楽]ます。で、逆にですね、ま、素材 がないよこの辺作りたいよっていう場合は 画像ないので、え、はめる必要[音楽]が ありますと。で、その場合はですね、ま、 おすすめの方法としては、ま、チャAT GPTで、ま、イメージでですね、え、 作成するという方法[音楽]なんですけど も、その場合に例えば はい。で、このプロンプトで画像作って もらうと思うんですけど、ただですね、 あの、参考画像入れるってのは結構 ポイントで、それがないと期待値通りに なんなかったりします。ま、じゃ、参考の 画像なんですけども、オーダンっていう サイトで使うと、ま、写真系であれば結構 あのフリーの、え、画像ので、この辺から ですね、引っ張っ[音楽]てきて例えば こんな感じのはい。ま、これちょっと使わ せてもらいましょうかね。で、これを [音楽]使いますとプロンプ追加しました 。え、まず実写かイラストなのかっての 付け加えてあげるのと、あとは人物入れる 場合は飛車のみにし[音楽]てくださいと いう風に加えました。この状態でポチっと 送ります。はい。で、それなりに良さそう なものが4つね、できましたんで、これ ダウンロードして、[音楽]え、使わせて もらおうかなと思います。で、そしたら ダウンロードしたやつですね、ここにはめ ていこうかなと思うんですけども、これも ですね、クリックして、えっと、例えば こんな感じで、おいしょ ポチポチ[音楽]と はい。こんな感じでね、画像をはめました 。似たような写真ばっかなんで、ちょっと 変えたいですけど、ま、一旦ね、あの、 このまま行きたいと思います。はい、と いうわけで、こんな感じでトップ[音楽] ページね、出来上がってきました。ま、 ちょっと修正の指示をね、何回か重ねたん ですけども、だいぶね、え、いい感じに なったので、え、トップページこれでね、 行きたいと思います。ま、特にポイントと してはヒーローイメージ。ま、ここがね、 1番重要なんですけども、ま、背景に、ま 、今回あのWEBGでの表現を入れてる [音楽]んですけど、ま、そんな感じで WebGLで、え、こういう表現してとか 、ま、あと動画入れる場合だったら動画 用意しといて、え、裏側で動画を流すと かってやると結構見栄がね、良くなります 。この調子で次は仮想ページも作って もらいたいんですけども、その際にですね 、いきなり仮想ページ残り全部作って もらうとまた事故るかもしれないので、 方向性をずらさないためには一旦ね、1 ページにだけ作ってもらうと思います。 はい。こんな感じでプロンプト入力して スキル追加してポチっとまたリクエスト 送ります。はい、というわけで仮想ページ ね、作られました。こんな感じで、ま、 だいぶね、え、いい感じでございます。 複数のページ作るとですね、こんな感じで ページ分かれます。ま、トップページもね 、消えたわけではなくて、こう[音楽] やっていつでも、え、戻ることができるの で、え、そこはね、心配しなくていいかな と思うんですけど、ま、こんな感じで仮想 ページ[音楽]もできたので、これを元に 残りのページも作ってもらおうと思います 。 はい。で、仮想ページ1個できたんで、 残りは一気に全部作ってもらいます。はい 。というわけで残りの仮想ページもですね 、作ってもらいました。え、サービス ページとかあとコンタクトページとか [音楽]ですね。はい。こんな感じで 出来上がっております。 で、そしたらですね、次クロードコードに 移って[音楽]、このデザインデータを 引き継いでコーディングしてもらいたいと 思います。やり方としては右上のシェア ボタンですね。これクリックしていただい て、このタブのセドtoボタンを押して クロードコードのセ度ボタンを押してはい 、こんな画面できます。[音楽]で、 CLI使ってる方はこちらのタブで、え、 コピープロンプボタンを押して、え、入力 すればオッケーなんですけども、え、 デスクトップとかですね、Webアプリ版 の方はこちらのタブを押してもらって、え 、このボタンを押します。[音楽] ちょっと時間かかるんですけど、クロード デザインのそのままデータを引き継いだ 状態でWebの、え、クロードコード アプリが開き[音楽]ます。このままです ね、もう既でにプロンプトが入力された 状態でスタートします。これがですね、え 、デスクトップアプリの方にもこう同機さ [音楽]れて、今こっちでもね、動いて くれてるので、え、この状態でしばらくね 、完了するのを待ちます。はい。で、途中 ね、技術何使うかっていう質問[音楽]が 来ましたけども、今回はね、性的な ウェブサイトでシンプルなやつでいきたい んで、プレンHTMLCS、これを、え、 選択します。で、それからですね、えっと 、画像どうしますかっていう質問なんです けども、え、プレスフォルダーのまま キープするか、え、リアルのデータ持っ てるんだったらそっち使えますけどって話 なんですけど、ま、一旦これプレース ホルダーでいきたいと思います。ちなみに 補足なんですけども、え、これ英語でね、 やり取りしてますけど、最初のプロンプト が英語なんでこうなっちゃってますけど、 別にこの後ね、日本語でやり取りしても 問題ありませんというところと、この コーディング自体ですね、結構時間かかり ます。どんなものやるかにもよるんです けども、大体30分とかでね、かかる場合 ありますので、気長にその間ね、待って ください。はい。で、コーディングがね、 ちゃに終わったみたいです。とりあえず トップページだけと思ったんですけどね、 全部作ってくれたみたいですね。で、1個 注意なんですけども、これZPでください という風に命令ね、え、してください。 じゃないとね、あの、クラウド上で 出来上がった後だけ言って、ま、データ どこにあるねんっていう状態になっ [音楽]ちゃうので、ま、こういった形で ZPでくださいっていう風にするとこう やって、あの、ダウンロードできるように なりますので、これでもらえます。そう するとこんな感じのZIPファイルが、え 、ありますので出てきたんで[音楽]、え 、展開すると、ま、コーディングデータ 意識入ってます。で、そしたらこの後です ね、ま、セッション新しく始めまして、今 ダウンロードしてき、こいつをアニーの ところに置き[音楽]たいので、ちょっと ダウンロードホルダーだと微妙なので、 ちょ、デスクトップに移しますね。で、 名前もちょ、ま、吉ナにしてもらえたいと 思うんで、じゃ、マイ[音楽]サイトと いう風にしましょうか。新しくクラウド コードではい、マイサイトを読み込ん でいきます。で、まだね、あの、 コーディング完全に終わったわけじゃない で、こっからね、さらにやっていきたい ところなんですけども、まずいくつか入れ てもらいたいプラグインとかスキルMCP があります。なので、これカスタマイズ クリックしていただいて、ここからですね 、プラスボタンを押して、[音楽]ま、 参照とかできるかな。はい。ここから入れ ていただきたいと思います。で、1つ目が まず1番上に来てます[音楽]けど、これ アウソロピックのフロントエンドデザイン 。はい。これね、インストールして ください。僕すでに入ってるんで、あの、 [音楽]出てこないんですけど、皆さん、 まだ入ってなかったらインストールって いう風になってるかなと思います。これは デザインをコーディングする際にAIポサ をなくすっていうためのものです。で、 それから、え、パートナーでプレイライト という風に[音楽]打つとこれ出てくるん ですけど、これはブラウザー操作するため のプラグインですね。テストとかデバック する際に有効なので、是非これも入れ [音楽]といてください。それから Netorifyというですね、MCP。 これコネクターの、え、アンソロピックの パートナーっていうとこです[音楽]けど 、え、これ使います。この後ウェブサイト デプロイしてホスティングして公開するっ ていうのやりたいんですけど、その時に 使うやつです。で、それからですね、 できれば入れておきたいやつがもう2つ ありまして、え、1つがこちらGPという ライブラリーのMCPです。こいつはです ね、ま、パララックスとかスクロール アニメーションとかそういうリッチな エフェクト使える時に使うライブラリーの MCPなんですけども、これですね、 インスにコマンドが必要です。なのでこれ コピーしていただい[音楽]て、ま、 CLI操作できる人はそのままやって もらってもいいんですけど、チャットで 入力してもいけるはずなんでやってみ ましょう。はい[音楽]。で、クロードに 、え、これですね、許可しますか点の出て きましたんで、え、許可しておきます。 はい。無事にね、設定ができました。 [鼻息]それからもう1個ですね。はい、 こちら、え、UIUProMaxっていう のを入れておきたいと[音楽]思います。 これはですね、例えばサソのウェブサイト だったらこういう見せ方が大体いいよねと か、美容サロンのウェブサイトだったら 大体こういう友が正解だよねとか、ま、 そういったですね、UIとかUXのベスト なパターンを知り尽くしてるスキルって いうことで、ま、これ入れておくとデータ コーディングする際にも結構便利です。 こいつの導入の仕方なんですけども、これ もコマンドが必要でございまして、これ ですね。はい。クロードコードの場合は こいつでいきます。ま、これもCLは [音楽]必要なんですけども、本来は、え 、チャットでちょっと入力してお願いし ます。はい。で、これもね、強化しとき ましょう。よいしょ。ちなみにですね、 これ入力してエンターキーを押した時に プラグでは認識されないコマンドです みたいなエラーが出る場合があるんです けど、そうなった場合はですね、こんな 感じ[音楽]でいきなりスラッシュから 始めずに入力してあげると、ま、CLI 経営で自行しますっていう風に、ま、 切り替えてくれます。フラグに入れたら 有効化するために1度再起動する必要が ありますので、一旦クロードコ閉じて もらって、もう1回、え、開きます。はい 。というわけでね、再起動したわけなん ですけども、新しいセッションだと クロード君ね、前の記憶忘れてるので、え 、このフォルダーをね、見た時に、ま、何 のこちゃが分かりませんということで、え 、冒頭に作ったファイルをですね、ここに 入れておきたいんですけども、まずはドス というフォルダー作って[音楽]あげて、 最初の方で作ったコンテンツMDと デザインMD。はい。これね、入れておき ます。クロードMDもね、必要ですので、 え、ユニット[音楽]コマンドで、えー、 かつこいつをポンと添付して[音楽]、で 、これで、え、引き継ぎがね、できるはず です。 はい。これで無事にクロドMDができたっ ぽいので、中身一応確認しますが、ま、 大丈夫そうですね。これで無事にね、 引き継ぎができました。はい。じゃ、次 ですね。スマホのコーディングまだなので それをね、やってもらおうと思います。で 、送信してしばらく待ち[音楽]ます。 はい。で、スマホのコーディングがね、 終わったみたいです。まあまあまあまあ ちょっとね、修正して欲しいところとか 画像が抜けちゃったりとかしてるんです けど、結構いい感じではあるかなと思い ますね。このメニューがおかしいな。あ、 1番上だと大丈夫ですけど。うん。 スクロールするとちょっとダメだったりと か。うん。ちょっとバギーなところがある んでね。こういうところがあったら修正を ね、依頼しましょう。で、修正の仕方なん ですけど、クロードデザインほどではない んですけど[音楽]、この辺の項目を使っ て、ま、細かく指示することができます。 例えばですね、えっと、この三角のボタン を押すとこうやってHTML単位で指示が できるので、例えばこれですね。 はい。こんな感じでテキストと共にこの 箇所だよっていうのが添付された状態で 指示をすることが、え、できます。あとは このボールペンみたいなマグですね。これ を押すとですね、こうやって指示する [音楽]ことがこうやってできます。この 状態チャットに追加でクロドデザイン みたいにこう複数一気に選択して指示する みたいできないんですけど、[音楽]1個 1個になっちゃうんですけどこういうね 指示ができるんで、これでね、 ちょこちょこ修正していきたいと思います 。 はい、というわけで一通りですね、修正 終わったんですけど、あと画像ですね、 もう1回ちょっとね、配置しなきゃいけな いってところなんですけど、1個1個ね、 指示するのめどくさいんで、こんな風に、 え、指示してみました。トップに配置する 画像だけど添付の画像使ってどの画像どこ に配置するか画像名から推測してという ことで画像名ですねこんな感じでまア ビジネス1234と[音楽]かですてま この辺だろっていうのがま分かるようにし てます。ま、これでもね、クロド君頭いい のでうん。ま、やってくれるでしょうと。 はい。というわけでね、こんな感じで画像 をちゃんと配置[音楽]してくれました。 うん。いい感じですね。ただ1個残念なの が添付できる画像がマックス5枚までなの で、ま、そこはポチポチやってくしかな いっ[音楽]ていう感じですね。はい。 じゃ、画像もはまりましてコーディング できたので、え、最後ですね、リリース前 にチェックリストなるものを用意したので 、これをね、え、実行してもらえますと。 中身お見せすると、ま、こんな感じなん ですけど、実際Proもね、大体こういう チェックリスを作ります。例えばメタ情報 ちゃんと入ってるかだったりとか、え、 アクセビリティ意識してるかみたいな ところですね。ま、これをCSVで 履き出したものを今プロポトンに添付して いるので、このままね、送りたいと思い ます。このチェックリストもね、公式 LINEで配ってるので、え、よかったら 是非ね、皆さんも活用してみてください。 ということでポチっと。 はい、というわけで一通りね、え、完了し てもらえまして、こんな感じで報告も上げ てもらえました。うん。ま、こんな感じで コーディングは一通りいいでしょう。はい 、じゃあいよいよ最後ですね、 ウェブサイトを公開したいと思います。 今回使うのNetriリフyという ホスティングサービスです。ま、皆さん もしね、使いたいサービスが各々お持ちで あればそれを使ってもらえたらと思うん ですけども、ま、Netriifyは世界 的に有名なサービスでございまして、あと はMCPサーバー持ってるのでクロードに 、え、連携するのが簡単です。これ動画の 途中でね、あの、既でにプラグに入れて もらったと思うんですけど、あれを使って いきたいと思います。で、アカウント作成 非常に簡単です。サインアップから、え、 GoogleだったりとかEメで アカウント作れるので、え、是非作ってみ て[音楽]ください。無料でもね、全然 使えますので、僕も無料プランで今回やり たいと思いますが、え、それでもでござい ません。アカウント作成が終わっていたら ですね、こんな感じでMCPを使って デプレホスティングしてくださいと。で、 ドメインもですね、カスタムドメインの 場合は、ま、お金払って契約しないといけ ないですけども、例えば bugfix.netify.com comとかでよければ、え、使えますんで 、このままいきたいと思います。よいしょ 。 はい、というわけで一通りね、デプロイが 終わったと言ってくれてます。え、fix .coop.nフアっていうところにです ね、デプロイしてくれたみたいなので、 ちょっと見てみ[音楽]たいと思うんです が結果ですね。よいしょ。はい。こんな 感じです。ちゃんとコーディングができて 公開されているとはい。いうところですね 。うん。[音楽]素晴らしいアバウトだっ たりとか、え、他のサービス定示とかもね 、ありますね。ちゃんとこれね、 レスポンシブ対応もできていて、スマホで もね、ちゃんと対応[音楽]できているの で、もうかなり、え、歴としてはよろしい んじゃないでしょうか。一応ライトハウス 使ってですね、ま、ページのスピードとか パフォーマンスのちょっと見てみたいな [音楽]と思うんですけど。 はい。だいぶね、パフォーマンスも良さ そうです。ま、WebGL使ってるんで 結構ね、重いかなと思ったんですけども、 ま、いい感じですね。このライトハウスっ ていうのはGoogleChromeの デベロッパパツールにあるやつで使うと ウェブサイトのパフォーマンスとかSEO 的に問題ないかみたいなチェックし [音楽]てくれるやつなんで是非ねこれも 活用してもらえといいかなと思います。 はい。ちなみに補足なんですけども今回 ブログページは実装してないです。うん。 これねやろうと思うとかなり、え、バック エンドゴリゴリに自装しなきゃいけないの で、ま、ちょっとね、時間が、え、今回 よりもだいぶかかってしまいます。ただ ですね、お問い合わせフォーム、これの 実装は最近だとノーコード使えば結構簡単 にできます。これ一例なんですけども、 例えば時空っていうサービスありまして、 これだと月額ただからね、使えたりもする んですけども、こんな感じで ダッシュボードからフォームポチポチ作っ ていて、で、最後ね、コードコピーするっ て[音楽]いう風にするとこのHTML 埋め込むだけでフォームが実装でき るっていうんで、ま、これクロードコード に投げれば実装ねできます。という感じで 皆さんも是非クロードでいい感じの ウェブサイト作ってもらえたらと思います 。今回ご紹介したLINE特定も是非ご 活用ください。公式Lでは他にも電子書籍 180日でITエンジェになる方法や LINE読者限定生成AI時代の学習法、 特別動画講義なんかを配っているので是非 登録してもらえたら幸いです。また弊社で は法人様向けにAIの顧問や研修システム 開発のどけ回っております。詳しくは概要 欄のお問い合わせフォームからお気軽にお 問い合わせください。ではまた。