WNT-Design
Design

小さな変更で大きくUXを改善するマイクロデザインってなに?

小さな変更で大きくUXを改善するマイクロデザインってなに?

※この記事は2015年2月4日に執筆された記事です。


1月も過ぎ2015年のトレンド予想も出そろった頃でしょうか?

王道な話題が語られるなか、数名の海外デザイナーからマイクロデザイン、マイクロコピー、マイクロインタラクション、マイクロUXといった言葉があがっていたのが気になったデザイナーTXです。

このマイクロデザインという言葉、概念としては新しくないのですが、

日本ではまだまだ認知度が低いようなので今回はその”マイクロ”な部分をクローズアップしていきたいと思います。

目次


マクロデザインとマイクロデザイン

マクロ/マイクロデザインを家で例えるなら、マクロデザインはその家の外観でマイクロデザインはドアの種類や階段の形などの細部のこと。

WEBデザインでいうと、マクロデザインがぱっと見の印象や全体のバランスでマイクロデザインは細かい文言や小さな動きなどになります。

その細かい文言がマイクロコピー、小さな動きがマイクロインタラクションと呼ばれています。
それらがマクロなデザインでは解決できなかった問題を解決し、ユーザビリティを改善することによってもたらされるUXやコンバージョンの大きな向上が近年注目が高まっている理由のようです。


マイクロコピーとは?

マイクロコピーとは、フォームやボタンの文字、エラーメッセージなどあまり熱心に議論されてこなかった主要部分以外のコピーのこと。

特にフォームはコンバージョンに直結する部分。

入力途中で煩わしくなったり、入力後のステータスが分からず途中で離脱した経験、みなさんおありですよね?
マクロデザインでは改善しがたいこの問題、ユーザー目線でちょっとしたマイクロコピーを追加するだけで離脱率を下げ、コンバージョン率を飛躍させたり、さらにはサービスイメージを良くする事まで出来てしまいます。

img_design_1500203_01

※Shopifyでは作成するストア名を入力する際に「心配しないで、ショップ名は後からでも変更可能です。」というコピーが表示されます。
後で編集可能なのか分からず、ストア名を何にしようか迷ったあげく、「また時間がある時に考えよう…」と離脱するユーザーをなくし、「それならとりあえず登録しとくか」とスムーズに次のステップに進んでもらえます。

img_design_1500203_02

※最近多いSNSを使ったサービスログイン。画期的ではあるものの、サービスを利用すると自分のSNSページに何かポストされてしまうのではないかと敬遠しがち。
そこでMediumでは、「許可なくSNSにポストする事はありません。」と明記。さらに詳しい情報へのリンクも設置しています。
これがあるのとないの場合での離脱率の違いは想像にかたくありません。

コンバージョンを改善したいという場合、デザイナーはボタンの色や形、大きさなどにこだわってしまいがちですが、そもそも何がコンバージョンを阻害している理由なのかを改めて検討する必要があるのではないでしょうか?

さらに、ユーザーをイラっとさせがちな404ページやエラーメッセージもユーモアを交えることで、事務的な通知がより人間味のあるコミニケーションに変わります。

img_design_1500203_03

※デザイナーおなじみのポートフォリオサイトDribbbleでは、404ページがエアボールに。。
dribbbleらしいバスケットボールにちなんだユーモアに、おしゃれだけども404だけに哀愁のある画像がユーザーのストレスとうまい距離感を保ちつつポジティブなUXに変えてくれます。

このように考えると、デザイナーにとって作業的になりがちなフォームなどのデザインも、楽しくかつ意義のあるものになるのではないでしょうか?

普段、クライアントからの入稿やディレクターに任せてしまいがちなコピーですが、文字・画像・形がグラフィックの基本構成要素であるならば、もちろんコピーもデザインの一部であり、より良いユーザビリティのために考慮されデザインされていなくてはならないことをデザイナーを含め制作メンバー全員が改めて認識しなければなりません。

「ラベリングは何でもいいよ」というような同僚がいた場合は、かのチャールズ・イームズが唱えた名言をそっと伝えましょう。

ディテールは決して小さな部分ではない。ディテールがデザインを作る。

はい。
しかし、マイクロコピーも万能ではないので、デザインで解決すべき問題とコピーで解決すべき問題を混同しないよう考慮が必要です。


マイクロインタラクションとは?

マイクロインタラクションとは、ボタンをオーバーした際のちょっとしたアニメーションやフォームに入力した際のポップアップなどの何かしらのトリガーによって引き起こされるアクションのこと。

最近のクオリティの高いサイトには必ずといっていいほど、アニメーションやビデオなどのUXを意識したギミックが盛り込まれています。

img_design_1500203_04

※マクロ/マイクロインタラクションやバックグランドビデオなど随所にインタラクティブな要素がちりばめられたTrippeoのサイト。

WEBサービス使用開始時に画面をナビしながら説明してくれるダイアログや、スクロールした時のちょっとしたアニメーションなどマイクロインタラクションはユーザーの興味を惹き付けるだけでなくユーザビリティを改善し、そのサイトが表現したいトーンをより印象的に伝えることができます。

img_design_1500203_05

※Mélanie Fのサイトでは、動く図形やタイポグラフィのアニメーションを使ってブランドの雰囲気をより印象的に表現しています。

今年のトレンドとして多くあがっていたGoogleのマテリアルデザインは、このマイクロインタラクションにも触れた包括的なデザインルールとなっている所が、フラットデザインなどのトレンドとは決定的に違うところです。

このあたりは、制作の早い段階から積極的にプログラマーやプランナーとコミニケーションをとってデザインしていきたいところです。その為にもinVisionなどのプロトタイピングツールの活用が今後必須となってくるのではないでしょうか?


マイクロデザインとブランディング

冒頭でも述べたように、マイクロコピーやマイクロインタラクションという言葉自体は新しい概念ではありません。
では、なぜマイクロデザインが今再び注目されているのでしょうか?

その答えの一つに、ブランディングというキーワードがあげられます。
近年、セルフブランディングという言葉が使われるようになったように、ソーシャルネットワークなどの普及を受けて、個人でサイトを運営し自らのブランディングを行う人が増えています。

img_design_1500203_06

※Barlas Apaydinさんのポートフォリオサイト。404ページもしっかりデザインされています。ちなみにWebNAUTの404ページはこちら

また、スタートアップなど勢いのある企業の台頭とともに、その他企業も新しいブランディング手法を求められています。

img_design_1500203_07

※同一名のユーザーが既にいた場合、「既に同じ名前のユーザーがいます。もしかしたら君のevil twinかもね。気味悪い。」と、くだけたフレンドリーなメッセージを表示。ただ単にエラー通知をされるのとは違ったコミニケーションが生まれると同時に、企業の”性格”の様なものを感じさせます。

SquarespaceなどのWEBサイトジェネレーターやBootstrapなどのフレームワークの普及により均一化されていくWEBサイトの中で、個性を表現する事はより難しくなっているように感じます。
かといって、奇をてらったデザインはユーザビリティを大きく損ねかねません。

そこで、ユーザビリティを損ねるどころか逆に改善しつつオリジナルにカスタムしたブランドボイスを発信できるマイクロデザインがブランディングツールとして注目されているのではないでしょうか?また、その気の効いたギミックがソーシャルでバズりやすいという2重の効果もあります。


まとめ

ということで2015年、マクロなデザインが固まったら、マイクロデザインまでユーザビリティやブランディングを考え抜いて継続的に改善し、ユーザーを引き込むコミニケーションのできる性格をサイトに持たせていく。
そんなサービスがこれからユーザーの支持を集めていくのではないでしょうか?

マクロからマイクロまで一環してデザインされた時にUXは最大化されるのだと思います。
では、最後は定番のあれで締めましょう。

神は細部に宿る    —ミース・ファン・デル・ローエ
thumbnail_b_design_150204

記事が気に入ったらシェアしよう

この記事を書いたメンバー

記事の更新をお知らせします!

  • 採用情報

    採用情報

    記事を読んで興味を持った方、
    ビーワークスの考え方に共感した方、
    一緒に新しいデザイン、創りませんか?

  • 制作実績

    制作実績

    日々、制作実績を更新中!
    ビーワークスの多様な実績をぜひご覧ください。

  • 天秤座
  • 蠍座
  • 射手座