【検証】AIはCSS職人になれるのか？

こんにちは！

AIの進化が凄まじいですね！
文章の執筆、コーディング、画像生成、動画生成など、多岐にわたる活躍を見せてます。

しかし、まだまだ、ニッチな職人の域には達していないはず。

それを検証するため、CSS職人にスポットを当てて検証しようと思います。

# CSS職人とは？
CSSで絵画を作ってしまう方々です。
有名なサイトはこちら。

[https://diana-adrianne.com/](https://diana-adrianne.com/)

こんなのとか
![fig1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/0d51158e-f202-471a-925a-7ff1fc6ccb9b.png)

こんなのとか
![fig2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/c24f9c3a-35fe-12ef-f0d6-8484f4e44807.png)

信じられないですよね？
CSSなんです。

サイトを訪れたら分かりますが、[ちゃんとGitでも公開されてます](https://github.com/cyanharlow/purecss-zigario)。

いくらAIが優秀とは言え、いきなりこのレベルは無理ですよね。
私も指示の出し方が分かりません。

まずは、ゆるいイラストレベルになればOK、ということにしました:slight_smile:

# お題
12月なので、お題はサンタクロースに。
まずはサンタのイメージ画像を作ってもらいました。
![fig3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/f41e0d5d-8615-313b-bdfd-95ee0f57a56f.png)

いいですね！
なぜかトナカイが袋に入ってますが、そこはご愛嬌🎅

これをベースに、サンタクロースの顔をCSSで描いてもらいます。

### 第一弾
最初のコードはこちら。
イメージ画像をアップして、この画像を参考に、サンタクロースの顔をCSSで描いてください、と依頼しました。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Santa Claus Face with CSS</title>
<style>
/* CSS code for Santa Claus face - Previously provided */
.santa {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ffcccb; /* Light red for face */
  border-radius: 50%; /* Circular face */
  margin: 20px auto;
}
.santa-hat {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  top: -70px;
  left: 0;
}
.santa-hat-pom {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  top: -30px;
  left: 85px;
}
.santa-eye {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  top: 60px;
}
.santa-eye.left {
  left: 50px;
}
.santa-eye.right {
  right: 50px;
}
.santa-beard {
  position: absolute;
  width: 180px;
  height: 100px;
  background-color: white;
  bottom: 0;
  left: 10px;
  border-radius: 0 0 90px 90px;
}
</style>
</head>
<body>
<div class="santa">
    <div class="santa-hat"></div>
    <div class="santa-hat-pom"></div>
    <div class="santa-eye left"></div>
    <div class="santa-eye right"></div>
    <div class="santa-beard"></div>
</div>
</body>
</html>
```
ある程度のパーツに分けて作っているようです。

では、ブラウザで見てみましょう！
![fig4](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/ed06d3cc-4fe4-f44f-37e8-512d626436bc.png)

なるほど、気持ちは分かる！
クリスマス気分は伝わってきますね！

### 改良してみる
さて、ここからどう指示をすべきか。

この画像とイメージ画像の両方をアップして、コードを貼り付けて、もっとイメージ画像に近づけてください、というのを繰り返しお願いしました。
ちょこちょこ微修正も依頼してます。

その結果、まずはこうなって
![fig5](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/652e10ac-3beb-8aee-8560-1d5a16f74aa2.png)

もう少し細かく修正していこうと誓い合い
![fig6](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/aa5f3801-a3fb-9a71-dff5-2d13a37067bb.png)

輪郭に収めず、別々のパーツで作ってね、とお願いして
![fig7](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/64089426-f0f8-74a9-108f-f7f7b351e566.png)

帽子の形が逆ですよ、とアドバイスをし
![fig8](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/295603f9-a731-131d-c37d-80cb43cd1432.png)

さらに修正を重ねて、最終的なコードがこちら！
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Updated Santa Claus Face with CSS</title>
<style>
body {
  background-color: #90ee90; /* Green background */
}

.santa {
  position: relative;
  width: 200px; /* Updated face width */
  height: 240px; /* Updated face height */
  background-color: #ffe0e0; /* Light skin tone */
  border-radius: 50%; /* Circular face */
  margin: 50px auto;
  overflow: visible; /* Allow for hat and beard overflow */
}

.santa-hat {
  position: absolute;
  bottom: 170px; /* Positioning the hat's base at the top of the face */
  left: 0; /* Aligning with the sides of the face */
  right: 0;
  height: 100px; /* Updated hat height */
  background-color: red;
  border-radius: 90% 90% 0 0; /* Rounded top for the hat */
  z-index: 1; /* Ensuring the hat is behind the brim */
}

.santa-hat-brim {
  position: absolute;
  bottom: 150px; /* Positioning the brim at the bottom of the hat */
  left: -5px; /* Extending beyond the width of the hat for visual effect */
  right: -5px;
  height: 25px; /* Brim height */
  background-color: white;
  z-index: 2; /* Above the red part of the hat */
}

.santa-hat-pom {
  position: absolute;
  bottom: 255px; /* Positioning the pom at the top of the hat */
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  width: 30px; /* Pom size */
  height: 30px;
  border-radius: 50%;
  z-index: 3; /* Ensuring the pom is above the brim */
}

.santa-eye {
  position: absolute;
  top: 90px; /* Eyes positioned below the hat */
  width: 30px; /* Eye width */
  height: 30px; /* Eye height */
  background-color: black;
  border-radius: 50%;
  z-index: 4; /* Above the face */
}

.santa-eye.left {
  left: 55px;
}

.santa-eye.right {
  right: 55px;
}

.santa-nose {
  position: absolute;
  top: 120px; /* Nose position */
  left: calc(50% - 15px);
  width: 30px; /* Nose width */
  height: 30px; /* Nose height */
  background-color: #aa0000;
  border-radius: 50%;
  z-index: 4;
}

.santa-cheek {
  position: absolute;
  top: 130px; /* Cheek position */
  width: 28px; /* Cheek width */
  height: 28px; /* Cheek height */
  background-color: #ffcccc; /* Cheek color */
  border-radius: 50%;
  z-index: 4;
}

.santa-cheek.left {
  left: 50px;
}

.santa-cheek.right {
  right: 50px;
}

.santa-beard {
  position: absolute;
  top: 140px; /* 髭の上端の位置 */
  left: 50%; /* コンテナの中央に配置 */
  transform: translateX(-50%); /* 左に50%移動して中央揃え */
  width: 200px; /* 髭の幅 */
  height: 270px; /* 髭の長さ */
  background-color: white;
  /* 下部を細くして髭の形に近づける */
  clip-path: ellipse(50% 45% at 50% 5%);
  z-index: 5; /* 他の要素の前面に表示 */
}

.santa-mouth {
  position: absolute;
  top: 160px; /* Mouth position */
  left: calc(50% - 20px);
  width: 40px; /* Mouth width */
  height: 7px; /* Mouth height */
  background-color: rgb(145, 96, 96);
  border-radius: 10px;
  z-index: 6; /* Mouth behind the beard */
}

</style>
</head>
<body>
<div class="santa">
  <div class="santa-hat"></div>
  <div class="santa-hat-brim"></div>
  <div class="santa-hat-pom"></div>
  <div class="santa-eye left"></div>
  <div class="santa-eye right"></div>
  <div class="santa-nose"></div>
  <div class="santa-cheek left"></div>
  <div class="santa-cheek right"></div>
  <div class="santa-mouth"></div>
  <div class="santa-beard"></div>
</div>
</body>
</html>
```

そして、出来上がったサンタクロースがこちらです！
![fig9](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/b8a09034-a5b5-77b8-84db-93105bce46fa.png)

どうでしょう、サンタっぽいですよね。


再度、イメージ画像との比較をどうぞ。
![fig10](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/ecca0dde-5b98-a659-3b44-8bda78e20f38.png)
![fig11](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407770/ba9a4f30-25b2-ddc5-8081-e60d7df429de.png)

全然違いますが、サンタクロースであることは分かります。

画像を見せながらやりとりしただけでここまで来れたのは、凄いと思います:clap:

# 検証結果
CSSの知識は豊富ですが、いきなり職人レベルはやはり難しいです。

ただし、今回は画像を見せて依頼しただけなので、もっとパーツを細かくしたり、職人のコードを参考にしてもらったりすると、もっと精度の高いCSSを組めると思います。
あとは指示する側のレベルも重要です。

# まとめ
今回は、AIを活用して、CSSでどこまでできるのかを試してみました。
簡単なやりとりだけでサンタと分かるものができたので、次回はもう一段レベルを上げて、もっと精度の高い成果物を目指そうと思います。

本当に便利な世の中になったので、AIを活用しながら、自分の引き出しも増やしていきましょう！