気まぐれPHPerの頭の中

PHP、a11y等のTech Blog

プロダクト開発における情報設計の模索

プロダクト開発において「情報設計」という言葉を聞くと、多くの方はUI/UXの領域、特にユーザーインターフェース上のナビゲーションや情報の配置を思い浮かべるかもしれません。しかし、私にとって情報設計は、その枠を遥かに超え、プロダクト開発の根幹を支える普遍的な「考え方の基盤」であり、その模索は私自身のエンジニアリングキャリアを形成する上で不可欠な道のりでした。

本記事では、私が情報設計に興味を持つに至った経緯から、従来のイメージとは異なる私なりの情報設計の捉え方、そして制御工学の「モデルベース開発」との類似性、さらには未来に目指す姿についてご紹介します。

情報設計に興味を持つまでの歴史:Webの本質と実務の課題が織りなす道筋

私の情報設計への旅は、いくつかの重要な要素との出会いから始まりました。

ウェブアクセシビリティからマシンリーダビリティ、そして情報の整理へ

最初のきっかけは「ウェブアクセシビリティ」への興味でした。Webを通じて誰もが情報にアクセスできるべきであるという思想は、Webを正しく理解することの重要性を私に気づかせました。

HTML5 Conference 2018での「HTMLセマンティクス」のトークや、PHPerKaigi 2019での「RESTの力」に関する発表は、私にとってWebの奥深さを知る転換点となりました。これらのトークから、私はWebが本質的に強力なハイパーメディアシステムであるという点に強く惹かれました。HyperText Markup Language (HTML)Hypertext Preprocessor (PHP) も、省略せずに記述すればハイパーメディアと深く関連しており、Webの力を最大限に引き出すためには、単に情報を表示するだけでなく、その構造や関係性をきちんと整理し、マシンリーダブル(機械が読み取りやすい)な状態にすることが不可欠だと考えるようになりました。

マシンリーダブルな情報は、いつだってきちんと整理されていなければなりません。この「情報の整理」という概念が、私の情報設計への関心の原点と言えます。

情報アーキテクチャ (IA) への深化

さらにこの興味を深めたのが、koriymさんのapp-state-diagramで使用されているALPS(Application-Level Profile Semantics)の概念との出会いです。ALPSは、ダン・クライン氏が提唱するIAの3つの要素(オントロジー・タクソノミー・コレオグラフィー)から成り立っており、より抽象的で本質的な「情報の構造化」へと私の意識を向けさせました。

この時期に感銘を受けた書籍は、『Designing Connected Content』と『オブジェクト指向UIデザイン──使いやすいソフトウェアの原理』です。これらの書籍は、コンテンツ同士の関係性や、情報(オブジェクト)を中心に据えたUI設計の考え方を提示し、私の情報設計に対する理解を一層深めてくれました。

実務での課題から情報整理の痛感を経験する

「これは情報設計のことだったんだ!」と腑に落ちた瞬間は、日々のプロダクト開発の現場にありました。社内で同じドメインについて各部署が幾度もドメイン分析を行っている現状を目の当たりにした時、情報のベースが確立されていないが故の無駄な手間を痛感しました。また、用語(オントロジー)の揺れも大きな問題でした。同じ要素を部署ごとに異なる名称で呼ぶことで、社内での会話が成り立たなくなることが頻繁に発生し、「必要なのは情報の整理だ」という確信を深めました。

これらの経験を通じて、Webの本質であるハイパーメディアの力を最大限に引き出すためにも、そして組織内のコミュニケーションを円滑に進めるためにも、情報設計が不可欠であるという明確な関心へと変化していったのです。

UIにおける情報設計と自分に落とし込んだ情報設計:プロダクト全体の「型」としての情報設計

私は当初、情報設計という言葉をUI/UXの世界、特に「UXの5段階モデル」にマッピングされるものだと認識していました。しかし、私の情報設計への興味は、その枠に留まるものではありませんでした。

UI/UXの世界ではナビゲーションやUI上での情報のまとまり方に着目されることが多い情報設計ですが、私はサーバーサイドエンジニアとして、この情報設計の概念をプロダクト開発全体の手法に落とし込みたいと考えています。これは、一種の「ドメイン駆動開発(DDD)」のようなものだと捉えています。ユーザーには直接表れない、データの構造やリソースの遷移、APIの設計といった側面における情報設計にこそ、大きな価値があると感じています。

まさに「情報設計」という言葉を従来のイメージとは異なる意味合いで捉えていると言えるでしょう。これは特定の開発手法というよりも、考え方としての基盤であり、あらゆる開発やビジネス活動における共通言語として機能すべきだと考えています。

この「情報の整理」や「モデル化」は、具体的なプロダクト開発や組織の中で大きな効果を発揮しています。例えば、ALPS (http://alps.io/) や ASD (https://github.com/alps-asd/app-state-diagram) といったツールを活用することで、ビジネスサイドを含めた共通語彙の定義や、情報(リソース)の遷移や定義を共有することができています。これにより、異なる部門間での認識齟齬が減り、よりスムーズなプロダクト開発が実現しています。

モデルベース開発に似たなにか:実装を「思い起こす」設計図

私が情報設計に強い類似性を感じるのは、大学時代に学んだ制御工学の「モデルベース開発(MBD)」です。MBDは、制御システムを実際に構築する前に、モデル化して何度も検証やシミュレーションを行ってから設計開発を進める手法です。

MBDと情報設計には、主に「抽象化」と「シミュレーション」という点で強い類似性があります。どちらも、実際の開発や構築に入る前に、システムや情報を抽象的なモデルとして捉え、その振る舞いや構造を事前に「思い起こす」、つまりシミュレーションできるという共通の価値を持っています。モデルを見ることで、その後の実装や具体的なアウトプットが具体的にイメージできるのです。

これを読者の皆さんに分かりやすく伝えるならば、「建築の設計図」「家の外観図」が非常に良い例えになるでしょう。家を建てる際、私たちは決して思いつきで木材を切ったり、基礎を打ち始めたりしません。まず、設計図を描き、間取りや構造、動線をシミュレーションし、外観をイメージします。この設計図があるからこそ、大工さんや電気工事士さんなど、異なる専門家が共通認識を持ち、効率的に作業を進め、最終的に堅牢な家を建てることができるのです。

情報設計もこれと同じです。プロダクトを開発する前に、「情報の設計図」を描くことで、関係者全員が共通のイメージを持ち、無駄なく、質の高いプロダクトを構築できる。これが、私が情報設計に見出すMBDとの共通点であり、その価値です。

目指す姿:情報設計をプロダクト開発の「業界スタンダード」へ

私の情報設計の模索は、まだ道半ばです。しかし、この探求の先に明確なビジョンを描いています。

プロダクト開発の「型」の確立と「壊れないプロダクト」の実現

個人としては、情報設計をベースにしたプロダクト開発の「型」を社内をはじめとして模索していきたいと考えています。JSON Schemaやコード生成といった既存の技術に加え、AIのパワーも活用することで、決められたステップで最終的に実装まで持っていけるような、効率的で再現性の高い開発プロセスを確立できると、非常に面白い挑戦になるでしょう。

所属する組織においては、このような情報設計に基づいた取り組みができるメンバーと環境があること自体が、大きな強みとなると信じています。会社として情報設計を推進することにより、Webの本質に則した、より「壊れないプロダクト」、つまり変化に強く、持続可能なプロダクトづくりを実現したいと考えています。

情報設計の「業界スタンダード」化を目指して

そして最終的には、情報設計が社会や業界全体にとって、制御工学におけるMBDのように、プロダクト開発の普遍的な「業界スタンダード」となることを目指したいと考えています。

情報設計は、単なる特定の技術や手法に留まらない、より良いプロダクトを効率的に生み出すための「考え方の基盤」です。この「基盤」が広く認識され、実践されることで、より多くの企業が堅牢で質の高いプロダクトを開発し、ひいては社会全体のデジタル体験を向上させることに貢献できると信じています。

この模索の旅は続きますが、情報設計の持つ無限の可能性を信じ、これからもその深化と普及に尽力していきたいと思います。


あとがき

本記事は、生成AIとの対話を通じて作成されました。育児休業から復帰して、生成AIの進化に驚かされるばかりです。まさに時代が変わったと実感しています。

なお、本記事の執筆は、弁護士ドットコムの同僚である土屋直樹さんのPHP Conference 2025のプロポーザル「より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発」から多大なインスピレーションを受けています。同様の興味を持つ同僚と、これからも刺激し合いながら働けることを嬉しく思います。


育休復帰からのフルタイムエンジニア(母はつらいよ)

4月から0歳の子を保育園に預けて、育休を終えて復職しました。

1ヶ月すぎたのでそろそろポエムを。

生活

子、7ヶ月で保育園入園でした。 まだ、2回食を始めて慣れてきた頃くらい?かな。

夫10:00〜19:00、私8時間の裁量労働制といった感じで2人ともフルタイムで復職しました。 夫は週一出社ですが、それ以外は完全リモートです。

保育園は7:15から開始ですが、我が家は8:30〜くらいで預けています。

朝は夫の始業時間がゆったりあるので夫に任せて、私は早めに勤務開始。

夕方18:00に私が迎えにいって夫の退勤を待ちつつ離乳食を作り、食べさせています。

まだ子どもの体力がなくて保育園から帰るとすぐに寝ちゃって夜は遅め。

6月からようやく給食を食べれるようになったが、3回食なので特に変化なし。

自分たちのご飯を作る時間とかもなくて、ついにパルシステム契約。初回配達早々に朝から配達員さんにモーニングコールしてもらいました。(早く起きろ)

仕事

元々プレイヤーとしてコードをがしがし書く要因でしたが、産休育休を経ている間にそれまでの動きとかを評価してもらい裁量を大きく任せてもらえるようになりました。

最近も相変わらずコードは書いていますが、一部マネージャー的な動きを始めて慣れなさすぎて絶賛疲弊中です。 がんばれわたし。

ちなみに10ヶ月もコードを書いてないとそれなりに忘れていたり書くのに時間がかかったりしてつらみとたたかっています。 がんばれわたし。

そんなこともあって0.8馬力くらいでゆるっと仕事したいけど1.2馬力くらいになった気がします。

つらみんご

子どもの病気だけは、どうしてもなんともなりません。 保育園の決まりで解熱後24時間はお休みとなっていて自宅で面倒を見つつ仕事をしつつ…なんてことは全然できず。 隙間を見てできるところだけ働いて他の日に稼いだり夜中にちびっと稼いだりせざるを得ない状況です。

勤務開始からお迎え担当やっていると残業なんかする暇は1ミリもないので、どうにか頑張るしかないです。

だけど、有難いことに裁量労働制なので離席しまくったり日で足りなかったりしても特に誰にも責められません。ありがたや。

で、結局?

子どもがかわいいので、もうおーるおっけーです👌💯

病みそうになるし寝不足できついけど、きついと思うと負けなので、適当に生きていってます。 つらくなると写真フォルダを見返しています。かわいい。

数少ない女性エンジニアのロールモデルについて語ったり勉強会したりあるけど、現実はこんなもんです。普通のごく一般的な大変なお母さんたちと何ら変わりない。

子どもかわいい。

離乳食3ヶ月目

食べたもの

  • 7倍粥
  • オートミール
  • うどん
  • 高野豆腐
  • ささ身
  • ツナ缶
  • たら
  • カッテージチーズ
  • カリフラワー
  • アスパラガス
  • ちんげん菜
  • さやえんどう
  • さやいんげん
  • ピーマン
  • 長ネギ
  • パプリカ
  • みそ汁
  • ハイハイン

ビーフード

たくさん

食べる量

2ヶ月目とほぼ変わりなし。体格も小さいしこのくらい食べる頃には大体いやいやするから増やさず様子見。

所感

断乳しました。断乳ってどうやるのかなーって思ったけど、急には乳は止まれないわけですね。丸2日思いっきり張りまくって死ぬかと思った。完ミ楽すぎほんとに。

保育園が中期食からの提供だけど、園の離乳食チェックシートの品目を3回以上全て食べさせないと出してくれない。

冬瓜とか季節ものもあるけどとりあえずアレルギーチェックできればいいやくらいの気持ちで食べさせ中。

保育園で慣れた頃にミルク拒否が始まってしまって、家のミルク渡したけど飲まず。おそらくうるさい場所ではミルク飲めないタイプのわがままちゃんな気がする。

最近はスプーン奪われたりお野菜せんべいを手づかみで爆食いしたり、なんとか自分で食べたい気持ちになってきているから早めにおやきたべたいね。

便利だったやつ

アカチャンホンポのエプロン

シリコンエプロンだと外そうとしてほっぺの形が変わっちゃうから、保育園で使うのも兼ねて撥水加工された布エプロンに。

他のがどうかは知らないけど、少なくともこれはめちゃくちゃよく水分を弾くから結構使えてる。

・赤ちゃん用のみそ汁 みそ汁の塩味をほぼ無くしたやつ。麩とか長ネギとか明らかにそのままじゃ食べないだろ選手は味噌汁行き。

・やさいミックス にんじんじゃがいもたまねぎをいい感じにテキトーに茹でて、ブレンダーしてポタージュ状に。メニュー考えるの面倒な時に野菜たくさん取れるし美味しいし便利。

・おしりふき 改めておしりふきは手も口も顔も床もテーブルも何でもかんでも拭けるから便利。

離乳食 2ヶ月目

食べたもの

  • 豆乳
  • ベビーダノン(いちご)
  • まだい
  • カレイ
  • しらす
  • レタス
  • キャベツ
  • かぶ
  • なす
  • きゅうり
  • ブロッコリー
  • 大根
  • 白菜
  • 小松菜
  • 昆布だし
  • カツオだし

ビーフード

  • そうめん
  • おやさいきなこ
  • りんご
  • トマトとりんご
  • バナナといちご
  • 小松菜とほうれん草
  • にんじんとトマト
  • かぼちゃとさつまいも
  • 白身魚と緑黄色野菜

2ヶ月目終了時点メニュー

  • 10倍粥50g
  • 野菜 4さじ
  • タンパク質2さじ
  • くだもの2さじ

所感

離乳食を制する者は育児を制す

テーブルつけるとけりけりして食べないので外した

くだものは大好きだからメニューに入れておかないと、何にも食べてくれない時に困る

10倍粥つぶつぶ食べれるようになった。

妖怪そうめん飛ばし

必殺!きなこ粥!大好き!

気づいたらストロー飲みできるようになってた。むせるけど。

3/15〜二回食に。 食べる量が増えたからストックがすぐなくなる。

うちの子の8割は和光堂

便利だったやつ

・小さじを計れる計量カップ

100均に売ってあるヨ。ベビーフードにお湯入れるときとか、少しだけ水分足したいときに入れやすい。

アカチャンホンポ×リッチェルのスプーン

40度以上になると色が変わるので冷めてるかどうか一目でわかる。超便利。

・おやさいきなこ

タンパク質難民になってもとりあえずお粥にかけときゃなんとかなる。

・卓上扇風機

お粥冷ますのに便利。夏以外は持て余しがちだから活躍できてよかった。

・H型エプロン

30年目にしてようやくエプロン買った。洗い物する頻度が高くなったし、寝かしつけで顔ゴシゴシされるから導入。

離乳食 1ヶ月目

いつか役に立つように記録。

食べたもの

  • 10倍粥
  • かぼちゃ
  • さつまいも
  • にんじん
  • ほうれん草
  • とうもろこし(ベビーフード)
  • トマト
  • とうふ
  • おさかな(ベビーフード)
  • もも(ベビーフード)
  • バナナ
  • たまねぎ
  • 野菜スープ

1ヶ月終了時点のメニュー

  • 10倍粥(潰し) 小さじ5
  • お野菜 小さじ2
  • たんぱく質小さじ1
  • くだもの 小さじ1

アレンジ

  • トマト+野菜スープ
  • ほうれん草+とうふ
  • ほうれん草+お粥
  • もも+トマト
  • トマト+粉ミルク

食事スタイル

ラックに座らせて、テーブルをつける。

とろとろなのでエプロンだけじゃキャッチしきれなくて、エプロンの下にガーゼ引くと完璧。

所感

すり鉢でするだけじゃ固形感があって拒否🤢裏ごしすればOK。豆腐は1回だけじゃつぶつぶ残るから2回漉す。

お粥は大好きだから困った時はお粥に混ぜればだいたい食べてくれる。

1ヶ月終了時点で大さじ2杯の米を炊飯器で炊いて25mlで冷凍すると少し余る。

野菜スープは何にでも混ぜたら美味しくなるみたいでよかった。にんじんたまねぎじゃがいもの煮汁。茹でたお野菜はそのまま離乳食に。

豆腐は冷凍させたら凍り豆腐になっちゃうから、小分けパックを2日に分けて食べさせる。

トマトはすごくすっっっっぱい🍅

もももすっっっぱい🍑

便利だったやつ

・ブレンダー

ないと何も始まらないくらい必須。10倍粥潰したりおかず系ペーストにしたり何にでも使える。

・冷凍小分けトレイ

最初は15mlあればなんとかなるけど、お粥が小さじ4杯をこえると25mlがあると便利。我が家は西松屋派。

・茶漉し

少量の裏ごしはこれ一択。100均で充分。

和光堂のベビーフード

お湯入れるだけで小さじ一杯分できる。便利。

和光堂のとろみのもと

しゃばしゃば系のおかずをとろとろにしてくれる魔法のアイテム。

・ワセリン

食べさせる前に口周りに塗ると、口拭くときにするりと取れる。便利。

・計量スプーン2セット

なにかと食材ごとにスプーンを分けて混ぜたりして、あるに越したことはない。