皆さん、こんにちは。現在UI/UXデザインとiOS開発を学習中の私が、最初のプロジェクトとして取り組んでいるシンプルなタンパク質記録アプリについて、ここまでの道のりを共有したいと思います。

なぜこのアプリを作ろうと思ったか：トラッキングのシンプルさを求めて

フィットネスに関心のある多くの方と同じように、既存のカロリー・マクロ管理アプリ（MyFitnessPalなど）は機能が豊富すぎる反面、時に情報過多で圧倒されると感じていました。私のニーズはもっと単純で、「日々のタンパク質摂取量を、他の多くの指標に惑わされることなく素早く記録したい」というものでした。この効率化された体験への渇望が、このプロジェクトの原動力となりました。

初期デザインコンセプトとFigmaでの学び

初期のデザインコンセプトは、主に2つの「モード」を中心に展開しました。新しいタンパク質を入力するための「追加モード」と、日々の目標達成までにあとどれくらいタンパク質が必要かを確認する「減算モード」です。小学生が算数の計算をするような、明確で計算的なインターフェースを思い描いていました。演算記号を切り替えることで状態を変化させるアイデアでした。また、入力のための仮想キーボードが操作画面を邪魔しないように、クリック可能な「履歴 (History)」や「お気に入り (Favorite)」タブ（これらも一種の入力手段です）と位置的に密接に連携させることも考えました。そして、正直に言うと、現状では私のお気に入りのアプリ「Strong」のキーボードのスクリーンショットを一時的なプレースホルダーとして使用しています。

初めてFigmaに触れたのはまさに冒険でした！モダンでエレガントなツールが大好きです！以下は、私がこれまでに培ってきた主要なスキルです。

レイヤー構成と命名規則: やや雑然としていたレイヤーパネルから、セクション分けにフレームを活用し、記述的な命名規則（例: Text / Label / Goal, Component / History List Item）を採用することで、より構造化されたアプローチへと移行し、明瞭性が格段に向上しました。

コンポーネントベースのデザイン: リストアイテムやおそらくタブボタンのような再利用可能な要素に対して、コンポーネントの力を実感したのは「アハ体験」でした。インスタンスを使用することで、既に時間を節約し、一貫性を確保できています。

Auto Layoutとの最初の出会い: Auto Layoutの探求を始め、方向、間隔、配置について学びました。これは間違いなく強力なツールですが、子要素のサイズ変更動作（Hug contents, Fill container, Fixed width/height）が最終的なレイアウトにどう影響するかを掴むのにはまだ苦労しています。時々、要素が少しごちゃ混ぜになってしまうこともありましたが、今では基本的に期待通りに動作させることができるようになりました。

デザイン原則とUXの課題についての考察

この初期デザインフェーズは、Figmaの使い方だけでなく、ユーザーについて考える上で非常に大きな学習体験となりました。

可読性の探求: 現状のモックアップに対する自己批判の最大のものは可読性です。主要な数値（目標、摂取済み、残り必要量）の表示方法が、特にモード間で同じ位置の数値が異なる意味を持つ場合、ユーザーが素早く理解するには認知的負荷が高すぎるかもしれないことに気づきました。
モードの明確性: 「追加」モードと「集計」モードを区別するために色（赤/緑）を使ってみましたが、十分に明確でなく、アクセシビリティの問題もあるかもしれないと懸念しています。モード切り替えという概念自体が、簡略化の余地があるかもしれません。
反復型デザインの重要性: これまでの最大の学びは、デザインは真に反復的なプロセスであるということです。最初のバージョンを完成させた直後は、正直かなりがっかりしました。自分で作ったアプリなのに、画面上のデータを読み解きたくないとさえ思ったのです！でも、まあ、それならそれで、ここ数日の努力を最大限に活かそうと思い直し、全てを公に投稿することに決めました。そうです、最初のバージョンが完璧でなくても、あるいはその瞬間には「完全な失敗」に見えたとしても、全く問題ないのだと信じています。なぜなら、最も重要なのは「ついに始めた！」ということだからです。これらの課題を発見すること自体が、より良い解決策への道のりの一部なのです。

現在の課題と次のステップ

現在、明確さと使いやすさを優先するために、主要な情報表示とモードのインタラクションを再考する必要があると感じています。「加算/減算」という計算フレームワークに初期段階で焦点を当てすぎたために、瞬間的な可読性という主要なニーズが見過ごされてしまったのかもしれません。

では、次は何をするか？

コアUIの反復改善: メイン画面の代替レイアウトを探求し、複雑なモード切り替えなしに「残り必要量」と「摂取済み」の数値を即座に分かりやすく表示することに焦点を当てます。
Figmaスキルの深化: Auto Layoutの練習を続け、これらの画面に命を吹き込むためにプロトタイピング (Prototyping) を学ぶ準備をします。
SwiftUIへの準備: もうすぐこれらのデザインをSwiftUIを使って機能するiOSアプリに落とし込めると思うと、非常にワクワクしています！
この Build in Public の旅は私にとって新しいものですが、進捗、つまづき、学びを共有していく所存です。同じく学習中の方や経験豊富なプロの方からのフィードバックやアドバイスがあれば、とても嬉しいです！

読んでいただきありがとうございました！