AIを使えば、サイト制作は、かなり進めやすくなります。
ただし、AIに「良い感じのサイトを作って」と伝えるだけでは、なかなか思い通りにはなりません。
ここが、かなり大切です。
AIは、とても便利です。
でも、こちらの意図を何も言わなくても、すべて読み取ってくれるわけではありません。
つまり、AIでサイト制作をするなら、指示の出し方が大切になります。
今回は、実際にコーポレートサイトをAIと一緒に制作してみて分かった、指示文の考え方をまとめます。
実際に制作したサイトはこちらです。
AIにサイト制作を依頼するときの指示文とは？
AIにサイト制作を依頼するとき、最初に大切なのは、目的を伝えることです。
いきなり、デザインやコードの話に入らなくても大丈夫です。
まずは、何のためにサイトを作るのかを伝えます。
最初に伝えたいこと
- どんなサイトを作りたいのか？
- 誰に見てもらいたいのか？
- 何を伝えたいのか？
- どんな印象にしたいのか？
- 何を大切にしたいのか？
- 何を避けたいのか？
このあたりを伝えるだけで、AIの提案は、かなり変わります。
サイト制作では、最初の方向性が、とても大切です。
「良い感じに」だけでは足りない
AIに指示するとき、つい使いたくなる言葉があります。
- 良い感じにしてください
- おしゃれにしてください
- モダンにしてください
- 美しくしてください
- 今っぽくしてください
もちろん、これらの言葉が悪いわけではありません。
最初の方向性としては、使えます。
ただし、それだけでは少し足りません。
「良い感じ」の中身は、人によって違うからです。
もう少し具体的にする
例えば、今回のサイト制作では、次のように伝えました。
- モダンで、美しいサイトにしたい
- 時代に即した印象にしたい
- WordPressで自作した感じを、良い意味で超えたい
- 売り込み感を、強くしすぎたくない
- スモールビジネス向けの落ち着いた印象にしたい
- AI時代のDIYを、実物で示したい
このように伝えると、AIも方向性をつかみやすくなります。
抽象的な言葉を使う場合は、そのあとに具体的な説明を足すことが大切です。
デザインの指示は、要素ごとに分ける
デザインについてAIに伝えるときは、要素ごとに分けると伝わりやすくなります。
「デザインを良くしてください」だけだと、範囲が広すぎます。
そのため、分解して伝えます。
デザインで分けて伝えたい要素
- 余白
- 色
- フォント
- 見出し
- 本文
- ボタン
- 画像
- スマホ表示
- フッター
- フォーム
このように分けると、AIも修正しやすくなります。
人間側も、どこに違和感があるのか整理しやすくなります。
指示文の例
例えば、次のように伝えると具体的です。
- 余白を広めにして、落ち着いた印象にしてください。
- 色数を増やしすぎず、深い緑と朱色を軸にしてください。
- 見出しは、少し余韻のある印象にしてください。
- 本文は、スマホで読みやすい文字サイズと行間にしてください。
- CTAは、強く売り込みすぎない見せ方にしてください。
これくらい具体的にすると、AIの提案も使いやすくなります。
違和感は、そのまま伝えて良い
AIとサイト制作を進めるとき、最初から完璧な指示を出す必要はありません。
むしろ、作りながら違和感を伝える方が現実的です。
今回の制作でも、何度も違和感を伝えました。
実際に伝えた違和感
- この入力欄だけ、少し質素に見える
- スマホで、見出しの改行が不自然に見える
- フッターの余白が、詰まって見える
- スクロールすると、少しカクつく
- この文言は、少し専門的すぎる
- この表現は、少し敷居が高く感じる
- この部分は、もう少し自然な言い方にしたい
こうした感覚的な指摘でも、大丈夫です。
AIは、その違和感をもとに、原因や改善案を出してくれます。
大切なのは、違和感を無視しないことです。
「まだ変更しないで」と伝えるのも大切
AIに修正を依頼するとき、すぐに変更してほしくない場面があります。
- まず、原因だけ知りたい。
- まず、改善案だけ見たい。
そういうときは、「まだ変更しないで」と伝えるのがおすすめです。
使いやすい指示文
- まだファイルは変更しないで、原因を調査してください。
- 修正する前に、原因と改善策を教えてください。
- いくつか案を出してから、どれを適用するか決めたいです。
- まずは、現状の問題点だけ整理してください。
- 変更はせず、改善候補を出してください。
これは、かなり大切です。
AIは、指示によっては、すぐに実装まで進めようとします。
でも、サイト制作では、原因と方針を先に確認した方が良い場面があります。
そのため、調査と実装を分けて依頼すると進めやすくなります。
修正依頼は、現在の状態と希望をセットで伝える
修正依頼では、現在の状態と、希望する状態をセットで伝えると分かりやすいです。
今回の制作でも、この伝え方がかなり役立ちました。
伝え方の形
- 現在：〇〇になっている
- 希望：□□にしたい
- 条件：PC表示は変えず、スマホだけ調整したい
この形で伝えると、AIが判断しやすくなります。
指示文の例
- スマホで「ちょうどいい」が途中で改行されています。「ちょうどいい」をひとまとまりで表示したいです。
- PC表示は変更せず、スマホ表示だけ改行を調整してください。
- このフォーム項目だけ、他の入力欄と見た目が違います。できるだけ同じデザインに寄せてください。
- この文言は、専門的に感じます。初心者にも分かる表現にしてください。
- この見出しは、意味のまとまりとして不自然です。自然な日本語に整えてください。
ポイントは、何を変えたいのか、どこは変えたくないのかを伝えることです。
特に、PC表示とスマホ表示を分けたい場合は、必ず伝えた方が良いでしょう。
スマホ表示は、かなり具体的に伝える
スマホ表示の修正は、特に具体的に伝える必要があります。
AIは、実際のあなたのスマホ画面を完全に見ているわけではありません。
そのため、どこが、どう見えているのか、を伝えることが大切です。
スマホ表示で伝えたいこと
- どのページか？
- どの見出しや文章か？
- 現在、どう改行されているか？
- 希望として、どう改行したいか？
- PC表示は、変えたいのか変えたくないのか？
今回の制作でも、スマホ改行は、かなり細かく伝えました。
スマホ改行の指示例
- 「小さな商売に、ちょうどいい学び方。」が、スマホで「ちょうどい」「い学び方」と分かれています。「ちょうどいい」を途中で切らないようにしてください。
- 「最初の一歩は、小さな型から。」の「小さな型から」を、ひとまとまりで見せたいです。
- 「自分の商売を、自分で育てる。」は、「自分で育てる」を同じ行にしたいです。
- すべてスマホ表示の話です。PC表示は変更しないでください。
ここまで具体的に伝えると、かなり調整しやすくなります。
日本語の改行は、意味のまとまりが大切です。
AIに任せきりにせず、自分の違和感を伝えることが重要でした。
「この表現は不安」と伝えるのも大切
サイト制作では、デザインや表示だけでなく、表現への不安も出てきます。
今回も、いくつか不安な表現がありました。
不安になりやすい表現
- 商用利用して大丈夫か？
- 著作権的に問題ないか？
- オーバープロミスにならないか？
- 専門的すぎないか？
- 読者に誤解されないか？
- 誰かに揚げ足を取られないか？
こうした不安も、そのままAIに伝えて良いです。
AIは、表現をやわらかくしたり、リスクの少ない言い回しを提案したりできます。
指示文の例
- この表現は、オーバープロミスになりそうです。もう少し誠実な言い方にしてください。
- 専門的すぎるので、初心者にも分かる表現にしてください。
- 著作権や商用利用の面で、不安に感じています。注意点を整理してください。
- 断定しすぎず、安心して使える表現にしてください。
- 誰かに揚げ足を取られにくい、自然な表現にしてください。
サイトの文章は、公開後も読まれます。
だからこそ、不安がある表現は、事前に整えることが大切です。
AIには、チェックリストを作らせると良い
サイト制作では、確認することがたくさんあります。
すべてを頭の中だけで、管理するのは大変です。
そこで役立つのが、チェックリストです。
AIに作ってもらうと良いチェックリスト
- 公開前チェックリスト
- スマホ表示チェックリスト
- SEO設定チェックリスト
- OGP画像チェックリスト
- フォーム動作チェックリスト
- 商用利用・著作権チェックリスト
- アップロード前チェックリスト
AIは、確認項目の洗い出しが得意です。
自分では見落としそうな項目も、出してくれることがあります。
指示文の例
- HTMLサイトを公開する前に確認すべき項目を、チェックリストにしてください。
- スマホ表示で確認すべき項目を、初心者にも分かるように整理してください。
- OGP画像を設定したあとに確認すべきことを、箇条書きにしてください。
- フォームを公開する前の確認項目を、優先順位つきで出してください。
チェックリストがあると、作業がかなり進めやすくなります。
AIに「初心者向けに教えて」と頼む
サイト制作では、専門的な話も出てきます。
- HTML
- CSS
- .htaccess
- OGP
- 構造化データ
- reCAPTCHA
こうした言葉が並ぶと、少し身構えます。
そのときは、AIに「初心者にも分かるように」と伝えるのがおすすめです。
指示文の例
- 初心者にも分かるように、ステップバイステップで教えてください。
- 専門用語を使う場合は、必ず補足してください。
- 初心者でも分かるように、手順を分けて説明してください。
- なぜその作業が必要なのかも、あわせて説明してください。
AIは、説明の粒度を変えられます。
難しいと感じたら、遠慮せずに、もっとかみ砕いてもらうと良いでしょう。
AIに「最適だと思う修正」を任せる場面もある
すべてを細かく指示するのは、大変です。
ある程度、方向性が共有できている場合は、AIに判断を任せる場面もあります。
今回の制作でも、「あなたが最適だと思う修正を適用してください」と伝えたことがありました。
任せても良い場面
- すでに方向性が、共有できている
- 修正範囲が、明確である
- 大きなリスクが、少ない
- 後から確認して、戻せる
- AIの提案に、信頼できる流れがある
ただし、最初から何でも任せるのはおすすめしません。
- まずは、方向性を共有する。
- そのうえで、細部を任せる。
この順番が良いです。
「一気に」より「確認しながら」が良い
AIを使うと、一気に作業を進めたくなります。
でも、サイト制作では、確認しながら進める方が安全です。
確認しながら進めたい理由
- 方向性のズレに、早く気づける
- 大きな手戻りを、防げる
- PCとスマホの違いを、確認できる
- デザインの違和感を、早めに直せる
- 公開前の不安を、減らせる
特に、コーポレートサイトは、会社の印象に関わります。
急いで完成させるより、確認しながら整える方が安心です。
指示文よりも、対話が大切
AIへの指示文は大切です。
でも、それ以上に大切なのは、対話です。
最初の指示だけで、すべてが決まるわけではありません。
むしろ、作りながら何度もやり取りすることで、良くなっていきます。
対話で行うこと
- 方向性を、共有する
- 案を、出してもらう
- 違和感を、伝える
- 原因を、調べてもらう
- 改善案を、比較する
- 修正を、適用する
- 公開後に、再確認する
AIとのサイト制作は、依頼して終わりではありません。
一緒に育てていく感覚に近いです。
サイト制作で使いやすい指示文まとめ
最後に、サイト制作で使いやすい指示文をまとめます。
方向性を伝える指示文
- スモールビジネス向けに、落ち着いた印象のコーポレートサイトにしたいです。
- 売り込み感を強くしすぎず、信頼感と余白を大切にしてください。
- WordPress感を出さず、モダンで美しいHTMLサイトにしたいです。
- AI時代のDIYを、実物で示せるようなサイトにしてください。
デザインを直す指示文
- この部分だけ、少し詰まって見えます。余白を広げる案を出してください。
- スマホ表示で、見出しが読みにくいです。自然な改行にしてください。
- 全体の雰囲気に合わせて、フォームの見た目を整えてください。
- アクセントカラーを、少しだけ濃くしてください。
調査だけ依頼する指示文
- まだ変更しないで、原因だけ調査してください。
- 修正前に、原因と改善策を整理してください。
- この表示崩れの原因として考えられることを、優先順位順に出してください。
- 変更せずに、改善候補だけ出してください。
文章を直す指示文
- この表現は専門的すぎます。初心者にも分かる表現にしてください。
- オーバープロミスにならないように、誠実な表現へ直してください。
- このは屋らしい、やさしく断定する文体に整えてください。
- スマホで読みやすいように、短文と箇条書きを増やしてください。
確認を依頼する指示文
- 公開前に確認すべき項目を、チェックリスト化してください。
- アップロード後に、公開環境で確認すべきことを整理してください。
- SEO設定で不足がないか、確認してください。
- スマホ表示で不自然な点がないか、チェックしてください。
まとめ
今回は、AIにサイト制作を依頼するときの指示文についてお話ししました。
要点をまとめます。
- AIにサイト制作を頼むときは、目的と方向性を伝える
- 「良い感じに」だけではなく、具体的に説明する
- デザインは、余白、色、フォントなど要素ごとに分ける
- 違和感は、感覚的な言葉でもそのまま伝える
- すぐ変更してほしくないときは、「まだ変更しないで」と伝える
- 現在の状態と希望を、セットで伝えると修正しやすい
- スマホ表示は、特に具体的に説明する
- AIには、チェックリスト作成も依頼すると良い
- 指示文だけでなく、対話しながら育てることが大切
AIは、制作会社ではありません。
でも、かなり優秀な共同制作者になります。
- こちらが目的を伝え、違和感を伝え、確認しながら進める。
その流れができると、サイト制作は、かなり進めやすくなります。
実際に制作したコーポレートサイトはこちらです。
あなたがAIでサイト制作をする場合も、まずは完璧な指示文を作ろうとしなくて大丈夫です。
- 目的を伝える。
- 違和感を伝える。
- 確認しながら、少しずつ直す。
その進め方で、十分に前へ進めます。
