Replitを使ってコードを書かずに会社HPを構築する方法

本記事では、「ReplitのAIエージェント」と「21st.dev」というサービスを活用し、初心者の方でも短時間で洗練されたデザインのホームページを構築する手順を解説していきます。

実際の完成イメージ：

今回利用する「21st.dev」というサービスは、簡単にいうとあらかじめ用意された「デザイン付きのWebパーツ」をまとめたサービスです。

たとえば、気に入ったボタンや背景、ナビゲーションバーなどを、コピペするだけで自分のウェブサイトに取り込めます。

内部ではTailwind CSSとRadix UIが使われていますが、Replit AgentなどのAIを活用することで自分でコードを書き換えたり細かい設定をすることなく使えるのが21st.devの最大の特徴です。

本記事は以下のポイントを押さえながら進めます。

煩雑なインストール手順は必要なく、コピペを中心とした作業ですので、Webサイトの構築経験が浅い方でも取り組みやすいはずです。まずは、作成するページの構成を確認し、全体像を把握しましょう。

サイト構成の下準備

今回の例として、企業のホームページを想定して開発していきます。実際に構成を検討する際は、ChatGPTに対して以下のような指示をしてみましょう。

HPの構成：

ホーム（トップページ）
- メインビジュアル（キャッチコピー: "Playground for AI and us"）
- 事業紹介（AIメディアの運営）
- ニュースなど（出版物やメディア出演など）
- お問い合わせフォームへのCTA
ヘッダー・フッター
- グローバルナビゲーション（会社概要、研究所、出版物、お問い合わせ）
- 会社情報、SNSリンク

構成の簡単なイメージ：

これらをセクション単位(メインビジュアル、事業紹介、ニュース、お問い合わせ)で少しずつ実装していきます。要素が増えるほどコードが複雑になりやすいため、1セクションごとに外観と動作をチェックしながら進めると効率的です。