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

関連記事

  1. Web関連

    「レスポンシブEメールデザイン」で見込み顧客を一気に獲得!

    最近では持っていない人はいないというくらいスマートフォンを持っている人…

  2. Web関連

    信頼度アップ!離脱率の低いコーポレートサイトへ!!

    こんにちは。ティファナの小島です。コーポレートサイト=自社のWeb…

  3. Web関連

    DMPと3PASってなんだろう

    ども、SEの岸沢です。今回は近年バズワードとなっているDMPと3PA…

  4. Web関連

    ちょっと前にはやったWEBコンシェルジュの今

    コンシェルジュと言えば、思い出すのは高級ホテル。顧客の様々な要望に親身…

  5. Web関連

    iPhoneのアプリでサッカーが上達!?

    とうとうiPhoneのアプリでサッカーが上手くなれる時代がやってきまし…

  6. AI関連

    【人工知能・AI×Webサイト運営】誰だか分からないユーザー情報を集めて、サイト運用のPDCAを回そ…

    多くの企業がWebサイトを運営する理由は、Webからのお問い合わせや売…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    苦情対応はその場だけではない!苦情対応のポイント
  2. SEO関連

    今更聞けないSEOについて知ろう!
  3. Web関連

    Web制作会社の現在・未来について
  4. Web関連

    Androidアプリ開発のステップ
  5. Web関連

    WordPressを使った簡単なオリジナル(っぽい)フォトブログ制作2
PAGE TOP