プログラム初心者でもコードが書けるAIツールを試してみました

プログラム初心者でもコードが書けるAIツールを試してみました

AIstacknot仕事効率化

プログラミング初心者の私が「V0」を使いHP作成をしてみました。知識がなくても形にしてくれると伺ったのでどの程度かたちにしてくれるのが試してみました。

「V0」とは?

Vercelが提供している「V0」は、「文章で指示するだけ」で、サイトやアプリのUIを自動で作ってくれます。さらに、見た目だけじゃなくて、実際に動かすためのコードまで自動生成してくれます。そのためプログラミングに詳しくなくても、デザインから実装まで一気に形にできます。

「デザインはできるけどコードは苦手…」という人や、「とにかく素早く作りたい」という人にとっては、かなり心強いツールなようです。

ちなみに私の知識はHTMLは理解でき、CSSはなんとなく聞いたことあり勉強したことはあるけどけど苦手意識があるレベルです。他の言語は一切触れたことがないプログラミングの超初心者レベルです。ちょうど私にピッタリ!だったのでHPを本当に作ることができるのか試してみることにしました。

はじめにデザインを作成します。
私はFigmaでデザインを作成しました。デザインツールはなんでも大丈夫だと思います。こちらのデザインデータをjpegがpngで書き出しておきます。

このデザインをそのまま「V0」で読み込ませます。
こちらのプラスボタンから画像を読み込むことができるので指示を記載します。またプレミアムプランだとデザインを書き出さなくてもFigmaから読み込むことができるようです。

それなりの形になりました!

記事をクリックすると遷移もされます。


検索もしっかりできます。

検索結果もしっかりでできます!

こちらは何回か指示をした後になります。一気に読み込ませたあと、FVだけ、footerだけなど少しずつ指示していき、さらに遷移先も確認しながら調整していくと、きちんとUIが出来上がります。一発ですぐ完成とまではいきませんが知識がない私でも形にすることがきました。少しコードの調整は必要かもしれませんがここまで作ってコーダーさんに渡せばかなり工数を減らすことができそうです!

実際に触ってみて感じたのは、「どうプロンプトで指示するか」が重要となりそうです。そのための知識が必要のように感じました。

これからの時代、AIをどう使いこなすかが大事になっていくと思います。ツールに振り回されるのではなく、自分のアイデアを素早く形にできるように、少しずつでもキャッチアップしていきたいと思います。

記事をシェアする