対話型AIのChatGPTを使ってブログの囲み枠、ボタンのデザイン素材を作ってみました。
囲み枠
UI要素デザインの一つである囲み枠をChatGPTを使って作成します。
囲み枠ができるまでの過程-青色グラデーション囲み枠
囲み枠のデザインとして機能させるには何度か修正を行う必要がありました。
対話式なので、追加で注文を送信するスタイルでもいいのですが、漏れがあると困るので、毎回全ての条件を送信しています。
囲み枠作成の流れ
①ChatGPTにてどうしたいかの要望をまとめてメッセージ送信
②囲み枠のデザインをHTML CSSとして受け取る
③コードのデモンストレーションを行うことができるCODE PENというサイトにて検証
④表示が不自然であれば①に戻る
1回目 送信内容
丸みのある囲み枠
箇条書きできる 青色 グラデーション
HTML CSS分けて表示
プレビュー
2回目 送信内容
丸みのある囲み枠
一つの囲み枠の中に順番リストとして箇条書きになっている
青色 グラデーション
HTML CSS分けて表示
プレビュー
3回目 送信内容
丸みのある囲み枠 一つの囲み枠の中に順番リストとして箇条書きになっている
文字は左寄せ
青色 グラデーション
HTML CSS分けて表示
プレビュー
4回目 送信内容
丸みのある囲み枠 一つの囲み枠の中に順番リストとして箇条書きになっている
文字は左寄せ
タイトルは18px 文字は15px
タイトルの上余白5padding
青色 グラデーション
HTML CSS分けて表示
プレビュー
上記の流れで自分が求めるデザインを作成していきます。
サンプル
他に私が作成した囲み枠のサンプルがこちらです。
先ほどのような過程を経て、最終的なメッセージをもとに囲み枠ができます。
付箋風囲み枠
付箋風囲み枠 オレンジ色
タイトル18px 濃いオレンジ 本文15px 黒
タイトルと本文は線で分ける
本文は左寄せ
メタ情報は使わない
Word Press追加CSSに追記するため
HTMLとCSSの表記は分けて
見出しは使わない
プレビュー
ピンクの上部線囲み枠
新しく囲み枠を作りたい
色は薄ピンク
上部の線だけ濃いピンク 枠はなし
本文は黒 タイトルはなし
HTML CSS分けて表示
見出しは使わない
Word Press追加CSSに追記するため
プレビュー
ボタン
UI要素デザインの一つであるボタンをChatGPTを使って作成します。
サンプル
私が作成したボタンのサンプルがこちらです。リンクは貼っていないためどこかのサイトに飛ぶということはなく、クリックしても何も起きません。
ホバーした際のアニメーションを取り入れました。
虹色ボタン
ボタン 虹色
ホバーすると光沢が出る
追加CSSに記載
HTML CSS分けて表示
プレビュー
ホバースライドボタン
ボタン 長丸 色は黄色 文字はボタン色は青太字
ホバーすると「押して！！！」と文字が飛び出す
文字は20px赤色太字
ホバーすると下から上へスライド
追加CSSに記載
HTML CSS分けて表示
プレビュー
爆発ボタン
ボタンを作成
文字は「押してねー」文字の大きさは20px太字黒色 背景はピンク色
長方形の幅広ボタン
ホバーすると爆発表現があり
目立つ表現の色を入れる
追加CSSに記載
HTML CSS分けて表示
プレビュー
まとめ
カスタマイズで簡単な囲みやボタンを作成したい場合にはChatGPTが手助けをしてくれます。また、デザインの構想などを考える際に言葉でデザイン化してくれるため、アイデアに結びつきやすいです。
細かいことについては言葉だけで指定しようとすると難しいので、使い方次第ですね。
ChatGPTシリーズ
今回の ChatGPTで素材作ってみた以外にもChatGPTを使って色々やってみてるのでぜひ見てください。
