UXの5レイヤーの「Structureレイヤー」はなぜ重要なのか？ | IAやUserFlow設計に強くなるための参考リンク集付き

2022年3月17日 09:03

サービスを新しく作ったり、UXデザインを行っていく上で恐らく最も利用されているであろうフレームワークが「ギャレットのUX5段階モデル」です。

以下のように下から上へ建物の土台から組み立てていくように抽象・基盤的な内容からプロダクトの設計をしていくフレームワークです。

Strategyレイヤー：ユーザーニーズやプロダクトのゴールを規定する
Scopeレイヤー：どういった機能やコンテンツを盛り込むかを決める
Structureレイヤー：どういう情報構造と遷移の流れにするかを決める
Skeltonレイヤー：機能やコンテンツの画面上での配置の仕方を決める
Surfaceレイヤー：感覚的・美的な側面も含めた見た目を決める

※ ギャレットのUX5段階モデルについては以下のMediumのシリーズ記事、もしくは原著を参照。

このフレームワーク自体は知っていたり、すでに利用している人は多いと思いますが、その中でも真ん中のStructureレイヤーをすっ飛ばしてサービスを作っている人は多いのではないでしょうか？

具体的には、User Story Mappingなどの手法で、サービスに盛り込む機能や優先順位を決めた後で、IA MappingやUser Flow Diagramを描かずに、いきなりワイヤーフレーム作成に入ってしまうケースが非常に多いように思います。

▼ 5レイヤーと各種デザインメソッドを対応させたMESON社内ドキュメント

▼ 機能やコンテンツの情報構造を設計するIA Mapの例

▼ ユーザーのインタラクションの流れを設計するUser Flowの例

ページ数の少ないWebサイトや、機能の少ないサービスであればそれでも大きな課題は出ませんが、ある程度のページや機能を持ったWebサイトやサービスであれば必ずこのStructureレイヤーを丁寧にやった方が結果的に早く・良いものが作れます。

なぜ機能が決まったあとで、IA DiagramやUser Flowをつくってからワイヤーフレーム作成に入るべきなのか？

それは以下3つが大きな理由です。

① IA Mapをすっ飛ばすと機能がごちゃ付く

機能が多いサービスでいきなりワイヤーを書くと、
「あ、この機能も入れなきゃ…。ちょっとごちゃつくけど、ここに入れちゃおう。」というUX的にBadな意思決定が乱発されることになります。

そうした細かい機能やコンテンツのグルーピングの違和感がユーザーの認知的負荷になってユーザビリティが低下し、ユーザーの継続率やエンゲージメント率を下げる要因になります。

② User Flowのシンプルさと、ユーザー体験のスムーズさは比例する

自分がフリーでサービスのUX改善のコンサルをしていたとき、だいたいサービスの改善において有効なアクションの１つが現状のUser Flowを書き出して、その絡まりを解くことでした。

ユーザビリティに問題を抱えるサービスの多くは、User Flowを書き出した際にゴチャゴチャに絡まり合っています。

サービスを作る際に、User Flowを描く時点で絡まりを解いておくことで、スッキリしたユーザー体験の流れをつくることができます。

③ 将来的な機能も含んで矛盾のない美しいサービス構造を設計することができる

以下は実際にいま社内で開発中の自社サービスにおけるIA DiagramとUser Flowを合わせて記述しているボードです。

ポイントは初期リリース版の画面や機能を実線枠で記述しつつ、追って開発する画面や機能も破線枠で追加しているところです。

多くのケースでワイヤーを引く際には初期リリース版の機能+α程度に絞ってワイヤーを引くことが多いと思いますが、それでは今後追加していく機能群も含めて破綻のない美しい設計を作ることは非常に難しい。
一方で将来的に追加する機能群を含めたワイヤーを早期につくることはあまりにコスパが悪い。

なので、Scopeレイヤーで機能とコンテンツが将来的なものも含めて決まったら、まずワイヤーを描く前にIA MapやUser Flow Diagramを描くべきなのです。

以上3つの理由から、一定以上の規模のサービスをつくる際にはStructureレイヤーをしっかり踏むことが非常に重要です。

参考）Structure Layerの理解を深める参考リンク集

IAデザインやInteractionデザインについての良い情報が日本語だとあまりないので、以下スレッドでオススメの英語記事をシェアします。

IAデザインの概要を知る

UX Design 101: Information Architecture - Structuring & organizing content

Information Architecture. The Most Important Part of Design You're Probably Overlooking.

The difference between information architecture (IA), sitemap, and navigation

A Guide to Information Architecture

IAデザインのための基本メソッド「Card Sorting」について学ぶ

Improving information architecture through card sorting

IAデザインのための基本メソッド「Site Map」について学ぶ

※ Webサイト構築のためのメソッドですが、考え方は他プラットフォームを作るときにも活きます

How to create a UX Sitemap: a simple guideline

さいごに

毎週or隔週 1時間Zoomで、UXデザイン、サービスデザイン、サービスグロースに関するメンタリングの依頼をお受けしています。ご興味ある方はTwitterやFacebookでお気軽にご連絡ください！

▶ Twitterアカウント

▶ Facebookアカウント

また、継続して今後の記事を読まれたい方は、サービスのグロースやデザインについての国内外の最新記事をシェアしたり議論するFacebookグループをやっているので、興味ある人は是非ご参加をお願いします。
Growiz.us - Growth + UX Design

AIやXRなどの先端テック、プロダクト戦略などについてのトレンド解説や考察をTwitterで日々発信しています。 👉 https://twitter.com/kajikent