Web関連

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

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

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

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

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

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デザイン

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    単語の覚え方から実際の利用シーンまで。個人的オススメ英語学習サイト3選

    こんにちは。学生時代、英文学科なのに人見知りすぎて留学生とコミュニケ…

  2. Web関連

    CMSとしてのWordPress導入 その2

    前回のコラムではWordPressの導入から、自作テーマの作成、簡単な…

  3. Web関連

    「紙の本、読んでますか?」デジタルファーストとブックラスト

    毎朝の通勤時間、いつも耳に流れているロックンロール…

  4. Web関連

    今からでも遅くない!ECサイトについて学ぶ ~ショッピングカート編~

    以前のコラムに続き、ECサイトの基礎的な部分の解説をしていきたいと思い…

  5. Web関連

    誰でもデザイナー気分!無料スマホアプリ「Fotor」!

    私は石鹸にはこだわりを持っているのですが、なんといっても一番のお気に入…

  6. Web関連

    日本の暦ってステキ ~3月3日について考えてみる編~

    こんにちは。ティファナコラム編集部 担当の遠藤です。みなさん、今日は何…

おすすめ記事

最近の記事

  1. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  2. 約1年間のウィズコロナ生活で大きく変わったもの
  3. スマートストアにより、小売業は激変する
  4. 【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
  5. AI技術の普及により移動も安全に

アーカイブ

  1. SNS関連

    Web制作会社がアパレル業界のSNS戦略について調査してみた
  2. Web関連

    ECサイトでの動画活用で実店舗へご招待!
  3. Web関連

    システム開発で大事なテストプロセス改善のポイント
  4. Web関連

    タイポグラフィによるクオリティアップ
  5. SNS関連

    実名でつながるソーシャルコミュニケーション
PAGE TOP