tameshita1. 準備 — Kombai とは何か、入れて始めるまで
実際に操作して撮った画面と、その時に起きたことをそのまま載せています。内容の誤りに気づかれた場合はお問い合わせください。確認のうえ訂正します。
このサイトは「AI に頼めば Web サイトが作れるらしい」と聞いて Kombai を開いてみたら、Figma、React、リポジトリ……と知らない言葉が並んでいて閉じてしまった。そういう人向けのサイトになっています。操作は Mac でやっています。Windows でも流れは同じはずですが、画面の細かい所は違うかもしれません。
この3ページで、何も知らない状態から、Kombai で1ページのサイトを作り、インターネットで見られる状態にするところまでを、実際に操作した画面と一緒にたどります。Kombai は本来、もっと大きなもの（何十ページもあるアプリの画面）を作る道具で、Figma のデザインを読み込んだり、既にあるコードに合わせて書いたりもできますが、ここではそれらは使いません。
今回は自己紹介の1ページを作って公開する、それだけに絞って解説していきます。
Kombai は何ができるか
Kombai は、画面のデザインと、そのデザインを動かすコードを、文章で頼むと作ってくれるツールです。「こういうサイトが欲しい」と日本語で書くと、まず見た目の案を何通りか出してきて、選んだものをコードにし、動いている状態で直せます。パソコンに入れて使うアプリで、Mac・Windows・Linux 用があります（VS Code というエディタの拡張として使う形もありますが、このガイドではアプリの方を使います）。
一方で、作ったサイトをインターネットに出す機能は Kombai にはありません。 Kombai でできるのは「あなたのパソコンの中にサイトのファイルを作る」まで。それを世界中から見られる場所に置くのは別の作業が必要で、3ページ目でやります。ここを最初に知っておくと、「作ったのに URL が無い」と戸惑わずに済みます。
料金は、無料のプランに「クレジット」という通貨のようなものが付いていて、Kombai に頼むたびに減っていきます。公式の説明だと、登録した時に 150クレジットもらえて、そのあと毎日 50クレジットずつ足され、1か月にもらえるのは合わせて 300クレジットまでです。実際に登録した日に見たら 200クレジットでした（150 に、その日の分の 50 が足された数だと思います）。
このサイトで作るのは1ページ分だけです。実際に使ったクレジットの量はこのサイトの2ページ目に書きます。有料の Pro は月 $20 からで、毎月2000クレジットもらえます（年払いだと 20% 安くなります）。事業で利用する方は有料のproプランの方がいいかもしれません。
Web サイトの仕組みを、必要な分だけ
Kombai を使うと、専門用語が画面に出てきます。全部を知る必要はなく、次の3つだけ押さえておけば、この案内では最後まで進めます。
Web サイトは、ファイルの集まりです。 Word の文書が .docx というファイルなのと同じで、Web ページは .html というファイルです。見た目（色や大きさ）は .css というファイルに、動き（ボタンを押したら何か起きる）は .js というファイルに書かれています。Kombai が作るのは、この数個のファイルが入った1つのフォルダです。
ブラウザは、そのファイルを開いて絵にするソフトです。 Chrome や Safari のことです。インターネットから取ってきたファイルを表示するのが普通の使い方ですが、自分のパソコンにある .html ファイルをダブルクリックしても同じように表示されます。だから、公開する前に自分のパソコンだけで確かめられます。
公開するとは、そのフォルダを、誰でも取りに来られる場所に置くことです。 置く場所を貸してくれるサービスがあり（無料のものもあります）、置くと https://〜 という住所（URL）がもらえます。3ページ目でやるのはこれです。
React・GitHub・リポジトリという語も Kombai の画面に出てきますが、この案内で作るものには要りません。何なのかは3ページ目の最後で、次に進みたい人向けに書きます。
Kombai を入れて始める
ここからは実際の画面です。Mac で、Chrome から始めています。
アカウントを作ってダウンロードする
まず https://kombai.com/ を開きます。右上に「Get Started for Free」、真ん中に「Download for MacOS」と、入口が2つあります。今回は真ん中の「Download for MacOS」の方から入りました。
押すとアカウント作成の画面になります。Google のアカウントで入るか、メールアドレスとパスワードを決めて登録するかの2択です。どちらでも構いません。
登録が済むと、そのままダウンロードが始まって「Open Kombai in 3 steps」というページに変わります。書いてあるのは「ダウンロードフォルダを開く」「Kombai-2.0.117-arm64.dmg をダブルクリック」「Kombai を Applications に入れる」の3つで、この通りにやれば大丈夫です。ファイル名の数字はバージョンなので、読む時期によって変わります。ブラウザからの「ブラウザからダウンロードされたアプリです」のような警告が出ることがありますが、気にせず進めてください。
ダウンロードした .dmg を開くと、Kombai のアイコンと Applications のフォルダが並んだ小さな窓が出ます。左のアイコンを右のフォルダへドラッグすれば、インストールは終わりです。windowsだとこの画面は違うかもしれません。
Mac でダウンロードしたアプリを初めて開くと、「開発元を確認できないため開けません」と止められることがありますが、Kombai では出ませんでした。そのまま開けます。
アプリを開いてサインインする
アプリを起動します。Macでは、Launchpad か、⌘ + Space で kombai と打って起動します。最初に出るのは、ブラウザで見たのとよく似た「Get started with Kombai」の画面です。さっきアカウントを作ったので、下の「Log in」からサインインします。ここで「Sign Up」を押すと、ブラウザが開きますが、自動でログインされます。
最初の画面の見方
サインインすると、この画面になります。「What will you design today?」と聞かれていて、下に Build / Improve / Review の3つの箱があります。今回使うのは一番左の Build（新しいページを作る）だけです。
見ておく場所は3つです。
文章で頼む所。 ChatGPTなどと大体同じです。画面の下の方、「Use @ for context, / for skills」と薄く書いてある枠が、Kombai に頼みごとを書く入力欄です。2ページ目では、ここに日本語で「自己紹介のページを作って」と書きます。
「Choose project」。 入力欄の左下にあります。押すと「Don't work in a project」と「Open folder...」の2つが出て、最初から「Don't work in a project」に✓が付いていました。Kombai は本来、パソコンの中のフォルダ（プロジェクト）を開いてその中で作業する道具なのですが、この案内では最後までこの「Don't work in a project」のまま進みます。フォルダを選ばなくても作れます。
残りのクレジット。 左下の、自分の名前と「Free」が書いてあるボタンを押すと「Your Plan」の画面が開き、「Credits Remaining 200 / 200」と出ていました。「Next Credit Refill」（次に補充される日）には翌日の日付が入っています。翌日に開いたら、2ページ目で 63 使って 137 になっていた数字が 188 / 250 になっていました。右側の数字は上限ではなく、これまでに配られた合計（150 ＋ 50 ＋ 50）のようです。左は 51 増えていて、50 ぴったりでない理由は分かりません（クレジットはトークン量で計算されるので、内部は小数で画面は整数に丸めているのかもしれません）。この画面には Pro へのアップグレードの案内も大きく出ますが、今は押さなくて大丈夫です。
もう1つ、入力欄の中の「Design」というピンクの丸いボタンがあります。押すとグレーになって、見出しが「What will you design today?」から「What will you build today?」に変わり、入力欄の右にあった「3」という数字も消えました。ピンクのままだと「先にデザインの案を（3つ）出してから作る」、グレーだと「いきなりコードを書く」という切り替えです。2ページ目ではピンク（オン）のまま使います。
ここまでで、Kombai を使う準備は終わりです。まだ何も頼んでいないので、クレジットも減っていません。
まとめ
このページでやったのは、アカウントを作って、Mac に Kombai を入れて、最初の画面のどこに何があるかを確かめるところまでです。ダウンロードや初回起動で警告に止められることはなく、公式の3ステップの通りに進みました。
無料のクレジットは、登録した日は 200 でした。「月 300」と聞いて開くと少なく見えますが、毎日 50 ずつ足されていく仕組みなので、今いくつあるかは自分の「Your Plan」の画面で見るのが確実です。
次のページでは、この入力欄に日本語で頼んで、自己紹介の1ページをデザインからコードまで作ります。