AI技術の目覚ましい進歩により、これまで専門家の領域とされてきたウェブサイト制作の在り方が大きく変わろうとしています。その最先端を行くのが、AIを駆使したWebサイト自動生成ツール「Create.xyz」がSNSで話題になっています。
本記事では、Create.xyzの特徴や使い方、実際の活用事例について詳しく解説。さらに、質の高いWebサイトを生成するためのプロンプトの書き方のコツもお伝えします。
インターネットが普及し、誰もがWebサイトを必要とする時代。でも、デザインやコーディングの専門知識がないと、自分でサイトを作るのは難しいと思っている方も多いのではないでしょうか。
そんな中、Create.xyzは「AIの力で、誰でも簡単にWebサイトを作れる世界を実現する」というビジョンのもと開発されました。その使い勝手の良さと生成されるサイトのクオリティの高さから、リリースされて以降多くのユーザーを集めています。
しかも無料で使えます。
この記事はこんな人におすすめ
・コーディングを時短したい
・コーディングの知識がないけど、WEBサイト作りをしたい
Create.xyzとは
Create.xyzより引用
Create.xyzは、Webサイト自動生成ツールです。英語や日本語で指示文を箇条書きで書くだけで、数秒でアプリやサイトのプロトタイプを生成できます。
従来のWebサイト制作では、ワイヤーフレーム作成、デザインのビジュアル化、コーディング、動作テストなど、工程ごとに専門スキルが必要で、1つのサイトを完成させるのに数週間から数ヶ月を要するのが一般的でした。
それがCreate.xyzなら、わずか数分で本格的なWebサイトが作れてしまうのです。もちろん生成された後も、ユーザーが自由にカスタマイズすることができます。
Create.xyzを使えば、
- 開発コストを大幅に下げられる
- アイデアを即座に形にできる
- 実装する前にデザインを試せる
- 市場調査用のランディングページをすぐ用意できる
など、Webサイト制作に関わる多くの課題がスピーディに解決できます。
どんなWebサイトが作れる？Create.xyzの活用事例
Create.xyzなら、ほぼあらゆる種類のWebサイトを作成可能です。実際に同ツールを使って制作されたサイトをいくつかご紹介しましょう。
事例1：「X」を模したSNS
Create.xyzを使って、Xを模したUIUXを数秒で作成してくれました。日本語で一言「Twitterを再現したサイト」としか指示を出していないものだからすごいですよね。
事例2：履歴書自動生成サイト
これすごいのがGoogleMAPなどとも連携可能なサイトがサクッと作れるところ。フリーランスで活動するポートフォリオサイトの制作にも、Create.xyzは活躍しますよね。プロジェクト実績を画像付きで紹介するギャラリーセクションに加え、これまでのキャリアや専門スキルを対話的に表現するインタラクティブなレジュメなど、自分の強みをアピールするサイトなども作れちゃいます。
事例3：AI比較サイト
AIを比較できるサイトなんかも出来ちゃいます。これ、1分です。最強ですよね。
もはやCreate.xyzは、現代のWeb制作に欠かせないツールのひとつと言えるでしょう。
Create.xyzの基本的な使い方
それでは実際に、Create.xyzを使ってWebサイトを作ってみましょう。基本的な流れは以下の通りです。
- Create.xyz公式サイトにアクセスし、アカウントを作成
- 画面右上の入力欄に、作りたいWebサイトの概要を入れるだけ
- AIが生成したWebサイトのプレビューを確認
- 必要に応じて、サイトの構成やデザインを編集
- 出来上がったサイトを公開
Create.xyz公式サイトにアクセスし、アカウントを作成
「Start building for free」を押下
アドレスを入れてサインアップしてます。
下記画面になりましたら使う準備は万端です。
画面右上の入力欄に、作りたいWebサイトの概要を入れるだけ
言語での指示文は日本語でOK。Create.xyzは、日本語の指示を理解してきちんとしたWebサイトを生成してくれます。下記の指示文を入れてみました。
入力例：Googleのような検索エンジンサイトを作って
1分でこのレベルのUIUXが出来たのはすごいです！簡単にできました。
もう少し手の込んだサイトを作ってみます。下記プロンプトを入れてみました。
ハンドメイドアクセサリーを販売するオンラインショップを作成してください。 商品カテゴリーはピアス、ネックレス、ブレスレットの3つに分けます。 決済はクレジットカード、銀行振込に対応してください。 配色はパステルカラーを基調にナチュラルな雰囲気でまとめてください。
たったこれだけの指示で、トップページ、カート、決済等を備えた、本格的なECサイトの骨格が自動で作られるのです。
AIが生成したWebサイトのプレビューを確認
挙動が確認するためには「Demo」を押下すると実際にclickして触ったりできます。
必要に応じて、サイトの構成やデザインを編集
左上を押下すると、デザインを編集する事も出来ます。
特に便利なのが「View the code」を押下するとこのデザインを生成するためのコードをコピー、共有が可能です。エンジニアにとってめちゃくちゃ便利ですよね！
出来上がったサイトを公開
出来たサイトを公開するには左上のPublishを押下します。
「Claim URL and continue」を押下
下記をクリックしてデザインをご覧ください。当然これをそのまま使うことはできませんが、デザインをそのまま応用する事は可能です。
Create.xyzの応用的な使い方
指示文から理想のサイトを作成する事がなかなかうまくいかない場合、画像＋指示文を入れるのがポイントです。下記のように入れてみました。
それっぽいものができました！1分でこれができるのがすごい。実際にURLを飛んでそのすごさを触ってみてください。
より良いWebサイトを生成するプロンプトの書き方
Create.xyzに入力する自然言語の指示のことを「プロンプト」と呼びます。
プロンプトの書き方で、生成されるWebサイトの完成度は大きく変わってきます。ポイントをいくつかご紹介しましょう。
ポイント1：具体的に書く
「企業のWebサイトを作って」というだけでは、AIはユーザーの意図を十分に汲み取れません。「IT企業のコーポレートサイト。サービス内容の説明と問い合わせフォームのページを作成。色はグラデーションを使った洗練されたデザインで」など、具体的に指示を与えることが大切です。
ポイント2：簡潔に書く
かといって、長すぎるプロンプトを書くのは逆効果。AIには簡潔な表現が理解しやすいようです。Webサイトに必要な要素を箇条書きにして、1つの指示を1、2行に収めるよう心がけましょう。
ポイント3：サンプルサイトを例示する
Create.xyzには、プロンプトに加えて画像をアップロードする機能もあります。「この画像のようなサイトを作って」と、サンプルのWebサイトのスクリーンショットを添付すると、イメージに近いサイトを生成してもらえます。文字だけでは伝えづらいビジュアルの雰囲気などは、サンプル画像で補うのが効果的です。
ポイント4：ステップを踏んで作る
一度のプロンプトで完璧なサイトを作ろうとせず、段階的に作っていくのがコツです。まずはざっくりとしたイメージを指示して大まかな構成を作り、それをベースに細部の指示を追加していきましょう。作業工程ごとにプロンプトを切り分けることで、ユーザーの意図がAIに正しく伝わりやすくなります。
Create.xyzの料金体系
気になるCreate.xyzの料金体系についてもご説明しましょう。
現在のプランは以下の4つです。無料で20個までプロジェクトを動かせますので充分に使えます。
| 機能 | FREE | PRO | BUSINESS | ENTERPRISE |
|---|---|---|---|---|
| 料金 | $0 | $19/月 | $99/月 | カスタム |
| 概要 | 無料で始める | 自分のデータでより速く構築 | チームで大規模に構築 | 複雑な要件に対応 |
| プロジェクト数 | 20 | 無制限 | 無制限 | 無制限 |
| イテレーション | 無制限 | 無制限 | 無制限 | 無制限 |
| コラボレーション | 無制限 | 無制限 | 無制限 | 無制限 |
| 最新のAIモデル | ○ | ○ | ○ | ○ |
| GPT-4 Vision | ○ | ○ | ○ | ○ |
| 全ての公開統合 | ○ | ○ | ○ | ○ |
| コードのコピー＆ペースト | ○ | ○ | ○ | ○ |
| 公開プロジェクトの発行 | ○ | ○ | ○ | ○ |
| 最速のAIモデル | – | ○ | ○ | ○ |
| カスタムAPI統合 | – | 1つ | 10 | 無制限 |
| Createブランディングの削除 | – | ○ | ○ | ○ |
| コードエクスポート | – | 3つ | 無制限 | 無制限 |
| プライベートプロジェクト | – | – | ○ | ○ |
| ドメイン | – | – | 3つ | 無制限 |
| 共有コンポーネント | – | – | ○ | ○ |
| 分析機能 | – | – | ○ | ○ |
| APIレート制限 | – | – | ○ | ○ |
| 専用Slackサポート | – | – | – | ○ |
| Github統合 | – | – | – | ○ |
| SAML シングルサインオン (SSO) | – | – | – | ○ |
| 高度な分析 | – | – | – | ○ |
| クラッシュ分析 | – | – | – | ○ |
ウェブ制作のプロでなくとも、それほど高額な料金を払う必要はありません。多くの場合、無料または$19/月のPRO planで十分な機能が使えるはずです。
Webサイト制作の学習目的で使ったり、簡単なサイトを作る程度なら無料プランがおすすめ。本格的に運用するサイトを作りたい場合は、PRO planに登録して独自ドメインを設定できるようにしておくと安心です。
まとめ：AI時代のWebサイト制作を切り拓くCreate.xyz
従来のWebサイト制作は、デザインセンスとコーディングスキルを兼ね備えた専門家の仕事でした。サイトを一般の人が自作するのは非常にハードルが高かったのです。
しかしCreate.xyzの登場により、もはやWeb制作の敷居は限りなく下がったと言えるでしょう。知識も経験もなくても、自分の言葉でWebサイトをイメージして説明するだけで、本格的なサイトを作れる時代が来たのです。
ビジネスにおいてもプライベートにおいても、Webサイトを持つことの重要性は今後ますます高まるでしょう。
「コーディングはわからない」「デザインは苦手」と二の足を踏んでいた方も、Create.xyzを味方につけることで、誰でも自由にWebの世界に参加できるようになります。
もちろん、Create.xyzですべてが解決するわけではありません。AIが生成するサイトをそのまま使うのではなく、人間のアイデアときめ細やかな手作業でブラッシュアップしていくことが求められます。
それでも、サイト制作の入り口としてCreate.xyzほど心強いツールはないでしょう。
この記事を読んで、Create.xyzに興味を持っていただけたら幸いです。ぜひ無料プランから使ってみて、Webサイト制作の面白さや可能性を感じてみてください。
趣味：業務効率化、RPA、AI、サウナ、音楽
職務経験：ECマーチャンダイザー、WEBマーケティング、リードナーチャリング支援
所有資格：Google AI Essentials,HubSpot Inbound Certification,HubSpot Marketing Software Certification,HubSpot Inbound Sales Certification
▼書籍掲載実績
Chrome拡張×ChatGPTで作業効率化/工学社出版
保護者と教育者のための生成AI入門/工学社出版（【全国学校図書館協議会選定図書】）
突如、社内にて資料100件を毎月作ることとなり、何とかサボれないかとテクノロジー初心者が業務効率化にハマる。AIのスキルがない初心者レベルでもできる業務効率化やAIツールを紹介。中の人はSEO歴５年、HubSpot歴１年
