ノート道具を作る

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

AIと一緒に作ったトップページは、必要な要素が一通り揃っていて、落ち着いていて、そして誰のものでもなかった。ロゴを外すとどこのサイトか分からない。何がそうさせたのかを考えて、トップページを作り直した記録。

道具を作る 開発記録

Read this note in English

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

Legacy Tools のトップページを作り直しました。動きや装飾を足したかったからではありません。できあがったページを見返すうちに、これは自分たちのサイトなのだろうか、と思うようになったからです。

目指していたものは、間違っていなかった

最初に決めていた方向は、落ち着いていること、信頼できること、製品を分かりやすく説明すること、過度に売り込まないこと。製品群のデザインを揃えて、ローカルで完結すること、外部に送らないことを伝える。

いま読み返しても、この方向自体は間違っていなかったと思っています。ヒーロー、製品カード、共通の方針、コンセプト、Notes、News。Webサイトに必要そうな要素も、一通り揃っていました。

ロゴを外すと、どこのサイトか分からなかった

それでも、しばらく見返しているうちに違和感が出てきました。

ロゴを外すと、どこのサイトなのか分からない。製品名を差し替えれば、別のSaaSでもそのまま成立する。製品カードが均等に並んでいて、どれも同じ強さに見える。「安全」「シンプル」「ローカル完結」——正しいけれど、どこにでもある言葉が多い。

そして、その道具が実際に役立つ瞬間が、画面のどこにも見えていませんでした。誰が、なぜ作っているのかも残っていない。きれいではあるけれど、記憶に残らない。

地味だったことが問題なのではありません。静かなサイトを作ったつもりが、判断の見えないサイトになっていた、ということでした。

AIは、指定した条件をきれいに満たしていた

このサイトはAIと一緒に作りました。ただ、うまくいかなかった原因をAIの側に置くのは、自分の場合は違うと思っています。

AIは、こちらが指定した条件をきれいに満たしていました。問題は、その提案を採用したときの理由のほうでした。分かりやすい。まとまっている。無難で失敗しにくい。よく見る構成なので安心できる。そういう理由で選び続けた結果、AIが得意な一般解だけが残りました。

AIに個性がなかったというより、こちらが出すべき固有の材料が足りていなかった。そして、出てきた案に対する拒否と編集も足りていませんでした。

文章には書いてあったけれど、画面には出ていなかった

作っている道具には、共通する瞬間があります。

AIへ文章を貼り付ける直前。メールを送る直前。写真や文書を添付する直前。メールの中のリンクを開く直前。疲れた深夜に、操作を確定する直前。

目指しているのは、利用者に代わって全部を判断することではありません。操作を止めるのでもなく、決定の直前に一度だけ立ち止まれるようにする。

旧サイトにも、これは文章として書いてありました。ただ、画面を見ただけでは伝わりにくかった。読めば分かることと、見れば伝わることは別でした。

何を体験してもらうかから決めた

作り直すとき、見た目を派手にすることからは始めませんでした。動きを足せば固有性が戻るわけではないし、派手にすること自体が別の一般解になりかねないからです。

先に決めたのは、トップページで何を体験してもらうかでした。中心に置いた言葉は「送る前に、一度だけ立ち止まる。」です。

そのうえで、製品名や機能一覧から始める構成をやめ、利用者が困る具体的な瞬間から入る形に変えました。

変えたのは、だいたい次のところです。

  • ヒーローに、その場で試せる検出のデモを置いた。入力から検出、確認、マスクまでの流れを、読まずに触って分かるようにする(これは製品そのものではなく試作である、と画面に明記しています)
  • 6本を切り替えられるツールルームにした。製品カードを並べるのではなく、ひとつの製品群として見せる
  • 製品ごとに Action / Decision / Data flow を並べた。何をする道具か、誰が判断するのか、データがどこへ行くのかを、同じ形で比べられるようにする
  • 「安全です」と書く代わりに、開発者ツールのNetworkタブを開いたまま操作しても通信が記録されないことを書いた。透明性のページへも導線を置いた

スクロールに応じた表示や切り替えの動きも足しましたが、これは装飾のつもりではありません。入力から確認までに順序があること、製品が切り替わること、次にどこを見ればいいのか。静止画では伝わりにくい「使う瞬間」を出すための手段でした。

変えなかったもの

作り直しても、以前の考え方を捨てたわけではありません。

受け継がれる道具というコンセプト。利用者に代わって最終判断をしないこと。入力内容やファイルを外部へ送らないこと。データを預からないこと。制作中の判断や失敗をNotesに残すこと。

旧サイトの思想を削除したのではなく、画面上で確かめられる形に置き直した、という感覚に近いです。

今回の反省

反省しているのは、AIにWebサイトを作らせたことではありません。

AIへ渡す一次情報が足りていなかったこと。きれいにまとまった案を疑わなかったこと。既視感を安心感だと判断していたこと。思想を文章だけで伝えようとしたこと。製品の機能は示したのに、使う瞬間を示していなかったこと。

AIを使わないことが解決策だとは思っていません。実装、比較、整理、試作には、これからも使います。ただ、何を見せるか、何を捨てるか、どこで一般解を拒否するかは、こちらが決める必要がありました。

作り直したのは、トップページの見た目だけではありませんでした。整っていることと、自分たちのサイトになっていることは、同じではなかった。少なくとも自分の場合は、そこを取り違えていました。

いまの時点で言えるのはここまでで、この作り直しに効果があったかどうかは測っていません。しばらく置いてから、また見返すつもりです。

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

← ノート一覧へ