【UXデザイン第4段階: 骨格】ワイヤーフレーム作成の流れ
前回はサイトマップを作り、サイトに必要なページとその構造を決めました。今回はそれぞれのページを作り始める工程です。
Webサイトのページを作る際には、まず骨組みとなる「ワイヤーフレーム」を作成します。
前回ご紹介したように、ワイヤーフレームとは、いわばWebサイトの下書きのことで、上記のような「何を、どこに・どうやって」配置するかを描いた図のことです。
ワイヤーフレームには、写真や色など、詳細なデザインは必要ありません。簡単な図形と線を使って作成をするものなので、手書きやアプリケーションなど、様々な方法で作成ができます。
ワイヤーフレーム作成の流れは大まかに下記のような３ステップに分けられます。
１. ページ内に入れるコンテンツに優先順位をつける
まずはじめに、ワイヤーフレームを作成するページに入れるコンテンツを整理する必要があります。入れるコンテンツを全て列挙したあと、それぞれに優先順位をつけていきます。
2. レイアウトを検討する
1で整理した情報をもとに、レイアウトを行ないます。このとき、コンテンツの配置を決めることを第一に考え、デザイン等は行わないようにします。
3. 操作性の落とし込み
Webページにはリンクやメニュー、スライドなど、ユーザーが操作をする部分が存在します。このステップではそういったアクションのある部分が、どのように動くのかを決めていきます。
コンテンツの優先度を決め、レイアウトだけを先に行うことで、わかりやすい構造を作りこむことがワイヤーフレームの最も重要な役割なので、デザインをこのタイミングでしないことを意識します。
また、ワイヤーフレームは実際のサイトのかたちがイメージできるため、関係者での認識の擦り合わせを行なったり、ユーザーに触ってもらい、使いやすいUIになっているかの検証を行なう材料としても利用することができます。（プロトタイピングの回を参照）
次回は、ワイヤフレーム作成の３ステップを、例を交えてより詳細にご紹介していきます。
皆さまからのリクエストも募集しています。 Webサイトの構築に関わるこんな情報が知りたい！などご希望がありましたら、是非こちらからリクエストをお願いします！
