AB
AiBoss
チュートリアル

AIを使って無料で個人ウェブサイトを構築する方法 – 初心者でも3つの簡単なステップでできます!

最近、インターネット上で驚くべきことがたくさん起こっているのを目にしています。例えば、たった一文から詩の朗読ウェブページを生成したり、10分で3Dウェブゲームを作成したり、コンピュータファイルを自動的に整理したりといったことです。どれも本当に興味深いものばかりです。ここ数日で、ようやくその方法の一部が分かりました。実は…

如何用AI免费搭建个人网站,小白3步搞定!

最近、素晴らしい出来事をたくさん目にするようになりました。例えば、たった一文から詩の朗読ウェブページを生成したり、10分で3Dウェブゲームを作成したりといったことです。自動コンピューターファイルの整理など、そういう作業にとても魅力を感じました。

ここ数日でようやくいくつかの方法を見つけ出しました。

だからこれらは高効率開発プロジェクトはすべてAIこれは[手段]によって達成される。

私はコードを一行も書かずに、自分の個人ウェブサイトを立ち上げることに成功しました。

https://koi0101-max.github.io/web/

プロセス全体は非常に単純必要なことを入力するだけで、費用は一切かかりません!

個人ウェブサイトの構築と公開の全プロセスを再現してみましょう。

  • 十分知的彼らは私の指示を理解し、質の高い仕事をしなければならない。
  • 費用対効果が高く、できれば…無料使用。

通儀霊馬が最近発売されました。プログラミング知的1文でAI自動ツールを呼び出してコードを生成する仕上げるプロジェクト展開

さらに調査した結果、Tongyi LingmaはQwen3シリーズのモデルを完全にサポートしており、また完全に...無料

この方は私にとって理想的な開発パートナーです!

プラグインストアで「Tongyi Lingma」を検索し、直接インストールします。(VS Code、JetBrains、Visual Studioで動作します。)

以前は、ウェブサイトを作ろうと思った時、レイアウトを考えたり、それをどうやって展開するかを考えるだけで頭が痛くなったものだ。

MCPを使えば、たった一文で全てを済ませることができます!

同義霊馬の会話ウィンドウで、MCPツール

クリックMCPプラザ

ここに3000以上のMCPツールお客様の様々なニーズにお応えできるよう、複数の選択肢をご用意しております。

このウェブサイトの開発には、以下のMCPが使用されました。

  • Figma: Figmaファイルへのアクセスとデザインドラフトの保存を可能にします。速いそれを使いやすいコードに変換する。
  • MiniMax:音声、動画、画像の生成、および音声の複製をサポートします。

対応するものをクリックしますMCP右側のインストールボタンをクリックすると、同義霊馬が自動インストールしてください。

この時点で、対応するツールの公式サイトにアクセスして、APIコマンドまたはアクセストークンを生成し、MCPの設定を完了する必要があります。

MCPツールを初めて使用する場合は、以下の手順も必要になります。設定されたMCPが正常に動作するように、依存関係をインストールしてください。

具体的な要件については、公式ウェブサイトのドキュメント、またはModaコミュニティのMCPサービスの詳細を参照してください。

ページに「接続済み」と表示されたら、設定は成功です。

Figmaのウェブサイトでデザインテンプレートを開き、デザインを選択し、右クリックして、ポップアップメニューから「コピー/貼り付け」>「選択範囲へのリンクをコピー」を選択します。

同義霊馬インターフェースに戻り、チャットボックスの左下隅で「知的"モデル。

トンイリンマに位置知的モードでは、AI要件を独自に理解・分析できるだけでなく、複数のMCPツールを独自に呼び出してタスクを完了することもできる。

最新のものを選択してくださいオープンソース最高級モデルQwen3-thingking彼らにそれぞれの強みを組み合わせさせよう。

コピーしたデザインリンクを同義霊馬のチャットボックスに貼り付け、以下のような要件を入力します。

比較リンク先のテンプレートページには若干の調整が加えられていますが、全体的なレイアウトは依然として非常に優れています。

さらに、設計図も再現されていた。インタラクティブな効果

たった1つのコマンドでこの効果が得られるなんて、本当に満足です!

しかし、これはまだ直接展開できる段階には程遠い。一緒に最適化していきましょう。

切り替えます知的質疑応答モード。

存在する知的質疑応答モードでは、プロジェクトファイルに一切変更を加えることなく、私たちの質問に答えてくれます。このモードは、以下のような場合に最適です。AI何かインスピレーションや提案をください。あるいは、コード分析をしてください。

直接聞いてみましょう。

このウェブサイトを自分の個人ブログとしてデザインしたいのですが、どのように最適化すれば良いでしょうか?

私のニーズを綿密に分析し、簡潔かつ具体的な解決策を提示し、コード例を提供します。まずはページレイアウトを最適化しましょう。要件を明確に述べましょう。

「マデリン・トルフ」のナビゲーションバーはページの左端に表示されます。その他の3つのナビゲーションオプションはページの右端に表示されます。

2ページ目の画面の改良を続けました。テンプレート内の元の画像が正しく表示されていなかったため、複数の画像を直接生成して置き換えることにしました。

そこで私は要求事項を送り続けました。

2番目の画面に、各記事に適した表紙画像を生成してください。漫画風のスタイルでお願いします。1枚目の画像は、小さな女の子がコンピューターでプログラミングをしている様子です。2枚目の画像は、様々な額縁が並んでいる様子です。3枚目の画像は、映画館からの一人称視点です。

状況を考慮して問題を解決します。私のニーズを分析した後、MiniMax MCPを呼び出して画像を生成しました。

画像を保存するための「images」という名前の新しいフォルダを作成し、画像を対応する場所に配置しました。

ウェブサイトを構築し、段階的に調整していくプロセスは、積み木で何かを組み立てていくようなものだ。

例えば、2番目の画面にさらに5枚のカードを追加し、すべてのカードを2列に分けてきれいに並べることができます。

私たちは続けるAIツール情報は3番目の画面に入力されます。

このプロセスでは、まずカードを追加して配置し、次にカードの内容を徐々に埋めていきます。

ウェブページを希望の状態に調整した後、ウェブサイトを...無料インターネットに展開されました。

GitHub上に新しいリポジトリを作成し、ウェブサイト上のすべてのファイルをこのリポジトリにアップロードします。

ページ右上の「設定」をクリックしてください。

ページ設定で、下の画像に示されているオプションにチェックを入れてください。

「保存」をクリックしてください。

ページを更新すると、ウェブサイトへのリンクが表示されます。

どなたでも、このリンクから私たちが作成したウェブサイトにアクセスできます。

私のような技術に疎い人間にとって、この一連のプロセスは単にウェブサイトを作成するだけでなく、様々なスキルを習得する機会でもありました。

AIそれは、あらゆる人の能力の限界を広げるものだ。

従来の開発手法は依然として高度な専門スキルを必要とし、一般の人には到底理解できない。真剣に学びたいと思っても、理解の糸口を見つけるには少なくとも1年半はかかる。

新世代の同義霊馬と共にAI開発ツールを活用することで、一般の人々も自分の考えを表現する機会を得ることができる。

同義霊馬プログラミング知的MCPとの統合により、「開発」が「会話」と同じくらい自然なものになりつつあります。

アイデアさえあれば、成果を上げることができる。

技術的な障壁はもはや壁ではなく、インフラ整備の基盤となっている。

プログラミング言語はもはや束縛ではなく、私たちの手に鍛え上げられた道具である。

私たちは今、プログラマー中心の世界からクリエイター中心の世界へと移行する過渡期にいます。

誰もがエンジニアになる必要はないが、通意霊馬のようなツールを使えば、誰もが製品開発者になれる。

未来はどうなるのだろうか?私には分からない。

私たちは、基盤となるエンジンを開発するような人間ではないかもしれないが、ツールを使って世界を構築し、その上に立ち、文章を述べ、アイデアを表現し、製品をリリースすることはできる。