ノート道具を作る

サイトをきれいに整えたら、誰が作ったのか分からなくなった

AIと一緒に整えたトップページは、落ち着いていて分かりやすく、ロゴを外すと別のサービスでも成立しそうでした。原因をAIではなく自分の選び方として考え直し、何を見せるかから作り直した記録です。

道具を作る 開発記録

執筆 k-wada(Legacy Tools)

Read this note in English

Legacy Tools のトップページの新旧比較。左は色を抜いた旧トップページの中央寄せのヒーロー、右は作り直した現在のヒーローで、見出しの横に入力デモの画面が並んでいる

Legacy Toolsのトップページを作り直しました。きっかけは、見た目が古かったからではありません。

むしろ、きれいに整えた結果、「これは誰が作ったサイトなんだろう」と自分でも感じるようになったからです。

きれいなのに、何を大事にしているか見えなかった

最初に目指した方向は、今も間違っていなかったと思っています。

落ち着いていること。分かりやすいこと。過度に売り込まないこと。道具が何をするのかを丁寧に説明すること。

必要な要素は揃っていました。それでも、ロゴを外すと別のサービスでも成立しそうでした。

理由は、製品名や機能は見えていても、「どんなときに使ってほしいのか」が見えていなかったからです。

Legacy Toolsの道具の多くは、AIへ文章を貼る前、メールを送る前、リンクを開く前など、何かを確定する直前に少し確認するためのものです。

その考えは文章には書いていました。でも、トップページを見ただけでは伝わっていませんでした。

AIではなく、選び方の問題だった

サイト制作にはAIも使いました。

ただ、今回の原因を「AIで作ったから」と考えるのは違うと思っています。AIは、こちらが求めた「分かりやすい」「整っている」「無難な」案を出していました。

問題は、それを自分が選び続けたことでした。

よく見る構成だから安心できる。きれいにまとまっているから使う。そうしているうちに、このサイトでなければならない理由まで薄くなっていました。

足りなかったのは、AIの個性ではなく、こちらから渡す固有の材料と、「これは違う」と捨てる判断だったのだと思います。

「何を見せるか」から作り直した

そこで、見た目を派手にするのではなく、最初に「何を体験してもらうか」を考え直しました。

中心に置いたのは、「送る前に、一度だけ立ち止まる。」という考えです。

現在のトップページでは、製品名だけを並べるのではなく、AIへ貼る前、添付する前、リンクを開く前といった具体的な場面から道具を探せるようにしています。

今回いちばん残った反省は、整っていることと、そのサイトらしいことは別だということです。

AIはこれからも使います。ただ、何を残し、何を捨て、何を自分たちの言葉として見せるかは、自分で決めた方がいい。

少なくとも今回のサイト作りでは、そこまでAIに任せるとうまくいきませんでした。

この変更で本当に伝わりやすくなったかは、まだ測れていません。少し時間を置いて、また見直します。

補足: 実際に変えたところと、この記録の範囲

この記事は、Legacy Toolsのサイト制作についての開発記録です。AI一般の性質や効果を検証した記事ではなく、今回の制作で感じたことと、そのときに行った判断を記録しています。

現在のトップページで、旧版から具体的に変えたのは次の4点です。

  • ヒーローに、その場で入力して検出を試せるデモを置いた。画面には「この試作でマスク」と書いてあり、拡張機能そのものではありません
  • 製品カードを並べる形をやめ、ひとつのツールルームの中で切り替えて見る形にした
  • 製品ごとに Action / Decision / Data flow を同じ形で並べ、何をする道具か、誰が判断するのか、データがどこへ行くのかを比べられるようにした
  • 「安全です」と書く代わりに、通信の有無を自分で確かめる手順を書いた。ページ内で動くContent Scriptはページ側の開発者ツールで、拡張機能本体のService Workerは chrome://extensions から開く専用の開発者ツールで確認できます

参照資料

タグ: サイト制作・AI・デザイン