Readdy.ai（リャディーエーアイ）は、自然な言葉で目的や構成を伝え、Webサイトのデザインとフロントエンドコードを作れる会話型のWebサイトビルダーです。
ページを見ながら修正を重ね、Readdy上で公開するほか、コードやFigmaへ引き継ぐ選択肢もあります。
ただし、画面が整ったことと、事業要件、文章の正確さ、アクセシビリティ、保守性まで確認できたことは同じではありません。
Readdy.aiを「完成品を一度で出す道具」ではなく、「たたき台を短時間で作り、検証を重ねる環境」と捉えると、使いどころが明確になります。
Readdy.aiでできること
フロントエンドコードとは、ブラウザに画面を表示し、ボタンやメニューなどの操作を受け付ける部分のコードです。
Readdy.aiでは、サイトの目的や希望する雰囲気を文章で伝え、ページ構成、見た目、文案を含む案を作成できます。
| 機能 | できること | 確認したい点 |
|---|---|---|
| 会話による作成と修正 | 目的、構成、配色、文案などを文章で指定し、結果を見ながら変更できます。 | 抽象的な指示だけでは意図がずれるため、対象読者と行動目標まで伝えます。 |
| 画面とコードの編集 | 見た目を直接調整し、コードを確認または編集できます。 | コードを変更する場合は、依存関係や表示崩れを公開前に確認します。 |
| コードの書き出し | React、Tailwind CSS、TypeScriptを使ったプロジェクト一式を書き出せます。 | 自社環境で動かすには、依存関係の導入、ビルド、テスト、公開環境の準備が必要です。 |
| Figmaへの引き継ぎ | 画面に表示しているページの状態をFigmaへ移し、デザイン作業を続けられます。 | 書き出せるのは表示中の状態です。操作や画面遷移を含むプロトタイプ全体の移行ではありません。 |
| サイトの公開 | Readdyからサイトを公開し、対応するプランでは独自ドメインを接続できます。 | 公開後に変更した内容は再公開し、フォームやリンクが本番環境で動くか確認します。 |
作成前に決めておく内容
最初の指示に情報を詰め込むより、サイトの役割を先に整理すると修正しやすくなります。
少なくとも、次の六点を決めてから作成を始めます。
- 目的：問い合わせ、予約、資料請求、購入など、サイトが担う役割
- 対象読者：誰が、どのような状況で閲覧するか
- 行動目標：閲覧後に進んでほしい操作
- 必要なページ：トップ、サービス、料金、事例、会社情報、問い合わせなど
- 掲載情報：正式な名称、連絡先、営業時間、注意事項など
- 見た目の条件：ブランドカラー、写真の方向性、避けたい表現など
たとえば、「地域の税理士事務所の相談予約ページ。初めて相談する中小企業の経営者向け。サービス内容、相談の流れ、よくある質問、予約ボタンを配置。落ち着いた配色にし、スマートフォンでも予約ボタンを見つけやすくする」のように指定します。
予約、決済、会員機能、データ処理まで必要な場合は、案内中心のサイトと同じ前提では設計できません。
Webサイト制作とWebシステム開発の違いを先に整理すると、必要な機能と開発範囲を判断しやすくなります。
作成から公開までの進め方
- 目的と構成を伝える
対象読者、行動目標、必要なページを文章で指定します。 - 画面ごとに修正する
見出し、文章、画像、配色、余白を確認し、一度に多くを変えずに修正します。 - 複数の画面幅で試す
パソコン、スマートフォン、タブレットで、文字の読みやすさと操作のしやすさを確認します。 - 公開方法を選ぶ
Readdy上で公開するか、コードを書き出して別の環境で管理するか、Figmaへ渡してデザインを詰めるかを決めます。 - 本番環境を点検する
リンク、フォーム、ドメイン、表示速度、計測、検索表示、更新担当を確認してから案内を始めます。
公開方法ごとの違い
| 方法 | 向いている状況 | 注意点 |
|---|---|---|
| Readdyから公開 | 試作から公開までを一つの環境で進めたい場合 | プラン、独自ドメイン、保存容量、公開サイト数を契約前に確認します。 |
| コードを書き出す | 自社のリポジトリや公開基盤で管理し、開発者が改修を続ける場合 | 動作確認、依存関係の更新、セキュリティ対応、保守担当が必要です。 |
| Figmaへ引き継ぐ | デザイナーが画面を調整し、仕様を整理してから開発へ渡す場合 | 表示中の状態を移す機能なので、操作仕様は別に共有します。 |
運用主体と変更頻度を決めずに選ぶと、公開後の修正で手間が増えます。
制作手段を比較したい場合は、WordPressとノーコード開発の違いも判断材料になります。
公開前のアクセシビリティ確認
Webアクセシビリティは、年齢、障害、利用環境などにかかわらず、必要な情報や機能を利用しやすくする考え方です。
レスポンシブ表示や診断機能があっても、個別のサイトが必要な基準を満たすとは限りません。
生成された画面をそのまま公開せず、次の点を人の目と操作で確認します。
- ページの内容を表す見出しが順序よく配置されているか
- 画像の代替テキストが用途に合い、装飾画像は読み上げの邪魔をしないか
- 文字と背景に十分なコントラストがあるか
- キーボードだけでリンク、メニュー、ボタン、入力欄を操作できるか
- 現在のフォーカス位置が見え、操作が途中で閉じ込められないか
- 入力欄にラベルがあり、エラーの場所と直し方が伝わるか
確認の進め方は、Webアクセシビリティで最初に押さえる実務ポイントで詳しく整理しています。
料金を確認するときのポイント
Readdyには無料プランと複数の有料プランがあり、利用できるクレジット、プロジェクト数、公開サイト数、共同編集、独自ドメインなどの条件が異なります。
料金と提供範囲は変更される可能性があるため、契約時にはReaddy公式の料金ページで最新条件を確認してください。
金額だけでなく、次の費用と作業も含めて比較します。
- 独自ドメインと外部サービスの利用料
- 公開前の文章確認、表示確認、アクセシビリティ試験
- コードを書き出した後の公開環境と保守
- 問い合わせ対応、更新、障害時の担当者
Readdy.aiが向いている場面
Readdy.aiは、ランディングページの初期案、企業サイトの構成案、新サービスの画面試作など、目に見える案を早く用意して関係者と検討したい場面に向いています。
一方、複雑な業務処理、厳格な権限管理、外部システムとの特殊な連携が必要な場合は、ツールの機能だけで可否を決められません。
要件、データの扱い、保守体制を整理し、必要に応じて開発者が設計とコードを確認します。
導入判断のチェックリスト
- サイトの目的と対象読者を一文で説明できる
- 必要なページと機能を分けて整理している
- 掲載する文章と画像の確認担当が決まっている
- 公開、コード書き出し、Figma引き継ぎのどれを選ぶか決めている
- 料金だけでなく、公開後の更新と保守も見積もっている
- スマートフォン表示、フォーム、アクセシビリティを本番前に試す
まとめ
Readdy.aiの価値は、言葉による指示から画面案を作り、修正と共有を早く回せる点にあります。
目的、対象読者、行動目標を先に決め、公開方法と保守担当まで整理しておけば、試作の速さを実用的なサイトづくりにつなげられます。
公開前には、文章の正確さ、リンクやフォームの動作、画面幅ごとの表示、アクセシビリティを確認してください。
この記事に関連する株式会社greedenの取り組み
Readdy.aiで構想を形にした後は、公開後の更新や事業目的まで見据えた設計が欠かせません。株式会社greedenは、要望を丁寧に整理し、事業に合うウェブ制作を企画から公開後の改善まで支援します。