自社のコーポレートサイトをフルリニューアルしている。その作業を、ほぼすべて生成AIとの対話で進めてみた。
デザイナーに依頼するのでも、テンプレートを買ってくるのでもない。「AIに設計と実装をやらせて、自分はディレクターをやる」という進め方だ。結果としてトップページが1枚仕上がったので、何をどう指示したのか、どこでつまずいたのかを残しておく。
最初に用意したのは、デザインではなく2枚のテキスト
いきなり「かっこいいサイトを作って」と頼むと、まず失敗する。AIは平均的で無難なものを出してくる。
そこで、作業に入る前に2つのファイルを書いた。
CONTENTS.md ― サイトに載せる全テキスト。会社の考え方、サービス4種類の説明、実践事例、料金、代表プロフィール、問い合わせ導線まで、実際に掲載する文章をそのまま全部。1万3千字ほどになった。
DESIGN.md ― デザインのトンマナを言語化したもの。使う色（黒・ネイビー・ブルー1色）、角丸は使わない、罫線は極細、見出しは「英字→日本語→アクセントバー」の順で組む、余白の取り方、写真の扱い。「なんとなくこういう雰囲気」を、AIが判断に使える粒度の指示に落とした。
加えて、参考にしたいサイトのファーストビューのスクリーンショットを3枚渡した。
この2枚を書くのがいちばん時間がかかった。逆に言えば、ここが書けていれば後は速い。AIへの指示書は、そのまま自社の言語化作業でもある。
3案作らせて、見比べる
次に、トップページを3案お願いした。ポイントは、3案の「違う軸」を自分で指定したことだ。
1. デザイン優先・シンプル寄り*― 原稿のテキストは必要に応じて削る・書き換える
2. 情報に忠実寄り ― CONTENTS.md の文章を優先し、全要素を必ず入れる
3. 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案の作り込みと、写真の差し替えが残っている。公開したら、また報告します。