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

AI生成AIChatGPTGPTWebページデザインSoftUI

9月2日

著者裕太我妻

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

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

ChatGPTとWebページデザイン！

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

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

前回はニューモフィズムを用いたログイン画面を作成してみました。
今回はもう少し違うデザイン手法が適用できるかやってみよう！

ChatGPTとWebページデザイン！Soft UIを理解する

Soft UI（Soft User Interface）は、ユーザーインターフェース（UI）デザインにおいて近年注目を集めているスタイルの一つです。
このスタイルは、光と影を微妙に使い、各UI要素が柔らかく、立体的で、より自然な印象を与えるように設計されています。

主な特徴

柔らかな色合い
Soft UIでは、柔らかい色とグラデーションがよく使用されます。これは目に優しく、親しみやすい印象を与えます。
内部・外部の影
よく見られるのは、ボタンやカードなどの要素に対して内部と外部の両方に影を適用することです。これにより、要素が浮き出ているように見えたり、凹んで見えたりします。
丸みを帯びた形状
角のない、丸い形状が多用されます。これにより、より柔らかく自然な印象を与えます。
シンプルなレイアウト
無駄な装飾を避け、シンプルかつ機能的なレイアウトが好まれます。
アニメーションとトランジション
軽やかな動きが加えられることもあり、これが全体の印象をより滑らかにします。

メリット

視覚的に魅力的で、ユーザーエンゲージメントを高める可能性があります。
柔らかな印象は、ユーザーに安心感を与えることが多いです。

留意事項

オーバーデザインになる可能性があります。
複雑な要素が多いと、ページのロード速度が遅くなる可能性があります。

以上がSoft UIの主な特徴です。
このスタイルは、モバイルアプリやウェブサイト、デスクトップアプリケーションなど、多くのプラットフォームで採用されています。

それではさっそく試してみよう！

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

【プロンプト】

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

【デモ動画】

【生成したテキスト】
もちろんです！Soft UI（Soft User Interface）は近年人気のあるデザインスタイルで、ユーザインターフェースがより自然で親しみやすく、立体的な見た目を持つことが特徴です。
以下は、Soft UIスタイルを採用したログイン画面のサンプルコードです。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Soft UI Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="login-box">
<h1>Login</h1>
<form>
<div class="input-box">
<input type="text" id="username" placeholder="Username">
</div>
<div class="input-box">
<input type="password" id="password" placeholder="Password">
</div>
<button type="submit">Login</button>
</form>
</div>
</div>
</body>
</html>

CSS

body {
font-family: Arial, sans-serif;
background-color: #f0f1f6;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
max-width: 400px;
}
.login-box {
background-color: #ffffff;
border-radius: 24px;
box-shadow: 20px 20px 60px #d4d4d4,
-20px -20px 60px #ffffff;
text-align: center;
padding: 40px;
}
h1 {
margin-bottom: 24px;
}
.input-box {
background-color: #e0e0e0;
border-radius: 12px;
box-shadow: inset 8px 8px 16px #cacaca,
inset -8px -8px 16px #f4f4f4;
margin-bottom: 24px;
overflow: hidden;
}
input {
border: none;
outline: none;
background: none;
width: 100%;
padding: 16px;
font-size: 18px;
}
button {
cursor: pointer;
background-color: #e0e0e0;
border: none;
border-radius: 12px;
padding: 16px 32px;
font-size: 18px;
box-shadow: 8px 8px 16px #cacaca,
-8px -8px 16px #f4f4f4;
transition: 0.3s;
}
button:hover {
box-shadow: 4px 4px 8px #cacaca,
-4px -4px 8px #f4f4f4;
}