ChatGPTでコード生成、Webサイトを作れるか？
Вставка
- Опубліковано 20 лип 2024
- 今回は、ChatGPTでWebサイトのHTML CSSコードを生成をお願いして、どんなサイトが出来上がるか、実際に使えるサイトなのか検証してみました😊♪
※マイク設定のミスにより、一部音声が聴きづらい点があります、すみません💦
🔗 ChatGPTサイト：openai.com/blog/chatgpt
🎥 この動画の構成 🎥
00:00 ChatGPTでWebサイトを作る
00:40 ChatGPTにアクセス・ログイン
01:05 質問をしてみる
00:50 Webサイトのコード生成をお願いしてみる
01:59 途中で生成が止まってしまった時は？
02:52 生成結果（Webサイト - 1）
03:08 より具体的にコード生成をお願いしてみる
03:31 生成結果（Webサイト - 2）
03:46 生成結果（ 画像・動画あり）
04:22 追加で、ヘッダーを追従させるコードの生成をお願いしてみる。
05:05 生成結果（ヘッダー追従機能）
05:34 使ってみて思ったこと
05:53 実用性は？
06:14 オススメの使用用途
06:38 今後の期待 その1
07:09 今後の期待 その2
🤖 その他のAI動画 🔽
❶ ChatGPTとMidjourneyで作るWEBデザイン
• ChatGPTとMidjourneyで作る、...
❷ Midjourneyで写真を元に画像生成
• 【AIツール】Midjourney - ミッ...
今ここ❸ ChatGPTでWebサイトを作れるか？
• ChatGPTでコード生成、Webサイトを作...
❹ AI化するエクセル・パワポ
• 【ChatGPT】エクセルやパワポがAI化「...
❺ AdobeのAIツール"Firefly"で出来る24のこと
• 【Adobe アドビ】AIツール「Firef...
❻ GitHub Copilotで自動コーディング
• 【自動コーディング】GitHub Copil...
❼ Adobeの画像生成AI"Firefly"ベータ版使ってみた
• Adobeの画像生成AI「Firefly -...
✅ ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
ua-cam.com/users/hirocode?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
/ hirocodeweb
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
✅ Apple Macbook Pro 16inch
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ Apple AirPods Pro
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【 デザイン 思考編 】
✅ 誰のためのデザイン？
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
#chatgpt #ai #webdevelopment
基礎知識が大切ですね
ほんとそう思います❗️❗️
canvaもテキストをイメージ変換するサードパーティソフトがありますが
🤔って感じです。 ミッドジャーニーのイメージはそれとわかってしまうのでオリジナル加工が差別化になりますね👍
おっしゃる通りどう差別化していくかが今後重要になってきそうですね😲💡
Figmaと連携させられたらめちゃくちゃ便利ですねーーー！！
これは勉強の仕方がかなり変わりそうです…
Figma連携期待して待ちたいですね😆❗️
そのアイディアいいですね、figmaのデザインコーティングに速攻反映してくれたら楽
側にスーパーエンジニアがついてくれてるような気分！笑
ほんとそうですよね❕GPT-4出てさらに性能上がってるっぽいので、時代の変化が早くてビックリです😱❗️
AIの進化凄まじいですよね。喜ばしい反面、職を失われる危機感もあり…ですね😅
ウェブデザイン少し前に学んでコードを楽しみながら書いていましたが、ヤル気が（笑）
めちゃめちゃその気持ちわかります😅
すごい時代だよ。
しみじみ時代の変化感じます❕
自分が実現したいことを忠実に言語化出来る能力だけが必要になり、コーダーの職がAIに変わりますね。
フロントエンドのあたりがどうなのか気になりますが、言語化能力に長けている方なら今の構造でいうディレクターの傘下が必要なくなるなんて事も考えられます。
ただ、完璧ではないというところから修正がメインになるんじゃないか🤔と感じました。
唯一生き残れるのはバックエンドだけのような気が…。
コメントいただきありがとうございます🙇♂️
GPT-4でさらに進化してるっぽいので単なるコーダーにとってはかなり厳しい状況になるかもしれませんね😱💦
@@hirocode
早速、Chat GPTを使ってアニメーションを実装させましたがめちゃくちゃ楽ですね！
HTML、CSS、JavaScriptの基礎知識があって理解できているならあとはエンジニアの方で若干の仕様変更をしたりとかで楽に対応できてしまうので作業効率がエグい！と感じました！
Google検索で実装法が分からず検索して理解出来るコードを探すより、Chat GPTで達成したい動きを具体的に言語化して入力した方が早いんじゃないか！？って感じてます。
デザインカンプからのコーディングが自動でできる日も近いのかもしれませんね。
なんか本当にそんな感じがしますよね🤔
python の勉強してますが、指示すれば、一瞬でコードを書いてくれるので、もう勉強するのやめようかなと思ってます、、、
これプログラミング学習中でやる気削がれてる人結構いそうですね😥
もうエンジニア目指すのやめようかな。
最近GPT-4がでると進化のスピードが早くてこのままいくとSEの仕事とか無くなりますよね😅
システムエンジニアになりたかったけど、機械設計目指そうかな、、、
こんなに早くGPT-4出てきて精度含め処理性能かなり上がってるみたいなので影響は出てきそうですね😱 ただサイトやアプリなど管理するにはある程度の知識は必要だと思うので、働き方が変わるって感じがしています❕
今のうちにできるだけ経験積んでマネージャーかコンサルになれば問題ないと思いますよ。すごいコーダーでもないのにコーディング書き続ける必要はないと思います。コーディングや設計などは下っ端に任せておけばいいです。
生成結果はどうみるのですか？
プロンプトを工夫して、任意の同じサイト構成で作成することは出来る。
プロンプトエンジニアリングを制した人が輝く時代やね。
時代の変化に伴って学習すべきことも全然変わってきますね🤔
画像生成とコード生成の違いはバグをどれだけ許容できるかにあると感じてます。
画像生成では手などの細部が不自然に生成されるのがよく見受けられますが、「まあええか」とある程度許容されてるように感じます。
一方、生成されたコードの場合、許容されるハードルがグッと上がる気がしています。一つでもバグが混入してしまうと、製品としては致命的になりかねません。そのため、コード生成にChatGPTなどを使うにしろ、コードの品質担保のため、プログラマーは必要だと思います。
全く同感です❗️特に、大規模なプロジェクになるに応じて、コードを管理できる人は必ず必要になるかと思います。根本的なエラーも勝手に解決してくれるレベルにAIがならない限りは、コード読める人の需要は無くならない気がしています💡ただ、AIの進歩がすごいので、その辺も淘汰されないとは言い切れないので少し怖いですが...😱
そもそもプログラマーってコード書くよりそれ以外の作業量が圧倒的に多い。
別にGPT以前にコードなんて、以前のがらくたから引っ張ってこれば、幾らでも調達できるし、フリーなら生成以前にスクリプトキディした方がずっと、良質なコードが手に入る。
有難うございました❣️(^.^)
ありがとうございます🤗♪
GPTのコードを貼り付けてるのは何のアプリケーションですか？
Visual Studio Codeというコードエディタです😆‼️
@@hirocode ありがとうm(_ _)m
いつも楽しく拝見させて頂いております。
動画の内容とは全く関係の無い質問をすることをどうかお許し下さい。お答えいただければ幸いです。
近々、webデザイナーとして転職を考えております。そこでポートフォリオが必要になってくると思うのですが、既存のwebサイトを模写コーディング、又はデザインカンプなどを販売しているサイトからデザインを購入し、それをコーディングしたものなどでも成果物の対象になりますでしょうか？
やはり、独自でデザインからコーディングまでをしたデモサイトを制作するべきでしょうか？
長くなって申し訳ございません。
お返事のほどお待ちしております
全然です、コメントいただきありがとうございます😆❗️いつもご視聴いただきありがとうございます😊♪
細かい部分はやはり会社によってまちまちかと思いますが、基本的に採用側が知りたい情報としては「リアルな情報と熱量」、これに尽きるかなと思います。
例えばコーディングであれば、何をコーディングしたのかというよりかはどうコーディングしたか、の方が重視されるはずです。0から一人で書いたのか、実際のサイトをソースを見ながら書いたのか、スクールで教えてもらいながら書いたのか、といったことです。なので、自分が現在どういったレベルかが伝わるものればそれで良いはずです❕
また、会社としては帰属意識の高い人材を取りたいと思うので、熱意が感じられるかどうかも重要だと思います😆❕❕
@@hirocode
ご返信ありがとうございました！！
成果物の出来栄えではなく、仕上げるまでの過程が大事なんですね！
となるとやはり０から成果物を作り上げる方が企業側の印象は良さそうですよね！
熱量には自信があってwebデザイナー目指してかれこれ二年ほど片想い中です笑
早く現場で働きたいです😭
将棋のAIがあっと言う間に人間を抜き去った事を考えると、5年後、10年後はとんでもない事になっているのかも?・・・いや、『かも?』ではなく、確実にそうなるんだろうなぁ。
近年の進化の勢いヤバすぎますね😱
もうみんな働くのやめようぜ
AIに全部任せられたら最高😂
とりあえず、幅広く知識を学んでAIと部下に仕事を丸投げすればいい。
それは理想すぎます😂笑
問題は、何かあったら誰が責任を取るかなんだよね
AIがしたことだしいっかｗでは通用しないと思う。
ほんとそこら辺は大きな課題になりそうですね💦
これさ、画像の選択センスなんよね。
ていうかページ作るの自体が画像選択センスなんじゃないかと思ってる
画像選びはめちゃめちゃ重要ですね🤔それだけでサイトの印象がらっと変わりますね❗️
こりゃ今後、日本が30年やり続けてるIT土建みたいなビジネスモデルは崩壊するなww
ほんとそんな感じしますね😅
プログラムの作成や修正には膨大な命令が必要になってきますので、ChatGPTのようなAIが今すぐプログラマーの代わりになるのは難しいと思います。
2、30年後はわかりませんが。
全く同感です。結局管理者は必須で、AIはサポート的な役割になりそうです🤖
この程度しかできないならプログラマの仕事は奪われないな。バックエンドとか絶対AIでは実装できないだろう
バックエンドはなかなかハードル高そうですね💦