Zenn
🐈

chatgptでプロトタイプを作る

2023/10/13に公開
webデザイン
ChatGPT
gpt4v
ワイヤーフレーム
tech

gpt4Vがついに私のところにも来てくれました!!

ありがとうopenai
ありがとう世界

早速お試しでプロトタイプを作ってみました

まず10秒でつくったこのワイヤーフレーム（）を解析してもらいます

わたしの殴り書きからサイトマップ構造を的確に解析してくれました
友人曰く暗号と言わしめたこの字の汚さに勝利するとは驚愕です

この情報をもとにプロトタイプを作ってください

- タイトル
  - アイキャッチ
    - フォトページリンク
    - BBSページリンク
    - ブログページリンク
  - フォトページ
  - BBSページ
  - ブログページ

了解しました。指定された情報を基に、ウェブサイトのプロトタイプの構造を以下のように提案いたします。

タイトル
この部分はウェブサイトのトップページに表示される部分で、ウェブサイトの名前やブランドを表すものとして位置付けられます。一般的にはウェブサイト名やロゴが表示されることが多いです。

アイキャッチ
ウェブサイトのトップページに大きく表示されるビジュアルエリアです。ユーザーの興味を引き付けるためのビジュアルやキャッチコピーを配置します。

  • フォトページリンク: アイキャッチの下部やサイドに、フォトページへの導線としてのボタンやリンクを配置します。
  • BBSページリンク: アイキャッチの下部やサイドに、BBSページへの導線としてのボタンやリンクを配置します。
  • ブログページリンク: アイキャッチの下部やサイドに、ブログページへの導線としてのボタンやリンクを配置します。

フォトページ
写真や画像をメインに展示するページです。ギャラリー形式やスライドショー形式など、様々なレイアウトが考えられます。各写真には説明文やタイトルを付けることができます。

BBSページ
掲示板ページです。ユーザー同士が情報交換やコミュニケーションを取るための場として設けられます。トピックの作成、コメントの投稿などの機能が一般的に提供されます。

ブログページ
記事やニュースを投稿するページです。記事のタイトル、日付、カテゴリー、タグなどの情報と共にコンテンツが表示されます。コメント機能やシェアボタンの配置も考えられます。

次にプロトタイプを作ってもらいます

上記プロトタイプからhtmlcssを使ってワイヤーフレームを作ってください

とんでもないですね...！

ちなみにコードはこちらです

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプルウェブサイト</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        header { text-align: center; margin-bottom: 50px; }
        .eyecatch { background-color: #e9e9e9; padding: 50px 0; text-align: center; }
        .link { margin: 10px; padding: 10px 20px; background-color: #ccc; display: inline-block; text-decoration: none; color: black; }
        section { margin: 50px 0; padding: 40px; border: 1px solid #ccc; }
    </style>
</head>
<body>

<header>
    <h1>タイトル</h1>
</header>

<div class="eyecatch">
    <h2>アイキャッチ</h2>
    <a href="#photo" class="link">フォトページ</a>
    <a href="#bbs" class="link">BBSページ</a>
    <a href="#blog" class="link">ブログページ</a>
</div>

<section id="photo">
    <h2>フォトページ</h2>
    <p>ここに写真や画像を展示します。</p>
</section>

<section id="bbs">
    <h2>BBSページ</h2>
    <p>ユーザー同士の掲示板エリアです。</p>
</section>

<section id="blog">
    <h2>ブログページ</h2>
    <p>記事やニュースを投稿するエリアです。</p>
</section>

</body>
</html>

おまけ

DALL.E3でプロトタイプを作ってもらったらすごすぎて使えませんでした

デザインカンプをワイヤーフレーム画像を作ってください

デザインカンプのレベルを超えてますねｗｗｗ

レイアウトのみのモックアップで良いです

うーんモックとはという感じですｗｗｗ

今は画像認識と画像生成が分離していますが同時に使えたら・・・おっとこんな時間に誰かきたようです。

Discussion