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

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

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

「V0」とは?

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

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

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

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

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

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

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


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

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

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

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

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

Need Support?

この記事のテーマをそのまま実務に広げたいときのために、近い内容から相談しやすい窓口をまとめました。

AI Enablement

AI導入を小さく試して成果につなげる

生成AIの活用テーマ整理、業務への組み込み、社内定着までを見据えて相談したい方に向けたご案内です。

Productivity Boost

業務効率化を継続しやすい形で進める

ツール選定だけでなく、日々の業務に定着する運用まで含めて改善したい場合の相談窓口としてご利用いただけます。

記事をシェアする