お世話になっております。制作担当の安藤です。
皆さん、ChatGPTはご存知でしょうか。
大雑把に紹介しますと、誰でも無料で簡単に使えるAIチャットツールです。
パソコンとスマートフォン、タブレットなどインターネット接続環境があればどの端末でも利用できます。
そもそもAIって何だったかな？という方はこちらの記事も是非ご覧ください。
»いまさら聞けない！「AI（人工知能）」とは何か？
世間では現在ChatGPTに関する記事や動画がたくさん公開されていますので、使ったことはないけど名前は知っているよという方も多いはず。
ちなみに具体的にどんなことができるの？と詳しく知らない方のために、質問してみましょう。
例えばChatGPTがどんなものか500字くらいで教えてと入力してみましょう。
早速返答がありました。
文字数もカウントしたら506字でしたので、条件も満たしていますね。
このように質問や命令文を入れることによってChatGPTが答えをくれるんですけども。
文章だけでなく、コーディングもやってくれるんですよね！
目次
面倒なコーディングはChatGPTに全部おまかせ
まずは初級編として、要素を角丸にするCSSを忘れたので教えてもらいましょう。
このように、さっと角丸のCSSを作ってくれました。補足の説明も丁寧でわかりやすいですね。
さらに右上の「Copy code」を押すとコードを丸ごとコピーできるので助かりますよね。
次はテーブルの作成を頼んでみましょう。
とりあえずサンプルとして、縦４行・横４列のテーブルを作成するように指示します。
はい、作ってもらいました。
縦４行・横４列のテーブルならまだ自力で作成できるボリュームですが、仮に20行30行とセルが多いテーブルを用意したい場合も、ChatGPTがすぐに作ってくれるので非常に便利ですね！
更にChatGPTの凄いところは、前回の指示内容を引き継いでくれるので、追加で指示を出すこともできます。
例えばテーブルタグの場合、先頭のセルをtdからthにしたいよ！…ということでお願いしてみると、以下のように新しいコードを作成してくれます。
もちろん、htmlコーディングだけでなく、WordPressなど色んなプログラミングに対応してくれます。
コードを作ってくれるだけでなく解説付ですので、WordPressの使い方忘れかけてたよ～となった時も心強いです。
ChatGPTでページを作ってみよう！
ChatGPTに頼んだら、簡単なコンテンツならすぐに作成してくれそうですよね？
…ということで、今回は「よくある質問」ページの作成に必要なコードを作ってもらいましょう。
まずは、よくある質問ページのコードを作って～とお願い。
はい、何だかそれっぽいコードを作ってくれました。
単にコードを作るだけでなく、サンプルの文章まで入れてくれるのは良いですね。
テキストエディタで実際にhtmlファイルを作成して保存、プレビューすると…ちゃんとよくある質問ができています！
次に、質問の一覧を<dl>要素にしたいので、追加で要望を出します。
きちんと要望どおりにタグを変更してくれました！htmlの変更に伴い、CSSも合わせて変更されていますね。
これで土台は完成しましたが、デザインがシンプル過ぎるので「青系でスタイリッシュなデザインにして～」と頼んでみます。
少し変わったCSSをChatGPTが書き出しました。
CSSを見ただけではデザインがどう変わったのか分かりにくいので、CSSファイルを編集してページの更新をかけます。
……おや、先程のコードと何が変わったのでしょうか？？少し文字サイズや余白が全体的に大きくなったでしょうか？
少なくとも、「青」要素は今のところ見受けられません。
もしかしたら自分の指示の仕方が悪かったのでは……と思い、指示を追加してみます。
これでどうなるものかとCSSを編集して更新をかけると
質問内容の左上に、なぜか●マークが追加されました。
ちょっと自分が予想していた「見出しっぽいデザイン」とは違ったので、見出しっぽくないよ？と一度煽ってみます。
すると、また新しいコードを書いてくれました。
今度はどうでしょうか。CSSを編集してプレビューしてみます。
左上の●マークが－マークになりました。
違うんだよ、そうじゃないんですよということで、より指示を具体的にしてみました。
とりあえず<dt>に下線を付けたら見出しっぽくなるだろうということでお願いした結果。
ようやく何とか自分が想像していたデザインに近付いてきました。
……が、これ以上はChatGPTに指示を出すよりも、自分でCSSを調整した方が早そうです。
ChatGPTにコーディングを手伝ってもらった感想
ChatGPT、思っていた以上に便利でした。
特にコーディングやプログラミングに関しては、今まで忘れていたらその都度「WordPress カスタム投稿 新規作成」とか「角丸 CSS」のようにGoogleで検索してページを探していましたが、ChatGPTに教えてもらえるならGoogleで検索する回数がかなり減るでしょう。
ただし、今回の例で言えば、テーブルタグやWordPressのカスタム投稿の作成など、指示を出せば誰もが同じように作るであろう内容に関してはChatGPTに作らせても理想の結果を得られますが、デザインなど人によって価値観や判断基準がわかれるものに関しては、まだそこまで万能ではなさそうだと印象を受けました。
将来的にはChatGPTがもっともっとデータを収集してデザインの作成もより自然になるかもしれませんが、自分でする必要のない部分はAIに任せる、こだわりのある部分に関しては自分で作業する、という方法を取るのが良さそうですね。
この記事を書いた人 : 福岡・大分 ホームページ制作のエディス
- 私はホームページをご覧になっている方の動きから、人々がホームページで見たがっている情報などを考察するのが好きで、考察結果からお客様のホームページをより良いものにする為のご提案を致します。よろしくお願い致します。
最新の記事一覧
便利ツール・サイト2025年8月21日Googleで検索すると検索結果画面で使える便利ツール
便利ツール・サイト2025年6月26日気軽にＡＩ技術をお試しできるツール３選
便利ツール・サイト2025年5月15日オンラインお打合せを導入するメリットについて！
便利ツール・サイト2025年5月8日【2025年5月版】WEB制作に限らず活用できる！時短ツール５選
