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

実際の完成イメージ：

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

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

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

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

• 21st.devの特徴: 豊富なUIコンポーネントを提供するサービスを活用して洗練されたデザインのWebサイトを構築

• Replitの強み: ブラウザ上だけで完結する開発環境、エージェントを活用してコードを書かずにWebサイトを構築可能

• 記事のゴール: コードを書かずに企業サイトなどの複数セクションを持つページを完成させる

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

サイト構成の下準備

今回作成するサイトの例

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

HPの構成：

• ホーム（トップページ）

  • メインビジュアル（キャッチコピー: "Playground for AI and us"）

  • 事業紹介（AIメディアの運営）

  • ニュースなど（出版物やメディア出演など）

  • お問い合わせフォームへのCTA

• ヘッダー・フッター

  • グローバルナビゲーション（会社概要、研究所、出版物、お問い合わせ）

  • 会社情報、SNSリンク

構成の簡単なイメージ：

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

セクション単位の実装メリット

1. 段階的な確認: Heroセクションを完成させてから事業紹介、次に研究所・ラボといった流れで、小さく確認・修正しながら開発できます。

2. デザイン崩れの早期発見: 何が原因で表示崩れが起きたかをセクション単位で把握しやすいです。

3. ロールバックのしやすさ: ReplitのRollBack機能で戻る際も、変更した範囲が明確なので作業負荷が軽減されます。

Replitでのプロジェクト作成〜基本操作

ここからは、実際にReplitでWebサイトを構築していく流れを解説していきます。

まずは、Webサイトを開いた際に一番最初に表示されるHeroセクション(メインビジュアル)から作成していきます。