【ハングルアプリ開発日誌】 噂のClaude Fable 5による設計...からのアプリUI試作へ
前回、アプリのプロトタイプが出来ましたが、いろいろ「うーん」だったのでいったん仕切り直すことに（これまでの経緯は以下）。
ごちゃごちゃしていたときは最小限の機能に絞ってみるのが一番ですよね。
そこで（ハングル教育者の方々にはいろいろ言われそうですが）まずは「あいうえお」からが日本人的にはとっつきやすいので、そこだけに絞って作り込んでいきます。
以下、試行錯誤の過程です。
Claude Fable 5で設計してみる
「あ、そういえばClaudeのFable 5を使ってみるか」と思いついたのでやってみました。雑に以下のようなプロンプトにて。
いったんシンプルに、「あいうえお」にあたるハングル文字を覚える機能だけを提供してみたい。なるべくシンプルに、機能やデザインは最小限にして、極限まで削ぎ落としたい。しかしながら楽しい演出もいれて、なおかつ、効果がでるようにユーザーの脳に適度な負荷をかけたい。どういう機能・UIが考えられるか計画をたてて。
やりとりを経て出てきたのがこれ…うーん、ちょっと違いますね。
「やっぱりプロンプトが悪かったのかなあ」と思ってSonnetに聞いてみたら「ここが問題！もっと具体的に書け！」と長々と説教されました…（そりゃそうだ）1。
やはりふわっとした依頼では限界がありましたね…。目指すべき姿は自分で考えていくことに。
なんとなくのUI設計…
そのうえであらためて学習の構造を整理してみます。大枠では以下の2つのパートに分かれているべきかな、と。
- 学習編（講義っぽいもの）
- 復習編（クイズなど）
ではそれぞれをUIに落とすとどうなるか？
学習編のUIはどうあるべきか？
いくつかの方向性がありますが…タップするとセリフが出てくるような、無駄に凝ったUIにしてしまうと「あれ、さっきの何だっけ？」となったときに一覧性が悪くなります2。
このフェーズでは「어ってなんだったっけ？」「아ってなんだっけ？」となりそうなので、前後に行ったり来たりできるUIが望ましいはず。
そうなると上下もしくは左右に行ったり来たりできるといいのですが、上下だとスクロールが面倒。したがって、いったん横に自由に行き来できるタブメニュー的なものにすると良さそう。
ただ、将来的なことを考えるとアプリ全体のタブメニューというわけではないので、標準のタブUIとは違う感じにすべきですね。そうなると…こんな感じですかね。
ちなみに使ったプロンプトは以下。「segment control」といった用語とか、「タップ領域には44x44を確保」などのルールはUIの基本として知っておくといいですね。
画面下部にsegment controlを配置し、tabのようにして（ただしアプリ全体のタブではないので、標準的なタブUIは使わないで）。そのsegment controlでは、「あ」「い」「う」「え」「お」が並んでいて、そこをタップするとそれぞれの文字の説明がscrollviewであらわれるようにして。いったん触り心地を確認したいから、説明は簡単なものでOK。タップ領域は44x44の大きさを確保して。
あとはそれぞれのタブ内で説明を充実させるだけなので、そのあたりはあとまわしにして次に進みます。
復習編のUIはどうあるべきか？
学習編で「あいうえお」のハングルを覚えたらクイズなどで脳に負荷をかけて定着させたいところ。
そのためのUIを考えたいのですが、「お」の横に「確認」ボタンを置くのが自然ではありますね。ただ、幅が狭くなるのでいったん下に配置してみます。
ぱっと見は良さそうですが…、実機で確認すると間違えて押しそうになってしまう…。
学習中にうっかり押さないように最初はDisabledにしておいて、「あいうえお」をすべて覚えたらEnabledになると良いかもしれませんね。
そのあたりはあとで詰めるとして、次はアプリ全体を考えて「あいうえお」以外のコンテンツへの導線を作ってみます。
あいうえお以外のコンテンツへは？
アプリ全体の構成はなんとなく以下のようになっているべきですね（雑にChatGPTで画像生成…便利）。
そして今は「あいうえお」コンテンツの骨組みができたので、一つ上の階層メニューを作っていきます。雑に作ってみたのがこちら。
ちなみに使ったプロンプトはこちら。Navigation ViewとかSwiftUIのボキャブラリーがあれば捗りますね。
ひとつ上の階層のメニュー（ホーム）を作りたいです。そこでは、「ハングルの基本」「あいうえお」「やゆよ」「基本子音1」「基本子音2」などがならんでいるべきです。そしていままで作ったものにはNavigation Viewでリンクされているべきですね。中身は空でいいので、ホームをつくって（あいうえおには遷移するように）
ただ、このUIですが、学習が進んでくると下のほうまでスクロールするのが面倒です。そこでファーストビューに「次に受講すべきコンテンツ」と「進捗状況」を配置してみます。
言いたいことはいろいろありますが、いったんこれでいいかな…。実機で確認してもしっくり来たので、これをベースに次回から詳細を詰めていきたいと思います。
現在の進捗
感覚的なものですが、今のところ… 5% ぐらいかな。
ブログ書かなければ10倍速ぐらいでいけそうですが汗、いつもアプリを作ったあとに「経緯を記録しておけばよかった！」と思うので今回はがんばってみます。
また、アーカイブは以下にまとめていきます。