つくっているときの話

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

緑内障の視野欠損が単純すぎた — 色覚シミュレーター

自分は緑内障でもある。AIが出したぼかしの位置や形状は単純で、自分の感覚と違った。実際の見え方に近づくよう直させた。

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

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

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

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

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

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

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

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