サイトの見た目をAIに作らせて、3回やり直した

この記事には広告が含まれます

このサイトは、私が指示を出して、AIが作りました。私はシステム開発の技術者ではありません。

見た目については3回やり直しています。1回目は名前、2回目は仕様の書き方、3回目は画像でした。3回とも、作ったものを見た瞬間に間違いが分かりました。指示を書いていた時点では分かりませんでした。

服を通販で買うときの失敗

今回は服のたとえで通します。

通販で服を買うとき、寸法は書いてあります。着丈、身幅、袖丈。数字を見て、手持ちの服と比べて、これなら合うと判断して注文します。

届いて着てみると、数字は合っているのに似合わない。丈は合っているのに、肩の落ち方が変だったり、色が思っていたのと違ったりする。

数字は嘘をついていません。私が見ていた数字が、着たときの見え方を決める数字ではなかった、というだけです。

3回とも、これでした。

1回目 名前が造語のままだった

サイトの住所を決めるとき、短くて覚えやすいものにしました。英語を2つ組み合わせた造語です。

サイトの名前も、それをそのまま使いました。住所と同じ名前なら分かりやすいだろう、と考えたからです。

記事を11本公開した時点で、おかしいと気づきました。初めて来た人が、その名前を見ても、何のサイトか分からない。検索結果に出たときも同じです。

サイトの名前は、日本語に変えました。何を書いているサイトかが、名前を見れば分かるものにしています。住所のほうは変えていません。住所を変えると、それまでに検索へ登録された内容が無効になるためです。

住所と名前は別のものだ、という当たり前のことを、11本公開するまで考えていませんでした。通販で言えば、寸法表を見て服を選んだのに、その服が何色かを見ていなかったようなものです。

2回目 禁止事項だけを書いた

見た目の仕様を、AIに渡す文書として書きました。

書いたのは、使ってよい色、文字の大きさ、行の間隔、余白です。それと、やってはいけないことの一覧。横に流れる形は使わない、開閉する形は使わない、といったものです。

AIは、書いたとおりに作りました。禁止したものは1つも出てきません。色も文字も指定どおりでした。

出来上がったものは、元のひな型のままに見えました。

理由は考えれば分かります。禁止事項を並べても、残るのは初期状態だからです。何を出さないかは決めましたが、何を出すかは1つも書いていませんでした。

服で言えば、着てはいけない色を10個並べたようなものです。それを守ると、たいてい無難な服になります。着たい服の話を一度もしていません。

いまは、骨組みを先に書くようにしています。何を目立たせて、何を小さくするか。どこを最初に読ませるか。禁止事項は、その後に足します。

3回目 縮んだときの大きさを見ていなかった

記事の一覧に、記事ごとの画像を出す設計にしていました。

写真は使えないので、文字だけの図にしました。記事の題名と分類を、大きな文字で置いたものです。大きさは1200かける630と決めました。

1枚作って、実際の画面で見ました。

携帯の幅では、その画像が元の11パーセントまで縮んでいました。文字はまったく読めません。何が書いてあるかどころか、文字だということも分かりませんでした。

作る大きさは決めていました。表示される大きさは、一度も確かめていませんでした。

これも寸法表と同じです。1200という数字は正しく、そのとおり作られています。ただ、その画像が画面のどこにどれくらいの大きさで出るかは、その数字からは分かりません。

いまは、一覧に画像を出していません。記事の題名と冒頭の一文が並ぶ、文字だけの一覧にしました。画像は、他所で共有されたときにだけ使います。

AIは、見た目を確かめられない

3回とも、AIは指示どおりに作っています。間違えていません。

ただ、AIは出来上がったものを人の目では見られません。コードの上で正しいかどうかは分かりますが、見て違和感があるかどうかは分かりません。

私も、指示を書いている段階では見ていませんでした。書類の上で正しいかどうかを確かめて、それで良しとしていました。

3回とも、実際の画面を見た瞬間に間違いが分かっています。名前は初めて見た人の目で読んだとき、仕様はひな型のままの画面を見たとき、画像は携帯で開いたときでした。

見れば1秒で分かるものを、書類の上では3回とも見逃しています。

いま、見た目については先に1つ作らせる

対策は単純です。見た目に関わることは、書類だけで決めないことにしました。

まず1つ作らせて、実際の画面で見ます。良ければ広げる。おかしければ、そこで仕様を書き直す。

画像の件は、この形にしていたから1枚で止まりました。全部作ってから気づいていたら、24本ぶんを作り直すところでした。

服も同じで、寸法表をどれだけ眺めても、着てみるまで分かりません。返品できる店で1着買って、着てから残りを決めるほうが早い。

いまも、書類の上では正しく見えて、画面ではおかしいものがあると思っています。まだ見ていないだけです。

この記事について

更新履歴

  • 2026-08-30 公開
タイトルとURLをコピーしました