日々のデザインワークの中で、効果的なCTAボタンのデザインは、サイトのコンバージョン率を左右する大切な要素の一つですね。
特に、小・中学生をターゲットにした学習塾のようなサイトでは、ユーザーフレンドリーなデザインが求められます。
そこで今回は、コーポレートカラーがオレンジの学習塾サイトのCTAボタンデザインの例を、ChatGPTにリクエストしてみました。その結果を以下にご紹介いたします。
※サイズや色味の指定は、{条件}に追加することで好みのボタンを作成できます。
プロンプト例
あなたはWebデザイナーです。
自社のWebサイトにCTAとしてボタンを設置したいと考えています。
以下の{条件}を守った上で、CSSの例を出力してください
#Webサイト
小・中学生向けの学習塾のコンテンツサイト
#Webサイトのカラー
コーポレートカラー：オレンジ
#ボタン
コーポレートカラーに合わせた色
角を丸く
マウスオーバーで指のマークになるChatGPT回答
学習塾のコンテンツサイトで、小・中学生向けをターゲットとしていること、そしてコーポレートカラーがオレンジであることを考慮して、以下のようにCSSを設計します。
css
Copy code
/* ベーススタイル */
.cta-button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
font-weight: 600;
color: #fff; /* 文字色は白 */
background-color: #ff8c00; /* オレンジ色 */
border: none;
border-radius: 25px; /* 角を丸く */
cursor: pointer; /* マウスオーバーで指のマークに */
text-align: center;
text-decoration: none; /* テキストの下線を消す */
transition: background-color 0.3s; /* 背景色の変更を滑らかにする */
}
/* ホバー時のスタイル */
.cta-button:hover {
background-color: #e77a00; /* ホバー時は少し濃いオレンジ色に */
}
HTMLのボタン部分は以下のようになります。
html
Copy code
<a href=”該当するページのURL” class=”cta-button”>無料体験レッスン申し込み</a>
このCSSは、学習塾のイメージや小・中学生向けのターゲットを考慮し、明るくて親しみやすいデザインにしています。必要に応じて、色やサイズなどをカスタマイズして使用してください。
まとめ
CTAボタンはサイトの成果を決める大切な要素の一つです。
特にターゲットとする層に合わせたデザインは、サイトの訪問者にとっても安心感や信頼感を与えることができます。
今回のChatGPTによるデザイン例は、学習塾のサイトを想定して提案されましたが、実際のサイトやビジネスのニーズに応じて、色やサイズなどをカスタマイズすることで、より効果的なCTAボタンをデザインすることができるでしょう。
コメント