【PR】AIでホームページを作れるReaddyの特徴と使い方を解説!ノーコードでWebサイトを公開しよう

ホームページを作りたいと思っても、費用がかさむことが心配だったり、専門知識が必要そうだと思ったりして悩む方も多いのではないでしょうか。
今回ご紹介するReaddyはテキストで指示するだけでWebサイトを作成でき、その後の編集や公開までできる便利なAIツールです。
この記事では、AIでホームページを簡単に作成できるReaddyの概要や特徴、使い方などについて詳しく紹介します。
目次
Readdyとは?
Readdyは、テキストで要望を指示するだけでAIを使ってWebサイトを作成・編集・公開できるノーコードのホームページ作成ツールです。
一般的に、Webサイト制作にはプログラミングの知識が必要になりますが、知識がなくても簡単にWebサイトを作成できるツールが次々と登場しています。
Readdyは、アイディアを文章で説明するだけでWebサイトを素早く生成でき、テンプレートやスクリーンショット、参考URLからサイトを作成することもできます。
Readdyでは最初からクオリティの高いWebサイトをAIが作ってくれるという特徴があり、「こんな雰囲気にしたい」という参考資料から制作できて便利です。
Readdyには基本的な機能を使える無料プランが用意されており、気軽に試せるのも嬉しいポイントです。
料金については、カスタムドメインでのサイト公開やコードの編集・ダウンロードに対応し、 作成できるプロジェクトの数やストレージ容量も増えるStarterプランが月額25ドルです。
さらに制限が緩和されて追加の機能も利用できるProプランは40ドルになっています。
Readdyの特徴
AIでWebサイトを制作できるReaddyには次のような特徴があります。
AIでサイト全体のデザインをまとめて作れる
Readdyの最大の特徴は、テキストで要望を入力するとレイアウトやテキスト、画像まで含めてサイト全体のたたき台をまとめて生成できるということです。
業種、ターゲット、色、必要な内容、機能などを具体的に書くと意図に合った思い通りのWebサイトを作成できます。
テンプレートや参考デザインから作成できる
Readdyはテンプレートやスクリーンショット、URLなどからサイトを制作でき、既存サイトの雰囲気を参考にできます。
公式サイトにはホームページテンプレートが用意されており、ポートフォリオ、採用サイトといったサイトのカテゴリーや会社の業種などから選べるようになっています。
ランディングページを作成したい場合は、ランディングページ作成用のテンプレートも用意されています。
生成後の編集が簡単
AIでサイトを作成すると、最初の生成は速くてもあとから修正するのが難しかったり時間がかかったりすることがあります。
Readdyではサイトの生成後も、ページ上の要素を選択して変更指示を出す「Select to Edit」のほか、プレビュー上でテキストやリンクなどを直接編集できる「Quick Edit」などが利用できます。
より細かく調整したい場合には、有料プランでコードを直接編集したりスタンドアローンのプロジェクトとしてエクスポートしたりもできます。
画像の差し替えや背景除去、画像や動画の生成にも対応しており、AIでたたき台を作って細部を自分で整えられます。
公開やSEO設定までできる
せっかくWebサイトを制作しても見てもらえなければ意味がありません。
Readdyは外観を作って終わりではなく、サイトの公開やSEOまで考慮した機能が豊富です。
タイトルやページの説明の編集、URLのカスタマイズ、サイトマップの管理などのほか、Google Search ConsoleやBing Webmaster Tools向けの機能もあります。
Readdyが向いている人は?
Readdyはなるべく短時間でサイトを作りたい人に向いています。
個人事業主、フリーランス、中小企業の担当者のように、外注するほどではないものの見栄えのよいWebサイトを素早く用意したいという人には相性がよいでしょう。
Webサイトに求める要件を言語化できていたり、雰囲気を参考にしたいWebサイトが決まっていたりするという場合にも最適です。
Web制作の知識がある人でも、Readdyではコードを編集できるほか、Supabase、Stripe、Shopify、Googleアナリティクスなどのサービスと連携できるため、AIでたたき台を作って自分で調整するという使い方ができます。
Readdyの使い方
まずはReaddyのアカウントを作成してプロジェクトを作成しましょう。
Readdyのサイトを開き、[無料で試す]または[Googleで登録]をクリックします

[Googleで登録]を選んだ場合はGoogleアカウントでログインし、[無料で試す]を選んだ場合はメールアドレスかGoogleアカウントからReaddyのアカウントを作成します

どのようなWebサイトをどのようなプロジェクトで作るのか質問されるので、当てはまるものを選択します


アカウントを作成したら、ダッシュボードの画面中央のテキストボックスに作りたいサイトの内容を入力します。
この画面で[ゼロから始める]の代わりに[ウェブサイトリンクから始める]や[名刺から始める]を選ぶと既存のサイトのURLや画像などを参考にしてデザインを作成できます。
業種、ターゲット、色、必要なページ、載せたい情報、希望する雰囲気まで、できるだけ具体的に書くのがコツです。

今回は例として、次のような指示を入力してみました。
黒と白を基調として黒を背景色としたスタイリッシュかつシンプルなデザインでありながら信頼感を与えるモダンなデザインのテクノロジー系ニュースサイト。トップページと記事一覧ページ、個別の記事ページが必要。トップページには新着記事と注目記事を5件ずつ表示したい。記事ページでは記事の内容に加えて著者情報、サムネイル、公開日時、タグ、新着記事、注目記事、関連記事を表示して。デスクトップとモバイルのそれぞれで適切に閲覧できるようにレスポンシブデザインにして
ページリストが表示されるので、必要に応じて変更したら[次へ]をクリックします。
![[ページリスト 以下のページ構造に基づいてウェブサイトを生成します。]というページのスクリーンショット](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Freaddy-page-list.png&w=3840&q=75)
AIが自動で生成したロゴが表示されるので、必要に応じて再生成したり既存のロゴをアップロードしたりして[次へ]をクリックします。
![[Logo 生成またはアップロード ウェブサイトの logo を選択してください。後でチャットで変更または追加することもできます。]というページのスクリーンショット](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Freaddy-logo-upload.png&w=3840&q=75)
5分から10分ほど待つとWebサイトのデザインが生成されます。

チャット形式でサイトを修正でき、テキストボックス内の[編集を選択]を使うとページの特定の箇所について指示できます。
気に入ったデザインができたら、プレビュー内のテキストや画像をクリックすることでコンテンツを直接編集できます。
とくに、問い合わせ先やブランド名、サービス内容、料金などの情報が正しいかよく確認しましょう。
確認が完了したらサイトを公開します。
無料プランでもサイトを公開できますが、独自ドメインを使ったりReaddyのロゴを削除したりするには有料プランに加入する必要があります。
サイトの公開後はGoogle Search ConsoleやGoogleアナリティクスなどと連携しておくと、検索流入を増やしたりアクセスを分析したりできるのでオススメです。
まとめ
ReaddyはAIを活用してWebサイトを素早く生成でき、細かい修正にも対応できるノーコードのWebサイト制作ツールです。
チャットによる指示だけでなく、画像やテキストを直接編集したり外部サービスとの連携もできたりと、柔軟性の高さが特徴です。
ぜひ皆さんもReaddyを使ってWebサイトを制作してみてください。
記事をシェア
フォローして最新情報を入手
Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。
-1.png&w=1080&q=75)
生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。
Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。



![Discordの[プロフィールのプライバシー]設定のスクリーンショット](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fdiscord-profile-privacy-settings.png&w=3840&q=75)
![スマートフォンのホーム画面の[Social]フォルダーを表示した写真。フォルダー内にはFacebook、Instagram、Threads、X、LinkedIn、TikTok、YouTubeのアイコンが配置されている](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Ffacebook-instagram-threads-x-twitter-linkedin-tiktok-youtube-mobile-app-unsplash.jpg&w=3840&q=75)






![画面中央に[Codex]というテキストが配置されており、その下に[Sign in with ChatGPT]というボタンが表示されている画像](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fcodex-sign-in-with-chatgpt.png&w=1920&q=75)
![npmのパッケージの設定画面のスクリーンショット。[Trusted Publisher]セクションの[Select your publisher]に[GitHub Actions]と[GitLab CI/CD]の2つのボタンが表示されている](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fnpm-trusted-publishing-settings.png&w=3840&q=75)




