インターフェースへの段階的接近
技術同人誌『フランクフルト』Vol.2に寄稿した記事「インターフェースへの段階的接近」の冒頭部分です。続きは2026年度筑波大学学園祭「雙峰祭」「G4 驚額の殿堂ファイナル」のブースにて販売予定の本誌からお読みいただけます（販売詳細のリリース）。
#はじめに
最近、Nikky という小さな SNS をつくりました。Nikky は 1 日に 1 回だけ日記を投稿できる SNS で、その日にあったことや考えたことを残したりフォローしている人の日記をゆっくり読んだりする場所です。できることは多くありませんが、触っていて心地のよい場を目指して手触りのある UI 設計を意識しながらゆるゆると運営しています。
#UI 設計の 3 つの段階
さて、一口に UI の設計といってもその対象はさまざまです。ユーザーが何を扱いどこで何ができるのかという情報の構造から、ボタンを押したときの反応、さらには数百ミリ秒のアニメーションに至るまで考えるべきことは多岐にわたります。これらは大きく 3 つの段階に分けて捉えることができます。
例えば、画面にボタンを 1 つ置く場合を考えてみます。最初に考えるのはそのボタンが何のためにあるのかです。ユーザーがどんな目的でそのボタンを押し、押した結果として何を得るのかが決まって初めて、ボタンのラベルやどこに置けば見つけられるのかが決まります。これはユーザーが何を扱い何ができるのかを整理する情報設計の段階です。情報設計はユーザーの目には直接見えませんが、ここが定まっていなければどれだけ丁寧に作り込んだボタンもユーザーの目的には結び付きません。
ボタンの役割が決まったら、次はそのボタンを誰もが期待どおりに使えるようにします。マウスで押せるだけでなく、キーボードでフォーカスを移して操作できることや、スクリーンリーダーで何のボタンかが伝わること、押せないときや処理中のときにその状態が伝わることが求められます。この段階で考えるのは見た目の背後にある振る舞いです。その多くは特定のアプリに固有のものではなく、どのアプリでも共通して求められます。
ただし、振る舞いを整えただけではそのボタンはどのアプリにもあるボタンのままです。そこで最後に、そのボタンをどう見せてどう動かせばそのアプリらしさを伝えられるのかを考えます。押したときの小さな動きや操作の結果を伝えるアニメーションのように、ユーザーの目に直接触れる表層の段階です。表層には決まった答えがなく、そのアプリが何を大切にしているかによって多種多様な形を取ることでしょう。
このように UI 設計は、情報設計、振る舞い、表層の 3 段階で規定されると考えられます。段階が表層に近づくほど UI は目に見えるものになり、どのアプリにも共通する判断からそのアプリならではの判断へと移っていきます。
#本記事の構成
Nikky の開発においてもこのような異なる段階の内容に向き合いながら設計と実装を繰り返してきました。そこで本記事では Nikky のフロントエンド開発を題材に、この 3 つの段階に沿い情報設計から表層へと順に視点を近づけながら設計の過程を紹介します。まず、オブジェクト指向 UI とモデルベース UI デザインを手がかりにして日記を中心とした情報設計を進めます。次に、フィードのカードやボタンを題材にして普遍的な操作に対する振る舞いを考えます。そして最後に、マイクロデザインを参考にした表層にあたるリアクションの動きを取り上げます。
本文中のコード片は主に React を題材としており説明のために一部を省略・整形しています。コードに出てくる UI のコンポーネントは Base UI、スタイルは Tailwind CSS、アニメーションは Motion を使用しています。
なお、実際の設計プロセスは常に一直線に進むわけではありませんし、ここで紹介する手法が唯一の正解でもありません。本記事では表面的な手順や実装だけでなく、何を基準にその決断に至ったのかという意思決定についてもいくつか触れています。読者の皆さんがフロントエンド設計に向き合う際のひとつの参考になれば幸いです。
この後の章は『フランクフルト』Vol.2 本誌に収録されています。
本記事は、技術同人誌『フランクフルト』Vol.2（驚額の殿堂、2026年）に収録した記事の一部を掲載したものです。本記事の文章および図版は、当サイト規約に定めるクリエイティブ・コモンズ・ライセンスの対象外です。著作権法で認められた引用の範囲を超える転載・複製・改変はご遠慮ください。
© 2026 slimalized