自社のコーポレートサイトを、フルリニューアルしました！
今回は、その作業をほぼすべて生成AIとの対話で進めてみました。
デザイナーに依頼するのでも、テンプレートを買ってくるのでもありません。「AIに設計と実装をやらせて、自分はディレクターをやる」という進め方です。
結果として、トップページが1枚仕上がりました。この記事では、何をどう指示したのか、どこでつまずいたのかを残しておきます。
最初に用意したのは、デザインではなく2枚のテキストでした
いきなり「かっこいいサイトを作って」と頼むと、まず失敗します。AIは、平均的で無難なものを出してくるからです。
そこで、作業に入る前に、2つのファイルを書きました。
CONTENTS.md ― サイトに載せる全テキストです。会社の考え方、サービス4種類の説明、実践事例、料金、代表プロフィール、問い合わせ導線まで、実際に掲載する文章をそのまま全部書きました。1万3千字ほどになりました。
DESIGN.md ― デザインのトンマナを言語化したものです。使う色（黒・ネイビー・ブルー1色）、角丸は使わない、罫線は極細、見出しは「英字→日本語→アクセントバー」の順で組む、余白の取り方、写真の扱い。「なんとなくこういう雰囲気」を、AIが判断に使える粒度の指示に落とし込みました。
加えて、参考にしたいサイトのファーストビューのスクリーンショットを3枚渡しました。
この2枚を書くのが、いちばん時間がかかりました。逆に言えば、ここが書けていれば、あとは速いです。AIへの指示書は、そのまま自社の言語化作業でもあると感じました。
3案作らせて、見比べました
次に、トップページを3案お願いしました。ポイントは、3案の「違う軸」を自分で指定したことです。
- デザイン優先・シンプル寄り ― 原稿のテキストは、必要に応じて削る・書き換える
- 情報に忠実寄り ― CONTENTS.md の文章を優先し、全要素を必ず入れる
- 1と2の中間
「3案ください」だけだと、似たものが3つ並んでしまいます。「何を優先し、何を捨てるか」を案ごとに変えさせると、比べる意味のある3案になります。
さらに、「まずは上半分だけ」と範囲を切りました。全部作らせてから気に入らないと分かるより、上半分で方向性を決めて、残りは選んだ案だけ作らせたほうが速いからです。
出てきた3案は、想像以上に性格が違いました。1案目は英字の巨大タイポで押し切り、日本語は注釈扱いです。2案目は原稿が全部載っていて、情報量で説得してきます。3案目は、その中間でした。
情報に忠実な2案目を選びました。うちの場合、「AIで何ができるか分からない」という方に読んでもらうサイトなので、雰囲気より具体性が要ると考えたからです。
背景に、鰯の群れを泳がせました
ここからが、面白かったところです。
「背景に、鰯とかの小魚の群れ、銀河の星のような小さな点の動きを加えてほしい。マウスに反応すると良い」と頼みました。
一発で理想通りには来ませんでした。ここからのやり取りが、AIとの仕事の実感そのものでした。
- 最初は小さな群れが画面のあちこちに散っていました → 「群れは一つで、画面の半分くらい大きく」
- 丸い塊になりました → 「形は丸ではなく波形に」
- 波打つ帯になりました。悪くないのですが、鰯っぽくありません → 「鰯の群れのような形に」
- 頭が丸く膨らんで、尾が細く尖る、曲がりながら泳ぐ塊になりました。これです
- 「数を3倍に」「さらに3倍に」 → 9,000匹。重くなったので → 「2/3に」
- 「マウスの反応を2倍良く（2倍逃げる）」
最終的に、4,800匹が一つの群れを作り、しなりながら泳ぎ、カーソルを近づけると割れて散るようになりました。
振り返ると、自分がやったのは「違う。こうしてほしい」を短い言葉で言い続けることだけでした。アルゴリズムは一行も書いていません。一方で、「もっといい感じに」では、絶対に辿り着かなかったと思います。丸か波か、大きいか小さいか、多いか少ないか。判断だけは、人間側が出す必要がありました。
つまずいたところと、その原因
ここが、一番の収穫でした。不具合が出たときに「なぜそうなるのか」をAIに説明させると、素人でも原因が分かります。
表示直後に横線が入る
数が多すぎたのかと思いましたが、違いました。ページの読み込みが完了してフォントや高さが確定した瞬間に、魚の目標位置が一斉に変わり、旧位置から新位置へ高速移動する数フレームが線に見えていたのです。時間が経つと直るのも、これで説明がつきます。サイズ確定時に位置をリセットする処理で解決しました。
表示する時に、一瞬左右に動く
これも、「描画の途中だから」ではありませんでした。ページの縦スクロールバーが出た瞬間に、中央寄せのレイアウトが半分だけ横にずれていたのです。スマホで起きないのも、スマホのスクロールバーが幅を取らないからだと分かりました。スクロールバー分の余白を最初から確保して解決しました。
ダウンロードしたファイルを開いても魚が出ない
アニメーションが別ファイルになっていて、単体のHTMLでは読み込めていませんでした。1ファイルに全部埋め込んだ版を作って解決しました。
どれも、症状だけ見ていたら見当がつかない話です。「これ、なぜこうなるの？」と聞ける相手がいるというのは、思っていた以上に大きいと感じました。
AIに任せた部分と、任せられなかった部分
任せられた：HTMLとCSSの実装、群れのアルゴリズム、レスポンシブ対応、原稿1万3千字の構造化、不具合の原因調査。
任せられなかった：3案の軸を決めること。どの案を選ぶか。鰯が「丸ではなく群れの形」だと判断すること。1万3千字を全部載せるか削るか。
つまり、手を動かす作業はほぼ全部任せられて、決めることは全部自分に残りました。これは、他の業務でAIを使っているときの感覚とまったく同じです。仕事がなくなるというより、仕事の中身が「作る」から「決める」に寄っていくのだと思います。
これは、うちのサービスの話でもあると感じました
こうして書いていて気づいたのですが、今回やったことは、うちがお客様に提供しようとしていることの縮図でした。
指示書を書きます。範囲を切ります。複数案を出させます。違いを判断します。原因を聞きます。直させます。
AIツールを契約しただけでは、仕事は変わりません。「自分たちの仕事のどこにAIを入れると効果があるのか」を見つけて、実際に一つ、仕事が変わるところまで持っていく。今回は、その対象が自社のコーポレートサイトでした。
サイトは、残り2案の作り込みと、写真の差し替えが残っています。公開したら、また報告します。
今日のわかった
AIとのやり取りは、結局「短い言葉で、違うと言い続けること」に尽きるのかもしれません。
スモールライフ株式会社では、生成AI・AIエージェントの業務活用のご相談をお受けしています。「これ、AIでできますか？」という段階からどうぞ。