皆さま、こんにちは。
さまざまなAIが活躍をし始め、複雑な作業も頼めるようになったとのクチコミが増えてきました。
WEB制作の現場でも画像やテキストも生成してもらえるようになったため、制作時にダミーで入れる画像・文章のクオリティが上がりました。それらしいものを簡単に入れられるようになり便利になりました。
コーディング指示書も作れたら便利だと思い、ChatGPTで検証してみました。
作ったデザインデータをChatGPTに入れ、コーディング指示書を作ってくださいとオーダーを入れました。
ChatGPTから返ってきた内容を確認したところ、デザインデータだけを渡すよりコーダー担当者さんがわかりやすくなるかもしれないと思う仕上がりでした。
■コーディング指示書とは
コーディング作業へのリクエストをまとめたものです。デザインデータだけではわからない部分について、デザインデータと別にまとめてコーディングを行ってくれる方に（必要があるときに）渡すものです。
詳しくは別記事→「コーディングの指示書の書き方と指示出しに使いやすいツールご紹介」に具体的な例を出してまとめています。
そこで今回は、どのような手順でChatGPTにコーディング指示書を作ってもらったかということと、どんなコーディング指示書ができたかということをまとめたいと思います。
■ソースコードをChatGPTに書いてもらうことはできない？
ChatGPTがデザインを読み取り、適切なソースコードが返ってくればよいですが、現状では実際に使えるコードにするためにはかなり細かく指示を出さないといけないません。コーディングがある程度できる人がいないと今の段階では難しいと感じました。
デザインが作れるツールはたくさんあるので、デザインを好みに作成し、指示書と合わせて制作会社さんやコーディング担当者さんにお渡しするのがスピーディーかもしれないと思いました。
さて、当記事は以下の内容で進めていきます。
お急ぎの方は必要な部分を読んでいただければ幸いです。
- デザインを作成
- ChatGPTに画像でデザインデータを入れる
- コーディングリクエストをまとめる
- リクエストと合わせてChatGPTにオーダーを入れる
- SEO対策をしてほしいとリクエストを追加してみる
- ChatGPTから返ったコーディング指示書を確認し、デザインと一緒にお渡しする
１．デザインを作成
まずコーディング依頼するデザインデータを用意します。
まだデザインができていない、ChatGPTでコーディング指示書を作る練習をしたいという方はCanvaで簡単に仮のデザインデータが作れます。
CanvaにはいろいろなWEBデザインテンプレートがあり、画像の差し替えやテキストの入れ替えが簡単にできます。デザイナーさんにイメージを伝えるラフ作りにも便利なツールです。
Canva上でデザインを完成させ、そのままURLを生成して公開することもできます。ただ、独自ドメインを使うにはプロ版にしなければならない（そのままプロ版の契約を続ける必要がある）ことや、サーバーを触るような細かい設定ができない、SEO対策の面での不安などデメリットがあります。Canvaで作れたからこのままでいいというわけでもありませんので熟考ください。
さて、今回の記事作成にあたり、Canvaのテンプレートを活用し、画像と文字を変更。
以下のようなデザインデータを作成しました。このデザインデータを元に、コーディング担当者さんにコーディングを依頼すると仮定し、ChatGPTに指示書を作ってもらいます。
ChatGPTにデザイン画像をアップロードすると画像を自動で読み取ってくれます。その画像の内容とチャット欄で依頼した内容を合わせた答えを返してくれます。
2．ChatGPTにデザインデータを画像でアップロード
ChatGPTには画像やPDFをアップロードする機能が備わっています。無料版でも利用可能です！
無料版はファイルをアップロードできる数に制限が設けられているようで、連続して何枚もアップすることができないため、その点にはご注意ください。
ChatGPTに依頼する手順
①ChatGPTにログイン（Googleアカウントでログイン可能）
②クリップアイコンをクリック
③該当のデザインデータをパソコンからChatGPTへアップロードする
④チャット欄にChatGPTにお願いしたいことを記入する
この4ステップです。
ではどのようにChatGPTへチャットを送ると上手く返ってくるか、試行錯誤してみましたので、以下にまとめます。
3．コーディングリクエストをまとめる
コーディング作業に対して、何かリクエストがあれば、それもまとめてChatGPTに投げます。今回は例として以下の3つをリクエストしました。
・レスポンシブデザインでコーディングしてほしい
・テキストは画像にしないでほしい
・ボタンはポインタをのせたときに色を変える仕様にしてほしい
このほかにもコーディング作業時の希望を具体的にChatGPTに投げるほど、詳しいコーディング指示書ができるので、まず最初にどういう作業をしてもらいたいか考えることが大切です。
コーディング指示書について詳しく解説した記事が他に3つありますので、合わせてお読みいただけるとリクエスト作業がスムーズにできると思います。
→WordPress構築時のコーディング指示書＜サイト基本情報編＞
→WordPress構築時のコーディング指示書＜ディレクトリマップの作り方＞
→WordPress構築時のコーディング指示書＜スライダー、アニメーション編＞
4．リクエストと合わせてChatGPTにオーダーを入れる
上記の3つの条件を踏まえて、ChatGPTへ投げた文章は以下です。
このデザインデータを元にしてコーディングを依頼します。コーディング指示書を作ってください。コーディング時の必須条件は、レスポンシブデザインで対応すること、テキストは画像にしないこと、ボタンはポインタをのせたときに色が変わる設定にすることです。
このオーダーに対して、ChatGPTから返ってきた答えは以下です。
とても長かったので当記事内では一部を抜粋してご紹介します。
※ChatGPTの返答をそのまま確認したい方は、以下のPDFから全文が確認できますのでご確認ください！
▶ChatGPTから返ってきたコーディング指示書（全文）
ChatGPTからの答え＜基本条件＞
レスポンシブデザイン：各デバイス（PC、タブレット、スマートフォン）で表示が最適化されるようにしてください。
テキストの取り扱い：画像化せず、HTMLテキストとして実装します。
ボタンのホバー効果：マウスオーバー時にボタンの背景色が変わるように設定してください。ChatGPTからの答え＜セクションごとの指示＞
テキスト: 「WEBサイト制作をChatGPTで練習してみよう！」
フォントサイズ：PCで28px、モバイルで20px
フォントカラー：#FFFFFF
説明文: 「ChatGPTはWEBサイト制作にも便利に使えるツールです…」
フォントサイズ：PCで16px、モバイルで14px
フォントカラー：#FFFFFF
ボタン: 「ChatGPTはこちら」
背景色：#F5B7B1
ホバー時の背景色：#E57373
フォントサイズ：PCで18px、モバイルで16px
フォントカラー：#FFFFFF
ボーダー：なし
ホバー時の色の指定なども自動でしてくれていますね。
ChatGPTからの答え＜その他の注意事項＞
レイアウトが崩れないよう、CSSグリッドやフレックスボックスを適宜使用してください。
レスポンシブデザインにはメディアクエリを活用し、スクリーン幅に応じて要素の配置やサイズを調整してください。
画像には適切なalt属性を設定し、アクセシビリティを確保してください。
ボタンのホバー効果やその他のインタラクションは、CSSを使用して実装してください。
alt属性についても記載があります。つい忘れがちなところを補ってもらえるので、コーディングのガイドライン作りをChatGPTを使いながら行うと抜けが減りそうですね。
では次に、SEO対策についてリクエストを追加してみました。ChatGPTからの答えは変わるのでしょうか。
SEO対策をしてほしいとリクエストを追加してみる
ChatGPTに投げた文章にSEO対策にも配慮する旨と、文字の大きさに合わせた見出し（h1〜h3）を付けてほしいと追記してみました。すると結果も違ってきました。
※ChatGPTの返答をそのまま確認したい方は、以下のPDFから全文が確認できますのでご確認ください！
▶ChatGPTからSEO対策にも配慮して返ってきたコーディング指示書（全文）
ChatGPTからの指示＜セクションごとの指示＞
ヘッダーセクション
見出し（H1）: 「WEBサイト制作をChatGPTで練習してみよう！」
フォントサイズ：PCで28px、モバイルで20px
フォントカラー：#FFFFFF
とはいえ、「SEOに配慮してください」と指示が出たことと、文字が大きいところにh1、次にh2と振られただけなので、コーディングに関して言えばSEO対策はChatGPTに頼っても大きな効果は得られないかもしれないと思いました。
それよりも記事作成などコンテンツ作成でChatGPTを使うと活用メリットが大きいと思います。コンテンツ作成でChatGPTを使いたい方は別記事→チャットAIボット「ChatGPT」が記事作成に使えるかやってみたをご参考になさってください。
6．ChatGPTから返ったコーディング指示書を確認し、デザインと一緒にお渡しする
ChatGPTから返ってきた指示書はあくまでも情報を整理してくれたものなので、文字色やサイズが適切か、テキストやアイコンの扱いが意図と合っているかなどを確認します。
ChatGPTでは作りづらかったのが、リンク先の指定や外部ツールを読み込んで対応する部分の追記などです。これはディレクトリマップ（サイトマップ）を作ったり、デザインファイルに書き込んだりすることでフォローできます。
WEB制作時に発生するルーティン作業もChatGPTがずいぶんとサポートしてくれるようになりました。最初はリクエストの仕方に試行錯誤が必要かもしれませんが、画像読み込みなど機能も充実してきています。私もいろいろ試行錯誤し、便利な使い方が見つかれば記事にしていきたいと思います。皆さまの作業が少しでも時短になれば幸いです。
まとめ
ChatGPTはあくまでも人間の指示に沿って、わかりやすい文章で情報を整理してくれるツールです。1から書くのが大変だなと思うときの補助ツールとして利用してください。
コーディング依頼用に整理された情報を確認する時間は、客観的にデザインをチェックする時間にもなるため、ミスを見つけたりブラッシュアップにつながったりするメリットもあります。
ChatGPTを活用できるようになれば時短になること間違いなし！ぜひいろいろなタスク処理に活用してみてください。