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

関連記事

  1. Web関連

    なるほど!気付けばそこにいる、ゲーミフィケーションについてまとめてみる

    「んん?...げーみふぃけーしょん?」と言う方もいれば、「ああ、ゲーミ…

  2. Web関連

    iPhone 6sが気になる!!

    iPhone 6sが気になる!!アップルからiPhone 6sが発売…

  3. Web関連

    スマホサイトが超快適に!Google「AMP」とは

    Google「モバイルフレンドリー」のアップデートからもうすぐ1年が経…

  4. Web関連

    【必見!】時短に便利なブックマークレットまとめ

    みなさん、「ブックマークレット」をご存じですか?❛❛ブックマークレッ…

  5. Web関連

    CtoCサービスから学んだ顧客満足度

    最近CtoCのフリマアプリやクリエイターの作品販売のサービスが増えてま…

  6. Web関連

    医療出版業界のWebコンバージョンアップ戦略

    ティファナは、業種を絞らず様々なクライアントとお付き合いをさせて頂いて…

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    スマホサイズの翻訳機など、AI(人工知能)を活用した最新自動翻訳サービス
  2. Web関連

    コンセプトのないデザインは味のない料理
  3. Web関連

    進化する電子マネー
  4. Web関連

    【Webマーケッター必見】Webサイトへの流入数が増えるとお問い合わせ数が減った…
  5. Web関連

    初めてWEB担当者になったら、まずやること -サイト運用編-
PAGE TOP