Create.xyzを使ってみて 太田博三(@usagisan2020)

目次:
1.はじめに、
2.create.xyzとは
3.1)の商品検索アプリの作成方法
4.2)の群馬県への海外観光客へのPRサイトの作成方法
5.まとめ
6.参考URL一覧

完成形のURLを以下に記します。
1)完成形の商品検索アプリのURL
Product Search Interface
https://searchdrink20240714.created.app/

2)群馬県への海外観光客へのPRサイト
https://strategysdgs.created.app/

まとめ
商品検索では、add-onのデータベースの活用も行うとほぼ完璧なアプリができそうだと思いました。また観光客向けのPRサイトでは、サイトの階層をさらに設定するなどで、従来のサイトと引けを取らない内容に昇華させられそうです。
また、日本でも以下の企業さんも同じようなことをされているようです。
Fotographer.ai - マーケティングコンテンツをAIで瞬時に作成 https://fotographer.ai/
マルチモーダル基盤で、Text-To-ImageやImage-to-Text、Text-to-Musicなどありますが、今回のText-To-Appsは、コード自動生成までは思いつくものの、あと一歩が大きな差になると感じました。

Transcript

1. Create.xyzで1)商品検索アプリと2)海外観光客向けの群馬県のPRサイトを 作ってみました！ 2024年7月15日(月) 15-19時 GMOハルカス 16F GMO Yours 太田 博三(@usagisan2020) 目次: 1.はじめに、 2.create.xyzとは 3.1)の商品検索アプリの作成方法 4.2)の群馬県への海外観光客へのPRサイトの作成方法 5.まとめ 6.参考URL一覧 1.はじめに まず、create.xyzはText-to-Appsで、ノーコードのWebサイトやアプリケーションを作成できるAI搭 載のアプリビルダーです。プロンプトに自然言語を入力するだけで、Webサイトやアプリケーショ ンが作れます。 先月、Discordでcreate.xyzのコミュニティに参加していたのですが、チュートリアルなどはまだ整 備されていなく、勉強会などの機会に、体験してみようというモチベーションでした。 今回、create.xyzのCEOなどのメンバーが来日されて、東京の渋谷(@GMO)でMeetupが開催さ れ、明日以降、東大の柏の葉キャンパスでも開催されるとのことです。 本日(7/15)に渋谷(GMO)のMeetup参加し、下記の2点を作ってみました。 7/14(日)に1.の商品検索アプリを、7/15(月)にcreate.xyzのMeetupにて、2.の観光PRサイトを作 成しました。 次に、完成形のURLを以下に記します。 1)完成形の商品検索アプリのURL Product Search Interface https://searchdrink20240714.created.app/ 2)群馬県への海外観光客へのPRサイト https://strategysdgs.created.app/ 2.create.xyzとは Create.xyzは、プログラミングスキルがなくてもWebサイトやアプリケーションを作成できるAI搭載 のアプリビルダーです。 主な特徴は以下の通りです: 1) 自然言語でのアプリ構築: 英語や日本語で指示を与えるだけで、AIがコードに変換してア プリが生成されます。 2) シンプルな操作: 自然言語だけでなく、いいと思ったサイトのスナップショットをアップロー ドして、タイトルを変更することでサイトが生成されます。
2. 3) 幅広い活用: プロトタイピングだけでなく、既存アプリのコンポーネント生成など、様々な 場面で利用可能です。 ・xyzを使用することで、エンジニアでなくても経営者の方や部門担当者がダイレクトに、例えば ミッション、ビジョン、バリューなどやアイデアをサイトやアプリにすることができることが1番の魅 力です。 3.1)の商品検索アプリの作成方法 商品検索アプリは、GMOメイクショップさんのブログを参考にしました。 ECサイトに管理者画面として商品検索機能を作りたい場合などに有効活用ができそうで す。 https://searchdrink20240714.created.app プロンプトは以下になります。コピペして試して見てください。 飲料水メーカー(アサヒ、コカ・コーラ、サントリー)の社内管理ツールとして、商品を検索する画面のUIを作成 してください。 Google Classroomのような感じで。 検索できる条件は以下の通りです。 ・商品名(テキストフィールド) ・メーカー名(プルダウン) ・商品の発売日(カレンダーで範囲指定出来るようにする) ・商品の価格帯 ・商品の特徴
3. ・商品のカテゴリー 検索結果はテーブル形式で表示する。 以下の要素を表示させてください。 ・商品画像 ・商品名 ・販売価格 ・発売日 ・カテゴリー ・メーカー名 検索ページング機能もつけたい。 デフォルトは25件表示できるようにして、50件と100件を選択できるようにプルダウンしたい。 おしゃれでわかりやすいデザインにしたい。 商品画像はインターネットで画像を取ってきてください。 4.2)の群馬県への海外観光客へのPRサイトの作成方法 海外観光客向けのPRサイトは本日(7/15)のcreate.xyzのCEOらの来日のMeetupで作成 しました。 以下に一連の流れを記します。 1. 1.Perplexity AIでアイデアの壁打ちのためのリサーチ プロンプト1：「「日本の良さを伝えるHP」のコンセプトとミッション、バリューとを観光 の視点から、参考になるURLをリサーチして、教えてください。」 プロンプト2：「観光は東京などに集中するので、群馬県など地方に分散させる方法 があれば教えてください。」 2. コンセプトは海外観光客を東京などに集中するのを、群馬県など地方へ分散させる 施策で、以下の3つの視点で検討しました。 1)1.文化・歴史資源の活用: 富岡製糸場 2)地域の食文化や特産品のプロモーション: 群馬県の上州牛や下仁田ネギなど 3)ユニークな体験型観光の開発: 渋川伊香保温泉 3. プロンプトを作成
4. 観光は東京などに集中するので、群馬県など地方に分散させる方法として、下記の3点を中心に、 海外観光客向けの観光PRのホームページを作ってください。 1.文化・歴史資源の活用: 群馬県の世界遺産である富岡製糸場など、地域の文化的・歴史的資源を活用したストーリー性のあ る観光プログラムを開発します。これにより、教育旅行や文化観光の需要を取り込むことができま す。 富岡製糸場 | しるくるとみおか 富岡製糸場 富岡市観光 公式ホームページ https://www.tomioka-silk.jp/_tomioka-silk-mill/ 2.地域の食文化や特産品のプロモーション: 群馬県の上州牛や下仁田ネギなど、地域特有の食材や料理を前面に押し出したグルメツアーや食 のイベントを企画します。これにより、食を目的とした観光客を呼び込むことができます。 https://www.konnyaku-museum-shop.com/SHOP/YDF00431.html 3.ユニークな体験型観光の開発: 地域の特色を活かした体験プログラムを提供します。例えば、群馬県では温泉や自然を活かしたア ウトドアアクティビティ、伝統工芸の体験教室などを充実させることで、都市部にはない魅力を創出で きます。 伊香保温泉 Home | 渋川伊香保温泉観光協会 https://www.ikaho-kankou.com/ 4. 3.create.xyzでGenerate(生成) https://strategysdgs.created.app/
5. 5.まとめ 商品検索では、add-onのデータベースの活用も行うとほぼ完璧なアプリができそうだと思 いました。また観光客向けのPRサイトでは、サイトの階層をさらに設定するなどで、従来の サイトと引けを取らない内容に昇華させられそうです。 また、日本でも以下の企業さんも同じようなことをされているようです。 Fotographer.ai - マーケティングコンテンツをAIで瞬時に作成 https://fotographer.ai/ マルチモーダル基盤で、Text-To-ImageやImage-to-Text、Text-to-Musicなどありますが、 今回のText-To-Appsは、コード自動生成までは思いつくものの、あと一歩が大きな差にな ると感じました。 6.参考URL一覧 1. (940) Create.xyzを公式アンバサダーが解説！ノーコードでWEBアプリ生成！ - YouTube
6. https://www.youtube.com/watch?v=3oL3m2L-koo&t=428s 2. create.xyz Team in Tokyo: CEO Demo & AI Meetup @ GMO Yours · Luma https://lu.ma/5sneg9zr?tk=rJnUcS 3. 【Create.xyz】ウェブサイト生成AIの使い方を解説！｜AI相談.com https://aisodan.com/news/93 4. 【プロンプトあり】 Create.xyzで本格的なWebサイト制作をしてみよう｜ChatGPT研究所 https://chatgpt-lab.com/n/n7569b7badab7 5. 【簡単開発】『Create.xyz』の使い方！テキストだけでWebページ・ツール制作！ | romptn Magazine https://romptn.com/article/42036 6. これから始める”Create.xyz”｜特徴や使い方を徹底解説！ - FlutterFlow Cafe https://flutterflow-cafe.com/contents/create-xyz/ 7. AIでアプリを簡単に作成！Create.xyzで実現する未来型開発 - GMO MAKESHOP engineer blog https://tech.makeshop.co.jp/entry/2024/04/02/174344#%E5%95%86%E5%93%81% E6%A4%9C%E7%B4%A2%E6%A9%9F%E8%83%BD%E3%81%AE%E3%83%97 %E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%82%92 %E4%BD%9C%E6%88%90%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B 8. [社内勉強会] AIサービス紹介 Create.xyz - Speaker Deck 9. https://speakerdeck.com/insane_2023/she-nei-mian-qiang-hui-aisabisushao-jie-creat e-dot-xyz 以上