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

関連記事

  1. Web関連

    毎日見たくなるオウンドメディアサイトとは?

    自社でメディアを持つことを指す言葉「オウンドメディア」、今では多くの企…

  2. Web関連

    意外と知らない!?レスポンシブデザインにある落とし穴(Media Query編)

    私の隣にはデザイナーがいます。しかもかなり若いです。19歳。若過ぎる!…

  3. Web関連

    抑えるべきはココ。顧客満足度を向上させる秘訣

    前回のコラムでおいしかったウニのお話をしましたが、名前分かりました!「…

  4. Web関連

    身の回りにあふれるビッグデータとは?

    新聞やニュースではビッグデータという言葉をよく耳にします。なにやら曖昧…

  5. Web関連

    WEBサイトの更新が楽々に? CMS導入のすすめ

    Webの担当者の皆さんは、WEBサイトの更新を行うとき自分の社内で行っ…

  6. Web関連

    スマートフォンサイト制作の気になる事、あれこれ

    こんにちは。モバイルサイト・シニア・アドバイザーの藤田です。嘘です。コ…

おすすめ記事

最近の記事

  1. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  2. 人が対応するのが正しいの?DX(デジタルトランスフォーメーシ…
  3. 人間拡張って聞いたことがありますか?デジタル化が背中を押して…
  4. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  5. 【初心者向け】ここに注目!スマートフォン用バナーを作成しよう…

アーカイブ

  1. SEO関連

    web制作には欠かせない、SEOとオウンドメディア
  2. Web関連

    良質な情報配信で顧客獲得。オウンドメディアの役割とは
  3. SNS関連

    SNSマーケティング
  4. AI関連

    【人工知能(AI)×インバウンド】アニメーションキャラによる接客で顧客満足度アッ…
  5. Web関連

    セミナー開催で、新規顧客の獲得!…は思ったほど楽じゃない。
PAGE TOP