【生成AI】ハッカソン参加レポート vol.1

🕓本記事の最終更新日は です。

筆者のスペック

参加したイベント

イベント名シンプルな生成 AI ハッカソン
URLシンプルな生成 AI ハッカソン
主催SimpleForm
参加対象者「プログラマもしくはデザイナであればどなたでも参加いただけます!」

技術選定

我々はPython × Flaskで作りました。ソース管理はGitHubです。

■言語

今回は6チーム全てがPythonを使っていました。 Pythonは使える人が多いのと、初学者でも簡単にかけてかつ環境構築も簡単(Macならいらない)のでハッカソンではよく使われるみたいです。

■ソース管理

ソース管理はほとんどの場合がGitHubなので、使ったことない人は練習しておきましょう。
はじめてのGitでGitの使い方を解説していますので、確認しておきましょう!

私たちのチームが作ったもの

私たちが作ったのはLPを自動生成するwebアプリケーションです。以下のようなフローで作成しました

  1. 入力ページでペルソナを入力させる
  2. 「作成する」ボタン押下
  3. GPTにキャッチコピーを考えさせる
    1. 入力させたペルソナ情報を基にプロンプトを作る
    2. APIを投げる
    3. 帰ってきた文字列を保持する
  4. GPTにセールスポイントを3つ考えさせる。
    1. 入力させたペルソナ情報と、生成させたキャッチコピーを基にプロンプトを作る
    2. APIを投げる
    3. 帰ってきた文字列を保持する
  5. 良い感じの背景画像を作らせる(←利用料が高いので途中で断念。。。)
  6. GPTにLPのHTML + cssを作らせる
    1. 入力させたペルソナ情報、生成させたキャッチコピー、生成させた3つのセールスポイントを基にプロンプトを作る
    2. APIを投げる
    3. 帰ってきた文字列を保持する
  7. 生成させたHTML・CSSをファイルにする
  8. 生成したLP画面に遷移

動的にプロンプトを作る

私は以下のようにして動的にプロンプトを作りました。


def addCondition(prompt,conditonType,condition):
  if(len(condition) != 0):
      prompt += "\n" + "・"
      if (len(conditonType) != 0):
          prompt += str(conditonType) + "は" + str(condition)
      else:
          prompt += condition    
  return prompt

def makePromptForCatchcopy(businessType,target,personasGender,age,imageColor,detail):
  prompt = "以下の特徴をもつビジネスのキャッチコピーを考えてください。"
  addCondition(prompt,"業界",businessType)
  prompt = addCondition(prompt,"ターゲット",target)
  prompt = addCondition(prompt,"ペルソナの性別",personasGender)
  prompt = addCondition(prompt,"ペルソナの年齢",age)
  prompt = addCondition(prompt,"LPのイメージカラー",imageColor)
  prompt = addCondition(prompt,"",detail)
  
  return prompt

def makepromptForLP(referenceUrl,businessType,target,personasGender,age,imageColor,detail,catchcopy,sales_points):    
  prompt = "以下の特徴をもつランディングページのHTMLを作成してください。\n"
  addCondition(prompt,"業界",businessType)
  prompt = addCondition(prompt,"ターゲット",target)
  prompt = addCondition(prompt,"ペルソナの性別",personasGender)
  prompt = addCondition(prompt,"ペルソナの年齢",age)
  prompt = addCondition(prompt,"LPのイメージカラー",imageColor)
  prompt = addCondition(prompt,"キャッチコピー",catchcopy)
  prompt = addCondition(prompt,"サービス概要",detail)

  for index, point in enumerate(sales_points):
      prompt = addCondition(prompt, "セールスポイント" + str(index), point)

  prompt += "・キャッチコピーはh1タグを使うこと\n"
  prompt += "・セールスポイントの内容はページ内で必ず3つ記載し横並びのデザインにすること\n" 
  prompt += "・背景色と文字の色が似すぎていると文字が見えなくなるので、文字が識別できる範囲でイメージに沿った色にすること\n"
  prompt += "・背景色はグラデーションにすること\n"
  prompt += "・レスポンシブデザインにすること\n"
  prompt += "・回答はHTML部分を返答すること\n"
  prompt += "・下記ページを参照すること\n"
  prompt += referenceUrl
  
  return prompt
    

工夫した点としては、入力値がからでもプロンプトが崩れずに正しく作れるようにしたことです。 それから、ほかのメンバーにもmakePromptForCatchcopy関数を基に関数を作ってもらうようにしたので、読みやすさには気を付けました。

makepromptForLP関数は、ハッカソン当日はかなりChatGPTの作るデザインにバラつきが出たので、後日、改修してみました。

ちなみに、関数名を誉められました✨プロンプトの綴りを間違えて指摘されたりもしました(笑) ← えいごにがて

成果物

ペルソナ入力ページ

このページでペルソナの情報を入力させます。

ペルソナ入力ページ

生成されたLP

ジャーン!!!いかがでしょうか?

もちろん、手直しは必要だと思いますが、ボタン一つでこれが生成されるのです。 とても面白いですよね!!!! 生成AIの可能性を感じます。プロンプトを作るところもシステムで持てば、エンドユーザーはプロンプトエンジニアリングの知識すら必要ありません。

生成されたLP

おわりに

ハッカソン、本当に楽しかったです!!

設計書作成やお偉いさんとの話し合いやテストなど、本当は好きじゃないことは抜いて、楽しいアイディア出しと開発だけをできるのです!!楽しいに決まっていますね✨

普段お仕事で使わない言語に触れるチャンスにもなりますし、自分の会社以外のエンジニアと交流するのも楽しい&勉強になります😌 開発さえできればだれでも参加できる場合がほとんどなので、是非お勧めします。

ハッカソンの参加レポートは他にもあるので、ぜひご覧ください。 vol.2↗ vol.3↗

最後まで読んでくださり、ありがとうございました。