ほぼテク9月3日Webデザインの新時代！？ChatGPTとWebページデザイン！？クレイモーフィズム（Claymorphism）編！

AI生成AIChatGPTGPTWebページデザインClaymorphismクレイモーフィズム

9月3日

著者裕太我妻

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

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

ChatGPTとWebページデザイン！

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

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

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

トレンドであるクレイモーフィズム（Claymorphism）に挑戦！

クレイモーフィズム（Claymorphism）はユーザーインターフェイス（UI）デザインにおいて新たに出てきたデザイントレンドの一つです。
このスタイルは、従来のフラットデザインやネオモーフィズム（Neumorphism）といったデザインパラダイムに新しい要素を加えています。

クレイモーフィズムは特に「柔らかい」印象や「粘土のような」テクスチャを持つデザイン要素を特徴とします。

主な特徴

1.立体感
クレイモーフィズムは、ボタンやカード、その他のUI要素が三次元的であるかのような印象を与えます。
これは主にシャドウや勾配を巧妙に使用することで達成されます。

2.柔らかい色
通常、このデザインスタイルでは柔らかい色調が使われます。
これによって、UI要素が「柔らかく」、「触れやすい」といった印象を与えます。

3.丸み
一般的に、UI要素には丸みを帯びたデザインが多く見られます。
これは、柔らかい印象を強調する効果があります。

4.質感
クレイモーフィズムではしばしば「粘土のような」または「ゴムのような」質感がUIに取り入れられます。
これは主にテクスチャやパターンで表現されることが多いです。

5.シンプルな操作性
クレイモーフィズムのUIは一般的には非常に直感的で、シンプルな操作性を持っています。

このような特徴によって、クレイモーフィズムはとても視覚的に魅力的なデザインスタイルとされています。
ただし、アクセシビリティや明瞭性に関しては十分な配慮が必要な場合もあります。
一部のユーザーにとっては、このスタイルがもたらす立体感やシャドウが誤解を招く可能性もあるため、バランスの取れた設計が求められます。

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

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

【プロンプト】

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

【デモ動画】

【生成したテキスト】
クレイモーフィズム（Claymorphism）は現在のトレンドの一つであり、ユーザーインターフェイスデザインに新しい風を吹き込んでいます。
このデザインスタイルは、通常のフラットデザインよりも立体的でありながらシンプルな印象を持っています。

以下は、クレイモーフィズムを採用したシンプルなログイン画面のHTMLとCSSのサンプルコードです。
このコードは、一般的なWebページに簡単に組み込むことができます。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Claymorphic Login</title>
<style>
/* Global Styles */
body {
background-color: #f0f1f6;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
/* Claymorphic Container */
.claymorphic-container {
background: #f0f1f6;
border-radius: 20px;
box-shadow: 20px 20px 60px #d1d9e6,
-20px -20px 60px #ffffff;
width: 400px;
padding: 30px;
}
/* Claymorphic Input */
.claymorphic-input {
background: #f0f1f6;
border: none;
border-radius: 12px;
box-shadow: 7px 7px 14px #d1d9e6,
-7px -7px 14px #ffffff;
padding: 15px;
width: 90%;
margin-bottom: 20px;
}
/* Claymorphic Button */
.claymorphic-button {
background: #f0f1f6;
border: none;
border-radius: 12px;
box-shadow: 7px 7px 14px #d1d9e6,
-7px -7px 14px #ffffff;
padding: 15px;
width: 100%;
text-align: center;
cursor: pointer;
}
.claymorphic-button:hover {
background: #e0e1e6;
}
.claymorphic-button:active {
box-shadow: inset 5px 5px 10px #d1d9e6,
inset -5px -5px 10px #ffffff;
}
</style>
</head>
<body>
<div class="claymorphic-container">
<h2>Login</h2>
<input class="claymorphic-input" type="text" placeholder="Username">
<input class="claymorphic-input" type="password" placeholder="Password">
<div class="claymorphic-button">Log In</div>
</div>
</body>
</html>