【PR】ReaddyでWEBサイト作成！企業、事業主からnoteクリエイターまで！AIを使って知識ゼロでも作れちゃう！

今回は Readdy というサービスのPRをさせて頂きます！

ITエンジニアである私が、爆速開発とサービスの濃さに歯ぎしりしながら楽しく作ってしまった体験を書いていきます！

Readdy は、作りたいWEBサイトの内容をAIに伝えるだけ。

それだけで、プロフェッショナルなWEBサイトを作成できるサービスです。

しかも、コーディングなしで！

AIが生成したサイトは、専用の編集ツールでカスタマイズできます。

さらに、フォームや決済、独自ドメインの設定から公開まで行えます。

実際に使ってみて、出来上がったWEBサイトをお見せします。

▼ 今回Readdyで作成した3つのサイトはこちら！

株式会社銀河ツーリスト

へろん珈琲

へろんポートフォリオ

サイト作成にお困りではありませんか？

私は過去、企業様向けでのサイト構築案件を扱っていました

基本的には単純なサイト構築というお話をお受けすることはありません。

サーバ側の独自プログラムを含むもの。

そういったもののほうが難易度が高い。

その分、費用を頂くことができるからです。

ですが、サイト構築案件もゼロではありませんでした。

HTML/CSS/JavaScriptの実装はもちろん、サーバ構築やドメイン名の取得、設定など、相応の費用を頂いて対応していました。

個人事業主のかたで、ご自身の実績をLPなどでアピールしたい

そんなかた、多いのではないかと思います。

noteでは副業目的で頑張っていらっしゃる方も多い。

AIで作れば簡単！

とは言っても、どうやって公開するのか。

メンテナンスをどうやっていくのか。

人に頼むとお金がかかる。

実際、私もサイト構築の仕事を求められれば、内容によって数万円から数十万円の見積もりをお出しします。

その上、ランニングコストだってかかります。

そんな費用を抑えることは、本来伝えたい内容に注力するためにも効果の高いことであると言えます。

大切なこと

作ること自体にも時間やお金がかかる。

運用だってタダではできない。

生成AIにより敷居が低くなったとはいえ、実は目に見えていない部分も大きいのです。

制作物のみではなく、サイトのアドレスにわかりやすい名前を付けることにだって、ランニングコストがかかるんです。

Readdyってなんだろう？

コーディング知識なしでWEBサイトを制作！

専用のAIによって、あなたのWEBサイトを作るサービスです！

作りたいサイトの内容をAIに伝えることで、WEBサイトが出来上がって来ます。

その内容をWEB画面上で、手作業編集もできます。

だから、あなたのイメージに合ったWEBサイトを簡単に作ることができるんです！

サイト作成を誰かに頼まなくて良いのは、大幅なコスト削減になります。

そして、編集画面まで用意されている。

これは専用サービスであることの大きなメリットです。

AIに「ここをなおして！」などと何度も伝えながら修正を繰り返すだけではない。

できあがったレイアウトの上で、必要な箇所だけ手作業でなおすことができます。

個人事業主、企業、ショップやSNS運営者まで！

幅広いユーザ層がWEBサイトを公開しています。

作成したサイトにオリジナルのドメイン名を割り当てる。

サイトの内容に応じてAIによるSEO分析を行う。

公開したサイトのSEO、パフォーマンス、セキュリティ、コンテンツ、そしてウェブサイトの全体的な状態をAIでチェック。

作成から公開、公開後の分析まで、ワンストップでWEBサイト運営をサポートする機能が充実しています。

これは、専属のメンテナーを置かずとも、サイト運営を進めるための環境が整っていると言えるでしょう。

ReaddyによるWEBサイトの作り方

既存サイトから作る

この画面から始めることができる！ ⬇️⬇️⬇️

現在運用しているサイトがないため、こんなサイトを用意しました。

小説やイベントなどで、

「架空設定サイトを作ってみるなんてことも楽しいんじゃないか？」

などと思い、ちょっと思い切って作ってみたものです。

今のホームページが古いデザインのままだったり、自作サイトのメンテナンスが負担になっている場合などに、ReaddyにそのURLを渡すことでリファインができます。

これを試します。

Readdyではチャット欄で以下のように頼んでみました。

リアルな画像に差し替えたり、
サイトのデザインを近未来旅行会社というコンセプトで
カラーやレイアウトの変更を入れてください

できあがったのがこちら ⬇️⬇️⬇️

上BEFORE、下AFTERの比較画像です。

味気なかったサイトデザインが洗練されました！

簡単なカード情報程度から作る

この画面から始めることができる！ ⬇️⬇️⬇️

こんな簡単な情報から、Readdyを使ってサイトを作ってみました。

詳細な住所情報などが自動で入りますが、正しい情報をあらかじめ与えるか、出来上がった後で修正を入れればOKです。

こんなサイトが簡単に作れます！ ⬇️⬇️⬇️

できあがったサイトを画面上で見ながら、正しい情報に修正していけば、簡単にご自身の店舗のサイトを作ることができます。

テンプレートから作る

今回はこの方法で私自身のサイトを作ってみようと思います。

この方法は、好みや目的に合ったテンプレートを選んで、中身を自分用に作り変えられるという魅力的なものです。

WordPressなどを使っているかたは、イメージが湧きやすいと思います。

次章でスクショなど交えながら、実際にやっていきます！

自分のサイトをテンプレートから作る！

何を作ろうか、まずはそこから

私はどこにでも転がっている一般noteユーザー。

大々的なトピックは、これと言って持っていない。

それでも例えば、「将来的にKindle出版目指すぞ！」となったとき。

あるいは、「何か副業用途でnote運営するんだ！」となったとき。

そんな可能性を見越して、今からサイトを作っておくという選択は、悪くない。

現在のメイントピックを紹介しながら、noteへの導線となるようなサイトを作っておくというのは十分にアリだと思うんです。

同じような立ち位置のかたも多いのではないでしょうか。

そこで、ポートフォリオサイトをReaddyを使って、簡単に作ってみようと思います！

作ったサイトはこちら！

この先は、こちらのサイトを制作した過程を書いていきます！

Readdyで作っていく！

まずはテンプレートを選びます。

テンプレートをスクロールダウンしていき、ポートフォリオ向けテンプレートを見つけました。

『Helm Ceramics — Packaging Identity Built on Craft and Zero Waste』

を使ってみます。

このテンプレートを選び、「使用」ボタンを押します。

今回はテンプレートを選ぶところから始めましたが、まったくのゼロからプロンプトだけで作成開始することも、もちろんできます！

この画面から始めることができる！ ⬇️⬇️⬇️

このテンプレートを、私個人の創作・開発ポートフォリオサイトに作り変えてください。

【私について】
「へろん」という名前でnoteに書いている個人クリエイターです。
note:https://note.com/nifty_sheep7386
完全手書きのエッセイと、AIやプログラミングを使った実験的な制作の両方をやっています。

【サイトのキャッチコピー】
身体は動かない。脳内は忙しい。

【看板シリーズ:脳内行動派！】
外出しない！
部屋の中で起きる、数分から1時間程度の出来事。
壮大な世界での活発な行動が、頭の中だけで繰り広げられる！
身体は動かない。脳内は忙しい。
そんな「脳内行動派」のエッセイです。
AIは誤字脱字の検知に使用、文章や構成は完全手書きで書いています。
このシリーズをサイトの主役として、一番目立つ位置に置いてください。

【その他のシリーズ】
・裏・脳内行動派！ … エッセイをAIで歌詞にして、Sunoで曲にする実験
・Gemini 3分クッキング … ジョーク多め、たまに本当に役立つブックマークレット・Webアプリ集
・noteのまえに(通称:note休もっ化アプリ) … 機能拡張を続けながら育てているアプリ
・へろコン … ブラウザだけで動くファミコンエミュレータ。エミュレータ部分は公開済み、今後ファミコンソフト作成ツールを搭載予定(開発中)

【ページ構成】
ヒーロー / 脳内行動派！の紹介 / シリーズ一覧 / WORKS(作品ギャラリー、AI漫画を組み合わせた複合コンテンツも含む) / ABOUT / CONTACT

【デザイン】
テンプレートのレイアウトと雰囲気は活かしてください。
「部屋の中の小さな出来事が、頭の中で壮大な冒険になる」というギャップが伝わる演出にしてください。

【注意】
・実績の数字、フォロワー数、お客様の声などの架空の情報は入れないでください
・各作品へのリンクは後で設定するので、仮リンクで構いません(noteへのリンクだけは上記URLにしてください)
・日本語のサイトにしてください

これを入力し、実行してみます。

ちなみにチャット欄、きちんとタスク整理して、ToDoリストを作りながら進めていきます。

これは見ていて面白い！

ちゃんと消化されていく！

数分で初回版完成！

「なんだかそれっぽいものができてきたぞ！」

と言いながら、「公開」ボタンを押してみます。

チャット欄にふたたび「公開」が出てきます。

これは、Readdyが用意してくれたURLで公開するのか、自分で用意したもので公開するのかの違いです。

ちなみに、「サブドメインでプロジェクトをホスト」のURL右側、鉛筆ボタンを押して名前を変更することができます。

今回は「heron-note」という名前に変更して公開を進めます。

その前に収益化設定をしておきましょう！

アフィリエイトですね。

やらなくても困らないのですが、やっても困らない。

特に迷惑をかけるようなものでもないので、このようなものは設定しておくのが良いでしょう。

「設定する」を押します。

「アフィリエイトプログラムに参加」を押すと、アフィリエイト専用サイトが表示されます。

アカウント登録し、アフィリエイトリンクを作ると、以下のようにリンクをコピーできるようになります。

コピーボタンを押し、画面を閉じます。

紹介リンク欄に貼り付け、「保存して有効化」を押します。

「公開」ボタンを押します。

これで、私のサイトは「https://heron-note.readdy.co」で公開されました！

「公開」画面の外をクリックすると、ポップアップが閉じ、元のチャット画面を使うことができます。

サイトの修正をする

AIがサイトを成り立たせるために、初回のプロンプトに入っていない情報を埋めこんだ状態になることは多いと思います。

そのようなものを見つけ、どこをどう修正するのかをチャット欄で伝えます。

サイト内の作品情報に、AIが仮で作った架空の内容が入っているので、実在するものに修正してください。

【作品ギャラリー(WORKS)を以下の6作品に置き換え】
1. 脳内行動派！ #28「水に祈りを」(手書きエッセイ)
   https://note.com/nifty_sheep7386/n/n091809f0af61
2. 裏・脳内行動派！「Mīclu Gebed | 水に祈りを」(1のエッセイをGeminiで歌詞にし、Sunoで曲にしたもの)
   https://note.com/nifty_sheep7386/n/na8617bc8a388
3. Gemini 3分クッキング「自宅脱出速度・多段ポテンシャル井戸解析器」(ジョーク枠:家から出るための脱出速度を大真面目に計算。AI漫画とツールを組み合わせた回)
   https://note.com/nifty_sheep7386/n/n89b4fa3b9953
4. Gemini 3分クッキング「冷凍食材 解凍ナビ」(実用枠:ちゃんと役に立つ)
   https://note.com/nifty_sheep7386/n/ne8b16aa7c85d
5. へろコン(ブラウザで動くファミコンエミュレータ。インストール不要、内蔵ソフトのほか手持ちの.nesファイルをドラッグ&ドロップで遊べる)
   https://herocon-xi.vercel.app/
6. noteのまえに(書く日も、休む日も。noteを開く前のひと押し。)
   https://heron-note.github.io/note-no-maeni/

【シリーズ一覧の修正】
・脳内行動派！のリンク先を、マガジン https://note.com/nifty_sheep7386/m/maa584642dc87 にしてください。「全30本・連載中」と入れてください
・裏・脳内行動派！のリンク先を、マガジン https://note.com/nifty_sheep7386/m/m5311679317d2 にしてください
・Gemini 3分クッキングの説明に「『コピペするだけ！簡単』シリーズとして100本以上公開中。最近の回は、AI漫画とツールを組み合わせた複合コンテンツになっています」と入れ、リンク先を https://note.com/nifty_sheep7386/m/m0fa6a309ef04 にしてください
・へろコンのリンク先を https://herocon-xi.vercel.app/ にしてください
・noteのまえにのリンク先を https://heron-note.github.io/note-no-maeni/ にし、説明を次の内容に修正してください:
  キャッチ:「書く日も、休む日も。noteを開く前のひと押し。」
  説明:「noteで"書く"も"休む"も、そっと後押しするスマホ向けWebアプリ。」
  主な機能(タグ表示):読みに行く先を決めるガチャ / お気に入りタグリスト / スタンプで作るアイキャッチ画像 / AIチャットで壁打ち / 記事テンプレート保存 / 「書く」「休む」スタンプ履歴
  補足:「『休む』を押すと、お休み宣言入りの記事をコピーしてnoteの下書きを開きます。使いながら機能拡張中。」
・技術タグ(React、JavaScript、Canvasなど)はすべて外してください
・リンクを設定したものは「リンク準備中」の表示を外してください
・作品ギャラリーの絞り込み分類を「手書きエッセイ / AIと音楽 / つくる実験」に変更してください
・「AI漫画複合」として独立していた作品や表記は削除してください

途中、不明点があれば、以下のようなカードで質問をしてくることがあります。

修正したい内容を伝えるだけで、指定箇所が一括で修正できました！

プロンプトだけじゃない！次にやることをサジェストしてくれる

これがとても面白いです！

次にやるべきことがわからなくなっちゃうこと、ありますよね。

Readdyならチャット欄に、次にやるべきことのサジェストをしてくれるんです。

選択肢を選び、チャットの⬆️ボタンを押せば、選択した内容を実行してくれます。

これが、とても親切！

手作業で微修正する

AIにおまかせしないで、ぱぱっと目についたところを修正したくなる。

そんな欲求が出て来る場面があると思います。

Readdyにはエディタ機能があるので、それも簡単！

チャット欄の「編集箇所を選択」をクリックすると、「ページから選択」という表示に変わります。

プレビュー欄にマウスを移動すると、このように編集できる状態になります。

選択した部分を手作業で編集できます！

ツールバーに出ているように、アニメーションやエフェクトの追加、色の変更なども簡単です！

今回は文言修正だけ行います。

更新完了したら、「公開」します。

軽微な修正を、手作業で終わらせることができました！

手作業で画像を差し替えてみる

AIが作った画像が気に入らない！

そんなときに画像を選び、差し替えできます。

「画像を差し替え」を押すと、置き換えファイルの選択画面がポップアップ。

ここで画像を指定してみます。

画像をアップロードして、「置換」を押します。

置き換えできたことを確認し、チャット欄の⬆️を押します。

公開したら、差し替え完了！

使いたい画像が決まっていたら、この機能を使えば簡単ですね！

簡単に多言語対応を！

Readdyでは、多言語対応が簡単にできるというので試してみました。

と伝えただけ。

返って来る質問に答える。

送信し、しばらく待つと、このように日英中韓の多言語対応が完了しました！

これは、海外からのお客様が多いお店や観光業のサイトにも便利なのではないでしょうか！

体裁的に整えておきたい！OGPを設定！

SNSでサイトを紹介するときのサムネ画像が空っぽなのは、あまり良くないですよね。

「プロジェクト設定」の冒頭に、この設定があります！

早速設定してみます！

画像をアップロードすると、トリミング画面が開きます。

今回はジャストサイズの画像を用意しましたので、このまま設定。

「保存して再公開」を押します。

確認のポップアップ。

「今すぐ公開」を押します。

XとFacebookでの表示状態をチェック！

問題なくサムネ表示できていそうです！

ちなみに、設定画面を見た感じ、X、Facebook、LinkedInに正式対応しているのではないかと思います。

こうして出来上がったのがこちら！

テンプレートから制作する過程の冒頭でリンクを貼りましたが、再掲します！

作ったサイトのソースコードをダウンロード!

有料プランでは、作ったサイトのソースコード一式をダウンロードできます。

チャット/コードを「コード」に切り替えて、ソースコード一式のダウンロードができます!

ただし、別のサーバー(GitHub Pages)で公開してみたところ、Readdyで生成した画像は表示されませんでした。

他のサーバで運用する場合は、画像を自分で用意したものに置き換える必要がありそうです。

ちなみに、ちょっと気になるソースコード納品

サイト作成案件の場合、ソースコード納品しなければならないことがあります。

規約的に大丈夫なのか、「チャットで相談」から質問してみました。

ダウンロードしたコード一式はソースコード納品に使用できますか？

これに対する回答

ダウンロードしたコード一式は、サイト全体のソースとしてそのまま使える、とのこと。

ソースコード納品にも使えそうです。

料金について

Readdyには無料プランと有料プランがある

無料プランでは、2つのプロジェクトを作成でき、10回まで編集することができます。

ただし、外部への公開には対応していません。

有料プランには月額プランと年間プランがあります。

月額プランは、Starterが月額25ドル、Proが月額40ドル。

年間プランでは、最大40～60％OFFとなる料金設定が用意されています。
また、年間プランでは1年間のカスタムドメインが無料となり、年間クレジットも付与されます。

さらに、1年プランでは通常価格から40％OFFに加えて、後述する10％OFFコードを利用することで、実質約46％OFFになります。

3年プランでは60％OFFとなります。

※料金やプラン内容は変更される場合があります。
最新の料金については、Readdyの公式サイトをご確認ください。

公開とドメイン

有料プランでは、作成したWEBサイトを公開できます

Readdyのサブドメインを利用できるほか、カスタムドメインにも対応しています。

1年目のカスタムドメインは無料で、すでに取得している独自ドメインを接続することもできます。

独自ドメインは、信頼性やSEOへの取り組みやすさなどの観点で、取得・設定するのがおススメです！

契約終了後はどうなる？

有料プランは、支払いを停止するとプランが終了します

別途の解約操作は必要ありません。

プラン終了後には7日間の猶予期間があり、その後は公開していたWEBサイトが停止します。

プロジェクトのデータそのものが削除されるわけではない

再度契約すれば、プロジェクトを引き続き利用できます。

その場合は、改めてWEBサイトを公開する必要があります。

他のサービスへ移行することもできます

Readdyで作成したWEBサイトは、Readdyだけで使い続けなければならないわけではありません。

企業様によっては自社サーバ、取引先サーバでの運用が必要になるケースもありますよね。

有料プランでは、ソースコードをエクスポートできます。

そのため、WordPress、Vercel、Netlify、GitHub Pages、自分で用意したサーバなど、別の環境へ移行することも可能です。

ローカル環境でビルドし、生成したコード一式を持って行けばOK！

「Readdyで作ったら、ずっとReaddyを使い続けなければならない」

という仕組みではないところも、WEBサイトを作る側としては確認しておきたいポイントです。

サポートについて

困ったときは「お問い合わせを送信」で問い合わせできる

操作中に分からないことがあった場合は、画面左下のプロフィールアイコンから、

「お問い合わせ → お問い合わせを送信」

を開いて問い合わせることができます。

日本語でのサポートにも対応しています。

まとめ

軽微なWEBサイト作成なら、これひとつで十分なんじゃない？と思ってしまった。

複雑な処理が必要なものは別です。

でも、どうやら簡単なサーバレス関数を持たせるような、少し高度なことができたり。

今回は試すことができませんでしたが、ちょっと専門的なこともできてしまいそう。

お問い合わせフォームなど、それだけのためにサーバなんて立てたくないようなものなんかが揃っていたり。

基本的なWEBサイト作成は本当に簡単！

日本語のプロンプトとAIからのサジェストで、サクサク作れてしまいました。

今回はWEBサイトを作成する知識、一切使わずにできてしまいました！

企業でも個人でも、ビジネスでのインターネット利用にWEBサイトは欠かせません。

あなたの展開する事業の入り口となり、ハブとなる。

でも、お金も時間も、できるだけコアビジネスに割きたいですよね。

その気持ち、すごくわかります。

Readdyは、その両方を実現する可能性を感じる、とても使いやすいサービスだと実感しました。

各種分析ツールまで入っていますから、WEBサイト制作から運用まで、オールインワンのサービスであることが、本当に驚きでした。

10％OFFコードについて

先着100名限定で10％、年額プランとの併用で実質約46%OFF

今回、Readdyでは先着100名を対象に、10％OFFとなる割引コードが用意されています！

10％OFFコード： HERON

▼ Readdyはこちら

※割引条件や対象プラン等は変更される場合があります。利用時には最新の条件をご確認ください。

📖 エッセイ
連載中！

ガンプラ、紡ぐ、家族

どうやら私は、ひとりだけ別の世界に住んでいるようだ (全4話)

📖 短編小説

PR記事を書かせて頂いています！

メンバーシップ始めました！
まだ手探りですが、ご要望/無茶振り/質問、可能な限りお受けします！

何でもどうぞ！答えられるものは全て答えます！
設置はお済みですか？図らずも人の庭でnote質問箱を試す！｜へろん

有料ツールに挑戦中！
OBS Studio用リモコン | OBS画面を前面に出さずに操作できます！

無料で使えるアプリあります！

サイトマップあります！