今回は、Readdy AI（readdy.ai）の申し込み・始め方から使い方まで詳しく紹介します。
AIを搭載しており、プロンプトから指示を出すだけで、誰でもホームページを作成することができます。
Readdy AIを使ってみたい方は、ぜひ当記事を参考にしてください。
Readdy AIについて詳しく知りたい方は、こちらの記事も合わせてチェックしてください。
こちらの記事は、プログラミング・Web制作歴15年以上、ブログ歴10年以上のプログラマーが書いています。
プライベートでも仕事でも多くのレンタルサーバーを利用してきた経験から、サーバーに関する豊富な知識をもとに書いています。
>> プロフィール
コンテンツ
クレジットについて
最初に、クレジットについて説明しておきます。
Readdy AIでは、「クレジット」というものを消費してホームページを構築していきます。
プランにより付与されるクレジット数も異なり、新規作成、画像・動画の作成、ページの追加、情報の変更・修正などでクレジットを消費することになります。
ですが、私の方で様々な作業で確認してみましたが、基本的に"1プロンプトの実行で25クレジットを消費する"ことになりそうです。
ただ、コードのダウンロードや公開など、ホームページの作成・修正に直接関係のない作業ではクレジットを消費しないようです。
ちなみに、無料だと月250クレジットついていますが、これだとすぐになくなってしまいます。
実務でReaddy AIを使用する場合には、実質的には有料プランの申し込みが必要と考えてください。
また、Readdy AIでは、プロンプトから指示を出してホームページの構築を行っていきます。
1プロンプトで1つの修正作業を指示すると、それだけでクレジットを消費してしまいます。
そこで、1プロンプトで複数の作業を指示することでかなりクレジットを節約できます。
↓
こんな感じで箇条書きで複数に指示を出すようにしましょう。
Readdy AIの使い方
それでは、Readdy AIを使用する流れについて説明します。
今回は、以下の流れで説明します。
ステップ②、申し込み
ステップ③、ホームページを作成
ステップ④、ホームページを公開
とりあえず無料でReaddy AIを触ってみたいという方は、「②、申し込み」を飛ばしてください。
ステップ①：サインアップ～新規作成
まず、以下のサイトからReaddy AIにサインアップします。
→ Readdy AI サインアップ
Googleアカウント、またはメールアドレスを使ってサインアップします。
今回は、Googleアカウントを使ってサインアップします。
※もしGoogleアカウントを持っていない場合は、メールアドレス（Email address）でサインアップしてください。
↓
サインアップに使用するGoogleアカウントを選択します。
Googleアカウントの情報に問題がなければ「次へ」をクリックしてください。
次に、作業者の役割を選択する画面へ移動します。
該当するものを選択し、次の画面へ移動してください。
プロジェクトの作成画面が開きます。
今回は「My First Project」と設定してみますが、皆さんは自身で管理しやすいプロジェクト名を設定してください。
1ホームページで1プロジェクトとお考えください。
プロジェクト名を設定したら「Create」をクリックし、プロジェクトを作成してください。
↓
これでプロジェクトの作成が完了し、このような画面が開きます。
この画面のプロンプトから指示を出すことで、ホームページを新規に作成することができます。
今回は、オシャレなカフェのホームページを作ってみるので、このように指示を出してみます。
ちなみに、実務で使用する場合には、もっと細かく指示を出した方がいいです。
カフェのホームページであれば以下のような感じです。
・オシャレでモダンなデザイン
・カフェのターゲットは20～30代の女性
・店名は「Shibuya Cafe」
・カフェの場所は「渋谷区松濤1-2-3 松濤ビル1階」
・電話番号は「03-1234-5678」
・営業時間は「9:00～20:00 / 定休日は日曜日」
・メールアドレスは「info@gmail.com」
・ヘッダーの右上にはSNS（Xとインスタ）のリンクを設定
・トップページには「お知らせ」「メニュー」「当店のこだわり」「アクセス」のコンテンツを設定して
・ヘッダーのグローバルメニューには「お知らせ」「メニュー」「当店のこだわり」「アクセス」「お問合せフォーム」「サイトマップ」を設定
上記はあくまでサンプルですが、指示は細かいほどAIもあなたのイメージを形にしやすいです。
そのため、ここは少し時間をかけて考えてみるのもおすすめです。
それで、プロンプトを入力しEnterすると、ホームページの作成が開始します。
作成が完了するまでは数分かかるので、この画面の状態でしばらくお待ちください。
作業が完了すると、このような感じでホームページが新規に作成されます。
「カフェのホームページを作りたいです。今どきのオシャレでモダンなデザインにしてください。」と指示を出しただけですが、かなり完成度の高いカフェホームページが作成されました。
せっかくなので、ホームページ全体をチェックしてみましょう。
下へ少しスクロールしてみてください。
まず、メニューセクションがこのような感じで作られています。
カテゴリごとに分けられていて、写真も綺麗に設定されています。
さらに下へスクロールすると、「こだわり」のセクションが作成されていました。
このセクションも見やすく作成されています。
写真はイメージ画像なので差し替えが必要ですが、いい感じですね。
カフェへのアクセス情報もGoogleマップ付きで掲載されています。
画面を一番下まで移動すると、フッターも作成されています。
フッターは、よくある3分割の形式で、こちらも見やすく作成されています。
また、Readdy AIでは、デフォルトでレスポンシブデザインで作成されるので、スマホ画面にも最適化されています。
画面上にあるメニューからスマホ画面に切り替えられるので、そちらから切り替えてチェックしてください。
このようにスマートフォンではどのように表示されるかも確認できます。
↓
もし、作成したホームページが実際のブラウザでどのように表示されるか知りたい場合は、「Share（シェア）」ボタンをクリックしてください。
「https://readdy.link/preview/～」というURLのリンクが開くはずです。
これは、本番公開用URLではないですが、実際に作成されたホームページを確認するのに使用できます。
・受注案件においてお客さんに制作途中のホームページを確認して貰う
・Readdy AIでどんなホームページを作れるかのサンプルをお客さんに提示する
と言った場合に使用するのにもおすすめです。
このあとは、実際に細かな修正を行っていくことになります。
Readdy AIでは、修正もプロンプトから指示を出して行います。
そのため、修正も簡単に行えます。
例えば、「SNSのリンクを設定して」「お知らせを追加して」などと指示を出して、イメージするホームページに仕上げていくだけです。
ですが、無料プランのままだとクレジットをすぐに使い切ってしまいます。。
そこで、次のステップでは、先に有料プランへアップグレードを行い、クレジット数を増やしておきます。
もし、とりあえずこのまま無料で試してみたい方は、次のステップを飛ばしてステップ③へ移動してください。
→ 「ステップ③：ホームページを作成」へ飛ぶ
ステップ②：申し込み（有料プランへアップグレード）
次は、Readdy AIの有料プランへの申し込みを行います。
画面右上にあるアイコンをクリックするといくつかのメニューが出てきます。
その中にある「Subscription」を選択します。
有料プランの申し込み画面が開きます。
無料プランだと、クレジット数が「250」になっていますね。
プランに関しては、年契約と月契約があります。
年契約だと、月契約と比べて月額料金がかなり安くなります。
ただ、短期間のみ使用したいという方は、月契約で申し込みましょう。
利用したいプランが決まれば、「Upgrade」をクリックしてください。
※今回は、Starter（2,500クレジット）を申し込みます。
アップグレードの確認画面が立ち上がるので、問題がなければ「Confirm Upgrade」をクリックします。
料金の支払い画面へ移動します。
支払いには、「クレジットカード」と「Alipay」を利用できます。
今回は、クレジットカードで申し込みます。
※皆さんは自身に合った方法で支払いを行ってください。
クレジットカード情報を入力し「申し込む」をクリックすると、支払いが完了します。
支払いが完了すると、Subscriptionの画面へ戻ります。
クレジット数が「2,500」に増えていればOKです。
これで、有料プランの申し込みが完了しました。
次は、ステップ①で新規作成したホームページを仕上げていきます。
ステップ③：ホームページを作成
それでは、Readdy AIでホームページを作成する方法を紹介します。
と言っても、ステップ①で既に新規作成は完了しているので、そのホームページに様々な修正を加えて仕上げていきます。
ですが、実際には修正指示をまとめて出すと、消費するクレジット数を節約できます。
ホームページへの修正指示は、画面右下にあるプロンプトから行います。
まず、SNSのリンクをヘッダーとフッターに追加してみます。
このような感じでプロンプトを入力して実行してみます。
※上記画像のプロンプトには記載していませんが、リンク先となるSNSのURLも一緒に記載しましょう。
↓
すると、このような感じでSNSのリンクが追加されました。
いい感じに追加してくれています。
なぜかグローバルメニューも作成されていますが、あとから作成しようと考えていたので、このままにしておきます。
次は、ヘッダー部分のロゴを作成してもらいます。
※テキストのままでも問題がなければ、ロゴ画像を作成する必要はないです。
このようにロゴ画像の作成指示を出してみます。
ロゴが作成されました。
正直、私のイメージとは少し違っていたのですが、今回はサンプルなのでこのまま進めます。
みなさんの場合、もし気に入らないロゴが作成された場合には、プロンプトから再度作成指示を出してみましょう。
今度は、トップページに「お知らせ」を追加してもらうことにします。
このようなプロンプトを実行してみます。
どこに追加するかは好みになりますが、今回はヒーローセクションの下に追加してみました。
※ヒーローセクションとは、ざっくりというと、サイト訪問者が最初に目にする部分です。
↓
「お知らせ」のセクションがトップページに追加されました。
見やすく作成されています。
「お知らせ一覧を見る」というボタンも、指示を出していませんが付けられていますね。
次は、下層ページを作成してみます。
新規作成時にはトップページのみなので、下層ページも順次作成していく必要があります。
まずは、メニューのページを作成してみます。
これでしばらく待つと、メニューページが作成されます。
メニューのリンクをクリックしてみてください。
↓
もしくは、セレクトボックスからメニューページを選択してください。
作成されたメニューページへ移動します。
かなり見やすく作成されています。
このような感じでメニュー以外の下層ページも作成していきましょう。
また、下層ページも、必要に応じてプロンプトから修正指示を出していきましょう。
例えば、今回作成されたメニューページには「パンくず」が設定されていませんでした。
そこで、下記画像のように、パンくずの追加をお願いしてみます。
これでパンくずを設定してくれました。
パンくずは、SEO的にも重要な要素なので、必ず設定するようにしましょう。
また、固定ボタンの追加も行ってみます。
カフェのサイトであれば固定ボタンは不要だと思いますが、ビジネスサイトを作成する場合には参考にしてください。
まず、固定ボタンの設定をお願いしてみました。
すると、このような感じで固定ボタンを設定してくれました。
ただ、私のイメージとは違ったので、このような修正指示を出してみました。
すると、今度はこのような固定ボタンになりました。
固定ボタンに限らずですが、今回のように自身のイメージと違った場合は、より詳しくプロンプトから指示を出すと修正して貰えます。
ちなみに、スマートフォンでも画面下に固定ボタンを表示させた場合があります。
まずスマホ表示に変更してみましょう。
プロンプトからこのように指示を出してみてください。
今回は、一回でこちらのイメージ通りに設定してくれました。
こんな感じでプロンプトから修正を行っていけば、理想のホームページに仕上がるはずです。
他にも、例えばタイトルタグやメタディスクリプションの設定もプロンプトから指示を出してください。
メタディスクリプションは、せっかくなのでAIを使って考えて貰うのもありです。
また、SEOを意識した修正を行うことも大切です。
例えば、「内部リンクを設置してクローラーの巡回効率を上げるための対策を行ってください。」などと指示を出すのもおすすめです。
会社案内や会社概要ページであれば、「構造化データのマークアップを行ってください。」と指示を出してみるのもおすすめです。
そうすると、AIが自動で判断して、SEOに関する設定を行ってくれるはずです。
ステップ④：ホームページを公開
Readdy AIで作成したホームページを公開するには、有料プランへのアップグレードが必要になります。
無料プランのままお使いの場合は、先に有料プランの申込みだけ行っておきましょう。
→ Readdy AIを有料プランへアップグレード
まだ、独自ドメインを取得されていない方は、お名前.comやXServerドメインなどで先にドメインの取得だけ行っておきましょう。
※Readdy AIで取得することもできますが、上記のサービスで取得した方が管理しやすいです。
↓
ホームページの公開は、Readdy AIの画面上部に「Publish」というボタンがあるので、そちらから行います。
まず、ドメインの設定画面に移動します。
この画面上では、
・他社で取得済みのドメインを使用
・Readdy AIでドメインを取得
のいずれかを選択できます。
私の場合、お名前.comやXServerドメインでドメインを取得・管理を行っているので、「Yes, I already have a domain」を選択します。
次の画面では、ホームページに使用するドメイン名を設定します。
今回は、説明用に「hpkaisetsu.com」というお名前.comで取得しているドメインを使って設定していきます。
※皆さんは、自身のドメイン名を設定してください。
↓
DNSの設定画面へ移動します。
この画面に従って、Aレコードの設定を行っていきます。
ドメインを管理しているサービス側で、上記画面に表示されているIPアドレスを設定します。
また、「http://www.hpkaisetsu.com/」というように「www」のURLにもアクセスできるようにする場合には、「Add hpkaisetsu.com」も有効化しておきます。
↓
それでは、Aレコードの設定を行います。
みなさんは、実際に使用されているドメインサービスのマニュアルなどをチェックして設定してください。
ちなみに、お名前.comであれば、このようにレコードを追加します。
※もし「www」のURLの設定は不要の場合は、上側の1レコードの設定のみでOKです。
そのため、Aレコードの登録後、しばらく待ってから次に作業に移りましょう。
↓
Aレコードの登録が完了したら、再度Readdy AIの設定画面へ戻ってください。
そして、「I've added the record」をクリックします。
もし、まだAレコードが反映されていなければ、このようにエラーメッセージが表示されます。
Aレコード設定後、1時間以上待ってもこのメッセージが消えない場合は、再度レコードの設定を見直しましょう。
登録したAレコードが反映されていれば、このように「Success」とメッセージが出ます。
そしたら、画面下にある「Publish」をクリックしてください。
しばらく待っていると、ホームページの公開が完了します。
これで、設定したドメインでホームページが公開されているはずです。
このあとは、実際にホームページが表示されているか、必ず確認しておきましょう。
「View My Website」をクリックすると、公開されたホームページが開くはずです。
もしくは、ドメイン名を直接ブラウザに打ち込んで確認してみてください。
お問合せフォームの作成
お問合せフォームの作成についても説明しておきます。
Readdy AIでは、お問合せフォームもプロンプトから簡単に作成できます。
このような感じで設置したい項目を箇条書きでまとめて指示を出すのがおすすめです。
※必要であれば「必須」にする項目も一緒に指定してください。
作成が完了したら、「お問合せ」のメニューをクリックしてみてください。
↓
このようなフォームが作成されました。
実際にメールを送信してみます。
これで反響メールが届くはずです。
反響メールは、サインアップ時に使用したメールアドレス（Googleアカウント）へ送信されます。
また、反響メールは、Readdy AIの画面上からも確認できます。
画面上部にある「Form」をクリックしてください。
このように、反響メールが一覧で表示されているはずです。
他社サイトのキャプチャを使って作る方法
ホームページを作る際に、気に入った他サイトをまねて作りたい場合もあります。
そのような場合、Readdy AIでは、参考サイトのキャプチャを取ってホームページを作成することもできます。
まず、プロンプトを開き、画像をアップロードします。
※画像（画面キャプチャ）は事前にとっておいてください。
アップロードしたら、作成指示を出して実行します。
しばらく待っていると、参考サイトを基にホームページが作成されます。
ただ、今回実際に作成してみると、あまりいい感じには作成されませんでした。
そのような場合は、再度同じ作業を繰り返してみてください。
もしくは、作成されたホームページを修正していくのでもいいです。
例えば、レイアウトが崩れているので「注目記事」というセクションを削除してみます。
さらに、ボックスサイズが記事によって異なるので、こちらも修正してみました。
すると、このような感じで修正されました。
最後に
今回は、Readdy AIの使い方を画像を使って詳しく説明しました。
Readdy AIを使ってみたい方は、ぜひ参考にしてください。
