皆さんはホームページ制作をするとき、どのように進めていますか？
基本的な進め方として、ワイヤーフレームを作成しデザインを作って、コーディング。
簡単に言ってしまうとこのような進め方をされている方が多いと思います。
また、最近はマルチデバイス対応をしなければいけないこともあり、
UI・UXをとても重視して作らなければいけません。
大変になりましたね。。
そこで、今回は上流工程である、画面設計～デザインまでの制作についてUI・UXを考えながら進められる
モックアップ主導の制作の進め方をご紹介しようと思います。
モックアップ主導の制作とは
画面設計をしていく上で、まずどのようなプロセスが必要なのか知りながら進めなければいけません。
多くの場合に採用されるUI設計のプロセスは、ワイヤーフレームから画面の詳細設計を行っていくことが多いです。
しかし、ワイヤーフレームでの検証ステップを踏まないまま、画面の詳細設計を行っていくと
どのようなUIができるのか想像がしにくく、最悪は作りなおさなければいけないかもしれません。
そこで、モックアップ主導のUI設計を取り入れることで効率よく設計することができます。
この方法は、建築業界でも行われていることで、まず模型で検証を行っていきます。
そうすることでなるべく早くユーザビリティテストができ、
様々な人の意見も取り入れることができるので最も効率のよい設計方法として使われています。
では実際に、どのような進め方をするのか説明しましょう。
1.スケッチ
レイアウトの考察をするために、ラフスケッチをします。
これは、大まかな下書きとしてどういう画面が必要か案を出します。
スケッチでは、細かい縦横比などは気にせずどういうパーツが必要なのか
どんなレイアウトパターンが必要なのかを出すためにありますので、
紙とペンが必要になります！
2.モックアップ
ここでは、簡単なデモを作っていきます。
今までは、ワイヤーフレームを作り細かな余白や画面のレイアウトをプロダクトレベルに近い精度で作らなければいけませんが、
ここにとても時間がかかり作業工程まで入るのはとてももったいなく感じます。
なので、スケッチである程度描いたレイアウトを用いて動くモックアップを作り、
何度もWEBサイトをユーザー視点で検証していくことで、精度の高いものができます。
モックアップで完成したものに色をつけ、形を整えて行くと完成になります。
モックアップツールのご紹介
モックアップを簡単に作るために、最近ではアプリが出ていたりします。
面白く作れるアプリを一つご紹介したいと思います。
POP（最終閲覧日：2016/02/01）
POPというアプリは、AndroidでもiOSでも配信されているアプリです。
このアプリの特徴は、紙に書いたスケッチをPOPで撮影し画面をつなげていくと紙に書いた画面が操作できるというアプリです。
打ち合わせの中で描いたスケッチをそのまま動かせるとすぐに検証に入ることができるので時間短縮にも繋げられそうですね！
よかったら無料なので、ダウンロードしてみてはいかがでしょうか。
終わり
皆さんもホームページに触れる機会が多くなって来ていると思いますので、
使いやすいホームページとは、どういうところなのかを考えて見直ししてみてはいかがでしょうか。
