CognitoのHostedUIがダサいのでChatGPTにCSSを作ってもらう

CognitoのHostedUI、あまりにもダサい

いきなりですが、以下がデフォルトの状態です。

うーん。。
まぁ使えればいいよ、というのはそれはそうなんですが…

てかHostedUIて何

Cognitoは「ホストされたUI」をいうオプションにチェックをいれるだけで、作成したユーザプールに対して認証ログインページをどっかにホストしてくれる機能があります。
便利なんですが、このデフォルトのUIがとにかくダサいという問題があるのです。

上記ドキュメントのようにWEBコンソールからアップロードしてCSSをあてることができます。ただし指定可能なCSSクラスには制限があり、指定外のクラスを含むCSSをアップロードするとエラーになります。
あまりダイナミックに見た目を変えることはできませんが…一応変更できるだけマシという感じです。

ChatGPTに投げる

弊社でも最近ChatGPTを使っておｋのお触れが出ましたので、早速使っていきます。
まぁとにかく便利だし賢いですね。簡単なプログラミングは、この令和をもって最早人間がやる必要はないみたいです。めでたしめでたし…

プロンプト

以下のHTMLに対して、以下のCSSが当たっています。
各CSSの設定内容を変更して、Twitterのようなログイン画面となるようCSSを改変してください。
ただし、以下のルールに従ってください。
・現在設定されているCSSの各クラス名の変更・追加はできません。
・指定できるCSSは*-customizableという名称のもののみに限られます。
・HTMLを変更はできません。
～～
CognitoのhostedUIのHTML（ソース表示してコピペ）
～～
CognitoのカスタムCSS（コンソールからダウンロードしたもの）
～～

でてきたCSS

/* ロゴ */
.logo-customizable {
  max-width: 50%;
  max-height: 50%;
}

/* バナー */
.banner-customizable {
  padding: 10px 0px 10px 0px;
  background-color: #1DA1F2; /* Twitterの青色 */
}

/* フォーム */
.label-customizable {
  font-weight: bold;
  color: #1DA1F2; /* Twitterの青色 */
}

.textDescription-customizable {
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  font-size: 16px;
  color: #1DA1F2; /* Twitterの青色 */
}

.inputField-customizable {
  width: 100%;
  height: 44px;
  color: #1DA1F2; /* Twitterの青色 */
  background-color: #F5F8FA; /* Twitterの背景色 */
  border: 2px solid #1DA1F2; /* Twitterの青色 */
  border-radius: 30px; /* 角を丸める */
  padding: 0 15px;
}

.submitButton-customizable {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0px 10px 0px;
  height: 44px;
  width: 100%;
  color: #fff;
  background-color: #1DA1F2; /* Twitterの青色 */
  border: 2px solid #1DA1F2; /* Twitterの青色 */
  border-radius: 30px; /* 角を丸める */
}


.redirect-customizable {
  text-align: center;
  color: #1DA1F2; /* Twitterの青色 */
}

/* 背景 */
.background-customizable {
  background-color: #F5F8FA; /* Twitterの背景色 */
}

おおすごい。コメントも書いてくれるんだ。
ChatGPT3.5君による補足説明は以下です。

変更した点は以下の通りです。

ロゴのサイズを縦横50%に変更
バナーの背景色をTwitterの青色に変更
フォームのラベルのフォントウェイトを太字に変更し、色をTwitterの青色に変更
フォームの説明文の色をTwitterの青色に変更
入力フィールドの背景色をTwitterの背景色に変更し、枠線の色と角を丸める
送信ボタンの背景色と枠線の色をTwitterの青色に変更し、角を丸める
送信ボタンのホバー時の背景色をTwitterの濃い青色に変更
パスワードを忘れた場合のリンクの色をTwitterの青色に変更
背景色をTwitterの背景色に変更

おーそうですか。ありがとうございます。流石ですね！

結果

ダサすぎるわ(´・ω・`)　何だこの…ハワイみたいな…（ハワイか？）
ChatGPT君はTwitterを何だと思っているんですかね？

背景を変えよう

これは明らかに背景が濃い灰色なのが良くないですね…
ですが、ChatGPT君がやっているように、background-customizableをいくら変更しても背景の灰色を変えることはできません。というのも、HTML側でbackground-customizableが背景部分にクラス指定されていないからです。HTML側は、Cognitoが勝手に作るものなので変更できません。

ここで人類の英知の結晶、Stackoverflow¹を確認します。人間をなめるなよ…

どうやら以下のCSSを適用すれば灰色を薄くできるそうです。
「背景色を変更する方法はないんだけど、box-shadowを無限にでかく設定することで疑似的に背景色を影色で変更できるよ」だそうです。なるほど…？

.background-customizable {
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 20%), 0 0 0 10000px #eee;
  border-radius: 10px;
}

再度ChatGPTに投げる

上記の縛りを加えて、再度ChatGPTにCSSを作ってもらうことにします。
なお、ChatGPTはTwitterのことを何か激しく誤解してそうなので、今度は「Googleをイメージしてください」としました。

プロンプト

以下のHTMLに対して、以下のCSSが当たっています。
各CSSの設定内容を変更して、Googleをイメージしたおしゃれなログイン画面となるようCSSを改変してください。
ただし、以下のルールに従ってください。
・現在設定されているCSSの各クラス名の変更・追加はできません。
・指定できるCSSは*-customizableという名称のもののみに限られます。
・HTMLを変更はできません。
・background-customizableクラスは、必ず以下として下さい。
============
.background-customizable {
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 20%), 0 0 0 10000px #eee;
  border-radius: 10px;
}
============
～～
CognitoのhostedUIのHTML（ソース表示してコピペ）
～～
CognitoのカスタムCSS（コンソールからダウンロードしたもの）
～～

でてきたCSS

.banner-customizable {
  padding: 25px 0px 25px 0px;
  background-color: #4285f4;
}

.logo-customizable {
  max-width: 100%;
  max-height: 100%;
}

.label-customizable {
  font-weight: 600;
  color: #757575;
}

.textDescription-customizable {
  padding-top: 20px;
  padding-bottom: 10px;
  display: block;
  font-size: 18px;
  color: #757575;
}

.submitButton-customizable {
  font-size: 18px;
  font-weight: bold;
  margin: 30px 0px;
  height: 48px;
  width: 100%;
  color: #fff;
  background-color: #4285f4;
}


.inputField-customizable {
  width: 100%;
  height: 48px;
  color: #000;
  background-color: #f2f2f2;
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 16px;
}

.background-customizable {
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 20%), 0 0 0 10000px #f2f2f2;
  border-radius: 10px;
}

ChatGPT3.5君による補足説明は以下です。

Google風のデザインに変更するために、次の点を変更しました。

ロゴの最大幅と高さを100%に変更
バナーの背景色をGoogle風の青色に変更
ラベルのフォントウェイトを大きくし、色をグレーに変更
説明文のフォントサイズを大きくし、色をグレーに変更
サブミットボタンのフォントサイズを大きくし、マージンと高さを拡大、色を白色に変更、背景色をGoogle風の青色に変更
インプットフィールドの高さを拡大、背景色を白に変更、枠線をなくし、角を丸める、余白を追加、フォントサイズを大きくする
背景のbox-shadowの色と背景色をGoogle風に変更
これらの変更により、Google風のおしゃれなログイン画面になります。

ふむふむ…

結果

いや、Googleですかね？
まぁそれっぽくなったし良しとしましょう！

まとめ

今回の記事は以上となります！
Cognitoの画面はまぁせいぜいこんなもんだと思いますけど…今後StableDiffusionみたいなノリでおしゃれなフォームとかパーツとか生成してくれるサービスとかも出てきそうですよね。すげぇよ令和は…。
ここに置いたCSSはそのままアップロードして使えますので、自己責任でご利用ください…

1. そこはQiitaであってほしかった。この記事はQiita Engineer festa 2023に参加しています。 ↩