こんな兆候はありませんか
- トップと下層で主張の重さが変わっている
- 導線がリンクの集合になっている
- 機能を追加するたびに全体が分かりにくくなる
- ページの役割が重複している
それは設計の問題ではなく、「構造UX」の問題かもしれません。
本記事では、四視点UX設計のうち“構造”の視点から、判断軸を骨格へ落とし込む方法を解説しています。
WEB担当者の発注前のお困りごと解決します。
()

それは設計の問題ではなく、「構造UX」の問題かもしれません。
本記事では、四視点UX設計のうち“構造”の視点から、判断軸を骨格へ落とし込む方法を解説しています。

Webリニューアル、そのまま進めて大丈夫ですか?
戦略的な判断軸が、プロジェクトの成否を左右します。
構造UXの役割は、戦略UXで定めた評価軸をもとに、サイト全体の構造と役割を設計することです。戦略UXで定められた意思決定の評価軸は、そのままでは機能しません。それらは、情報構造や導線、機能配置といった具体的な構造に落とし込まれて、はじめてプロジェクトの中で実体を持ちます。
戦略UX(Why)については『Whyで見える評価軸と前提条件 - 戦略UX視点 -』をご覧ください。
ここで扱うのは、「情報の配置」「導線の流れ」「機能の置き方」「各要素の役割」といった、UX全体の骨格となる構造です。(見た目やデザインではありません。)
情報構造とは、Webサイトやサービスに含まれる情報を、役割と優先順位に基づいて配置する設計です。
ここでの配置基準となるのが戦略UXで定めた目的や評価軸です。その評価軸を参照して各情報に役割を与え階層と関係性を確定させます。
たとえば、技術仕様という情報も、Webサイトの目的によって配置が変わります。導入判断に直結するサービスサイトであれば、技術仕様は主情報を補強する「従」として近接配置されます。一方、ブランド理解や全体像の把握を主目的とするWebサイトでは、技術仕様は詳細確認のための「下層」として段階的に配置されます。
主を補強する情報。同じ文脈の中に置く。主の理解を助けるため、近くに配置する。同階層、または1段下に配置される。
例)サービスページ
→同一ページ内など近接に配置。
詳細・補足・個別展開。必要な人だけが到達する情報。主の理解には必須ではなく、詳しく知りたい場合に参照される。
例)サービスページ
→階層を下げ、導線も限定して配置する。
ユーザーがどこから流入し、どの順序で情報に触れ、どの地点でアクションに至るかを設計することです。
どこから入り、どこへ流し、どこで決断させるか。この流れを意図して設計することで、情報構造と意思決定のプロセスが結びつきます。
導線は単なるリンクのつながりではありません。閲覧の順序、理解の段階、判断のタイミングを含めた体験全体の流れです。
例えば、資料請求や問い合わせを主目的とするWebサイトでは、トップページからサービス概要、事例、料金といった理解に必要な情報を段階的に配置し、最終的に問い合わせや相談へ到達する導線を設計します。一方、採用を主目的とするWebサイトでは、企業の考え方や働く環境、社員の声といった、将来のイメージがわかる情報を先に提示し、自分事となれば応募や説明会予約へ進む、という流れが中心となります。
このように、どこを入口とし、どの順序で情報を提示し、どこで判断してもらうかは、戦略UXで定めた評価軸によって変わります。
どの機能をどの位置に置き、どの文脈で利用させるかを設計します。
同じ機能であっても、配置や提示の仕方によって、ユーザーの行動や受け取り方は大きく変わります。
例えば問い合わせ機能は、サービス理解の途中に配置されれば検討の一歩として機能しますが、情報が不足した状態で先に提示されれば離脱要因になることもあります。検索機能やFAQは、問題解決を促す主機能として配置される場合と、問い合わせ前の補助として配置される場合とでは役割が異なります。
どの機能を前面に出すのか。
どの機能を補助として配置するのか。
どの段階で使わせるのか。
これらは戦略UXで定めた「目的」「評価軸」「優先順位」に従って決まります。問い合わせ獲得を主目的とするのか、既存顧客対応を優先するのか、採用応募を主軸とするのか。どの行動を最終的な到達点とするかによって、主要機能の位置、役割、接続のタイミングが決まります。
Webサイト内の各ページや接点にどの役割を持たせるかを設計します。
それぞれのページや接点には、本来担うべき役割があります。これらを整理せずに個別最適でページを作り続けると、役割が重複し、導線が分断され、全体として機能しなくなります。また、Webサイトの役割はオンライン上だけで完結するものではありません。営業活動、資料送付、説明会、来店、問い合わせ対応など、オフラインの接点とどのようにつながるかによって、各ページの役割は変わります。構造UXでは、Webサイト全体を一つの構造として捉え、各ページと接点の役割を整理し、全体として機能する配置を設計します。
WebサイトやSNSとオフラインの接点を含めて役割を整理する方法として、ボーダレスマップという考え方もあります。
私たちはこの整理手法を用い、Web・システム開発の上流設計を行っています。(Web・システム開発の上流設計支援)
構造化とは、
どの情報を主軸とするのか。
どの導線を主線とするのか。
どの機能をどの位置で使わせるのか。
各ページや接点にどの役割を持たせるのか。
これらを個別の感覚ではなく、評価軸に基づいて共有できる形にする必要があります。
そのために可視化する成果物は、例えば次のようなものです。
これらが揃ってはじめて、構造は共有可能になります。
つまり構造化とは、誰が見ても同じ前提で判断できる設計図をつくることです。
これらの設計情報の多くは最終的にワイヤーフレームへ統合され、実装と運用の判断が可能な設計図へと具体化されます。
ワイヤーフレームや設計資料にUXの意図が反映されず、実装・運用時にさまざまな問題が表面化します。
戦略UX(Why)で定めた評価軸が実体を持たず、結果として一貫性が失われます。
構造UXとは、評価軸を実体構造へ変換する設計です。
その成果物の多くはワイヤーフレームへ統合され、実装と運用がぶれない設計図となります。
また、Webとオフライン接点を含めた全体構造の整理には、K2独自の「ボーダレスマップ」を用いて上流設計を行っています。
Web・システム開発の上流設計支援
更新は
SNSnoteでお知らせしています。