Web関連

モックアップ主導のUI・UXの検証!デザインはこうして着手!

0

皆さんはホームページ制作をするとき、どのように進めていますか?

基本的な進め方として、ワイヤーフレームを作成しデザインを作って、コーディング。

簡単に言ってしまうとこのような進め方をされている方が多いと思います。

また、最近はマルチデバイス対応をしなければいけないこともあり、

UI・UXをとても重視して作らなければいけません。

大変になりましたね。。

そこで、今回は上流工程である、画面設計~デザインまでの制作についてUI・UXを考えながら進められる

モックアップ主導の制作の進め方をご紹介しようと思います。

 

モックアップ主導の制作とは

画面設計をしていく上で、まずどのようなプロセスが必要なのか知りながら進めなければいけません。

多くの場合に採用されるUI設計のプロセスは、ワイヤーフレームから画面の詳細設計を行っていくことが多いです。

しかし、ワイヤーフレームでの検証ステップを踏まないまま、画面の詳細設計を行っていくと

どのようなUIができるのか想像がしにくく、最悪は作りなおさなければいけないかもしれません。

そこで、モックアップ主導のUI設計を取り入れることで効率よく設計することができます。

この方法は、建築業界でも行われていることで、まず模型で検証を行っていきます。

そうすることでなるべく早くユーザビリティテストができ、

様々な人の意見も取り入れることができるので最も効率のよい設計方法として使われています。

では実際に、どのような進め方をするのか説明しましょう。

1.スケッチ

レイアウトの考察をするために、ラフスケッチをします。deguchi_2015_11_02_02.jpg

これは、大まかな下書きとしてどういう画面が必要か案を出します。

スケッチでは、細かい縦横比などは気にせずどういうパーツが必要なのか

どんなレイアウトパターンが必要なのかを出すためにありますので、

紙とペンが必要になります!

2.モックアップ

ここでは、簡単なデモを作っていきます。

今までは、ワイヤーフレームを作り細かな余白や画面のレイアウトをプロダクトレベルに近い精度で作らなければいけませんが、

ここにとても時間がかかり作業工程まで入るのはとてももったいなく感じます。

なので、スケッチである程度描いたレイアウトを用いて動くモックアップを作り、

何度もWEBサイトをユーザー視点で検証していくことで、精度の高いものができます。

モックアップで完成したものに色をつけ、形を整えて行くと完成になります。

モックアップツールのご紹介

モックアップを簡単に作るために、最近ではアプリが出ていたりします。

面白く作れるアプリを一つご紹介したいと思います。

POP(最終閲覧日:2016/02/01)

POPというアプリは、AndroidでもiOSでも配信されているアプリです。

このアプリの特徴は、紙に書いたスケッチをPOPで撮影し画面をつなげていくと紙に書いた画面が操作できるというアプリです。

打ち合わせの中で描いたスケッチをそのまま動かせるとすぐに検証に入ることができるので時間短縮にも繋げられそうですね!

よかったら無料なので、ダウンロードしてみてはいかがでしょうか。

終わり

皆さんもホームページに触れる機会が多くなって来ていると思いますので、

使いやすいホームページとは、どういうところなのかを考えて見直ししてみてはいかがでしょうか。

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

0

オンライン学習のメリットとデメリット前のページ

もう利用した?「omni7(オムニセブン)」から学ぶ次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    今年こそ痩せよう!選りすぐりダイエットアプリ3選

    この季節は、お花見や歓迎会など様々なイベントがあり、食べ過ぎてしまった…

  2. Web関連

    ECサイトでの動画活用で実店舗へご招待!

    こんにちは!最近風邪のフルコースを堪能してしまった中條です。喉の痛…

  3. Web関連

    HTML5の最新技術を知ろう!~その2~

    html5の技術を使ったトレンドを紹介させてもらいます。今回紹…

  4. Web関連

    末恐ろしい。小学生が開発したスマホアプリ

    今回はサイバーエージェントが実施している小学生向けのプログラミングス…

  5. Web関連

    写真も進化!WEBサイト制作に活用できる動画と組み合わせた写真

    最近高性能なカメラが市場に出回っていますね。とても嬉しいです!…

  6. Web関連

    正しい言葉遣い、出来ていますか?

    社会人には、正しい言葉遣いの知識が必須です。同じ会社の先輩、上司に…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    洗えるスマホ発売による可能性
  2. Web関連

    サイト制作の見積もりに必要な事、知ってますか?
  3. Web関連

    ついつい読みたくなるwebサイトのコラムを書くコツ ~作文 3つの基本編 ~
  4. Web関連

    健康診断を行う理由と未来
  5. Web関連

    ネット上だけではない?あなたの会社はセキュリティ対策できていますか?
PAGE TOP