tameshita2. 作る — デザインを作らせ、コードにし、見ながら直す
実際に操作して撮った画面と、その時に起きたことをそのまま載せています。内容の誤りに気づかれた場合はお問い合わせください。確認のうえ訂正します。
ページ1で準備した Kombai に、いよいよ頼みごとをします。作るのは自己紹介の1ページ。名前、ひとこと、好きなもの3つ、連絡先の4つだけ載せた、素の HTML と CSS のページです。今回は、頼んでから3案が出て、1つ選んでコードにし、ブラウザで見て、1か所直すところまでやりました。かかった時間は、待ち時間も入れて 30 分ほど。使ったクレジットは合計 63クレジットでした。内訳は段階ごとに書きます。
Kombai にはこのほかに、Figma のデザインを読み込む、既にあるコードに合わせて書く、といった使い方もありますが、そちらは今回触っていません。
デザインを作らせる
ページ1の最初の画面で、「Choose project」は「Don't work in a project」のまま、「Design」のボタンはピンクのままにして、入力欄にこう書いて送りました。
自己紹介の1ページを作ってください。名前、ひとこと、好きなもの3つ、連絡先の4つだけ。
素の HTML と CSS だけで、React などは使わないでください。
日本語で大丈夫でした。返事も日本語で来ます。
送ると「Thought for 1 second」「Fetching Inspirations」のような行が流れて、フォントや色の方針を自分で決めていくのが見えます。途中で「どっちにしますか」のような質問は来ませんでした。名前を指定していなかったので、Kombai の方で「山田 灯」という仮の名前と、hello@example.com のような仮の連絡先を入れて進めています。
10 分ほどで、右側に3案が並びました。「校正紙グリッド」「標本ラベル」「海図の譜面」と、それぞれに名前が付いています。右側の広い場所はキャンバスといって、Kombai がデザインの案を並べる紙のようなものです。一番右の案は縦に長くて、クリックした後にその中でスクロールしないと下まで見えませんでした。案の右端にスクロールバーが出ていたら、縦に長いということのようです。
この時点で「Your Plan」を見ると、クレジットは 200 から 152 になっていました。3案のデザインで 48 クレジットです。
コードにする
案を選ぶ方法は2つある。
1つは、キャンバスの案をクリックすると上に浮いてくる「Code design」というボタン。もう1つは、左のチャット側の一番下に出ている「SUGGESTED NEXT STEPS」（次にやりそうなこと）の中の「'自己紹介｜標本ラベル' のデザインを HTML/CSS で実装してください。」という3つの行です。今回は後者を押しました。どちらを押しても、その文がそのまま入力欄に入り、あとは送信するだけになります。1つ注意で、キャンバスに並んでいる順番と、チャット側の3行の順番が違っていたので、名前を見て選んでください。 「SUGGESTED NEXT STEPS」はその時に次しそうなことを予測して選択肢にしているだけなので、場合によっては全然違う選択肢が出る場合もありそうです。
もう1つ、押した瞬間に入力欄の「Design」のボタンが勝手にグレーになりました。ページ1で「ピンクはデザインを出す、グレーはコードを書く」と書いた、あの切り替えです。コードにする段階なので、Kombai の側で切り替えてくれています。自分で押す必要はありませんでした。
送ると、まず「Proposed tech stack」（提案する技術の組み合わせ）という枠が出て、「Project Type: Vanilla JS、CSS Implementation: Vanilla CSS。この構成を保存してから進めますか？」と聞かれました。Vanilla（バニラ）は「素の」という意味で、頼んだ通りの「素の HTML と CSS」がそのまま入っています。「Save Stack」を押しました。ここは選択肢が2つ（Save Stack / Skip for Now）あって、どちらでも先に進めます。
そのあと「To-dos 0/3」のような進み具合が出て、Kombai が index.html と style.css を書いていきます。終わりが近づくと、Google Chrome for Testingというブラウザが勝手に開いて、できたページが表示されました。見た目は Google Chrome とほとんど同じです。アドレスは 127.0.0.1:4173/index.html。これは「自分のパソコンの中で見ている」という意味の住所で、まだインターネットには出ていません。
※実在する他人のアカウントとたまたま連絡先が被っていたので、モザイクにしています。
チャットには「2 files edited +502」（2つのファイルに 502 行書いた）と、確認したことの一覧が出ました。1280px・390px・320px の幅で表示を確認した、横スクロールが無い、好きなもの3件と連絡先4件がある、といった内容です。最後に「現在の名前・文章・連絡先はデザイン用サンプルです。実際のプロフィール情報へ置き換えましょうか？」と聞いてきます。今回はここで置き換えはしませんでした。
コードにする段階で使ったのは 10 クレジット（152 → 142）でした。デザインの 48 と比べるとかなり少ないです。
ファイルはどこにあるか
「Don't work in a project」で始めたのに、左の PROJECTS の所に「PROJECT-VELVET-SUNBEAM」という名前が勝手にできていました。Kombai が自分でフォルダを作って、そこにファイルを置いたということです。名前は毎回ランダムに付くようです。
その名前の右の「⋮」を押すと「Open with」があり、VS Code / Terminal / Finder から選べます。Finder を選ぶとフォルダが開きました。場所は ユーザ/（自分の名前）/Kombai/projects/project-velvet-sunbeam で、中には index.html と style.css の2つだけ。ページ1で書いた「Web サイトはファイルの集まり」の、その集まりがこれです。
このフォルダの index.html をダブルクリックすると、普段の Chrome で開けて、Kombai Browser で見たのと同じに表示されました。Kombai を閉じても、このファイルは残ります。
見ながら直す
最後に1か所だけ直してみます。完了のメッセージの下にも「はい、実際の情報に置き換えたいので手伝ってください」などの提案が3つ出ていましたが、それは使わず、入力欄に自分でこう書きました。
好きなものを3つから4つにして
5分ほど待つと、Kombai Browser のページに「活版印刷」という4つ目が足されていました。元の3つと同じ形の札で、色だけ違います。1つ足してと言っただけで、中身も Kombai が考えて入れています。
直しで使ったのは 5 クレジット（142 → 137）。
まとめ
ここまでで、自分のパソコンの中に、自己紹介の1ページが index.html と style.css の2つのファイルとしてできました。頼んでから3案が出るまで 10 分ほど、コードになるまでさらに 10 分ほど。手で書いたのは日本語の文が2つだけです。
使ったクレジットは、デザイン 48、コードにする 10、直し 5 で、合わせて 63。無料プランは登録時 150 に毎日 50 足されるのですが、1月 300クレジットと考えると作れるページ数は限られてきそうです。デザインが一番高くて、その後の直しは安い、という配分でした。
迷ったのは「案をどうやって選ぶか」の1か所だけで、それもチャット側の3行を押せば済みました。チャットを送るだけでデザインの構成からファイル作成までを自動で行ってくれるので、かなり便利ですね。理想のページにするためには修正が必要になりますが、自分で1から作るよりは断然楽だと思います。
名前や連絡先はまだ「山田 灯」のままです。次のページでは、このファイルをインターネットに出して URL をもらうところまでやります。自分の名前に置き換えるのは、その前でも後でもできます。