AIウェブサイト作成開いて見られるアイデア。

同じClicoの会話で文章を整え、必要な画像を作成します。選んだ要件と利用可能な画像を、プレビュー、修正、公開ができるWebsiteプロジェクトへ引き継いでください。

ポートフォリオやコレクションのサイトを作成。

アーティスト名を囲むように絵画を並べたMira Vossのポートフォリオ

作品から問い合わせへつなげる。

Mira Vossは絵画を主役にし、アーティストの物語と連絡方法を訪問者に伝えています。既存のClicoポートフォリオを開き、作品と問い合わせへの導線がどう組み合わされているか確認してください。

ポートフォリオを見る
コートの写真、コレクションのナビゲーション、購入アクションを表示するOrvelleのファッションページ

コレクションの紹介ページを作る。

Orvelleは編集されたビジュアルとコレクションのナビゲーションでシリーズを紹介しています。このようなページから既存のショップへ訪問者を誘導し、決済、在庫、顧客アカウントはショップ側で扱えます。

コレクションを見る

チャットから編集可能なサイトへ。

チャットで文章を整え、必要な画像を作り、確認済みの要件をWebsiteへ引き継ぎます。すでに決めた内容をもとに作成を始められます。

画像と要件をひとつのサイト制作へ。

Paper Harborは、Clicoのチャット内のアートワークと確認済み要件から始まりました。「ウェブサイトを作成」で選択画像を引き継ぎ、概要、ルール、操作説明を備えたこのローンチページができました。メインボタンから操作説明へ直接進めます。

ページの先にあるゲームを作る
選んだ画像をWebsiteへ引き継ぐ

生成した港の画像がある同じ会話でローンチページの要件を確認し、「ウェブサイトを作成」を選びました。画像は参照ファイルとして新しいプロジェクトに入り、完成したプレビューにも表示されています。このページはローンチ用の下書きで、ボタンの移動先は「Controls」です。訪問者がそこから遊べると案内する前に、実際に公開されたゲームのURLを追加して確認してください。

選択した港の画像、ゲームの概要、操作説明へのボタンを表示する、実際のPaper Harborサイトのプレビュー
Paper Harbor、Clicoで作成したローンチページ

画像をページに合わせる。

このPaper Harborのローンチ用画像はClicoで生成し、ページでの役割に合うか確認しました。要件では紙の船、ブイ、星を配置し、左上に見出しのための余白を確保しています。使いたい画像を選び、確認済みの要件と一緒にWebsiteプロジェクトへ引き継いでください。

ページでの役割に合わせて画像を指定

画像に必要な役割を指定してください。Paper Harborのローンチ用画像は、文章のスペースを残しながら船、障害物、収集アイテムを紹介します。選ぶ前に返された構図を確認してください。企画の会話で選択画像とページ要件を確認し、「ウェブサイトを作成」を選びます。利用可能な対応画像と確認済みの要件を、新しいWebsiteプロジェクトへ引き継げます。

ターコイズ色の港で、オレンジのブイと金色の星の間に浮かぶ紙の帆船。左上に空の余白
Paper Harbor、Clicoで作成したローンチ用画像

ページを自分のエディターへ。

このPaper Harborの書き出しには、ソース、ビルド済みサイト、最初に生成した画像が含まれます。ProまたはMaxでZIPをダウンロードし、自分のエディターで続けたり、サービスを接続したり、ホスティングを用意したりできます。同じ画像がページと一緒に含まれています。

ソース書き出しの利用条件を見る
書き出しに含まれる内容

ダウンロードしたZIPにはプロジェクトのソースと、ローカルで開けるビルド済みプレビューが含まれます。どちらにも元の港の画像がそのまま入っています。独自のホスティングやサービスが必要になったら、エディターでソースを開いてください。依存関係と外部APIは別途設定が必要です。フロントエンドの書き出しでバックエンドが提供されるわけではありません。

実際にエクスポートしたPaper Harborサイトのソースファイル
実際にダウンロードしたサイトZIP内の選択ファイルとHTML

公開前にプレビュー。

まず、訪問者に何を理解し、何をしてほしいかを決めます。Paper Harborはゲームを紹介し、その世界を見せ、操作方法を説明します。

  1. 要件をWebsiteへ引き継ぐ

    Clicoのチャットで文章、選択画像、主な操作を確認してから「ウェブサイトを作成」を選びます。要件と利用可能な対応形式の参照素材が新しいプロジェクトに入ります。このページの「サイトを作成」は、編集可能な要件を確認と送信のためにClicoへ渡します。

  2. 訪問者の次の操作を試す

    プレビューを開き、ページの主な操作を試してください。Paper Harborでは「Controls」に進み、1ラウンドの遊び方を理解する流れです。プロジェクトの会話で変更点を絞って依頼し、更新したページをパソコンとスマートフォンで確認してください。

  3. 公開や受け渡しの方法を選ぶ

    「公開」で公開サイトのリンクを作成します。後の修正が整ったら「変更を公開」を使ってください。ProまたはMaxではソースZIPをダウンロードし、コードエディターで続けたり、既存のサービスを接続したりできます。

サイトを公開する。

公開リンクを作り、同じサイトを修正し続けるか、ソースを持ち出せます。

ソースをエクスポートProまたはMaxでサイトのソースファイルをダウンロード。

Websiteプロジェクトで「ソースとビルドをダウンロード」を選びます。ZIPにはソースファイルと、利用可能なビルド済みプレビューが含まれます。依存関係、外部API、サーバー機能は別途設定が必要です。

よくある質問

自分の文章や画像を使えますか?

はい。承認済みの文章と対応形式の参照画像を要件に追加してください。「ウェブサイトを作成」を選ぶ前に、Clicoのチャットで文章を準備したり、画像を生成・編集したりすることもできます。

チャットからWebsiteに何が引き継がれますか?

明示的な「ウェブサイトを作成」操作で、確認済みの要件、元の会話、利用可能な対応形式の参照素材を新しいWebsiteプロジェクトへ引き継ぎます。使う素材を確認してください。利用可能性、所有権、対応形式、タスクの上限は引き続き適用されます。

同じサイトを編集し続けられますか?

はい。保存済みのWebsiteプロジェクトの会話を続け、変更点を絞って依頼してください。修正版を公開する前に、更新されたプレビューを確認します。

ショップや予約システムにも対応していますか?

Clicoはショップや予約ページの画面を作り、既存のサービスへリンクできます。決済、在庫、アカウント、データベースには、それぞれのサービスと連携設定が必要です。

ページを作成すると公開されますか?

いいえ。作成とプレビューは公開とは別です。「公開」で公開サイトのリンクを作り、後の修正が整ったら「変更を公開」を選びます。

コードエディターに持ち出せるものは?

ProまたはMaxでは、ソースと、利用可能な場合はビルド済みプレビューをダウンロードできます。ZIPには実行時の依存関係は含まれません。外部API、ホストされたファイル、サーバールーティングを使うプロジェクトには、それらの依存先が引き続き必要です。

訪問者に次に何をしてほしいですか?

サイトを作成