ほぼテク8月27日Webデザインの新時代！？ChatGPTとWebページデザイン！？ニューモーフィズム（Neumorphism）編！

AI生成AIChatGPTGPTWebページデザインニューモフィズム

8月27日

著者裕太我妻

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

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

ChatGPTとWebページデザイン！

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

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

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

今回はもう少し違うデザイン手法が適用できるかやってみよう！

ChatGPTとWebページデザイン！ニューモフィズムを理解する

ChatGPT（GPT-4）は、自然言語処理技術の最先端を行くAIです。
このAIがWebページデザインにも寄与することをご存知でしょうか？

特に今話題の「ニューモフィズム（Neumorphism）」に焦点を当て、ChatGPTがいかにデザインの進化に寄与しているのかを解説します。

ChatGPTとWebページデザイン！

ChatGPTは多くの業務に使える万能なツールですが、Webデザインのアイデア出しやプロトタイピングにも使用できます。
例えば、デザイナーがどのようなコンポーネントを組み合わせればいいか、またはどのような色彩が効果的かといった質問に対し、ChatGPTは有用な答えを提供可能です。

ニューモフィズムとは

ニューモフィズムは、近年話題のUIデザイン手法です。
このデザインは、リアリズムとミニマリズムの融合とも言えるスタイルで、スケウモフィズムとフラットデザインの中間に位置します。

主に背景色と同じまたは非常に近い色でコンポーネントをデザインし、細かい影や光の表現で立体感を出します。
これにより、ユーザーにとって直感的で触りたくなるようなUIが実現されます。

【実験ルール】
・GPT-4で実験する。
・HTML、CSSを生成する。

【プロンプト】

あなたは優秀なWebデザイナーです。
ニューモフィズムを採用したHTMLとCSSをデザインしてください。
ログイン画面を生成してください。
言語は英語でお願いします。

【デモ動画】

【生成したテキスト】
もちろんです。
ニューモフィズム（Neumorphism）を採用したログイン画面のHTMLとCSSコードを以下に示します。
このデザインはシンプルながらもモダンであり、ニューモフィズムの主要な特性を取り入れています。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Neumorphic Login</title>
<style>
body {
background-color: #e0e0e0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #e0e0e0;
width: 400px;
height: 400px;
border-radius: 24px;
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.input-container {
background-color: #e0e0e0;
border-radius: 12px;
width: 80%;
padding: 14px;
margin: 8px;
box-shadow: 10px 10px 30px #bebebe, -10px -10px 30px #ffffff;
}
input {
width: 100%;
border: none;
outline: none;
background: none;
}
.submit-button {
width: 80%;
padding: 16px;
border: none;
border-radius: 12px;
background-color: #e0e0e0;
box-shadow: 7px 7px 14px #bebebe, -7px -7px 14px #ffffff;
color: #333;
font-size: 18px;
}
.submit-button:active {
box-shadow: 4px 4px 7px #bebebe, -4px -4px 7px #ffffff;
}
</style>
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" placeholder="Username">
</div>
<div class="input-container">
<input type="password" placeholder="Password">
</div>
<button class="submit-button">Login</button>
</div>
</body>
</html>