前回、だいたいの構成ができましたが、コンテンツを詰めていくとUIが変わることはよくありますね…。

そこで重い腰をあげてコンテンツの詳細化をしていきます。まずは「あいうえお」に対応するハングルの覚え方から。

いろいろな方向性がありますが…、現状考えていることをまとめてみます。

• 文字文字しいのは避けたい（読まれないし）。
• 全体像がぱっとつかめて、全体をさっと行き来できるぐらいのコンテンツ量が良い。
• 気になる人だけ詳細を参照できると良い。

そう考えるとシンプルな図が並んでいて、必要に応じてスワイプで詳細を確認できるといいのでは？と思ったのでFigmaでざっくり構成をまとめてみます（現時点で内容は適当です）。

なお、前回実装していた「画面下部に『あいうえお』のsegment controlを置く」案はボツにしました。UIは作っては壊し、を繰り返すものなので、あまり気にせず進めます。

というわけで、あとはClaude Codeに「この図のようなコンテンツ構成にしたい。Horizontal ScrollViewとか使って」と指示します。ひとまずできあがったのがこちら。

一発目としては良いのですが…、以下が気になります。

• カードの大きさが統一されていたほうがいい（1枚目と2枚目以降）。
• 横にスワイプできることがわかりやすいようにIndicatorがあったほうがいい。
• カードのタイトルはもうちょっと具体的に。
• カードの領域がわかりづらい。

そのあたりをちょこちょこ微調整していきます。

シミュレーターだけではわからないので実機でも手触りを確認しておきます。ついでにダークモードで見た目を確認。

いったん…これで良いかもですが、ちょっとテンションがあがらないですよね汗。

このあたりでPinterestなどを眺めつつデザインを詰めていくと良さそうです。では続きは次回、ということで。

現在の進捗

まだまだまだですね… 6% ぐらいかな。アーカイブは以下にまとめていきます。

ideaxidea.com ハングルアプリ開発日誌 - IDEA*IDEA ハングルアプリ開発日誌 の記事一覧