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

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

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

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

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

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

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

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

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

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

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

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

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

現在の進捗

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

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

この記事がよかったら 0

人気記事

1. 【ハングルアプリ開発日誌】 目標を決めて、コンテンツを整えて、クイズ機能を詰めた
2. Kindleの期間限定無料マンガが読める『tadayomi.com』をちょこっと更新、おすすめマンガのご紹介
3. 【2026年7月】 最近読んで面白かったマンガまとめ（異世界転生系を除く）
4. 【ハングルアプリ開発日誌】 テンションあげるために少しだけデザインについて考える
5. 開発環境の起動は実行ファイルにしておくと便利