骨格フェーズは画面上に「何を」「どこに」「どのように」表示するのかを考える。ユーザーの使い方を予測し、効率を上げる画面の配置や情報提供が重要になる。ユーザーの立場から、読みやすさや使いやすさを十分に検討しよう。

 前回はユーザーエクスペリエンス(UX)をデザインするための各フェーズを示した「JJGの5階層モデル」のうち「構造フェーズ」について取り上げました。構造フェーズでは、戦略フェーズで定義したコンセプトやペルソナ、要件フェーズで決めたシステムの機能や要件に基づきシステム全体を見渡して、情報構造と導線を設計しました。

 今回は構造フェーズに続く「骨格フェーズ」を取り上げます。骨格フェーズでは画面レイアウトを設計していきます(図1)。

図1●JJGの5階層モデルの「骨格」フェーズ
図1●JJGの5階層モデルの「骨格」フェーズ
[画像のクリックで拡大表示]

 最近はスマートフォンを利用して、Webサイトを閲覧したり、アプリケーションを操作したりする機会が増えています。「あのWebサイトのUI(ユーザーインターフェース)は操作しやすいのに、企業内のシステムのUIはなぜこんなに使いにくいのか」といった意見を、顧客やエンドユーザーから聞くことはないでしょうか。以前と比べてシステムの「使いやすさ」に対する要求が高まっている現在において、目に見える画面や画面内の要素の設計は重要性を増しています。

 骨格フェーズは構造フェーズ同様に、戦略フェーズで定義したユーザー像、要件フェーズで決めた機能要件をよりどころにして、ユーザー目線で段階的に画面を設計することで、使いやすい画面を作成していきます。骨格フェーズの最終的なアウトプットは「ワイヤーフレーム」と呼ばれるものです(図2)。家を建てる際の間取りに相当します。

図2●ワイヤーフレームのイメージ
図2●ワイヤーフレームのイメージ
[画像のクリックで拡大表示]