ほぼテク8月19日Webデザインの新時代！？天気アプリのモックアップをChatGPTと考えてみました！

AI生成AIChatGPTGPTWebページデザイン

8月19日

著者裕太我妻

ほぼテク読者の皆様、いつも大変ありがとうございます！
我妻裕太です。

本日もよろしくお願いいたします。GPTに関する連続投稿約117日目です！
本日のテーマはこちらです！

天気アプリのモックアップをChatGPTと考えてみました！

本日のテーマはWebデザインです。
インターネット主流の現代の中でWebページは今や必須の情報提供コンテンツです。

ただ、Webデザインは、ビジュアル表現と機能性を絶妙に組み合わせるアートであり、その製作過程では多くの課題と障壁に満ちています！
これらの課題は、デザインのコンセプト化からコーディング、テストに至るまで、プロジェクトの各段階で現れることがあります。

例えば以下のような課題はよくあるのではないでしょうか？？

Webデザインのよくある課題

1.視覚的コヒーレンスの欠如
一貫性のないデザインは、ユーザーに混乱を与える可能性があります。

2.レスポンシブデザイン
さまざまなデバイスでの表示の整合性を保つことは、非常に時間を要する場合があります。

3.コードの複雑性
HTML、CSSなどの言語を使ってデザインを正確に表現するのは容易ではない場合があります。

4.時間とリソース
品質の高いデザインを実現するには、多くの時間と専門的なスキルが求められることがよくあります。

ChatGPTで解決

これらの課題の解決の鍵として、ChatGPTが注目を集めています。
ChatGPTは、OpenAIによって開発された高度なテキスト生成モデルで、多岐にわたるタスクに対応する能力を有しています。

例えばChatGPTは以下のような活躍をしてくれると思います！

1.デザインのアイデア生成
要件に基づいて具体的なHTMLやCSSコードを生成することができ、デザインの一貫性を強化します。

2.コードの自動生成
ChatGPTは、指定されたパラメータに基づいて正確なコードを生成することができます。
これにより、コーディングの複雑性と時間が大幅に削減される可能性があります。

3.多様なスタイル対応
グラスモーフィズムなどの最新のデザイントレンドにも対応しており、誰もが触りたくなるような美しいデザインを作成する手助けをします。

ChatGPTはWebデザインのプロセスを効率化し、美しい成果物の生成を容易にする強力なツールです。
この先進的な技術によって、デザインの質を向上させながら時間とリソースを節約することが可能になります。

ChatGPTがWebデザインの世界に新しい創造の自由を提供してくれます！
では、さっそくどんなものを生成してくれるのか試してみよう！

【実験ルール】
・GPT-4で実験する。
・HTML、CSSを生成する。
・アプリは天気アプリを想定します。天気を一覧でみる画面を生成します。（最近天気が色々とニュースでも話題になっているので）

【プロンプト】

あなたは優秀なWebデザイナーです。
以下の内容を満たすHTML、CSSを作成してください。
## Webページの仕様
・Webページは天気アプリの一覧画面です。世界中の天気が一覧で見える機能です。
・アイコンはFont Awesomeを使用してください。
・表示対象の地域は以下の通りです。
　1.東京
　2.ニューヨーク
　3.パリ
　4.バルセロナ
　5.シドニー
　6.ハワイ
　7.ロンドン
　8.サンパウロ
## ヘッダー・フッターの仕様
　1.ヘッダー：アプリのタイトル
　2.フッター：コピーライト
## 各天気カードの仕様
　1.説明文
　2.温度
　3.降水確率
　4.空気の質
　5.日付
　6.天気のアイコン
## デザインのリクエスト
・ユーザフレンドリーな雰囲気でお願いします。
・誰もが触りたくなるような美しいデザインです。
・デザインはグラスモーフィズムを採用してください。
・言語は英語でお願いします。

【動画】

【生成したHTML】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<title>World Weather App</title>
</head>
<body>
<header>
<h1>World Weather App</h1>
</header>
<main>
<section class="weather-card" id="tokyo">

</section>

</main>
<footer>
<p>© 2023 World Weather App</p>
</footer>
</body>
</html>

【生成したCSS】

body {
font-family: Arial, sans-serif;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
header, footer {
text-align: center;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
}
header h1 {
color: #333;
}
.weather-card {
width: 300px;
padding: 20px;
margin: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: inline-block;
}
.weather-card p,
.weather-card h2 {
color: #333;
margin: 10px 0;
}
.weather-card i {
font-size: 24px;
}
footer p {
color: #666;
}