サービスモックアップを作る時に守るべき8つのルール

[ 読了時間:3分 ]

きょうは、「サービスモックアップ」をつくる際に
気を付けていることをまとめてみました。

 

※サービスモックアップとは・・・

f:id:osabecchi:20130402210915j:plain

デザインを入れる前の機能レイアウトのことです。 

 

①「ユーザーを迷わせないこと」がゴール

サイトで必要なすべての機能が使いやすく配置されたモックを作成することが目的です。

f:id:osabecchi:20130402213753p:plain

絶対に「迷わせない!」
そう思いながら作業をするのがおすすめです。

 

②モックのサイズは必ず実寸大でつくろう

実際にデザインをしてみると、「文字数が入りきらない!」ということはよくあります。

f:id:osabecchi:20130402215413p:plain

「箪笥を買ったけど、部屋のドアを通らない」

なんてことにならないように、モックの段階から実寸大でレイアウトしていくことがポイントです。

 

③一つの画面に、機能を載せすぎない

作り出すとついつい、一つの画面にあらゆる機能を詰め込んでしまいます。

f:id:osabecchi:20101123113530j:plain

しかし機能を一画面に詰めていけばいくほど、ゴチャゴチャした使いづらいサービスになっていくことが多いです。

f:id:osabecchi:20130402214012j:plain

思い切って機能を別画面に配置してみるのがおすすめです。きっと一気に使いやすくなるモックができるはずです。

 

④デザイナーに必ず意見を求める

モックは、デザインの下書きです。

しかし自分ひとりで作っていると、デザイナーの発想を刺激しない下書きになってしまうことがあります。

f:id:osabecchi:20130402211901p:plain

最大限デザイナーのアイデアをくみいれてモックアップをつくっていきましょう!

 

(例)画像を大きくしたほうがインパクトがある!という意見など

※注意:とはいえ常に使いやすさが最優先です。

 

⑤モックに色はつけない

f:id:osabecchi:20130402212128p:plain

わたしの場合だけかもしれませんが、本当に色のセンスがないんです。。。涙

 

モックに色をつけてしまうとデザイナーの発想を邪魔してしまいます。f:id:osabecchi:20130402212112p:plain

自由な発想でデザインしてもらえるように、白黒でモックを作るよう心がけています。

 

⑥意外と忘れがちなこと

作っていると忘れがちなポイントを並べてみました。

・前開いていた画面に戻れる誘導がありますか?

・文字のサイズはサイト全体を通して均一ですか?

・設定画面や利用規約画面などのサブ的なページも作っていますか?

・投稿の編集などの機能がもれていないですか?

 

⑦短時間で仕上げてデザイナーに製作してもらう

時間をかけても「世の中で最も使いやすいUI」が完成するわけではありません。

「使いやすさ」には何通りもあるからです。

つまり考えれば考えるほど、
様々なアイデアがでてきます。

しかし、これではいつまでも製品が完成しません。

期日を決めて一気に作りきるのがおすすめです!

 

⑧自分に正直になろう

f:id:osabecchi:20130402212304p:plain

少しでも「使いづらいかも?」と思ったら
それは必ずといっていいほど、「使いづらいUI」です。

修正は非常に面倒ですが、
もっといい製品ができるチャンスになるでしょう!