デザインにおける仮説立案と画面設計をスムーズにつなぐ構造設計の仕方

ウェブサイトやサービスプロダクトを作成する際、仮説検証をせずに自分たちの都合やイメージに頼ってしまうと、実態とかけはなれたデザインになってしまったり、修正が多発する可能性がある。

そのため、ウェブサイトやサービスプロダクトの設計に入る前に調査を行い、調査結果を基に仮説を立て、ワイヤーフレームやプロトタイプを活用して検証するプロセスが極めて重要になる。

しかし、調査結果をそのまま画面設計に反映すると、機能の見落としやフローの複雑化が発生しやすく、結果として修正が多発するケースも少なくない。こうした問題を防ぐためには、ワイヤーフレームを作成する前に構造設計のステップを挟むことが効果的。

構造設計は、プロダクト全体の骨格を形成し、設計プロセスをスムーズに進める基盤を作るもの。人体にたとえると、次のようになる。

・骨格：構造設計（ストラクチャーデザイン）

・血肉：画面設計（インフォメーションデザイン）

・肌や装飾：表層設計（ビジュアルデザイン）

ウェブサイトやサービスプロダクトを設計する際は、まず骨格を明確にしてから、各要素の配置や見せ方を決め、抜け漏れや後戻りを減らしながらブランドやサービスの特徴を反映したデザインを作り上げる。この手順で設計を行うと、ユーザーにとって使いやすく、視覚的にも分かりやすいUIになり、精度の高いウェブサイトやプロダクトを効率的に作成できる。

構造設計には、オブジェクト指向（OOUI）とタスク指向の2つのアプローチがある。オブジェクト指向は、ユーザーが操作対象（オブジェクト）を選び、それに対して実行可能なタスクを提示する設計手法を指す。

例えば、ECサイトで「商品」というオブジェクトを選び、その後「カートに追加」「レビューを確認」といったタスクが実行できるようにする設計がこれに該当する。この方法は、ユーザーの状況や目的に応じた柔軟な操作ができる。

一方、タスク指向は、特定のタスクを決められた順序で進める設計手法で、複雑な手続きや多段階の操作が必要な場合に有効。たとえば、ローン申請や会員登録のプロセスでは、ユーザーが迷わず正確に進められるようにステップを案内すると良い。

特に、操作に慣れていないユーザーに対して効果を発揮する。これらの手法を適切に組み合わせることで、目的に応じた使いやすいサイトやサービスになる。構造設計のステップは、次の手順で進めると良い。

1. 「〇〇で⬜︎⬜︎したい」というユーザーニーズを整理

2. 〇〇を「オブジェクト」、⬜︎⬜︎を「タスク」として分類

3. オブジェクトを一覧表示（コレクション）と詳細表示（シングル）に分類

4. それぞれの画面に必要なタスクを洗い出す

この手順ですすめると、必要な画面とそこで中心となる内部要素が明らかになり、ユーザーが目的達成しやすい構造を作ることができる。