iOSアプリの実例で学ぶ情報設計のアウトプットとUIへのつなげ方
今回は、個人開発で App Store に公開している iOS アプリ「Meemie」を題材に、情報設計の中間成果物をどう作り、UI にどうつなげるかを紹介 します。成果物の形式とプロセスは、SmartHR Design System の「情報設計のアウトプット」を参考にしています。
完成した画面の事例は世の中にたくさんありますが、その手前で作る中間成果物（特に情報設計）はそもそも作成されていないか、公開されることはほとんどありません。
この記事で紹介する内容は、私が担当しているUIに関する講義で紹介できる実例として整理したものですが、何かの参考になればと思います。
この記事のターゲット
UIデザインを学んでいる学生
画面を作り始める前に、何を決めればよいか分からない方
情報設計という言葉は知っているが、成果物のイメージが湧かない方
情報設計とは？
端的に説明すると、「情報を整理し、構造化すること」です。具体的にやることとしては、登場する要素をグループに分ける「分類」、グループや要素の名前を決める「命名」、親子・並列・因果などの「関係性の定義」の3つです。
構造に歪みがあると、どれだけ見た目を整えても使いにくさが残ります。これはアプリケーションに限らず、現実の仕組みでも同じです。
よくある事例として、メモアプリで例えてみます。ホーム画面に「メモを書く」「メモを編集する」「メモを削除する」の3つのボタンが並んでいるアプリを考えてみます。
メモの誤字を直している途中で、そのメモ自体が不要だと気づいたとします。この場合、ホームで「編集する」を押して一覧からメモを選び、編集画面を閉じていったんホームに戻ります。次に「削除する」を押し、同じ一覧から同じメモをもう一度選ぶことになります。
これを現実の場面に置き換えると、引っ越しのときに市役所で窓口を回るのに似ています。転入届は住民の窓口、国民健康保険は保険の窓口、というように手続きごとに窓口が分かれていると、窓口を移るたびに申請書へ氏名や住所を書き直し、自分が誰なのかを毎回申し出る必要があります。
これに対して、一部の行政機関で導入が進められている「書かないワンストップ窓口」では、1か所の窓口で来庁者の情報を一度確かめると、必要な手続きがまとめて判定され、住所などが印字された書類に署名すれば済むようになっています。手続きの種類ごとに窓口を分けるのではなく、先に「誰の手続きか」を決め、その人に対する手続きを1か所でまとめて扱う構造です。
メモアプリも同じで、ホームにメモの一覧を置き、メモを開いた画面に編集と削除をまとめれば、同じメモを何度も選び直す必要はなくなります。窓口の看板を掛け替えても回る手間が減らないのと同じく、ボタンの名前や見た目を変えるだけでは解決しません。先に操作（動詞）を選ばせるか、先に対象（名詞）を選ばせるかという、構造の違いです。
SmartHR Design System の情報設計のページでも、関連する編集内容が別の画面に分かれていて行き来が増える、同じものが 機能ごとに違う名前で呼ばれている、よく使う機能が深い階層にある、といった例が挙げられています。どれもルックアンドフィールや実装の工夫だけでは直しにくく、情報の構造から見直す必要がある問題です。
情報設計のアウトプットの例
情報設計の考えを、ほかの人が見て確かめられる形にした中間成果物の例として、SmartHR Design System では「情報設計のアウトプット」として整理されています。これは文章を書く前のアウトラインや、ウェブサイトを作る前のサイトマップと同じ位置づけのものです。
アウトプットは以下の5種類です。
ユーザーのタスクの説明
概念モデル
オブジェクトモデル
ビューの呼び出し関係
メインナビゲーション
1種類の図で情報の構造をすべて描くことはできないので、粒度と角度の違う図を複数作って、互いに矛盾がないかを確かめる、という考え方です。いずれも書籍『オブジェクト指向UIデザイン』（ソシオメディア、技術評論社）の考え方に基づいています。
題材にするiOSアプリ「Meemie」
Meemie は、写真から被写体を自動で切り抜き、フラットな背景の上に置いて、SNS に投稿できる1枚に仕上げる画像加工アプリです。アプリを公開するまでの経緯については以下の記事で紹介しています。
今回は、このアプリの公開中バージョン（1.3.0）の構造を例に、5種類のアウトプットとして FigJam に書き起こしたものを使用しています。
1. ユーザーのタスクの説明
最初に作るのは、プロダクトを使う人が、何のために、どんな流れで使うかを書いたテキストやドキュメントです。
Meemie では、登場人物、目的、主な関心、主な流れ、主要なユースケースの5つに分けて書きました。フォーマットは厳密に決められていないので、題材に合わせて変えてかまいません。
この中で注目すべきは「主な関心」の欄です。Meemie を使うユーザーの関心は「この写真をどう見せるか」にあって、「切り抜く」「合成する」という作業そのものには多くの場合は関心がありません。
関心の中心が作業（動詞）ではなく作品（名詞）にあるので、作品を中心にアプリを組み立てる、という判断軸を持つことでUIとして採用する表現に落とし込むことができます。
2. 概念モデル
概念モデルは、利用者が認知する主要な概念と、その関係を俯瞰する図です。
親子関係は左から右へ、同じ階層の概念は縦に並べます。実線の矢印が親子関係、点線の矢印が参照関係です。参照関係は、単体では成り立たず、別の概念があって初めて意味を持つ関係を指します。矢印には、多重度と呼ばれる「いくつと結びつくか」の数を書きます。
Meemie の主要な概念は「作品」です。作品は、元になる「素材」（写真か動画）、素材から切り抜いた「被写体」、「背景」、任意で複数適用できる「効果」を子に持ちます。ランダム生成の機能が出す見た目の「案」は、作品があって初めて意味を持つので、作品を参照する点線でつないでいます。
逆に、作品の一覧（ギャラリー）はここでは表現しません。一覧は概念ではなく、作品をどう見せるかという見せ方の話なので、後のビューの呼び出し関係で扱います。
作成日時やサムネイルのように、使っている間に強く意識されないものは省略しています。何をユーザーに意識させるかの優先度を検討することも、概念モデルを作る作業の一部です。
3. オブジェクトモデル
オブジェクトモデルは、利用者の主な関心の対象（オブジェクト）と、それぞれに付く情報（プロパティ）と操作（アクション）を書いた図です。概念モデルより細かく、何を見せて何を操作できるべきかという UI の骨格を決める材料になります。
それぞれの表は、上がオブジェクト名、中段がプロパティ、下段がアクションです。たとえば被写体には、位置、大 きさ、角度などのプロパティと、移動、拡大・縮小、回転、位置のリセット、切り抜きのやり直しなどのアクションがあります。
アクションの主体は利用者です。被写体を自動で切り抜く処理はシステムが行うので、アクションには書きません。書くのは、利用者が行う「切り抜きのやり直し」だけです。
妥当性を判断する観点で見直す
SmartHR Design System には、オブジェクトモデルの妥当性を判断する観点が表としてまとまっています。Meemieに当てはめると、以下のような観点の示唆を得られます。
プロパティもアクションも1つしか持たないものは、ほかのオブジェクトのプロパティである可能性が高いため、比率（1:1・4:5・9:16）は、単独のオブジェクトにせず、作品のプロパティとする
「ギャラリー」「一覧」のように、画面のレイアウトを示す言葉はオブジェクト名にしない
観点の表があると、自分の頭の中だけで考えていると見落としがちな癖に気づけます。課題で図を描いたときも、描き終えたらこの表で一度見直してみてください。
4. ビューの呼び出し関係
ビューの呼び出し関係は、オブジェクトがどんな見せ方（ビュー）で現れ、ビュー同士がどうつながるかを書いた図です。ここで初めて、画面の構成に近いものが出てきます。
それぞれの箱の上の行はビューの型です。複数のオブジェクトを並べる「コレクション、1つのオブジェクトを見せる「シングル」、一時的なモードとしてビューに重ねて表示する「ダイアログ」の3つを使っています。灰色の箱は、写真ピッカーや共有シートのように iOS が用意している画面です。
図を描いてみると、Meemie の階層が浅くなっていることが分かります。作品の一覧からエディタまでが1段で、エディタから先はダイアログしかありません。
エディタの部分は4つのビューを枠で囲んでいます。作品、被写体、背景、効果の4つのビューを1つの画面にまとめていて、タブを切り替えても画面は遷移しません。複数のビューを1画面に表示する場合は矩形で囲んでその旨を示すことで、ビューとレイアウトの関係を補足しています。
5. メインナビゲーション
メインナビゲーションは、常に表示される画面からどのオブジェクトのどのビューに移るかを書いた階層的に示したテキストマップです。基本は箇条書きか樹形図で書きます。
Meemie の特徴として、タブバーもサイドメニューもありません。アプリを開くと作品の一覧が出て、ここがルート（最上位階層）になります。一覧の左上に設定、右上に選択と鑑賞モード、下にカメラの入口があり、作品のサムネイルを押すとエディタが開きます。
この図では、置かない（やらない）と決めたものも一緒に書きました。具体的には以下の通りです。
下部のタブバーに「作成」「ギャラリー」「設定」を並べない
トップ画面に「切り抜く」「合成する」のような動詞のボタンを並べない
画像選択からモード選択、切り抜き、配置へと進むウィザード形式にしない
いずれも、作業ではなく作品を中心にするという判断から外れるものです。これらのコンテキストは、実装された画面だけでは伝わらないので、明確にドキュメントにしておくことで、バイブコーディングの際のAIエージェントへのコンテキストとしての役割も果たします。
アウトプットからUIへ反映する
5種類のアウトプットで定義したものが、実際の画面にどう反映されているかを見ていきます。
オブジェクトがそのまま画面の単位になる
ビューの呼び出し関係で「コレクション：作品」と書いたものは、作品のサムネイルが並ぶ一覧の画面になっています。「シ ングル：作品」はエディタで、その子である被写体、背景、効果は、エディタの下部の3つのタブになっています。
オブジェクトモデルの箱の名前が、そのままタブの名前になっています。
アクションは操作の置き場所を決める
オブジェクトモデルに書いたアクションは、画面のどこで操作できるようにするかの一覧になります。
被写体の移動、拡大・縮小、回転はキャンバスの上で指で直接行い、ダブルタップで位置をリセットできます。作品の複製と削除は、一覧の長押しのメニューと、エディタの右上の「その他」に置いています。
オブジェクト指向UIでは、先に対象（名詞）を選び、次に操作（動詞）を選ぶ順に組み立てます。
すなわち、エディタを開いた時点で対象の作品は決まっていて、タブで被写体・背景・効果のどれかを選び、そのオブジェクトに対する操作だけが並ぶ、という順序になるようにレイアウトしています。
図と画面は1対1にならないこともある
比率はオブジェクトモデルでは作品のプロパティですが、UI では背景のタブの中に置いています。
オブジェクトモデルの箱と画面の区切りが、必ずしも利用時のコンテキストとしてわかりやすいとは限らないため、配置上で調整することもあります。
大事なのは、ずれていることを認識した上で配置を決めることです。情報設計のアウトプットがあると、「どこがずれているか」を指差して議論できます。
まとめ
情報設計のアウトプットは、ユーザーの業務の説明から始まり、概念モデル、オブジェクトモデル、ビューの呼び出し関係、メインナビゲーションと、だんだん画面に近づいていきます。
課題でアプリやサービスを設計するときは、画面を描く前に、まずは概念モデルの箱と矢印から描いてみてください。
参考資料
情報設計（SmartHR Design System）:
情報設計のアウトプット（SmartHR Design System）:
https://smarthr.design/products/information-architecture/ia-outputs/
情報設計レビュー（SmartHR Design System）:
『オブジェクト指向UIデザイン』（ソシオメディア、技術評論社）
