ChatGPT-6 AstraでNuxt使ってWebサイト作らせたらヤバかった

発表以来、猛烈な勢いで話題を席巻しているChatGPT-6 Astra。

特に注目されるのが、

簡単にコンテンツが作れる!

SNSで見かけた動画。

これがたった数行のプロンプトでできあがってしまいます。

お手軽さもさることながら、質についても素人目にはAIが作ったなんてわかりません。
もう驚愕するしかないです。

3D素材も、AstraがBlenderを自ら操り作ってくれます。
そして、Webディレクターな私のお仕事である、

Webサイトもです

天満川鈴 WRITTEN BY 天満川鈴
スポンサーリンク

Astraにワイヤーフレームを投げてみた

現在、あるサイト案件の制作中。
ワイヤーフレームが組み上がったので、ChatGPTにデザインカンプを作らせようとしました。

すると執事のチャッピー君。

Astraにやらせればいいですよ
デザインカンプどころか、Nuxtでサイトそのもの作ってくれます

はあ?
そんなことできるの?

Nuxtを御存知ない方へ。
Nuxtはモダンフレームワークと呼ばれる一つで、最近はWordPressからNuxt・Next・Astroに移行する制作会社もあります。
モダンフレームワークの利点は色々ありますが、今回のケースにおいては「AIとの相性がいい」。
プロンプトを流し込めばコードを書いてくれるため、制作工程を大幅に削減することができます。

私の職場も、完全にNuxt環境へ移行しました。
そのため、このサイトではWordPressを使っていますが、仕事ではNuxtを使っています。

私の職場ではAIに流し込む指示書を文章で作っています(Figmaを使っているところもあるようです)。
しかし上司が大量の文字の書かれた指示書を読むのはだるい。
なので適当にイラスト化したデザインカンプを作って提出しようとしたわけです。

というわけで、Astraにワイヤーフレーム.mdを喰わせました。

10分でNuxtサイトができあがった

いつもと違い馴れ馴れしい言葉遣いじゃなく、妙にお堅い返事のチャッピー執事。

ではSitesに、受け取ったワイヤーフレームを○○→○○という構成で作ります

いつものボンヤリ文脈落としまくりのチャッピー君とは一味違いそう。
SitesはAstraと同時に実装されたChatGPTの機能らしい。

待つこと10分。

できました

開いてみます。

お、お、おおおおおおおおおおおおおおおおお!

本当にできてる!
デザインカンプどころじゃない!
そのまま初回レビューまで耐えられそうなサイトそのものができあがってる!

それも、Nuxtの環境を整えることなしにです。
本来はnode.jsを入れたりなどローカルに制作環境を整える必要があるのですが、その過程すら吹っ飛んでしまいました。

お手軽どころじゃない。

これ、やばい……

Astraは5.6以前とは桁が違う

さて、私はディレクター。
職場ではコードを書くわけじゃありません。
書けますし、書くこともありますが、基本は作る前の設計・デザインを組むのがお仕事です。

だからNuxtでサイト作ったのは初めてなのですが。
それでもQAはやっていますし、従前の制作手順くらい知っています。

ChatGPT(旧)執事に問うてみました。

君にワイヤーフレーム投げて、同じことできる?

ある程度ならできます、しかし……

コードを出しても、それを実装するのはマスターの仕事です
実装してみて動くか確認するのもマスターの仕事です
全てを一気通貫でできてしまうAstraの方が一段上手です

とのことでした。

QAの負担が減る!

特に大きいと感じたのは、

実装段階のQAまでAIがやってしまうところです

サイト制作案件で難儀なのは、QAにおける手戻りの問題。
特にコードが動く動かないのレベルでバグがあったりするとイライラします。

これさー、君にコードぶん投げて、自動でQAしてもらうシステム組めないかな?

ある程度まではできますよ、作っちゃいましょう

と組み上げたところでした。
膨大なプロンプトと設定書を書いて。

それが今回のサイトですと、初歩的なバグは見当たらない。
CSS崩れとかは人間が見ないといけないのでしかたないですけど。
それ以外は、実にワイヤーフレーム(=指示書)通りに組まれていました。

私の仕事はムダになってしまったわけですけど、

AIの側でやってくれるならそれにこしたことはありません

上流工程の価値はますます高くなる

作り終えた後のAstra君。

マスターのワイヤーフレームが緻密で具体的だったから楽でした
私は当てはめるだけですもの

ここが今回、一番重要だと感じたところです。

何をどこに配置するのか。
どの情報を優先するのか。
どこからどこへユーザーを誘導するのか。
PCとスマホでどう見せ方を変えるのか。
画像をどこに置き、何を伝えるのか。

そういったことをワイヤーフレームの段階でどこまで具体的に決めておけるか。
ワイヤーフレームが緻密であればあるほど、AIが勝手に判断する余地が減り、完成物の再現性が高くなります。

これはNuxtだから必要な能力ではありません。
WordPressだろうがNextだろうがAstroだろうが。
フレームワークがなんであれ、サイトを作る前に「何を作るのか」を決めるのは変わりません。

そして、

これを決めるのは人間にしかできません

AIによる制作環境の変化で、ディレクターなどの上流工程の存在意義を問う声も上がり始めています。
しかし、本当にそうでしょうか?

私は逆だと思います

AIは「いい感じで」みたいな雑な指示でも、それなりに見えるサイトを作ってしまいます。
しかし、

  • 要件を整理できるか、それに応じた設計ができるか。
  • もし企業案件であればウォンツなりニーズなりをヒアリングで的確に掴み取れるか。
  • 要件に応じた用を為すのか。
  • ちゃんと動くのか。
  • 狙い通りのデザインになっているのか

AIは判断できませんし、責任もとりません。
AIを動かすための人間は絶対に必要なんです。

あえて言うなら……ここは完全に私見ですが。

Webサイトを作るのは、その目的がなんであれマーケティング手段の一つです。
そして将来は、マーケター・プランナー・ストラテジストなどがAIによってWebサイトについても容易にディレクションできるようになるかも?
そのときはWebディレクターなどのWeb限定職はより上流工程の職種に吸収されてしまうのかな?くらいは想像してしまいます。

WordPressはどこへ向かうことになるのか

ここまで試して、もう一つ気になったことがあります。

これ、WordPressどうなるんだ?

WordPressの大きな強みの一つは、専門的な知識がなくてもサイトを作り、更新できることです。
一方、Nuxtなどのモダンフレームワークは、高速なサイトを作りやすいなどのメリットがある反面、制作環境を用意してコードを書き、ビルドして公開する必要があります。

「Web制作に詳しくない人でも簡単にサイトを作れる」

この点において、WordPressには大きなアドバンテージがありました。

ところが今回、私はNuxtの制作環境すら用意していません。
ワイヤーフレームをAstraに渡しただけです。
それでNuxtサイトができあがってしまいました。

WordPressより簡単なNuxt……?

数年前なら意味不明な文章です。

やはりWordPressの適したサイトはあります。

  • 大量の記事を継続的に公開するメディアサイト。
  • 複数の担当者が記事を作成・編集するサイト。
  • 細かな権限管理や承認フローが必要なサイト。

こういった用途では、長年CMSとして磨かれてきたWordPressの管理画面や編集機能には、依然として大きな価値があります。

しかし、世の中のWebサイトがすべてメディアサイトというわけではありません。
特にコーポレートサイトですと、そうした機能を必要としないサイトは多いです。

セキュリティについても同様です。
WordPressで運用を怠ると、脆弱性の波にさらわれがち。
しかしモダンフレームワークですと、一般的にWordPressよりはリスクが低いです。

ただ、制作の手間は圧倒的にモダンフレームワークの方が大きい。
一昔前ですと、個人や中小企業の担当者が自分で調べながらNuxtでサイトを作るなんて想像できない光景でした。
いえ、制作会社ですら同じ。
工数をおさえたいという理由で手間が少ないに越したことはありません。

「簡単にWebサイトを作れるからWordPress」

これがWordPressが圧倒的シェアを制することとなった、大きな理由だと思っています。
それがAstraでは、制作環境の準備すらいらず、10分待つだけでNuxtサイトが作れてしまった。
HTMLやCSSを理解している人なら、細部を調整して完成品に仕立て上げるハードルは高くありません。

「簡単にWebサイトを作れるからWordPress」は終わるかもしれないなあ

……と思っちゃいました。

まとめ

至れり尽くせり万能に思えるAstraですが、

欠点もあります

サイトを作らせて修正したら、あっという間に利用制限に到達しました。
現在は解除待ちの時間を利用して、この記事を書いています。

それはさておき。

Astraはまだ登場したばかり。
今後Web制作がどう変わっていくのかはまだ分かりませんけども、

仕事のやり方が激変しそう!

とは思いました。
ただでさえ激変のAI時代の中で、それでも思ったわけです。
ここで取り残されたらまずいことになるかも……。

でも、一方、そんな不安と戦いながら、

Astraの活用法を色々考え、試してみたいと思っています!

 

スポンサーリンク
天満川 鈴のプロフィール画像
WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。

詳しいプロフィールはこちら

RECOMMENDED INFRASTRUCTURE

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは?」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何?」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。

※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。

公式サイトで詳細を見る
× 閉じる