「かんたん」をかんたんに作れない

スライダーが増えていく

VTuberアプリの「かんたんモード」を改善しています。

1枚の画像をアップするだけで、顔が動く。
それが「かんたんモード」のコンセプトです。

まばたきの品質を上げようとして、パラメータを追加しました。
まばたきの強さ、角度、左右の連動、影響範囲。
全部スライダーにしました。

スクリーンショットを見て思いました。

これ、全然かんたんじゃない。

右側のパネルにスライダーがずらっと並んでいる。
何をいじればどう変わるのか、パッと見てわかる人はいないでしょう。

「かんたん」に見せるのが一番難しい

技術的には、パラメータが多い方が表現力が高いです。
細かく調整できるほど、理想の動きに近づけます。

でもユーザーから見ると、スライダーが10個並んでいるだけで「無理」ってなる。

本当に必要なのは、画面を見ながら直感的に「ここをこうしたい」と指で触れること。
数値じゃなくて、感覚で。

目の位置がずれてたら、目のところをドラッグして動かす。
影響範囲が広すぎたら、枠を縮める。
それだけ。

20回やり直して、全部消した

2日間で20回以上コミットしました。
試行錯誤の記録がGitに残っています。

最終的に、かんたんモードの変更は全部消しました。
残したのは、別のモードの改善だけ。

普通なら落ち込むところかもしれません。
2日分の作業が消えたんですから。

でも不思議と、すっきりしています。

「何が違うか」がわかった。 それだけで十分です。

パッチを重ねない

今回学んだのは、「ちょっとずつ直す」の限界です。

最初のGaussianに問題があった。
楕円にした。
まだ問題がある。
矩形クランプを追加した。
まだ足りない。
ポリゴンに変えた。
別の問題が出た。

1つ直すたびに別のところが壊れる。
パッチの上にパッチ。

最初から設計し直す方が、結果的に早いし、きれい。

新しいブランチを作って、白紙から始めました。
前回の知見を持って、今度は最初から正しい方向に進めます。

シンプルさは、削った後に残るもの

スティーブ・ジョブズの有名な言葉があります。
「シンプルは複雑より難しい」。

本当にそうだと思います。

スライダーを10個並べるのは簡単です。
でも、画面上の円をドラッグするだけで全部調整できるようにするのは難しい。

でも、ユーザーが求めているのは後者です。

次のセッションでは、キャンバス上で直接操作できるUIを作ります。
スライダーなしで。

「かんたん」を本当にかんたんにするために。

紙とペンが教えてくれたこと

続きがあります。

白紙に戻した後、紙にペンで目を描いてみました。
まばたきってどういう動きだろう、って。

描いてみたら、すぐにわかりました。
まぶたは直線に閉じない。
カーブを描いて閉じる。

2日間、コードの中でパラメータを増やしたり減らしたりしていたのに、紙に描いた瞬間に答えが見えたんです。

スライダーを減らせた

結果として、角度のスライダーを廃止できました。

まばたきの方向は、画面上の3つの点（目尻、まぶた、目頭）を動かすだけで決まるようにしたからです。
数値を入力する必要がなくなりました。

スライダーが減った。
画面を見ながら触れる場所が増えた。

「かんたん」に少し近づいたと思います。

分けることで見えてくるもの

もう一つ、予想外の気づきがありました。

「目の中心」と「まぶたのライン」は別の場所にあるということ。

特にアニメキャラクターの大きな目では、目の真ん中にまばたきラインを置くと不自然になる。
まぶたは目の上の方にあるんです。

当たり前のことなのに、1つのポイントに全部の役割を持たせようとして、気づかなかった。

役割を分けたら、それぞれが自然な位置に収まりました。

これって、開発だけの話じゃない気がします。

1つのことに全部を詰め込もうとすると、どれも中途半端になる。
分けて、それぞれに居場所を作ってあげると、全体がうまく回り始める。

まだ完成には遠いですけど、方向は見えてきました。

一言で変わる

「なんか、目の端が変じゃない？」

作業を見せたとき、そう言われました。

私はずっと「垂直に潰す」のが正しいと思い込んでいました。
まぶたは上から下に閉じるんだから、垂直でいいでしょう、と。

でも言われて初めて画面をよく見たら、確かに目尻のあたりが不自然でした。
現実のまばたきって、目の端では斜めに閉じるんです。
カーブに沿って。

たった一言。
でもその一言がなかったら、私はずっと「垂直に潰す」を改良し続けていたと思います。
方向自体が違っていたのに。

前提を疑うきっかけは、外からしか来ない

自分で作っているとき、前提は見えなくなります。

「垂直に潰す」は前提でした。
疑う対象じゃなかった。
その上で「もっと滑らかに」「もっと自然に」と工夫を重ねていました。

でも本当に必要だったのは、「潰す方向」を変えることでした。

これって、開発だけの話じゃないと思います。

家事のやり方。
子育ての方針。
仕事の進め方。
「こうするものだ」と思っている前提こそ、自分では気づけない。

だから、見せるんです。
「どう思う？」って聞くんです。

「山」じゃなくて「台地」

もう一つ、面白い発見がありました。

まばたきの力の配分を「山型」から「台地型」に変えたら、劇的に良くなったんです。

山型というのは、中心が一番強くて端に向かって弱くなる。
数学的には正しい。
でも目のまばたきは、端まで均等に閉じます。

台地型にしたら、目の端までしっかり動くようになりました。

「正しい」と「自然」は違うんですね。

数学的に正しいグラフより、人の感覚に合う形の方が、結果的に「正しく見える」。

小さなUIの話

楕円のリサイズハンドルを、Photoshopみたいにしました。
角を引っ張ると、対角が固定されたまま大きくなる。

説明書はいりません。
Photoshopを触ったことがある人なら、「あ、これね」ってわかる。

「かんたん」の正体は、「知っている操作に似ている」ことなのかもしれません。

新しい操作方法を覚えてもらうのは難しい。
でも、すでに体が覚えている操作を借りてくることはできる。

車のハンドルが丸いのは、最初に丸く作ったからというだけです。
でも今さら四角にしたら、誰も運転できない。

まだ途中です

見開き表現——目をカッと開ける動き——は、次回に持ち越しました。

完成には遠い。
でも、2日前の「殴られた顔」から比べたら、ずいぶん遠くまで来ました。

ユーザーの一言、紙に描いたスケッチ、数学の関数の形を変えること。

どれも小さなことです。
でも小さなことの積み重ねで、「かんたん」は少しずつ本当に「かんたん」に近づいていく。

**完成を急がなくていい。
方向さえ合っていれば、一歩ずつでいいんです。**

かなえ

個人開発を応援する非エンジニア

婚約破棄をきっかけに、29歳で未婚の母になると決めました。
不安と向き合いながら、10年かけて働き方を少しずつ作り変えてきた40代です。

AppSheetやGASを独学で覚え、いまはAIを使った個人開発を毎日続けています。
個人開発を応援する非エンジニアとして、等身大の試行錯誤や、子育て・自立・副業のことを、正直に記録しています。