以前からサイト生成AIのGalileo AIを試してみたかったので、
19ドル課金して使ってみました。
お題は山梨大ADPでアクティングアウトをした、
「写真共有サイト」にしました。
まずは簡単なコンセプトを考える。
・サービス概要:撮影した写真を投稿し、みんなで見られる
・ターゲット:写真好きな20代
・ベースカラー:#00000
・メインカラー:#ff3366
・アクセントカラー:#b0d345
・必須項目
1.ホーム画面:ユーザーが人気の写真を閲覧することができる。
2.写真詳細画面:閲覧した写真をクリックすると詳細画面に遷移し、カメラや写真のデータが見れる。
3.投稿画面:自分の撮影した写真をアップロードできる。
4.マイページ:自分のアップロードした写真や友達の撮影した写真も見れる。
★これをChatGPTにてプロンプトを作成
-
ユーザーエンゲージメントの促進 コメント機能・いいね機能: 写真に対してコメントや「いいね」をできる機能を実装し、コミュニケーションを促進します。写真好きなユーザー同士が意見を交換し、共感しやすくなります。
フォロー機能: 他のユーザーをフォローして、その人のアップロードした写真を自分のフィードでチェックできるようにします。これにより、ユーザー間のつながりが強化されます。 -
写真の分類やフィルタリング タグ付け: 投稿する写真にタグ(例:風景、ポートレート、夜景、モノクロなど)を付ける機能を導入します。これにより、ユーザーが興味のあるジャンルの写真を簡単に探せるようになります。
検索機能: 検索バーを設けて、特定の写真やユーザーを探しやすくします。タグや場所、写真のタイプなどで検索できると便利です。 -
ユーザーの写真のクオリティを向上させる支援 編集ツール: 投稿前に簡単な編集ができるツール(フィルター、明るさ調整、クロップなど)を提供することで、ユーザーが自分の写真をより良く仕上げられます。
アドバイスやガイド: 写真をより魅力的に撮るための簡単なヒントやガイドを提供する機能。例えば「最適な撮影時期」「カメラ設定の基本」など、特に初心者向けに役立ちます。 -
プライバシーとセキュリティ プライバシー設定: 投稿した写真を「公開」「非公開」「友達のみ」など、選択できるプライバシー設定を提供します。これにより、ユーザーは自分の写真をどこまで公開するかをコントロールできます。
著作権と利用規約: ユーザーが投稿する写真の著作権を守るため、明確な利用規約や権利設定を提供し、適切に運営する必要があります。 -
デザインとユーザーインターフェース 直感的なUI/UXデザイン: 若い世代をターゲットにしているため、シンプルで直感的なインターフェースが求められます。特に、写真を中心にしたビジュアル重視のデザインが重要です。
モバイル対応: 若い世代はスマホを多く使用するため、モバイルデバイス向けの最適化が必須です。レスポンシブデザインやアプリを提供することで、どこでも写真の閲覧・投稿ができるようにします。 -
通知機能とアクティビティフィード アクティビティフィード: フォローしているユーザーが新しい写真を投稿した際に通知を受け取れる機能。これにより、ユーザーのエンゲージメントが高まります。
コメント・いいね通知: 自分の投稿にコメントやいいねがついた場合に、通知を送る機能。これにより、ユーザーは他のユーザーとのインタラクションが促進されます。 -
データ分析・トラッキング 写真のパフォーマンス分析: 投稿した写真の「いいね」数、コメント数、シェア数などをトラッキングして、ユーザーが自分の人気写真を把握できるようにします。
トレンド分析: 人気のある写真やタグを分析して、今どんな写真がトレンドになっているのかをフィードに表示します。 -
社会的影響やインセンティブ コンテストやテーマ企画: 定期的にフォトコンテストやテーマ別の写真チャレンジを開催し、ユーザーが参加できるようにします。これにより、コミュニティ感が高まり、ユーザー同士の交流も深まります。
報酬やバッジ: 特定のアクション(例えば、多くの「いいね」をもらった写真や投稿数)に対して、バッジや報酬を与えるシステムを導入することで、ユーザーのモチベーションが高まります。 -
ソーシャルメディアとの連携 シェア機能: SNS(InstagramやTwitterなど)への簡単なシェア機能を提供します。これにより、写真を他のプラットフォームに拡散することができ、サービスの認知度向上につながります。
SNS連携でのログイン: FacebookやGoogleアカウントで簡単にログインできる機能を実装します。これにより、ユーザーが手軽にサービスを利用開始できるようになります。
これで生成
自動生成はできました、
プロンプトは日本語OKなのに、
デザイン上は英語しかつかえないので、
Figmaで修正する必要があります。
次に同じようにランディングページをつくってみました。
同じようにコンセプトを作成
・サービス概要:カメラのプレゼントランディングページ
・ターゲット:写真好きな20代
・ベースカラー:#00000
・メインカラー:#ff3366
・アクセントカラー:#b0d345
・必須項目
1.メイン画像を大きめ目の一眼レフカメラ
2.カメラでとった写真のサンプルを6枚並べる
3.ランディングページ名は「カメラプレゼント!!」
4.応募ボタンを大きめに#ff3366で2か所につける。
★これをまたChatGPTにてプロンプトを作成
ヘッダーセクション
ロゴ(ページ上部左側): シンプルなロゴ(必要に応じて)
ランディングページ名:
「カメラプレゼント!!」
フォント: 太めで目立つフォントを使用。カラーはメインカラー#ff3366を使用。
メイン画像セクション
大きめの一眼レフカメラの画像
背景に大きな一眼レフカメラの画像を使用(カメラの角度やレンズのディテールがしっかり見えるもの)。
画像は高解像度で、ページの上部に配置し、強いインパクトを与える。
画像の上に、**「カメラをプレゼント!」**というテキストを重ねて、強調。
カメラで撮影した写真サンプルセクション
6枚のカメラで撮影した写真サンプル
写真は色調が異なるもの(風景、人物、静物、夜景、自然などのシーン)を選び、カメラの性能や多用途性をアピール。
サンプル写真は並べて表示(横並びかグリッドレイアウト)。
各サンプル写真の下に、簡単な説明を添える(例: 「鮮明な風景撮影」「夜景でもきれいな明るさ」など)。
6枚のカメラで撮影した写真サンプル
写真は色調が異なるもの(風景、人物、静物、夜景、自然などのシーン)を選び、カメラの性能や多用途性をアピール。
サンプル写真は並べて表示(横並びかグリッドレイアウト)。
各サンプル写真の下に、簡単な説明を添える(例: 「鮮明な風景撮影」「夜景でもきれいな明るさ」など)。
応募方法セクション
簡単な応募方法の説明
見出し: 「簡単3ステップで応募完了!」
ステップ1: 「下記フォームから必要事項を入力」
ステップ2: 「カメラの使用目的や、欲しい理由を教えてください」
ステップ3: 「応募ボタンをクリック!」
※簡潔でわかりやすく、ユーザーにストレスを感じさせない流れで。
※説明文はメインカラー#ff3366で強調し、読みやすさを重視。
応募ボタンセクション
応募ボタン(2回目)
「応募する」ボタンを目立つ場所に大きめに配置。
ボタンの背景色: メインカラー#ff3366
ボタンのテキスト: 「今すぐ応募」
ボタンの形状は丸みを帯びたデザインにすることで親しみやすさを演出。
カメラの特徴・利点セクション
カメラの魅力的な特徴を紹介
見出し: 「カメラの特徴」
高解像度、手ぶれ補正、長時間バッテリー、優れたレンズ品質など、ターゲット層が魅力を感じやすい特徴を短く、視覚的に伝える。
3つ程度の大きなアイコンや画像と共に、特徴を簡潔に説明。
ユーザーレビューセクション
実際にカメラを使った写真やコメント
実際に使った人の感想や写真を数名分掲載。
簡単なコメントと、撮影した写真を一緒に表示。
20代の写真好きなユーザーに共感されやすい内容を選定。
応募ボタンセクション(再度)
応募ボタン(1回目)
「応募する」ボタンを再度大きく配置。
ボタンの背景色: メインカラー#ff3366
ボタンのテキスト: 「今すぐ応募」
色使いとデザインの詳細
ベースカラー (#000000)
ページ全体の背景やテキストの一部に使用し、シンプルで洗練された印象を作り出します。
背景は黒にして、カメラや写真の色が引き立つようにします。
メインカラー (#ff3366)
ボタン、見出し、リンク、強調したいテキストに使用。
目を引きやすく、活気を感じさせる色。
アクセントカラー (#b0d345)
アイコンや、サンプル写真の枠線、ボタンのホバー効果などに使用し、全体のデザインにバランスと爽やかさを加えます。
これで生成
ん-、1ページの縦長にしたいのですが、
なぜか高さ制限があるみたいで2枚にわかれました。
これもFigma等で調整が必要みたいです。
■感想
思った以上に使える、
だけどプロンプトを入力しただけでは、
細かいところがダメなので、
Figmaで修正する必要があるのがめんどくさいですねー
あと写真はどこから持ってきてるのか不明です。
実験おわり。
コメント