Readdyで本格Webサイトを作る方法

TL;DR

Readdyでは、作りたいサイトの内容やデザインを文章で指示すると、アニメーション付きのLPやブログを生成し、チャットで修正できる。スマホ表示の確認、外部サービス連携、独自ドメインでの公開、コードのダウンロードにも対応する。

Transcript

皆さん、ウェブサイトは何で作ってます でしょうか?もうWordPressの 時代は終わるかもしれません。LetAI というものが登場しました。これがWeb 制作の未来を大きく変えるAIツールに なってるかもしれません。え、ということ でこんにちは。ケツです。このチャンネル ではAIの最新情報や活用事例を紹介して ます。是非チャンネル登録お願いいたし ます。え、ということで今回のテーマは ですね、レディAIと言われるWeb制作 に特化したAIツールをですね、紹介、 そして実際に触ってどういったことが できるのかっていうのを解説していきたい と思います。まだWordPressで ウェブサイトを作ってる方、昔は簡単に ページを作るためだけにWordPLを 使ってたと思います。テーマを選びプラグ イ... Read More

Key Insights

• Readdyは、数行のテキスト指示からアニメーションを含む本格的なWebサイトを生成し、左側のパネルで制作状況をリアルタイムに確認できるAIツールである。
• WordPress制作は、テーマやプラグインの導入、レイアウト、フォント、レスポンシブ表示、文章、画像、SEO、サーバー、ドメイン、セキュリティの設定が必要である。
• Readdyは、既存のLPを見本として指定し、元の文章や画像を利用しながら、アニメーションやデザイン上の工夫を加えた新しいLPを生成できる。
• チャット編集は、サイト全体の日本語化、画像サイズの調整、不要な影の削除、ラベル位置の修正など、複数の変更内容をまとめて指示できる仕組みである。
• セレクター機能は、ページ内の修正対象をピンポイントで選択し、その要素だけに画像幅やコンテンツ配置などの変更指示を与えられる機能である。
• Readdyは、ブログ一覧や記事ページに加えて、新規記事を作成して公開状態を設定できる管理画面も、文章による依頼から生成できる。
• 公開機能は、新しいドメインを購入する方法と、保有するドメインを入力してDNSを設定する方法に対応し、完成したサイトをそのまま公開できる。
• Readdyは、Stripe、Shopify、Googleアナリティクスとの連携項目、SEOコードの自動生成、モバイルプレビュー、生成コードのダウンロード機能を備えている。

Questions & Answers

Q: ReaddyでWebサイトを作る方法は？

アカウントを作成してログインし、入力欄にサイトの目的、必要な文章や画像、希望するデザインを記述して送信する。実演では既存LPを参照させ、元のテキストと画像を使いながら、アニメーションや科学模様を追加し、ユーザーファーストなUIにするよう指示してLPを生成した。

Q: ReaddyはWordPress制作と何が違いますか？

WordPressでは、レンタルサーバーとドメインの準備、インストール、テーマやプラグインの導入、フォント、レスポンシブ表示、SEO、セキュリティなどを個別に設定する必要がある。Readdyはサイトの要件を文章で伝えることでデザインとページを生成し、その後もチャットで修正できる点が異なる。

Q: Readdyで生成したデザインを修正する方法は？

中央のチャット欄に、変更したい内容を具体的にまとめて入力する。実演では、ページ全体の日本語化、メインビジュアル画像の影の削除、画像サイズの調整、コミュニティ部分の画像修正、料金プランのラベル位置の修正を依頼し、生成後のサイトを段階的に整えた。

Q: Readdyのセレクター機能とは何ですか？

セレクターは、Webページ上の特定の要素を選択し、その箇所だけに修正指示を与える機能である。実演ではサイズが合っていない画像を選び、「画像サイズに合わせた形のコンテンツにしてください」と指示することで、画像の横幅に合うよう対象部分を修正した。

Q: Readdyでブログと管理画面を作る方法は？

チャットでブログ記事と、その記事を管理する画面の作成を依頼する。実演ではブログ一覧と記事ページに加えて管理画面が生成され、新規記事のタイトルと本文を入力して記事を追加し、公開状態へ変更できた。ただし、追加記事の表示にはサイト全体の公開作業が必要と見られている。

Q: Readdyで作ったサイトを公開する方法は？

画面右上の公開ボタンを押し、ドメインの有無に応じて手続きを進める。ドメインを持っていない場合は候補を設定して購入でき、すでに所有している場合はドメイン名を入力し、ドメインとサイトを接続するDNS設定を行うことで公開できる。

Q: Readdyはスマートフォン表示に対応していますか？

Readdyにはモバイルプレビューがあり、画面右上からスマートフォンでの見え方を確認できる。実演したLPは、文章、画像、ボタンなどがスマートフォン向けに整えられていた。通常のAIコーディングでは調整が難しいこともあるスマホ対応を、生成後すぐに確認できる。

Q: Readdyの料金プランと主な機能は？

無料プランでは月に250クレジットを利用できる。紹介された有料プランでは、スタンダードが2500クレジット、プロが6000クレジット、さらに上位のプランが1万2000クレジットに対応する。プラン間にはAIの利用制限やカスタムドメインなどの違いがあると説明されている。

Summary & Key Takeaways

• Readdyは、Webサイトの目的、掲載内容、デザイン上の希望などを文章で入力して制作を始めるAIツールである。実演では既存のコミュニティLPを参照させ、画像や文章を生かしながら、アニメーションや科学模様を加えたユーザーファーストなページを生成した。最初の出力でも元サイトの再現性とデザイン品質は高く、リンク先も反映された。

• 生成後のサイトは、チャットによる追加指示で日本語化、画像サイズ、影、料金プランのラベル配置などを調整できる。セレクターでページ内の特定要素を選び、その箇所だけを修正することも可能である。実演では、サイズが合っていなかった画像を指定し、横幅に合わせたコンテンツへ修正しており、AIとサイトビルダーを組み合わせた編集方法が示された。

• ReaddyはLP生成だけでなく、ブログページと記事管理画面の作成、モバイルプレビュー、SEO向けコードの自動生成にも対応する。Stripe、Shopify、Googleアナリティクスとの連携項目があり、完成後は新規ドメインの購入または保有ドメインのDNS設定によって公開できる。生成コードはファイルとしてダウンロードでき、実演ではNode.js形式と見られる構成だった。