ほぼテク8月20日Webデザインの新時代！？ChatGPTとWebページデザイン！？

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

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

ChatGPTとWebページデザイン！

本日のテーマは昨日から継続してWebデザインです。

インターネット主流の現代の中でWebページは今や必須の情報提供コンテンツです。
そのWebページのデザインにChatGPTを活用できないかの実験が今回のテーマです！

昨日はお天気アプリの一覧画面をイメージしたWebページをデザインしました。
結果は意図をくみ取ってシンプルなデザインができてなかなか満足でした！

前回の改良点としてはおおよその仕様は実装してくれたのですが、デザインの部分で「グラスモーフィズム」を実装できなかった・・・
「グラスモーフィズム」をリクエストしたのですが、それが実現できなかった・・・悔しい！

ので、今回は果たしてChatGPTはデザインの部分も考えてくれるのか試してみました。
では、さっそくどんなものを生成してくれるのか試してみよう！

その前に少しだけ先ほどから話しているデザイン手法のグラスモーフィズムについて解説いたします！

グラスモーフィズム（Glassmorphism）は、2020年頃から流行り始めたUIデザインのトレンドの一つです。
透明感あるガラスのようなテクスチャと、背景となるコンテンツとのぼかし効果を特徴としています。

グラスモーフィズムの主な特徴は以下の通りです。

1.透明性
要素の背景に透明または半透明の色を使用します。これによってガラスのような効果が生まれます。

2.ぼかし効果
背景のぼかし効果を使用することで、ガラスが置かれている背後の物体がぼんやりと見えるようにします。

3.光の反射
光の反射やシャドウ効果を使って、リアルなガラスの質感を模倣します。

4.カラーグラデーション
しばしば、透明のガラス効果と相まって、カラーグラデーションが使用されます。

5.レイヤー効果
グラスモーフィズムを最大限に活用するために、異なるレイヤーとの相互作用が重視されます。
透明な要素が重なることで、深みと複雑さが増します。

CSSのbackdrop-filterプロパティを使ってぼかし効果を適用したり、透明度とシャドウを調整することで、このデザインスタイルを実現することができます。

グラスモーフィズムは、モダンで洗練された印象を与えるため、多くのウェブサイトやアプリで採用されています。
透明感とぼかしの組み合わせは、インタラクティブな要素と視覚的な魅力を提供し、ユーザー体験を豊かにすることができます。

それでは上記を踏まて、さっそく実験してみよう！
昨日は具体的な仕様を明記しましたが、今日は少し抽象的で広めなプロンプトでいきたいと思います。

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

【プロンプト】

あなたは優秀なWebデザイナーです。
グラスモーフィズムを採用した美しいWebページをデザインしてください。
Webページは天気アプリのランディングページです。
誰もが触りたくなるような美しいデザインです。
言語は英語でお願いします。

今回は追いプロンプトとして、一回上記で生成したあとにアイコンを入れたく、以下の質問をして完了しています。

【追いプロンプト】

天気と分かるようなグラフィックなども入れることはできますか？

ChatGPTから生成されたHTML、CSSは以下の通りです。

【生成した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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.css">
<link rel="stylesheet" href="style.css">
<title>Weather App</title>
</head>
<body>
<div class="container">
<div class="weather-box">
<div class="weather-icon-container">
<i class="fas fa-cloud fa-3x"></i>
</div>
<h1>Your Weather Companion</h1>
<p>Stay ahead of the weather with precise forecasts, beautiful animations, and expert insights.</p>
<div class="location-box">
<label for="location">Enter your location:</label>
<input type="text" id="location" name="location" placeholder="e.g., New York">
</div>
<button class="explore-button" type="button">Explore</button>
</div>
</div>
</body>
</html>

【生成したCSS】

body {
margin: 0;
background: linear-gradient(to right, #a8c0ff, #3f2b96);
font-family: Arial, sans-serif;
}

.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.weather-box {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 40px;
width: 400px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
text-align: center;
}

.weather-icon-container {
text-align: center;
margin: 20px 0;
}

.weather-icon-container .fas {
color: #ffffff;
opacity: 0.8;
}

h1 {
color: #ffffff;
font-size: 28px;
margin-bottom: 10px;
}

p {
color: #ffffff;
font-size: 18px;
margin-bottom: 20px;
}

.location-box {
margin-bottom: 20px;
}

label {
color: #ffffff;
font-size: 16px;
}

input {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
outline: none;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
}

.explore-button {
width: 100%;
padding: 15px;
border: none;
border-radius: 5px;
background: #3f2b96;
color: #ffffff;
cursor: pointer;
transition: background 0.3s;
font-size: 18px;
}

.explore-button:hover {
background: #2e2377;
}