つくっているときの話

モバイルで「スペースキーで比較」と表示された — 色覚シミュレーター / 難聴シミュレーター

モバイルにスペースキーはない。2つのツールで同じ問題が起きた。AIは使う人のデバイスを想像できない。

比較スライダーの位置がUXとして悪い — 色覚シミュレーター

正常画面とシミュレーション画面を比較するスライダーが、画面から離れた位置にあった。PCならまだしもスマホの場合は画面サイズが限られているのでスライダーをシミュレーション画面と重ねるUIに変更させた。PCとスマホは違うという認識がAIには弱いように感じた。

音声の再生位置を操作できなかった — 難聴シミュレーター

スライダーバーが無く、音声を最初から最後まで聴くしかなかった。聴きたい部分だけ聴き直せないのはUXが悪いが、初期の状態では出てこなかった。

PCでは動くのにスマホ実機でカメラが動かない — 色覚シミュレーター

PCのブラウザだけで検証していたら、スマホ実機で動かないことに気づいた。実機で確認しないとわからないことがある。

色覚シミュレーションのロジックが簡易的すぎた — 色覚シミュレーター

AIが最初に出してきたのは簡易的な色変換で、ちゃんとしたモデルに基づいていなかった。計算で実現できるロジックと学術的な根拠を調べさせ、実装し直させた。確認しなければ、危うく騙されるところだった。

画像をそのまま読み込んだら重すぎた — 色覚シミュレーター

AIはフル解像度のまま画像を処理しようとした。数千万ピクセルをそのまま扱おうとする。Webにそんな解像度はいらない。ちょうどいいサイズを決めてリサイズさせた。

音の消し方が雑でノイズだらけだった — 難聴シミュレーター

初期の難聴シミュレーションは、聞こえない周波数をノイズでかき消している状態だった。「聞こえない」ではなく「うるさい」になっていた。資料とかけ離れていると感じて、調べさせて調整した。

stickyの要素が追従しない — 色覚シミュレーター

CSSの position: sticky が効かなかった。親要素に overflow があると動かない仕様なのだが、人間でも引っかかりうるポイント。AIはまんまと引っかかったので、そこを教えてあげることでようやく動いた。

飛蚊症の見え方が不自然だった — 色覚シミュレーター

自分は飛蚊症がある。AIが出した飛蚊症は、ちらつきの数が少なすぎるし、色もおかしいし、形も自分の経験にないものだった。自分の体験をインプットして、なるべく実際の見え方に近づけた。最初は間違いつつも、伝えるだけで自分の体験に近いシミュレーションを実現できたのはさすがだった。

緑内障の再現にはアルゴリズムの指定が必要だった — 色覚シミュレーター

自分は緑内障でもある。従来の実装は均一なぼかしを綺麗な楕円形でかけるだけで、自分の見え方とはかけ離れていた。実際の緑内障はぼかしと暗い影が不定形に重なっていて、もっと複雑だ。

まずAIに自然な不定形の形を作らせようとしたが、出てくるのは半月や単純な図形ばかりで全然ダメだった。そこで自分がSVGを使って、ぼかしの領域と影の領域を別々に手動で指定する方法を決めた。領域自体は作れたが、今度はそれを画像にマージする処理がまともに動かない。CSSマスクやbackdrop-filterなど、AIに任せた方式はことごとく機能しなかった。

最終的に、WebGLを使ってSVGの濃淡をもとにピクセル単位で操作する方針を自分で指定した。ぼかしにはガウスフィルタのピラミッドを使い、SVGの黒さに応じてフィルタ強度を段階的に変える。影はそのままピクセルに重畳させる。このアルゴリズムまで指定して、ようやくまともに動くものができた。

この体験で強く感じたのは、AIは「自分が組めるもの」を具体的に指示すれば素晴らしく動くということ。一方で、実現方法やアルゴリズムをゼロから考えさせると、動かないコードの無限ループにはまる。AIを使いこなすには、自分自身がアルゴリズムを理解して方針を出せることが前提になる。（図解を見る）

エビングハウス錯視が錯視に見えなかった — 錯視ラボ

AIが出した初期状態では、円同士がくっついていて、そもそもエビングハウス錯視を起こす形状になっていなかった。円のサイズと中心からの距離を調整し、一番錯視効果が大きそうなサイズ感を調べて初期状態にした。

最初はレーダーチャートすらなかった — 性格診断

AIが出したのは、最後に結果がテキストで表示されるだけの構成。どのサイトにもある、よくある形。このサイトのコンセプトは動的な体験だから、回答しながら自分のステータスが揺れ動くチャートをリアルタイムで見せるようにした。ここは自分の意思を見せる必要があった。

「過去の自分と比較できる」機能を入れた — 性格診断

多くの性格診断サイトは「答えは毎回同じになるはず」というスタンスだと思う。でも自分はそう思わない。人も自分も変わる。だから過去の履歴を残して、何が変化したか振り返れるようにした。

スライダーの全範囲でオブジェクトが崩れないようにした — 錯視ラボ

このサイトはスライダーで錯視パターンを動かせる。最小にしても最大にしても模様が重なったり崩れないよう、AIに言葉でパラメータを伝えてチューニングした。コードを書くのではなく、言葉でパラメータを調整する作業。