Readdy.ai完全活用ロードマップ

🎯 はじめに

このロードマップでは、Readdy.aiを使った効率的なWebサイト制作の全工程を解説します。プログラミング不要で、日本語だけで本格的なサイトが作成できる革命的なツールです。

📋 STEP 1: アカウント作成と基本設定

1-1 アカウント登録

• Googleで「Readdy.ai」を検索
• 「Get Started」からアカウント作成
• Googleアカウントまたはメールアドレスで登録

Readdy.aiと検索してください。見た目は英語ですが安心してください。日本語で使います。Get Startedでアカウントを作成しましょう。Googleアカウントがあればこちらですぐに認証できますし、他のメールアドレスが良ければこちらから登録をしてContinueをしてください。

1-2 プロジェクト作成

• ダッシュボードで「New Project」をクリック
• 言語選択：HTMLを推奨（最も分かりやすい）
• プロジェクト名を入力
• デスクトップ/モバイル選択（今回はデスクトップ）
  
  
  

  アカウント作成後、こちらがダッシュボードに入力してページを作成します。もしテンプレートを使いたい人はこの下に複数のテンプレートが用意されてるので、こちらを使っていくこともできます。ここで選択したサイトを画像やテキストを入れ替えて作っていくこともできます。

  初めて作成する場合はここのNew Projectというのを押してください。そうするとCreate Projectっていうのが出てきますので、色々とここで言語を選べますが、基本的にはサイト制作で使いたいなら1番分かりやすいHTMLでやることをお勧めします。

  HTMLを選びました。プロジェクト名は、何でもいいので入力してCreateですね。ここに作りたいサイトを入力していきます。デスクトップとモバイルと選べるんですけども、今回はデスクトップで作っていきます。

🚀 STEP 2: サイト作成方法（3つのアプローチ）

2-1 【初級】簡単な指示での作成

• 自動で構成を提案
• ファーストビューから順次作成
• レスポンシブ対応済み
  
  
  

  とりあえずまず簡単な指示を出します。これは日本語で大丈夫です。例）都心のおしゃれなレストランのサイトを制作して等。

  30秒であっという間にこういうサイトが完成します。このページ内容は自分で変更することもできます。

  変更したい時はどうすればいいかというと、Selectorっていうのを押してもらうと変更したい箇所を選択することができます。例えばこのテキストであればこの変更したい箇所をクリックして、テキストと押してもらうと変更することができます。

  リンクをつけたければこれリンクをつけることもできますし、あとはこの画像を簡単に変えることもできます。

  例えばあとはこのファーストビューも選択してみると、Videoってあるんですが、このVideoっていうところを選ぶと簡単に動画を作ることもできます。Video選んだ後はこのどんな画像にしますよっていうのがここで文字で出てきますね。

  もしそのビデオのイメージも伝えたければここで伝えてあげれば大丈夫です。一旦これでGenerate Videoを押していきます。そしたら動画を作ってくれます。

  この仮想ページもクリック1つで作ってくれます。例えばこのメニューを見るというところを押すとContinue to Generateと出ます。これを押すだけで次のページも作ってくれます。

  この構成で、見出し以外にもデザインスタイルだったりとかレスポンシブの際の表示だったり、あとはテキストまで全部出してくれてます。

  もし編集したい場合は例えば、「メニューの数をそれぞれ3つずつ増やして」と指示を出しますと増やしてくれます。

  ここで作ったデザインは、このExportと押してもらえればデザインツールのFigmaに簡単にエクスポートすることもできます。こう押さずともコードが見れるので、これをコピーしてもらったりとか、あとはHTMLファイルでダウンロードすることもできます。

2-2 【中級】詳細指示での作成

• サイトのコンセプト
• ターゲット設定
• サイト全体構成
• サイトマップ
• ワイヤーフレーム

  具体的なページ構成イメージのプロンプトを入力します。サイトのコンセプト、ターゲット、サイトの全体構成、サイトマップ、トップページのワイヤーフレーム、これも全部入力していきます。

  

  プロンプト例

  レストラン・飲食店サイト制作プロンプト

  以下のレストランサイトの情報をもとにサイトのトップページを作成してください。

   

  1. サイトのコンセプトとターゲット

  コンセプト: 地元の新鮮な食材を使った、心温まる料理と居心地の良い空間を提供するファミリーレストラン。記念日や日常の食事、両方に対応。

   

  ターゲット: 30代～50代のファミリー層、カップル。美味しい料理と温かいサービスを求める層。特別な日の利用も多い。

   

  2. サイト全体の構成

  Home（トップページ）: レストランの魅力を凝縮

  Concept（コンセプト）: こだわりと想い

  Menu（メニュー）: 料理とドリンクの詳細

  News（お知らせ）: 季節メニューやイベント

  Private（個室・貸切）: 特別な日のご提案

  Access（アクセス）: 店舗情報

  Reservation（予約）: オンライン予約

   

  3. トップページの構成

  – ヒーローエリア: 美味しそうな料理写真と「家族みんなの、特別な時間を」

  – おすすめメニュー: 看板料理を魅力的に紹介

  – レストランの雰囲気: 内観写真で温かみを表現

  – シェフからのメッセージ: 料理への想いを伝える

  – お客様の声: 家族連れの満足度をアピール

  – アクセス・予約: わかりやすい案内

   

   

  完了したらGenerateを押します。そうすると作成開始してくれます。

  ただここももし修正したい時は指示を出しましょう。例えば今日のおすすめセクションの「メニューを6つにしてください」と指示を出します。

  さらに以下では他の具体的な指示を出す方法もお伝えをしていきます。

2-3 【上級】参考サイト画像での作成

手順：

1. 参考にしたいサイトをスクリーンショット
2. 画像をアップロード
3. 参考にしたい要素を指定（レイアウト、コピーライティングなど）
4. 色やスタイルの追加指示

   例えば参考にしたいサイトがあったらそこの画像を貼り付けることでページを再現してもらうこともできます。なのでこんなサイトにしたいという風に要望があればその画像指示だけでもページを参考にしたサイトを作ることができます。Googleページでまずスクショして、そしてこれを貼り付けてアップロードします。

   そうすると画像を貼るだけでどこを参考にしたいですかという風に聞いてきてくれます。「レイアウトとコピーライティングを参考にしたい」などと伝えます。日本語で「色は青と緑をベースにして高実績と文章、添付画像を参考にページを作成して」と指示を出します。これで問題なければGenerateをしていきます。

📤 STEP 3: エクスポートとデザイン連携

3-1 Figmaエクスポート

方法1：プラグイン使用

• Figmaに「Readdy.ai」プラグインを導入

方法2：HTML to Design（推奨）

1. コードをコピー
2. 「HTML to Design」のEditorに貼り付け
3. 「Create」でFigmaに変換

3-2 コード取得

• HTMLファイルとしてダウンロード
• コードコピーで自由編集可能

  デザインを自分ではもうちょっと細かく修正したいなって思う方もいるかもしれないのでその方法もお伝えします。Exportボタンで、デザインツールのFigmaにエクスポートすることができます。これをやりたい場合はFigma上にReaddy.aiっていうプラグインがあるので、それを導入してやるか、HTML to Designのプラグインを使う方法でも可能です。

   

  やり方はReaddy.ai上でコードを出してもらって、コピーします。HTMLを貼りつけて、Createを押したら、今作ったデザインをFigmaに起こすことができます。

🌐 STEP 4: 独自ドメインでの公開

4-1 ドメイン準備

新規取得の場合：

• Xサーバーの Xドメインを推奨
• ドメイン取得フォームで希望ドメインを入力

サブドメイン使用の場合：

• 既存ドメインの前に好きな文字を追加
• 例：readdy.example.com

4-2 Xサーバーでの設定

1. サーバーパネル→「サブドメイン設定」
2. 該当ドメイン選択
3. 「サブドメイン設定追加」
4. 希望のサブドメイン名を入力
5. 反映待ち（20-30分）

4-3 DNS設定

1. 「DNSレコード設定」→「DNSレコード追加」
2. サブドメイン名入力
3. 種別：「CNAME」選択
4. 内容：Readdy.aiから提供されるValue入力

4-4 Readdy.ai側設定

1. 「Publish」をクリック
2. 取得したドメインを入力
3. 設定確認後「Next」
4. DNS設定反映後「Active」に変更
5. 「View My Website」で確認

   ここでは作成してきたサイトをオリジナルのドメインで公開していきます。今はサイトはこのReaddy.aiのドメインになってます。これをオリジナルドメインに変更する方法も解説していきます。ドメインの取り方は色々あるんですが、日本でも人気で新規ユーザー数のNOVAに多いXサーバーのXドメインで対応していきます。新規取得の場合はドメイン取得フォームのページで欲しいドメインを入力して手順に沿って進めていってください。

   ドメイン取得してからの手順は一緒なんですけど、今回はサブドメインの方法も解説します。サブドメインっていうのはこのメインのドメインの手前に自分の好きな文字をつけて新しくドメインを作れるというものです。ドメインを取った方もすでに自分のドメインを他で持っている人はこのサブドメインでやってもらうとスムーズです。

   サブドメインの設定の仕方ですが、Xサーバーのサーバーパネルからサブドメイン設定というところを選んでください。該当のドメインを選んで、次にこのサブドメイン設定追加というのを押します。ここに取得したいオリジナルドメインの名前を入れていきます。そして確認画面を進んでいきます。そうすると今回入力したこのドメインを手に入れることができます。

   設定後はこの設定欄のページに今回設定したドメインが表示されます。取得後はしばらく反映待ちの状態になって使えるまで少し時間かかるので、2、30分ほど待ってもらえれば使用可能です。

   次にReaddy.aiのドメイン設定をしていきます。オリジナルドメインで公開したいサイトを選択しPublishを押してください。そして今回取得したドメインを入力します。そしてチェックをします。そうするとドメインが使用できますと出ますのでこれでNextに行きます。次にこれらのType、Name、Value、これを参考に設定をしていきます。

   ⅹサーバーに戻ってドメインのDNSレコード設定というところに行きます。この中にメインドメインを選択して、このDNSレコード追加というのを押します。ここに今回作成したサブドメインの名前を入れて、この種別、内容ってあるので、種別はタイプ、このタイプのCNAMEっていうのを選択して、ValueのWReaddy.aiサイト、これを入力します。そして確認画面へ進みます。そしてこれで追加するを押します。そうするとDNSレコード追加が完了しましたと出ます。

   その状態でReaddy.aiのページに戻ってこれを少し時間を開けて更新を押します。ということで少し時間を置いてクリックしたらPendingからActiveになったらオッケーで、他がもし出てたらオフにしてもらえれば大丈夫です。そしてトップページに設定したいページを選んで、そしてPublishを押します。これが全てオッケーになったらサイトが見れるはずです。確認方法はView My Websiteを押しますと確認が可能です。

   もちろんサイト上でコードを修正してこだわりたい箇所はカスタマイズもできます。HTMLやCSS、JSなど複数のコードにも対応していてエンジニア、デザイナー問わず使えるツールです。もしわからないこと等あればコメント等で教えていただけると幸いです。ここまで読んでいただきありがとうございました。