画面の情報を入力して、HTMLを出力させる

INPUT

・画面項目定義

OUTPUT

・HTML(画面モック)のベースライン

最終更新日時

Apr 3, 2024 2:53 AM

コンテンツカテゴリ

プロンプトカタログ

ツール

ChatGPT

利用シーン

設計/UI設計実装/ドキュメントからコードを生成する

利用するシチュエーション

製造工程において、ある程度の画面構成が検討から画面HTMLの雛形を作成したい
要件定義工程において、ユーザーに画面モック(HTML)を提示したい

プロンプトテンプレート

‣

1.ベースラインの作成

‣

2.追加リクエスト

入力サンプル

‣

A.プロジェクト登録

‣

B.プロジェクト検索

‣

C.プロジェクト検索結果一覧

# 要望
あなたは優秀なUIデザイナーです。
{# 制約事項}をよく守り{# シナリオ}に沿って、HTML形式で出力してください。

# 制約事項
-出力形式:HTML
-フレームワーク:Semantic UI
-フォントサイズ:14px程度
-フォント:指定なし
-ウィンドウサイズ:1024px×768px
-テーブル表示
    -項目と値は1対n

# 画面概要
-タイトル:プロジェクト検索結果一覧

-ページネーション
    -<<記号
    -<記号
    -1-5
    ->記号
    ->>記号

-テーブル表示
    -項目
        -PJ名
        -事業部
        -部門
        -PJ種別
        -PJ分類
        -PM
        -売上高_実績
        -開始日
        -終了日
    -値
        -データ1
            -PJ名:Aプロジェクト
            -事業部:事業部0001
            -部門:部門0001
            -PJ種別:新規開発
            -PJ分類:SS
            -PM:加藤
            -売上高_実績:1000万円
            -開始日:2023/01/01
            -終了日:2024/12/31
        -データ2
            -PJ名:Bプロジェクト
            -事業部:事業部0002
            -部門:部門0002
            -PJ種別:保守開発
            -PJ分類:S
            -PM:佐藤
            -売上高_実績:2000万円
            -開始日:2023/02/02
            -終了日:2024/10/31

# シナリオ
1.{# 画面概要}に従って、HTML形式で出力してください
2.出力したHTMLファイルを確認し、以下の観点でアドバイスをしてください
    -UI
    -UX

4.プロジェクト詳細

# 要望
あなたは優秀なUIデザイナーです。
{# 制約事項}をよく守り{# シナリオ}に沿って、HTML形式で出力してください。

# 制約事項
-出力形式:HTML
-フレームワーク:Semantic UI
-フォントサイズ:指定なし
-フォント:指定なし
-ウィンドウサイズ:1024px×768px

# 画面概要
-タイトル:プロジェクト詳細
-入力項目
    -ラベル:事業部/部門
        -値:事業部0001
        -値:部門0001
    -ラベル:PJ名
        -値:Aプロジェクト
    -ラベル:PJ種別 
        -値:新規開発
    -ラベル:PJ分類
        -値:SS
    -ラベル:売上高
        -値:1,000
    -ラベル:顧客
        -値:B商事
    -ラベル:PM
        -値:加藤
    -ラベル:PL
        -値:佐藤
    -ラベル:開始日
        -値:2023/01/01
    -ラベル:終了日
        -値:2024/01/01
    -ラベル:備考
        -値:角度高いです。

-画面の下部
    -タイプ:ボタン
    -テキスト:戻る
    -タイプ:ボタン
    -テキスト:更新

# シナリオ
1.{# 画面概要}に従って、HTML形式で出力してください
2.出力したHTMLファイルを確認し、以下の観点でアドバイスをしてください
    -UI
    -UX

出力サンプル

‣

A.プロジェクト登録

‣

B.プロジェクト検索

‣

C.プロジェクト検索結果一覧

‣

ex-1.プロジェクト詳細

‣

ex-2.プロジェクト検索と検索結果の組み合わせ

利用方法

1.ベースラインの作成

画面の情報を入力して、HTMLを出力させる - プロンプトテンプレートの[ここに入力] に制約事項を書く

‣

制約事項例

‣

フレームワーク(GPTからの返答)

‣

フォント(例)

‣

フォントサイズ(例)

‣

ウィンドウサイズ(例)

‣

モバイルサイズ(例)

‣

カラー

‣

必須の入力項目指定

‣

タイプ例

2.プロンプトを実行

画面の情報を入力して、HTMLを出力させる - 入力サンプルを参考に実行

💡

フレームワークやライブラリは一度の実行では動かないことがあります。繰り返し学習をさせていくことが重要なので指摘しましょう。

3.追加リクエストを実行

画面の情報を入力して、HTMLを出力させる - 2.追加リクエストを元に実行

注意事項

フレームワークやライブラリは、バージョンを指定するとより精度があがります
2回目、3回目のプロンプトでレイアウトの修正や追加要望を対話形式で伝えていくとアウトプットはより良くなります
ラジオボタンやセレクトボックスの選択肢は省略されやすいです。追加リクエストを実行を使用し、段階的にアウトプットイメージに近づけましょう
一度に多くの要望を入力すると、対応漏れが発生することもあります

タイプ	内容
テキストフィールド	単行テキスト
テキストエリア	複数行テキスト入力
パスワードフィールド	ユーザーの入力内容をマスキング
pulldown	セレクトボックス(選択肢あれば追加)
checkbox	チェックボックス(選択肢あれば追加)
radio	ラジオボタン(選択肢あれば追加)