ChatGPTにユーザーアクションのCSSを書いてもらうのが便利

2023年4月9日2023年4月10日

ChatGPTの正確性の話が話題になることがありますが、慣れていない言語において文章を作成してもらうことでは、想像以上の助けになります。例えば、CSSを考えましょう。CSSに慣れている人であればちょちょいで書けます。ただ、ちょっと凝った動きであれば、モジュール型としてどこかからコードを参照するのが速いです。ソースをよく知らない人にとって、ChatGPTにそのソースを取ってきてもらうのは、かなり助かります。確認してみましょう。

サービスなど

Webページ制作にChatGPTを活用する方法とは？

Webページ制作にChatGPTを活用する方法は、実は様々なものがあります。構造を書いてもらうことも可能です。賛否はあっても、それをうまく使うことにはなんの違和感もありません。そして最も魅力的なのは、ChatGPTにアイデア発想のサポートを頼むことです。Web制作において、アイデア出しをすることは非常に重要な作業ですが、なかなかうまくいかないこともあります。そこでChatGPTを活用することで、新しい視点や切り口を得ることができるでしょう。すでにそのように仕事に組み込んで使っている人も見かけます。

当然、Webページ制作にはコンピュータ言語が必要不可欠です。ChatGPTを使うことで人の言葉で指示することができ、技能を底上げすることもできます。ChatGPTは、それだけでWebページ制作を行うことはできませんが、ユーザーアクションのCSS作成やアイデア発想、技能の底上げなど、Webページ制作を効率的に進めるための手段として活用することができます。この流れで、ユーザーアクションのCSSを作成してもらうことをみていきます。

なおGTP-3.5ではコードを書いてくれませんが、GTP-4ではコードを書いてくれます。今回はGTP-4で進めています。

ChatGPTを利用してCSSを作成してもらう手順は？

ユーザーアクションに対して自然なCSSコードを提案してもらえることができる手順をみていきます。といっても、ChatGPTに対して質問を投げかけ、回答を待つということで、とりあえずはかまいません。

自然言語で質問ができるので、自然なトーンで回答してくれます。聞きたかったことがうまく回答されなかった場合でも、追加で質問し、修正することができます。

例として、ボタンにCSSをつけるようにしてみましょう。こんな指示をしてみました。

## Instruction ##

１．## 現在のContent ## の内容を踏まえて、ホームページのボタンにCSSでマウスオーバー時にわかりやすいアクションを ## color ## のパターンそれぞれに対して作成してください。また、スマートフォンで目をひくようなアクションCSSを## color ## のパターンそれぞれで作成してください。
２．## color ## は、このサイトのテーマパターンです。
３．このウェブサイトの顧客は## customer ## の通りです。

## 現在のContent ##

１．#A6495A, #012623, #ADD9D1, #99BFB8, #F2ADA7
２．#D9A0AB, #261F20, #595153, #F2AEC7, #F2EAE9
３．#4C5273, #D0E5F2, #F2EBC4, #D96459, #D95555

## customer ##

１．税理士資格保有者・税理士事務所の運営者
２．国税庁に勤務している者
３．税理士に対して、ソフトウェアを販売している者

追加で、ボタンも作ってもらいました。

上記のアクションCSSを適用するボタンを作成してください。ボタンは、クリックしやすい、タップしやすいボタンのサイズにしてください。

制作結果

GTP-3.5

コードは書いてくれませんが、このような提案をしてきます。

回答の内容

１．#A6495A:
ボタンのマウスオーバー時には、背景色を#F2ADA7に変更し、文字色を白にします。スマートフォンで目を引くようなアクションとしては、タップ時にボタンの背景色を白、文字色を#A6495Aに変更します。

２．#D9A0AB:
ボタンのマウスオーバー時には、背景色を#F2AEC7に変更し、文字色を白にします。スマートフォンで目を引くようなアクションとしては、タップ時にボタンの背景色を#F2AEC7に変更し、文字色を白にします。

３．#4C5273:
ボタンのマウスオーバー時には、背景色を#D0E5F2に変更し、文字色を白にします。スマートフォンで目を引くようなアクションとしては、タップ時にボタンの背景色を#D0E5F2に変更し、文字色を#4C5273に変更します。

GTP-4

このようなコードをすぐに書いてくれました。

コードの内容

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 共通スタイル */
    .button {
      display: inline-block;
      padding: 12px 24px;
      font-size: 16px;
      font-weight: bold;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      text-decoration: none;
    }

    /* カラーパターン1 */
    .button.pattern1 {
      background-color: #A6495A;
      color: #FFF;
      transition: all 0.3s ease;
    }

    .button.pattern1:hover {
      background-color: #99BFB8;
      color: #012623;
    }

    /* カラーパターン2 */
    .button.pattern2 {
      background-color: #D9A0AB;
      color: #FFF;
      transition: all 0.3s ease;
    }

    .button.pattern2:hover {
      background-color: #595153;
      color: #F2EAE9;
    }

    /* カラーパターン3 */
    .button.pattern3 {
      background-color: #4C5273;
      color: #FFF;
      transition: all 0.3s ease;
    }

    .button.pattern3:hover {
      background-color: #D96459;
      color: #F2EBC4;
    }

    /* スマートフォンで目をひくようなアクション */
    @media (max-width: 768px) {
      .button {
        animation: pulse 1.5s infinite;
      }

      @keyframes pulse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1);
        }
      }
    }
  </style>
</head>
<body>
  <a href="#" class="button pattern1">カラーパターン1のボタン</a>
  <a href="#" class="button pattern2">カラーパターン2のボタン</a>
  <a href="#" class="button pattern3">カラーパターン3のボタン</a>
</body>
</html>

当てはめるとこのような動作です。人の言葉を書いて、これくらいの内容を数分で返してくるのなら、かなり使えると個人的に感じます。

カラーパターン1のボタン
カラーパターン2のボタン
カラーパターン3のボタン

コンピュータ言語を人の言葉で指示できる

コンピュータ言語を人の言葉で指示できるというのは、プログラミング初心者にとっても非常に使いやすい機能です。ChatGPTでは、人間の言葉で記述した指示を、その後コンピュータ言語に変換してくれます。これにより、初心者でも簡単にWebページ制作やアプリ開発ができるようになります。また、この機能は、エンジニアの方々にとっても能力の底上げになると言えます。指示を人の言葉で書くことで、より分かりやすく簡潔なプログラムを作成することができます。このように、ChatGPTを活用すれば、プログラミングの世界へのハードルが下がり、より手軽にプロジェクトを進めることができます。

能力の底上げに使える

ChatGPTを利用することで、プログラミングの知識がない人でもWebページ制作が可能になりました。それだけでなく、ChatGPTを使ってCSSを作成してもらうことで、能力の底上げにもつながります。CSSの基本的な構造や書き方をChatGPTに尋ねることで、一つ一つ覚えていく必要がなく、手軽に学習することができます。また、ChatGPTは自分で問題を解決する能力を高めることにもつながります。これは、ChatGPTに問いかけることで自分で解決策を考え出すことができるからです。ChatGPTは、自主運営のトップページ構築にもちょうど良いツールです。それを利用して、自分で制作したWebページをパーソナルポートフォリオとして活用することもできます。 ChatGPTを使って能力の底上げができることは、今後も多くの人々にとって有益なツールとなっていくことでしょう。

プロンプトの工夫は必要

ただしながら、ChatGTPへのプロンプトの工夫は必要です。人の話言葉で書いて仕上げている例が多いのですが、少しだけコンピュータに寄せて指示を出してあげるようにしましょう。まずは人事関係にChatGPTを使うセミナーを行う予定ですが、こういった内容も、含めて共有していくつもりです。