訪問できる島に 800 以上のリソースを構築しました
✍️ この記事は、iamvista.substack.com（新しいタブで開く） に掲載された「Vista Newsletter」No.152 からの転載です。 この種のコンテンツが気に入った場合は、「Vista ニュースレター」の無料購読（新しいタブで開く） へようこそ。毎週私の観察と方法を直接お受け取りください。
こんにちは、こんにちは！
今週の月曜日の夜 10 時頃、私はクロード コードを開き、しばらく頭の中で考えていたアイデアについて話しました。それは、長年にわたってさまざまな Web サイトに散らばったものを、訪問可能な島に変えることができないかというものでした。
翌朝までに、仮想島はオンラインになりました。 その名前は「Vista’s Knowledge Islands（新しいタブで開く）」で、URL は island.vista.tw（新しいタブで開く） です。
このニュースレターでは、この島がどのようにして築かれたのかについてお話したいと思います。 一方では、私は Vibecoding の別の実践的な経験を記録しますが、他方では、あなたが手元にいくつかの作品、メモ、またはリソースを蓄積している場合は、それらのための家を建てることができるかもしれないということも奨励したいと思います。
まずは島に行きましょう。
まず island.vista.tw（新しいタブで開く） をクリックし、2 分間ブラウジングしてから、戻って次のコンテンツを読むことをお勧めします。そうすると気分が良くなります。
開くと、海に浮かぶ 9 つのローポリゴンの島が表示されます。 マウスを使用してドラッグおよび回転し、スクロール ホイールを使用してズームできます。 携帯電話では、指を使ってスライドしたりピンチしたりしてズームすることもできます。右上隅に「夜」ボタンがあります。押すと海全体が紺碧の夜空に変わります。
最初にメールを登録したり残したりする必要はありません。メールを開くだけで閲覧できます。
着陸するとすぐに、桟橋にいる小さなビスタの人々があなたを出迎え、今日どこに行きたいかを尋ねます。 選択肢は 4 つだけです。論文のサポートを探している、教室に AI を導入したい、仕事を楽にしたい、または最初に見てみるだけです。 選択した後、島をクリックすると、Vista が先を歩いて橋を渡ってくれます。
9 つの島にはそれぞれ独自のテーマがあります。
-
研究灯台島: 塔のふもとでの研究生活から始まり、テーマの設定、文献の検索と読書、灯台のステージ、口頭試験と提出物まで、合計 7 つのフロアがあります。 大学院生がどのレベルで行き詰まっていても、そのフロアに行って見つけてください。
-
講義島: 私の公開コースと講義ノートを slides.vista.tw（新しいタブで開く） に集めてください。興味のある友人は閲覧することができます。
-
Tool Town: lab.vista.tw（新しいタブで開く） 上のほとんどの AI ガジェットを開いて直接使用できます。
-ライティングポート: より良い記事を書きたい友人に適した、ライティングのヒントとチェックツール。
-
本の板: 1995 年に出版された最初の本 から今年まで、各板は本です。
-
Golden Sentence Beach: 読書中、下線付きの文章 が漂流瓶に入っていて、それを手に取って何気なく読んでいました。
-
星の展望台、遠くの島々、そして皆が下船するビスタピア。
合計すると、800 以上の資源が島で収集されました。 その中には、ゴールデン センテンス ビーチに 479 件のゴールデン センテンス、リサーチ ライトハウス アイランドに 236 件のエッセイ リソースがあり、その他はツール、ブリーフィング ノート、書籍、マニュアルです。
買い物中に気に入った商品があれば、「Pack」をクリックしてください。 買い物が終わったら、荷物に星座の名前を付けると、夜空が明るくなり、中に入れたものが星に変わります。 最後に、リストをコピー、ダウンロード、または自分のメールボックスに送信できます。 星座を共有カードにして友達に渡すこともできます。
なぜ島を建てるのか?
この時点で、あなたは疑問に思うかもしれません: すでにメイン Web サイト vista.tw があるのに、なぜ別の Web サイトを構築する必要があるのでしょうか?
理由は簡単です。 私は何年にもわたって多くのものを書き、制作してきましたが、それらは十数の Web サイトに散在しています。vista.tw の記事、researcher.tw（新しいタブで開く） の論文リソース、lab.vista.tw（新しいタブで開く） のガジェット、deck.vista.tw（新しいタブで開く） のプレゼンテーション、およびさまざまな販売ページのいくつかのマニュアルです。私にとって、すべてはどこに置くべきかを知っています。 初めてここに来る友達にとっては、地図も持たずに倉庫に入るようなものです。
少し前に、友人が自分の作品を小さな島に整理して訪問できるようにしているのを見ました。 とても可愛くて感動する作品だと思いました。しかし、さらにいくつかのこともやりたいと思っています。
まず、一気に全部は読みません。 したがって、これらの島々は今後も成長し続けるでしょう。
2つ目は、買い物の後に何かを持ち運べるようにすることです。 訪問者が帰るときに、単に「かわいい」と感じるだけでなく、実際にさらに役立つリソースを手にしていることを願っています。 ラゲッジ機能とメールボックス機能はこの目的のために設計されています。
第三に、次回来たときに変化が見られるはずです。 島はあなたの星座を覚えています。新しい記事を書き、新しい道具を作り、島に新しいドリフトボトルや新しいライトが登場します。
これら 3 つのポイントは、後に設計書の最初の章になりました。
ある夜、どうやって隠蔽したんだろう？
3D Web サイトについて聞くと、多くの人が最初に抱く反応は次のとおりです。 「それを作るには、プログラミングに精通したエンジニアが必要なのではないか?」
正直に言うと、2年前ならそんなこと考える勇気さえなかったでしょう。 今回、プロジェクトの立ち上げから立ち上げまで、実際にやったことは長い記事を書くのとよく似ていました。 参考までにプロセスを5つのステップにまとめました。
1. まず現状を把握してから行動を起こす
島を構築する前に、私はまず AI に各 Web サイトのリソースを把握するよう依頼しました。どの Web サイトが無料で、どの Web サイトが電子メールを必要とし、どの Web サイトが有料で、どの Web サイトが廃止されたのかを調べます。
このステップは非常に重要です。 よく調べてみたところ、大学院生が最も豊富なリソースを持っており、教師が持っているリソースは比較的少なく、会社員のリソースは複数の Web サイトに分散していることがわかりました。 これは、島がどのように分割されるか、どの島が最初に開放されるかに直接影響します。 また、販売終了した商品やパスワードが必要なページ、学生エリアなどもこの段階では島に置かないことが決定されました。
2.「したくないこと」を明確にする
AI とデザインについて議論するとき、私が最も時間を費やすのは、自分が望まないことについてです。
たとえば、訪問者に「どこで詰まっていますか？」と尋ねられたくないのです。彼らが着陸するとすぐに。診察のような感じで、丁寧ではありません。 したがって、桟橋上の Vista アバターは訪問者に挨拶し、今日どこに行きたいかを尋ねるだけです。その状況で灯台またはワークショップに入らない限り、より詳細な質問をすることはできません。
また、訪問者が何かを持ち帰る前にメールを残すよう求められることも望ましくありません。 したがって、パッキングリストを直接コピーしてダウンロードすることもできますし、手紙を送ることも選択肢の 1 つにすぎません。
これらの「してはいけないこと」を設計書に書き込むと、AI は意思決定を行うたびにそれを参照できるようになります。 これは、単に「見栄えの良い Web サイトの作成を手伝ってください」と言うよりもはるかに便利です。
3. 最初に小さなサンプルを作成し、それを読んだ後にカバーします。
最初から群島全体を構築するように AI に依頼したのではなく、最初に、昼と夜の両方の状態を備えた、ドラッグして回転できる小さな島を作成するように依頼しました。 それを見て、正しい方向だと感じたので、そのまま続行しました。
当初のアイデアは、地形が紙の層でできており、開いた本のような、紙で彫られた 3 次元の本のテクスチャを持つことでした。 その後、実際に作ってみて、今はローポリゴンのおもちゃ風に変更しました。 最初から9つの島を作った後でスタイルを変更する必要があることに気づいた場合、かなりのやり直しが必要になります。 最初にサンプルを作成します。つまり、最小コストを使用して、方向性が正しいことを確認します。
4. プログラムはAIに書かせて、判断は私が担当します
プログラミング部分は Claude Code に任せます。 Web 3D描画ツールのセットであるthree.jsを使用し、Viteで構築され、Cloudflare Pagesにデプロイされます。 これらの用語を覚える必要はありませんし、私自身も細部まで理解しているわけではありません。
私が時間を費やすのは、常に訪問者の立場で試してみることです。 例えば、共有ページが元々スクロールできないとか、カバンに詰め込まれているボタンの色が濃すぎてよく見えないとか、ライティングブリッジの2冊の本の出版年が間違っているとか。これらはすべて私が閲覧中に発見し、AI に修正してもらったものです。 このプロジェクトでは着工から明け方まで30件以上の修正記録が蓄積されており、そのほとんどがこうした細部の調整であった。
島の資源量も何度か確認しました。 当初は「800部近く」と表記していましたが、実際に計算してみると814部となり、最終的により正確な「800部以上」に変更されました。 AIは物事を行うのが非常に得意ですが、それでも数字が正しいかどうか、言葉が誤解されないかどうかを確認する必要があります。
5. オンラインになった後は、自然に成長するようにしましょう
島は構築されていますが、新しい記事を書くたびにドリフトボトルを補充するために手動で島まで走らなければならないのは最も避けたいことです。
そこで私は AI に週間スケジュールを設定するよう依頼しました。毎週月曜の朝 5 時に、コンピューターは vista.tw、researcher.tw、writers.tw、builder.tw から最新の記事と、lab.vista.tw からの新しいツールを自動的に取得し、再構築、テストし、オンラインで展開します。 何らかの手順が間違っている場合は停止すると、壊れたバージョンはプッシュアップされません。
つまり、この島は私の執筆過程とともに成長していくのです。 来月また訪れると、今回は見えなかったものが見られるはずです。
試してみるかはあなた次第です
ここまで述べてきましたが、私が一番伝えたいのは、「あなたにはこれができる」ということです。
私を真似して、すぐに 3D 列島を構築する必要はありません。 あなたが教師であれば、長年にわたる教科書を単元ごとに分類されたリソース センターに整理できます。大学院生の場合は、読んだ文献のフィルタリング可能なマップを作成できます。コミュニティを運営している場合は、さまざまなプラットフォームに散らばっている優れた記事を集めて、独自のコレクションを作成できます。
テクノロジーではなく、自分が何を持っているのか、誰に会いたいのか、相手に何を奪ってほしいのかをしっかりと考える姿勢があるかどうかが重要です。
話し方がわからない場合は、AI に次のように言ってみてください。
私は (あなたのアイデンティティ) であり、長年にわたって (50 の記事、3 つのブリーフィング、および 10 の一般的に使用されるツールなどのあなたの作品またはリソース) を蓄積してきました。 （読者が）自分にとって役立つものをすぐに見つけて、気に入ったものを集めて持ち運べるようなWebページを作りたいと思っています。 最初にプログラムを書かないでください。私のニーズを明確にするために 5 つの質問をして、私が選択できる 2 つの異なる設計方向を提案してください。
最後の文に注意してください。最初に質問し、最初に指示を与え、急いでプログラムを作成しないでください。 これは私があらゆるプロジェクトで使用するオープニングです。曖昧なアイデアを明確にすることを強制し、AI が間違った方向に走ることを最初から防ぎます。
最初のバージョンを作成した後、それを使用し、変更を加え始めました。 最初のバージョンが醜いことは問題ではありません。私の列島は小さな島から始まり、徐々に 9 つの島に成長しました。
ちなみに、A Liang 先生は [島建設プログラム] ウェブサイト ジェネレーター（新しいタブで開く） も提供しているのを見ました。 興味のあるお友達もぜひ挑戦してみてください！
体系的に学びたいならこの本から
読んだ後はワクワクするけれど、どこから始めればよいかわからないという方には、私の新著『Vibe コーディングのゼロ基本: AI を使用して Web サイト、アプリ、作業自動化ツールを作成する（新しいタブで開く）』をお勧めします。
これは私の21冊目の本で、今年9月にQi Fengから出版されました。これは、プログラムを 1 行も書いたことはないが、自分で何かをやってみたいと考えている友人のために書かれています。 この本は、AI に対するニーズを明確にする方法から始まり、Web サイト、アプリ、作業自動化ツールを構築し、最終的にオンラインに展開する方法を説明します。 まずは要件を明確にする、プロトタイプを作ってから拡張する、AIにプログラムを書かせて自ら判断させるなど、今回の島づくりのコンセプトは本書の中でしっかりと解説され、実践されています。
最初にエンジニアになる必要はありません。 あなたが頭の中にあるアイデアを明確に説明する意欲がある限り、AI はそれを段階的に実現するためにあなたに同行します。
最初に読んでみたい場合は、現在、Web サイトで第 1 章と第 4 章の全文を無料で読むことができます。また、サポートするブリーフィングや拡張記事もご覧いただけます: vista.tw/books/vibe-coding
最後にお願いがあります
この島はできたばかりで、まだ不完全な部分がたくさんあるはずです。 閲覧中に行き詰まった点、理解できない点、または島にもっとリソースがあればいいのにと思った場合は、お気軽に私に直接返信してください。
ショッピングが終わったら、より多くのお友達と共有することもできます。 同時に、ホロスコープ共有カードもお送りください。あなたが自分の星座にどんな名前をつけるのかとても興味があります。 独自の島、リソース ページ、またはポートフォリオも作成した場合は、お知らせください。 もしかしたら、あなたの作品が次回のメールマガジンで紹介されるかもしれません。
次回お会いしましょう！
ビスタ
📮 この記事は『Vista Newsletter』No.152からの転載です。元のテキストは iamvista.substack.com/p/vista-no152-800（新しいタブで開く） でご覧いただけます。 このようなコンテンツが気に入ったら、Vista ニュースレターを無料で購読（新しいタブで開く） して、役立つレターを毎週受け取ってください。
