Vibe コーディングを学んだ 1 年の間に、私はウェブサイトを縮小し、再び練習を始めました。
※この記事は『Vista Newsletter』第147号(原文リンク（新しいタブで開く）)に掲載されたものです。 *
こんにちは、こんにちは！
今週末は連休と重なります。 私は早朝にクロード コードを開き、「vista.tw 全体を改良しましょう」という一文を言いました。
2 日後、Web サイトの新しいバージョンがオンラインになりました。 ナビゲーションバー、ホームページ、コースセンター、企業向けコース招待ページから無料リソースページまで、フォントと色を変更し、英語版と日本語版もまとめました。 もちろん、まだゆっくりと修正する必要がある詳細がいくつかありますが、大まかな方向性はすでに定まっています。
今回のニュースレターでは、この改訂についてお話したいと思います。 一方で、今年 Vibecoding（新しいタブで開く） を学習した経験を記録したいと思います。一方、実際に役立つように、新しいバージョンの vista.tw の使用方法も紹介したいと思います。
今年、私はライターから実践者に変わりました
私の以前のニュースレターを読んだことのある方は、私が今年 Vibecoding の学習に多くの時間を費やしたことをご存知のはずです。
簡単に言うと、Vibecoding は自然言語を使用して AI にやりたいことを伝え、代わりにプログラムを作成させます。結果を見て、何が間違っているかを判断し、修正を依頼するのはあなた自身の責任です。 30年間文章を書き続けてきたが、エンジニアになったことのない私のような人間にとって、この変化は非常に大きなものです。 以前は、Web サイトに機能を追加したい場合は、誰かを見つけてスケジュールを待ち、予算を交渉する必要がありました。要件を明確に説明できれば、その日から構築を開始できます。
vista.tw がその最良の例です。 このウェブサイトの前身は、2010年頃から書き始めたブログです。途中で何度かプラットフォームを変えましたが、そのたびに古い倉庫を掃除するような感じでした。 今年の1月、私は長年使ってきた古いシステムをすべて切り離し、Vibecodingを使ってゼロから構築し、何千もの記事を一つずつ新しいホームに移そうと決意した。
この1年間で実践的に学んできた過程が後に本になりました。 9 月 2 日、私の 21 冊目の本「Vibe コーディングのゼロ基本: AI を使用してウェブサイト、アプリ、作業自動化ツールを作成する（新しいタブで開く）」が Qi Feng から出版されました。 この本は、プログラムを一度も書いたことはないが、自分で何かをやってみたいと考えている友人のために書かれています。 この本では、vista.tw が実際にどのようにデプロイされ、起動されるかを段階的に説明しています。技術的な詳細をすべて理解する必要はありません。要件を明確に説明できるようになっていれば、次は AI や自動プロセスに任せることができます。
Web サイトは美しいですが、訪問者は探しているものを見つけることができません。
この時点で、あなたは疑問に思うかもしれません。Web サイトは今年 2 月に構築されたばかりなのに、なぜ 10 月に再度改訂する必要があるのですか?
その理由は非常に現実的です。 今年創刊されたVista.twは文芸青年誌のスタイルをとっている。 レイアウトは非常に高品質で、3か国語で5,000以上の記事が蓄積されています。ブランドのファサードとしての資格を持っています。しかし、数か月間読んだ後、私は問題を発見しました。 それは雑誌のように見えますが、読者が最も求めているものを提供していない可能性があるということです。
Google Search Consoleで情報を調べてみたのですが、結果は少し恥ずかしいものでした。 ナビゲーション バー上の 4 つの収入関連ページ、つまり「サービス」、「無料リソース」、「ワークショップ」、「作品」は、過去 2 か月間、Google 検索ポイントからのアクセス数が予想ほど多くありませんでした。
よく見るとコース入口が3か所に点在しています。訪問者はクリックした後、実際にサインアップする前に、別の Web サイトに移動して販売ページをもう一度見る必要があります。 接続の層が追加されるたびに摩擦の層が追加され、興味を持った人が途中で離れてしまう可能性があります。
どれだけ多くの記事を書いても、読者がコースを探したり、無料のリソースを探したり、私をクラスに招待したりするときに入り口を見つけることができなければ、Web サイトはまだ半分しか終わっていないことになります。
改訂コンセプト：雑誌から店舗へ
そこで今回の改訂では、訪問者が欲しいものをできるだけ短時間で見つけられるようにする、という非常にシンプルな方向性を自分自身に設定しました。
具体的には3つの原則があります。
まず、役割分担が明確です。 vista.tw は入り口であり、すべてのコースの紹介、無料リソース、およびコースへの招待情報が配置されます。 solo.tw（新しいタブで開く） はレジ係として後ろに退き、登録、支払い、学生エリアのみを担当します。 読者は 2 つの Web サイト間を行ったり来たりする必要はもうありません。
次に、必要に応じてルートを変更します。 新しいバージョンのナビゲーション バーは、コース センター、無料リソース、記事、会社への招待状、概要など、私との関係の深さに応じて配置されています。 初めてここに来た人でも、私の記事を数年間読んでいる古い友人でも、次のステップをすぐに見つけることができます。
第三に、一度に行う主要なアクションは 1 つだけです。 ホームページの最初の画面にはメイン ボタンが 1 つだけあり、「最近のコースを表示」というボタンの隣に小さな掲示板があり、どのコースが登録可能で、どのような無料リソースが利用可能であるかを示します。 訪問者が入場時に 10 個のボタンに直面して、どれも押さないというのは望ましくありません。
ビジュアル的にも、元の雑誌のスタイルをやめて、明るくて丸みのあるスタイルに変更しました。タイトルは丸いボディに置き換えられ、温かみのある紙のような背景に黄色のボタンが使用されました。 よりフレンドリーで、あなたを歓迎する場所のように見えます。
ある週末の復習で学んだ 3 つのこと
AIを使ってバージョンを修正するのは本当に早いのですが、2日間やってみて、いくつかの落とし穴も踏んでしまいました。 では、3 つ選んでシェアしましょう。
1. ブリーフィングは Web ページと同等ではありません
今回のビジュアルインスピレーションは、私が最近デザインしたコースブリーフィング（新しいタブで開く）から来ています。 ニュースレターの太い太字や蛍光ペン、イラストシールが気に入ったので、AIにニュースレターの表紙の構成をトップページに移動してもらいました。
その結果、最初のバージョンがオンラインになった後、私さえも読み終わった後首を横に振った。 余白が多く、キャラクターの絵も非常に小さく、最初の画面にはほとんど情報がありません。ブリーフィングの表紙みたいですね。 美しいですが、ウェブサイトのあるべき姿が欠けています。
その後、AI に異なる方向の 3 セットのホームページ サンプルを一度に作成して比較し、最終的に新しいバージョンを選択しました。左側にはタイトル、一文の紹介、メイン ボタン、およびいくつかのパフォーマンス図が表示されます。右側は「Now Open」ボードです。 今回学んだ教訓は、視覚的なアイデアはブリーフィングからインスピレーションを受ける可能性があるが、Web ページはスキャン可能で明確な情報階層が必要であり、その構成をコピーすることはできないということです。
2. AI は物事をすばやく実行できますが、それでも自分で判断する必要があります。
AI は数分でページ全体を変更できますが、どの文が読者に誤解を与えるかは必ずしもわかりません。
たとえば、もともとホームページには「無料で始められる」というタイトルのセクションがあり、とても親切に見えました。 でもよく考えたら、読者の皆さんは私の講座はすべて無料だと思われるかもしれないので、「自分に合った次のステップを見つける」に変更しました。
最初の画面の紹介文のように、AIは「無人企業の運営方法をすぐに使えるレッスンにまとめました」と書き始める。 最後の言葉を「スキル」に変更したのは、読者が望んでいるのは、もう 1 つのレッスンではなく、1 つのことを学ぶことだからです。 カラーマッチングもあります。オリジナルの飽和したブルーが広い面積で使われており、ずっと見ているととてもまぶしいです。 リンクと小さな装飾のみ青のままにしてもらいました。
これらは小さな変更ですが、いずれも読者の立場に立って考える必要があります。 AI により処理は迅速化されますが、判断の責任は依然として私たちにあります。
3. 本当に遅いのは展開と検査です
コードの変更は高速ですが、デプロイメントの待機には非常に時間がかかります。 vista.tw には何千もの記事があり、完全に構築するには約 40 分かかります。 プッシュ後にエラーが見つかった場合は、別のラウンドを待つ必要があります。
土曜日に、私は一度この問題に遭遇しました。本のページの URL を変更するときに、AI が画像のパスを変更しましたが、画像ファイルはそれに応じて移動されませんでした。その結果、自動チェックにより展開全体がブロックされました。 その後、私は教訓を学びました。発送する前に、コンピューター上でいくつかのチェックプログラムを実行し、問題がないことを確認してから発送しました。
さらに、ウェブサイトの速度にも対応しました。 改定前は、携帯電話で低速ネットワーク環境下で YouTube 動画を埋め込んだ長文記事を開くと、全画面表示になるまでに 10 秒以上かかることがありました。調整後は平均的な記事が約2秒、動画付きの長文記事が約5秒に短縮されました。 読者は必ずしもこの改善に気づくわけではありませんが、読者が待つごとに、戻るボタンを押す人が 1 人減ることになります。
新しいバージョンの vista.tw は次のように使用できます
改訂プロセスについてこれまで述べてきましたが、最も重要なことは、この Web サイトがどのように役立つかということです。 よくある使い方をいくつかまとめてみました。
どこから始めればよいかわかりませんか?まずはホームページの 4 つの出発点を見てみましょう
ホームページの真ん中に「今日解決したいことは何ですか？」というコーナーがあります。私は読者の最も一般的なニーズを 4 つのタイプに分類しました。 1 つは論文を書くことと調査を行うことです。安定してコンテンツを制作したい。 AI に何かをしてもらいたい。そしてあなたの単元の講師を探します。ニーズに最も合ったものを選択すると、適切なコースまたはリソースが直接表示されます。
クラスを受けてみませんか?コース センターにアクセスして、今後のコースを確認してください
コース センターには、近い将来、登録可能な公開クラスがリストされる予定です。 各クラスについて、まずページ上でコースの要点、時間、場所、料金を確認し、登録するかどうかを決定します。現在、オープン セッションは 2 つあります。10 月 31 日に開催される第 3 回「AI を活用した学術研究および執筆実践ワークショップ（新しいタブで開く）」と、11 月 14 日に開催される第 7 回「AI コンテンツ制作システム ワークショップ」です。 10 月 31 日までに登録すると、早割価格をお楽しみいただけます。時間が合わない場合は、授業開始通知にご登録いただくこともできます。 次回の授業開始時にできるだけ早くお知らせいたします。
まだ様子を見ていますか?まずは無料のリソースを入手してください
無料リソースページでは現在、AIコンテンツ制作システム設計図、無人企業スタートアップパッケージ、研究公正自己点検プロンプトパック、講師AI授業準備自己点検チェックリストの4つのツールが直接入手できるようになっています。 私の過去のコースや講義からのプレゼンテーションを集めたプレゼンテーション ライブラリもあります。 そのほとんどは一般公開されています。
記事をお探しですか?トピックと検索を使用する
5,000 以上の記事が、AI の実用化、ライティング、コンテンツ マーケティング、個人ブランディング、起業家精神と収益モデル、生産性システムなどのトピックに分かれています。 各トピック ページには関連記事がまとめられています。特定のトピックを見つけたい場合は、サイト上で直接検索することもできます。 読書メモが好きなら、「下線付き文」ページには、私が本の中で下線を引いた文が含まれています。これは、ちょっとした瞬間に読むのに非常に適しています。
クラスに招待したいですか?フォームに直接記入してください
従来は授業への招待状がメールで送信されており、ニーズの確認を何度も行ったり来たりする必要があり、時間がかかっていました。 今回は、一般的な講演テーマ、適切な候補者、過去の協力ユニットをリストした新しい企業講演招待ページをデザインしました。以下にフォームがあります。ご記入後、3営業日以内にご返信させていただきます。
新しい本を読みますか?ブックステーションで学習の幅を広げましょう
「ゼロ基礎のVibeコーディング」には独自の書籍サイトもあり、第1章と第4章の全文が無料で読めるほか、説明会や拡張記事もサポートされています。 すでに書籍を購入されている場合は、読者向けセクションもここにまとめられています。
アクションを起こす敷居が本当に低くなりました。
この 2 日間を振り返って、私が最も感心したのは、AI がいかに速くプログラムを書けるかということではなく、ライターが 10 年以上運営してきた Web サイトを、いかにして 1 つの週末で徹底的に再編成するかということでした。
数年前であれば、このような改訂を行うには、アウトソーシングチームを見つけ、数回の会議を開き、数か月待つ必要がありました。 私が今やるべきことは、実は記事を書くのとよく似ていて、読者が何を必要としているのかをしっかり考え、わかりやすく説明し、結果を見て何度も修正するということです。
『基礎ゼロから学ぶVibeコーディング』を書く上で一番伝えたいこともこれです。最初からエンジニアになる必要はありません。 あなたが頭の中にあるアイデアを明確に説明する意欲がある限り、AI はそれを段階的に実行するためにあなたに同行します。 ずっとやりたいと思っていたウェブサイトやガジェットがあるけれど、テクノロジーを理解していなくてまだ始められないと感じている場合、この本は最初の一歩を踏み出すのに役立つかもしれません。
最後に、お願いがあります。暇なときに vista.tw の新しいバージョンを参照してください。何かおかしな点を見つけた場合、何かが見つからない場合、またはウェブサイトに掲載したいリソースがある場合は、私に直接返信してください。 このウェブサイトはあなたのために作られており、あなたの意見が次の改訂の方向性となります。
次回お会いしましょう！
ビスタ
