Create.xyzを活用することで、生成AI初心者でも簡単にサイトを作成することができます。しかも無料です。
✓この記事では以下の内容を共有しています
・Create.xyzでサイトを作成する４つのステップ
・Create.xyzの便利な機能
・サイト作成の精度を高めるプロンプトの「５つ」のヒント(深掘り)
Create.xyzを使って、知識不要でサイトを作成したい人は、ぜひ今回の記事をお読みください。
- ►Create.xyzの概要
- ►Create.xyzのホームページにアクセスする
- ►Create.xyzでマイアカウントを作成する
- ►Create.xyzにログインをする
- ►Create.xyzのダッシュボード画面から作成画面を開く
- ►サイトのページ数を増やす
- ►Create.xyzでサイトを作る！これだけは知っておきたい４つのステップ
- ►Create.xyzで作成したサイトを公開
- ►Create.xyzで作成したコンテンツを削除する
- ►Create.xyzの補足的な機能
- ►Create.xyzでサイト作成の精度を高めるプロンプトのヒントを「５つ」共有！(深掘り)
- ►Create.xyzの「4つ」のプラン
- ►Create.xyzのプラン別の料金
- ►Create.xyzのそれぞれのプランでできること
- ►PROプランとBUSINESSプランに切り替える方法
- ►この記事の引用元
- ►まとめ
►Create.xyzの概要
Create.xyzは日本語のプロンプトでWebサイトやアプリを自動生成できるサービスです。
今までは、サイトを作ったりアプリを開発するためには、専門知識や技術が必要でした。しかしCreate.xyzを使えば、専門知識や技術が必要なくなります。また、プログラミングやデザインツールも必要ありません。
誰でも簡単にイメージしているサイトやアプリを作ることができる、夢のようなツールです。
►Create.xyzのホームページにアクセスする
まず最初に、Create.xyzのホームページにアクセスします。以下のリンクからアクセスすることができます。
アクセスが完了したら、この記事に書かれている内容に沿って作業を進めていきましょう。「順番に読み進める」ことで、作成できるように設計されています。
►Create.xyzでマイアカウントを作成する
Create.xyzで自分だけのサイトを作成するために、マイアカウントを作成していきます。このアカウントはCreate.xyz内のアカウントです。
まず、Start building for freeをクリックします。
クリックすると以下の画面に切り替わるので、メールアドレスを入力していきます。
メールアドレスの入力後、Sign upをクリックします。
サインインすると以下の画面に切り替わります。この画面は作成画面です。
これで、マイアカウントの作成は完了です！
►Create.xyzにログインをする
アカウント作成後は、作成画面を削除しても自動的にダッシュボードの画面に切り替わります。
しかし長期間Create.xyzのサイトを訪れなかった場合やログアウトをした場合は、ログインをし直す必要があります。
その際、下のあるLog inをクリックします。
次に、メールアドレスを入力します。
メールアドレスを入力後、Send linkをクリックします。
Sendlinkをクリックすると、以下の画面に切り替わります
次に、メールを確認します。
登録したメールアドレス宛に以下のメールが送られてきます。メール内のリンクをクリックします。
クリックすることで、以下の画面に入ることができます。こちらの画面がダッシュボード画面になります。Create.xyzを活用して作成されたコンテンツは、すべてダッシュボード画面に保存されます。
このようにしてログインをします。メール内のリンクは15分後に有効ではなくなります。メールが届き次第ログインするようにしましょう。
►Create.xyzのダッシュボード画面から作成画面を開く
次に、ダッシュボードから作成画面にアクセスする方法を共有します。
まず、ダッシュボード画面にアクセスしていることを確認します。
次に、枠内のDraftsをクリックします。
Draftsをクリックした後、枠内のEditをクリックします。
クリックすることで、作成画面にアクセスすることができます。なおDrafts内ではサイト1ページごとの作成になります。
►サイトのページ数を増やす
「もっとサイトの精度を高めたい」
「ページ数を増やしたい」
そう感じた人はNew Pageから新しいサイトのページを作成しましょう。
新しく作成したサイトのページは、Drafts内に自動で保存されていきます。
►Create.xyzでサイトを作る！これだけは知っておきたい４つのステップ
この章では、Create.xyzを活用してサイトを作成するにあたって、最低限知っておくべき4つのステップを共有します。
この章の４つのステップを理解するだけで、サイトは作成できます。
「生成AI初心者だけど挑戦したい」と思う全ての人が理解できるように、わかりやすくまとめています。用語や使い方について、一つひとつ共有していきます。
なお、この記事では「FREEプラン」を用いてコンテンツを作成していきます。有料プランでできることについては詳細な内容を省略しています。
◼︎Create.xyzでサイトを作るステップ１：Prompt欄にプロンプトを入力する
まず、プロンプト欄にプロンプトを入力していきます。
☐プロンプトを入力する時の５つのポイント(基本)
プロンプトを入力する際、5つのポイントがあります。
✓以下に5つのポイントを共有します
・作りたいアプリやWebサイトのイメージを自然な言葉で入力しましょう。Create.xyzが内容を理解して、自動的にプログラムを生成します。
・最初は簡単な内容から作成し始めましょう。徐々に詳細な指示を追加するのがおすすめです。一度に複雑な指示地耐えるよりもを伝えるよりも、段階的に指示を伝えた方がうまくいきやすいです。
・参考にしたいWebサイトやアプリのスクリーンショットを貼り付けてみましょう。コンテンツのデザインを再現してくれます。
・追加したい機能やAPIとの連携が必要な場合は、プロンプトに入力します。例えば「問い合わせフォームを追加してください」や「Twitterとの連携機能をつけてください」という感じです。
・修正を加える時も、プロンプト入力で対応できます。どんどん指示を与えて理想のコンテンツを作成していきましょう。
☐プロンプトを入力してみる
５つのポイントを理解した上で、実際にプロンプトを入力していきます。
☑︎Gemini1.5Proを活用してサイト作成用のプロンプトを出力する
試しにコーヒーの知識が学べるサイトを作成していこうと思います。
その際、以下のようなプロンプトを入力しました。
プロンプトは自分でじっくり考えて作成するのも手段のひとつですが、生成AIを活用することでプロンプトを簡単に作成することができます。
使用する生成AIはChatGPTやGemini1.5Proがおすすめです。
✓以下のような簡単なプロンプトを入力するだけで、サイトを作成するためのプロンプトを出力してくれます
あなたは一流のWebデザイナーです。コーヒーの知識が学べるサイトを設計するにあたっての詳細なプロンプトを出力してください
上記のようなプロンプトを活用して出力することで、サイト作成用のプロンプトは数分で完成します。
今回僕は、Gemini1.5Proを活用しました。
生成AIを活用すると、深く考え込むことがなくなります。深く考え込む時間が短くなれば「大変だ・・・」という気持ちもなくなりますよね？
なのでコンテンツ作成が前に進みやすくなり、非常におすすめです。まずは手をつけ始めることが大切です。生成AIをどんどん活用していきましょう。
☑︎出力されたプロンプトをメモアプリにコピペして修正する
とは言っても、出力されたプロンプトをそのままコピペして活用するのはおすすめできません。なぜなら、イメージと大きくかけ離れたコンテンツが作成されやすいからです。なので一旦「スマホのメモアプリ」に出力されたプロンプトをコピペします。
スマホのメモアプリにコピペをすることで、格段に修正しやすくなります。
次にコピペしたプロンプトをチェックして、不要なテキストを削除したり、行間などを修正します。修正されたプロンプトが前回の節で共有した画像になります。
メモアプリにコピペして修正する方法は意外に便利です。ぜひ実践してみてください。
☑︎作成画面のPrompt欄にコピペする
次に、修正したプロンプトをコピーしてPrompt欄にペーストします。
これでプロンプトの入力は完成です。
◼︎Create.xyzでサイトを作るステップ２：Generateをクリックしてサイトを出力してみる
プロンプトの入力が完了したら、実際にサイトを出力してみます。
その際、右下のGenerateをクリックしましょう。
クリックすると、Create.xyzが出力を開始します。
今回のプロンプトを活用して、以下のようなサイトが出力されました。
出力完了までに約70秒でした。このようにして、サイトのベースとなる部分を構築することができます。
◼︎イメージと違うサイトが出力された時の対処法
ステップ２でイメージと違うサイトが出力された場合は、以下の矢印マークをクリックします。
クリックすると、Create.xyzがもう一度新しくサイトを生成し直してくれます。
もう一度矢印のマークをクリックすると、再び新しいデザインが出力されます。
このように生成し直すことで、イメージに近いサイトに近づけることが可能です。なお一度生成し直すと、以前のデザインと全く同じデザインは出力されません。
「やっぱり以前のデザインがいいなぁ」という場合は、バージョンヒストリーをクリックしましょう。第１０章の「変更前のデザインと変更後のデザインを比較して修正する」で、そのやり方を共有しています。
◼︎Create.xyzでサイトを作るステップ３：Assets欄から画像をアップロードしてサイトの完成度を高める
Assets機能を活用することで、画像を記事に添付することができます。
ここでのAssetsは「コンテンツ作成に使う素材」のような意味です。今回は、その素材が画像になります。
画像をアップロードする際、Upload filesをクリックします。
クリックすると画像を選択する画面に切り替わります。切り替わった画面で、アップロードしたい画像を選択します。
画像を選択すると、アセット欄に画像が追加されます。
追加された画像は、ドラッグ&ドロップで作成中のサイトに添付することができます。
サイトに画像があると、サイト内が明るくなりますし、わかりやすくなります。Assets機能を使いこなすと、より魅力的なサイトが作成できそうです。
◼︎Create.xyzでサイトを作るステップ４：Publishから作成したサイトを公開する
作成したサイトを公開していきます。
その際、右上にあるPublishをクリックしましょう。
クリックすると、以下の画面に切り替わります。
nameの部分にサブドメインを入力していきます。作成したサイトにマッチするサブドメインをアルファベットで入力しましょう。サイトのタイトルをサブドメインとして活用しても問題ありません。
サブドメインを入力したら、Claim URL and continueをクリックします。
クリックすると以下の画面に切り変わります。
完成したURLと作成したサイトが表示されます。
なお、右上のView liveをクリックすることで、実際にサイト内をチェックすることができます。最終確認をするのに最適です。
最後に、Publish changesをクリックします。
これで、作成したサイトが公開されました。
✓補足
FREEプランでは、ドメインをカスタムすることができません。作成したサイトはすべて.created.appというドメインになります。
◼︎Design欄でこだわりのサイトを構築する(PROプランから使用可能)
PROプランに切り替えることで、Design機能を利用することができます。
この機能は有料版で使える機能なので、解説は省略します。しかしデザイン機能を活用することで、作成しているコンテンツの細かな編集ができるようになりそうです。
なお、プラン別の「料金」や「できること」に関しては、この記事の最後の章で共有しています。ぜひそちらもお読みください。
►Create.xyzで作成したサイトを公開
Create.xyzでサイトを作成する４つのステップを前回の章で共有しました。共有内容をもとに作成したサイトがこちらになります。
以下のリンクをクリックすると、実際にサイトが表示されます。
https://the-world-of-coffee.created.app
僕が作成したサイトは上記の1ページだけです。サイトの基礎となる部分の作成のみです。なのでこれでは「サイト」とは言えないかもしれません。笑
とは言っても、1ページを作成するのにかかる時間は10分から15分ほどです。加えて短時間で、なおかつ簡単に作成することができます。
Create.xyzでサイト作成を本格的に始めていきたい人は、サイトのページ数を増やす方法をもう一度ご覧ください！確認後、新しいページを作成していきましょう。
►Create.xyzで作成したコンテンツを削除する
作成した不要なコンテンツを削除することもできます。
◼︎プロジェクトを削除したい場合
プロジェクトそのものを削除したい場合は、My Team(デフォルトの名称)のページを開きます。
次に、…をクリックします。クリックするとDelete Projectという項目が表示されるので、さらにクリックします。
クリックすると以下の画面に切り替わるので、Deleteをクリックします。
このようにして、プロジェクトそのものを削除していきます。
◼︎ひとつのページを削除したい場合
ひとつのコンテンツを削除したい場合は、Drafts(デフォルトの名称)のページを開きます。
次に、枠内にカーソルを合わせます。
枠内にカーソルを合わせると…が表示されます。…をクリックした後、Delete Pageをクリックします。
クリックすると以下の画面に切り替わるので、Deleteをクリックします。
このようにして、ひとつのページを削除していきます。
ここまでの章で共有した内容を理解すれば、サイトの作成は誰でもできるようになります。
次の章以降では、補足的な機能の紹介や、プロンプトのヒントについて深掘りしていこうと思います。
►Create.xyzの補足的な機能
この章では、サイトを作成する時に活用できる「補足的な機能」を共有します。なお、この章に書かれている内容は理解しなくてもサイトを作成することができます。
この章以降は、「Create.xyzで使える機能をもっと知りたい」という人だけお読みください。
「サイトの作成だけできるようになりたいんだ！」という人は、４つのステップからサイトを作成していきましょう。驚くほど簡単に、自分だけのサイトを作成できます。
◼︎Create.xyzのサイトのマークをクリックして使える9つの機能
作成画面の左上のサイトのマークをクリックすると、使える機能が表示されます。
クリックすることで表示される９つの機能について簡単に共有していきます。
☐ダッシュボードに戻る
Return to dashboardをクリックすることでダッシュボードに戻ることができます。
「プロジェクト」を変更したい際、作成画面からすぐに切り替えることができます。
☐変更前のデザインと変更後のデザインを比較して修正する
サイトのデザインやプロンプトを変更した後に、「あれ、変更する前のデザインどんな感じだったっけ？」と感じることがあります。そんな時はVersion Historyをクリックします。
クリックすると、以下の画面が表示されます。
この画面では、変更前のデザインと変更後のデザインを比較することができます。
デザインを変更するたびに、履歴は更新されていきます。
また変更後のデザインが「ちょっと違うんだよなぁ」と感じた際に、変更前のデザインに戻すこともできます。
デザインをもとに戻したい時は、戻したいデザインにカーソルを合わせて、Restore Versionをクリックします。
以下のように、変更前のデザインに更新されます。履歴も更新されていますね。
この機能を活用することで、失敗したデザインを細かく修正する必要がなくなります。やり直しも簡単です。
☐Undoをクリックしてプロンプトの入力ミスを修正する
操作を間違えた時や、デザインのミスを修正したい時はUndoをクリックします。
クリックすることで、変更を加えたひとつ前の状態に戻すことができます。
☐Redoをクリックしてプロンプトの修正を取り消す
「やっぱり修正しなくていいや」という時には、Redoをクリックします。
Redoは修正を取り消す機能になります。
☐作成されたサイトのコードを確認する
View the codeをクリックすることで、サイトのコードを確認することができます。
クリックすると、以下の画面に切り替わります。
右のプロンプトを、Create.xyzが自動的に左のコードに変換してくれます。だからこそコードの知識がゼロでも、簡単にサイトを作成することができるんです。
なお、コードが表示されている画面についてもいくつかの機能があります。
☑︎Embed Projectから埋め込み用のHTMLコードを取得する
Embed Projectをクリックすることで、自分のコンテンツに埋め込むためのHTMLコードを取得することができます。
クリックすると、以下の画面に切り替わります。
HTMLコードをコピーして所定の場所に添付をするだけで、サイトの埋め込みをすることができます。
自分でサイトを運営している人やコンテンツ作成をしている人にとっては、意外と便利な機能です。
☑︎Download Project
Download Projectをクリックすることで、フォルダ内に作成したサイトのデータを保存することができます。
クリックをするだけで、ダウンロードされます。
ダウンロードされたフォルダは以下の形式で保存されます。
データとして保管しておきたい方に、おすすめの機能です。
☑︎Copy Code
Copy Codeをクリックすることで、実装されているコードをコピーすることができます。
プログラミングのコードとして保存しておきたい方には、おすすめできる機能です。
☑︎Hide codeとView code
コードの画面からサイトの作成画面に、ボタンひとつで切り替えが可能です。
その際、Hide codeをクリックします。
クリックすると作成画面に切り替わります。この機能を知っていると、作業をスムーズに行うことができます。
また、もう一度コードを確認したい時はView codeをクリックします。
クリックすると、再びコードの画面が表示されます。
☐新しいサイト作成のページに切り替える
作業中に新しいページに切り替えたい方は、New pageをクリックします。
クリックすると、以下の画面が表示されます。
プロジェクト内で、新しいページが表示されます。
サイトの精度を高める際、複数のページを作成する必要があります。そのような時にこの機能を知っておくと、ストレスなく作業ができそうです。こちらも、一回のクリックで切り替えることができます。
☐新しいコンポーネント作成のページに切り替える
新しくコンポーネントを作成したい場合はNew componentをクリックします。
コンポーネントとは、サイト内で再利用できる部品のようなものです。
その他にも、サイトのヘッダーや、フッターなどもコンポーネントと言えます。そのような「再利用できる部品」を作成したい時でも、切り替えはとても簡単です。
☐データベースを追加して複数人でサイトを管理する(ベータ版)
データベースを追加したい時は、New databaseをクリックします。
クリックすると、以下の画面に切り替わります。
Enter a name for your databaseにデータベース名を入力します。
入力後に、Save databaseをクリックします。
Create.xyzを個人で活用する際は、あまり使わない機能かもしれません。
しかし複数人でサイトを作成して運営していくような時に、便利な機能です。データベースを入力することで、データを一元管理できたり、データの共有がしやすくなります。
☐作成画面から有料プランに切り替える
サイトを作成中「Create.xyzめちゃくちゃ使いやすいから有料プランでもいいかも」と感じることがあるかもしれません。そのような時にも、簡単にプラン変更をすることができます。
その際、Update to Create Proをクリックします。
クリックすると、支払い方法の入力画面に切り替わります。
この記事の最後の章で、プラン別の料金や、それぞれのプランでできることを共有しています。
「Create.xyzをもっと使いこなしてサイトの作成を頑張りたい！」人は、ぜひ最後の章までお読みください。
◼︎Create.xyzの作成画面上で使える「便利な機能」
この節では、サイトの作成画面上で使える便利な機能について共有します。
☐ページ名を変更する
自分で作成したサイトのページ名を変更することができます。変更したい時は、左上にある今のページの名前の部分をクリックします。
クリックするとテキスト入力ができるようになるので、ページ名を変更していきます。
ページ名を変更すると、保存する時にわかりやすくなります。自分でそれぞれのページに名前をつけることで、サイトの作成も楽しくなるかもしれません。
☐「時計マーク」から修正前のデザインと比較して修正する
以前の章で、変更前のデザインと変更後のデザインを比較して修正できることを共有しました。「比較と修正」は作成画面からでもすることができます。
作成画面から修正前のデザインと比較して修正したい場合は、時計のマークをクリックします。
クリックすると、以下の画面に切り替わります。
このようにして、作成画面からでも簡単に比較と修正ができます。
☐「PC」と「スマホ」からのサイトの見え方を確認する
PCとスマホでは、サイトの見え方は変わってきます。サイトを作成中に「自分が作成したサイトはどうやって見えているんだろう？」と思った人には、非常に便利な機能です。
サイトの見え方を確認する際、PCのマークかスマホのマークをクリックします。
ちなみに上の画像は「PC」からのサイトの見え方です。スマホからのサイトの見え方は以下のようになります。
作成画面内で確認ができるのは「とても便利だな」と思います。
読者はスマホから見ることが多いのか、PCから見ることが多いのかを想像しつつ作成すると、読者のためのサイトが構築できます。
☐拡大と縮小機能でサイトの完成度をチェックする
作成画面は拡大と縮小をすることができます。
拡大をしたい場合はExpandをクリックします。
クリックするとサイト画面が拡大して、実際にサイトを訪問しているような状態で確認をすることができます。
縮小するときはCollapseをクリックします。
クリックをすることで、サイトの画面は縮小されます。
見やすい方でサイトの作成や確認を進めることで、スムーズに作業ができそうです。
☐フルスクリーンでサイトを確認する
「プロンプトの画面が邪魔だなぁ」と感じることがあると思います。そんな時は、フルスクリーン画面に切り替えることがおすすめです。
サイトをフルスクリーンで確認したい時は、斜めの矢印のマークをクリックします。
クリックするとプロンプト画面はサイドに隠れ、見えなくなります。
また、斜めの矢印のマークをもう一度クリックすることで、プロンプトの画面が再び表示されます。
☐Shareをクリックしてできる３つのこと
Shareをクリックすることで活用できる便利な機能が３つあります。
できることについて共有します。
☑︎その１：コミュニティページにアクセスして作成のヒントを得れる
Create.xyzにはコミュニティページがあり、誰でも閲覧することができます。
Shareをクリックすると、以下の画面に切り替わります。
次に、Explore Communityをクリックします。
クリックすると、コミュニティページの画面に切り替わります。
たくさんの人がコミュニティページに共有をしています。他のユーザーが作成したサイトのプロンプトを確認することもできます。サイト作成のヒントを得ることができるかもしれません。
☑︎その２：サイトのURLをコピーできる
また、サイトのURLをコピーすることもできます。
コピーをする時は、以下のマークをクリックします。
クリックすることでコピーが完了し、シェアしたい場所にURLを共有することができます。
☑︎その３：HTMLコードをコピーできる
HTMLコードをコピーする方法に関しては以前の章で共有しましたが、ここからでもコピーをすることができます。
コピーをする際は、Embed Projectをクリックします。
クリックするとHTMLコードが表示されます。自分にとってやりやすい方法で実践していきましょう。
►Create.xyzでサイト作成の精度を高めるプロンプトのヒントを「５つ」共有！(深掘り)
この章では、サイトの精度を劇的に高めるためのプロンプトのヒントを５つ共有します。
前半の章でプロンプトを入力する時のポイントを共有しましたが、ここでの共有はさらに深掘りした内容になります。「もっとサイトを作り込んでいきたい」という方は、ぜひプロンプトの作成方法を学んでください！
ここで共有する内容を全て取り入れる必要はありません。必要な方法だけを持ち帰って、Create.xyzでのサイト作成に役立ててください。
◼︎Create.xyzでサイト作成の精度を高める方法その１：作成したいと思うサイトの全体像を伝える
Create.xyzでサイトを作成する際、「全体像」を明確に伝えましょう。
生成AIは人間のように解釈することができません。曖昧な指示を理解することも非常に苦手です。このような理由があるため、サイトの構成要素を具体的に入力する必要があります。
☐セクションごとに分ける
サイト作成のプロンプトを入力する際、「ヘッダー」「コンテンツ」「フッター」などのセクションに分割します。
ヘッダー🔽
コンテンツ🔽
フッター🔽
またそのほかのプロンプトを入力したい場合は、追加で入力していきます。
✓例えば、以下のようなプロンプトです
・各セクションには適切な余白を設けてください
・スマホ表示にも対応させてください
このようにプロンプトをセクションごとに分けることで、Create.xyzはイメージしているサイトにぴったりなサイトを作成してくれます。
☐視覚的な情報を具体的に指示する
色、フォント、サイズ、画像や動画、その他の配置なども具体的に伝えていきます。そうすることで、さらにイメージに近いサイトを作成することができます。
色🔽
フォント🔽
文字のサイズ🔽
その他の配置🔽
☐箇条書き、太字、改行を使う
料金プランなどの情報が整理されていないと分かりにくいセクションの作成では、プロンプトの中で箇条書き、太字、改行を活用します。
料金プランページの作成プロンプト🔽
このようにプロンプト内で箇条書き、太字、改行を活用することで、生成AIの理解度が格段に高まります。
人間が見た時も、箇条書きや太字は「わかりやすい！」って感じますよね。AIも同じように「わかりやすい！」って感じるんです。
◼︎Create.xyzでサイト作成の精度を高める方法その２：抽象的な表現を減らす
プロンプトを作成する際は、抽象的な表現を減らすことが大切です。
例えば、「かっこよくて、見やすいページにして！」という指示は、人によって「かっこいい」「見やすい」の基準が変わりますよね。人でも基準が変わってしまうので、AIにとってはもっと理解することができません。
そうなると、イメージ通りのサイトを作成することができなくなってしまいます。
AIにデザインを正しく伝えるためには、抽象的な表現を減らし、できるだけ具体的な指示を出すことが大切です。
☐ターゲットを明確にする
「誰のためのウェブサイトなのか？」をイメージしましょう。例えばプロンプトに、年齢層、性別、職業、興味関心、ライフスタイル、価値観など、具体的な情報を含めることが大切です。
良い例⭕️
悪い例❌
良い例では、年齢層、性別、職業、興味関心など、ターゲットが明確になっています。サイトの目的やデザインに関しても明確です。その一方悪い例では、ターゲットが曖昧で、具体的なイメージが伝わりません。
人に伝える時と同じように、ターゲットを明確にするための具体的なプロンプトを作成していきます。
☐デザインのイメージをしっかり言語化する
「高級感」「シンプル」「モダン」など、具体的な言葉で表現します。しかしこれらの単語だけを入力して「完了！」はNGです。ここでもやはり、曖昧にならないことが大切です。
良い例⭕️
悪い例❌
良い例では、具体的な言葉でデザインのイメージを表現できています。その一方悪い例では、漠然とした言葉で表現されています。僕たちが読んでも「ちょっとわからないなぁ」となりますよね。「シンプル」や「モダン」では理解しにくいんです。
「白とグレーを基調としたカラーパレット」や「Helvetica Neueフォントを使用」というような、具体的な言葉でイメージを伝えていきます。
☐デザインしたい要素を分解して指示する
デザインしたい要素はプロンプト内でごちゃまぜにせず、分解しましょう。
良い例⭕️
悪い例❌
良い例では、具体的なデザインの要素を分解して指示することができています。これならCreate.xyzもしっかりと理解してくれます。しかしその一方で、悪い例は漠然としています。イメージがつかみにくいです。
「ボタンの色はパステルピンク」や「画像の大きさは画面幅の80%」のように、各要素に分解しつつ具体的な指示をすることで正確に理解してくれます。
◼︎Create.xyzでサイト作成の精度を高める方法その３：プロンプトが長くなり過ぎないようにする
生成AIは、私たち人間が考えている以上に「指示待ち」をします。自分からは動きません。指示待ちな上に、長いプロンプト(指示)ではしっかりと行動してくれません。
AIは長い指示が苦手です。無駄な情報が多いプロンプトでは、重要なポイントを見失います。
なので理解しやすいように、情報を整理することが大切です。
☐目的を明確にする
長いプロンプトをつらつらと書くよりも、目的を明確にした方がより良い出力をしてくれます。
良い例⭕️
悪い例❌
良い例では「商品ページのデザイン」「決済・配送ページのデザイン」のように、目的が明確になっています。その一方悪い例では、サイトの目的やデザイン、機能など、多くの情報が詰め込まれています。これではCreate.xyzがどの情報が重要なのか判断できず、混乱することがあります。
目的を明確にして、必要な情報を絞り込むことが大切です。
☐プロンプトを分割する
どうしても長いプロンプトになってしまうことがあると思います。そんな時はプロンプトを項目ごとに分割しましょう。
良い例⭕️
悪い例❌
良い例では、プロンプトを項目ごとに分割することができています。その一方悪い例では、デザインイメージなどの多くの情報を詰め込んでしまっています。AIにとって理解しづらいプロンプトです。僕たちにとっても理解しづらいですよね。
複雑なプロンプトを分割し、段階的な指示を出しましょう。そうすることで、各ステップで何を求められているかを理解してくれます。理解度が高ければ、精度の高い出力をしてくれます。
☐必要な情報だけを伝える
サイト作成をスムーズに進めるために、必要な情報だけを入力していきます。
良い例⭕️
悪い例❌
良い例では、必要な情報である「結婚式の情報サイト」「パステルピンク基調」「可愛らしい雰囲気」だけを簡潔に伝えています。プロンプトも長くありません。その一方悪い例では、結婚式の準備で忙しいことや、AIへの期待など、ウェブサイトのデザインとは直接関係のない情報が多く含まれています。
伝えるべきことは、あくまでも「どのようなサイトのデザインにするか」です。
◼︎Create.xyzでサイト作成の精度を高める方法その４：ネガティブな指示を出さない
サイトのデザインを修正する際、「ダサい」「変」といったネガティブな言葉だけでは、AIは何をどう改善すればいいのか理解できません。出力の精度も大幅に下がってしまいます。
知り合いにデザインの相談をするように、ポジティブな言葉で「どんなデザインにしたいか」を伝えていきます。
☐「こうなってほしい」を伝える
Create.xyzに「こうなってほしい」という自分のイメージをはっきりと伝えます。
良い例⭕️
悪い例❌
良い例では、「モダンで洗練された印象」「余白を活かしたミニマルなデザイン」など、具体的な内容を伝えることができています。どのように修正すれば良いのか理解しやすいです。その一方で悪い例では、「古臭い」「ダサい」「見にくい」といったネガティブな言葉が使われています。これでは、具体的にどのようなデザインを求められているのか理解できません。
AIに指示をする時は、ポジティブで具体的な指示を出すことが大切です。そうすることで、イメージ通りの出力をしてくれる可能性が高くなります。
☐「〜しないで」と言わない
「〜しないで」を多用すると、AIの自由な発想を阻害することがあります。発想の範囲が狭まると、出力の範囲も狭くなってしまいます。
良い例⭕️
悪い例❌
良い例では「落ち着いた背景画像に変更してください」「アニメーションを調整してください」のように、具体的な指示を伝えています。こうすることで、修正すべきポイントを理解しやすいです。その一方悪い例では、「使わないで」というようなネガティブな指示が出されています。これでは、「どのような画像やアニメーションを使えばいいのか」を判断できません。
「〜しないで」ではなく「〜に変更してください」というプロンプトを入力するようにしましょう。どんな時も、具体的に入力することが大切です！
☐「なんか変」を連発しない
「なんか変」を連発しても、生成AIは期待に応えた出力をしてくれません。なぜなら「じゃあ何を学習して出力すればいいの？」と混乱してしまうからです。
良い例⭕️
悪い例❌
良い例では、「サイトの雰囲気に合う明るい色」「サイトの内容に合った読みやすいフォント」など、具体的な条件を伝えることができます。Create.xyzにとって、修正しやすくなります。その一方悪い例では、「なんか変」「もっと違う色にして」などのように、曖昧な表現が使われています。具体的にどのような修正が求められているのかわかりません。
これでは、生成AIもやる気が起きないと思います。
「具体的にどこがどのように変なのか」「どう変更してほしいのか」を明確に伝えましょう。
◼︎Create.xyzでサイト作成の精度を高める方法その５：すべてを生成AI任せにしない
生成AIは何でも叶えてくれる魔法のランプではありません。「あとはよろしく！」と丸投げしても、期待通りの結果は得られません。
生成AIを使う人が試行錯誤することで、本領発揮をしてくれます。
☐丸投げNG！「〜を作って」だけのプロンプトにしない
ただ「Webサイトを作って、あとはよろしく！」と丸投げするのではなく、具体的なイメージや方向性をCreate.xyzに伝えることが大切です。
良い例⭕️
悪い例❌
良い例では、ターゲット、お店の雰囲気、デザインイメージなどを具体的に伝えることができています。その一方悪い例では、カフェや美容室という情報しかありません。これだとAIが「どのようなカフェなのか」「どのような美容室なのか」を具体的にイメージできないので、イメージとは大きくかけ離れたサイトが出力されてしまいます。
AIはあくまでもツールです。最高のサイトを作るためには、具体的な指示が欠かせません。
☐「いい感じに！」というプロンプトを入力しない
「いい感じ」は人によって捉え方が異なります。それはAIも同じです。何が良い感じなのか、理解をしてくれません。人によって捉え方が変わってしまうようなプロンプトは、生成AIにもうまく機能してもらえないんです。
良い例⭕️
悪い例❌
良い例では「高級感のある」「自然を感じる」「アースカラー」など、具体的な言葉でデザインのイメージを伝えられています。その一方悪い例では、「おしゃれな感じ」「かっこいい感じ」といった抽象的な表現が使われています。生成AIは抽象的な表現が本当に苦手です。
「いい感じ」ではなく、具体的なイメージを言葉にして伝えていきましょう。
☐「なんか違うんだよなぁ」は使わない
「なんか違うんだよなぁ」では、何がどのように違うのかを理解してくれません。
良い例⭕️
悪い例❌
良い例のように、「色合いが明るすぎる」「画像がイメージと違う」「テキスト量が多い」など、具体的にどこをどのように修正したいのかを伝えましょう。そうすることで、出力の際に修正をしてくれます。少しずつイメージに近づけることも可能です。その一方悪い例のように「なんか違うんだよなぁ」「しっくりこないんだよなぁ」というような漠然とした感想では、AIはどこを修正すればいいのか、理解してくれません。
自分の感覚を具体的な言葉に変換できるようにしましょう！
►Create.xyzの「4つ」のプラン
次にCreate.xyzの4つのプランについて共有します。4つのプランは以下のとおりです。
✓FREEプラン
すぐに活用できる初心者向けのプラン
✓PROプラン
多くのモデルでより速く作業ができるプラン
✓BUSINESSプラン
規模を拡大するチームのためのプラン
✓ENTERPRISEプラン
複雑な要件にも対応できる企業向けのプラン
まずは、無料で使えるFREEプランから活用してみましょう。
►Create.xyzのプラン別の料金
プラン別の料金は以下のとおりです。なおここでの日本円は、1ドル156円で計算しています。
✓FREEプラン
無料です
✓PROプラン
月払い：19ドル(約3,000円)
年払い：190ドル(約30,000円)
※年払いにすると38ドル(約6,000円)節約できます
✓BUSINESSプラン
月払い：99ドル(約16,000円)
年払い：990ドル(約155,000円)
※年払いにすると198ドル(約30,900円)節約できます
✓ENTERPRISEプラン
金額の見積もりは要相談です。詳しくは以下のリンクをご覧ください。
►Create.xyzのそれぞれのプランでできること
それぞれのプランでできることは以下のとおりです。
✓FREEプラン
・20個までのプロジェクトが作成できる
・何度でも修正できる
・共同作業者の数に制限なし
・GPT-4 Turboで無料でサイトやアプリを構築できる
・生成したコードのコピー＆ペーストができる
・作成したアプリを一般公開できる
✓PROプラン
・FREEプランの全ての機能が使える
・プロジェクト数無制限
・Anthropic Opus、Haiku、Google Gemini、Groqを使うことができる
・デザインの自動生成機能が追加
・AI機能の利用制限が緩和
・1つのカスタムAPIを連携させることができる
・Create.xyzのロゴが表示されなくなる
・コードのエクスポートができる
✓BUSINESSプラン
・PROプランの全ての機能
・プライベートプロジェクトの作成ができる
・コードが無制限にエクスポートできる
・10個のカスタムAPIを連携させることができる
・3つのカスタムドメインを利用できる
・チーム内でのコンポーネントを共有共有できる
・APIの利用制限が大幅に緩和
✓ENTERPRISEプラン
►PROプランとBUSINESSプランに切り替える方法
この章では、PROプランとBUSINESSプラン切り替える方法をわかりやすく共有します。
まず、PROプランかBUSINESSプランの欄にあるGet Startedをクリックします。
クリックすると、以下の画面に切り替わります。
次にメールアドレスや、カード情報など、個人情報を入力していきます。
個人情報を入力した後、申し込むをクリックします。
申し込むをクリックしたタイミングで引き落としが発生します。
これでPROプランへの変更は完了です。BUSINESSプランに変更の際も、同じように手続きを行っていきます。
また支払い方法は、Google Payかlinkのどちらかを選択することも可能です。
加えてGoogleアカウントにカード情報を登録しておけば、よりスムーズにプランの切り替えができます。
なお、年払いに切り替えることもできます。
「まとめて支払いたいなぁ」という人は、トグルボタンをクリックしましょう。
クリックすることで、年払いの金額に変わります。
►この記事の引用元
Create.xyzに関する記事を書くにあたって、こちらのリンクを参考にしました。
https://createxyz.notion.site/Helpful-Tips-for-Using-Create-685440cd98954273afb39bb314df519b
►まとめ
以上になります。
WordPressのようなサイトでゼロからサイトを作るのは非常に大変です。時間もかかります。しかし今は「プロンプトの入力だけ」で自分のサイトが作れるようになりました。難しいことを覚えなくても、「この記事に書かれている内容を理解するだけ」で、簡単に自分のサイトが作成できてしまいます。
自分のコンテンツを持つことが大切だとずっと言われ続けてきました。しかし今までは作成が大変で、非常にハードルが高かったです。だけどそんな時代はもう終了しました。誰でも簡単に自分のコンテンツを持つことができるんです。そのハードルを下げてくれたツールが、Create.xyzだと思っています。
この記事が、Create.xyzでのサイト作成の参考になれば幸いです。
なお記事に関しての感想やご要望等ございましたら、XのDMにてメッセージを受け付けています。このページを下までスクロールしていただくと「黒い鳥」がいます。そこから僕のXのページにアクセスすることができます。
最後までお読み頂きありがとうございます。
コメント