1.0UX TIMEShttps://uxdaystokyo.com/articles菊池 聡https://uxdaystokyo.com/articles/author/satoshi-kikuchi/rich600338<blockquote class="wp-embedded-content" data-secret="3qDbVqJIwU"><a href="https://uxdaystokyo.com/articles/entry-02/">意外とできていない！？成果を出すUIデザイン9つのメソッド</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/entry-02/embed/#?secret=3qDbVqJIwU" width="600" height="338" title="“意外とできていない！？成果を出すUIデザイン9つのメソッド” — UX TIMES" data-secret="3qDbVqJIwU" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2016/05/vol2.png250249美しいデザインや、理路整然と情報が並べられたサイトが、必ずしも成果の出るサイトであるとは限りません。頭では理解しているつもりでも、作る側になると意外とできていないことが多いのではないでしょうか。そこで今回は、成果を出すUIデザイン9つのメソッドをまとめました。サイト設計やデザインをするとき、もしくは改修時に是非見返してみてください。 成果を出すUIデザイン9つのメソッド 1)誰にでも伝わるものをデザインする 突然ですが、こちらのアイコンをご覧ください。ひと目で何を表しているのか、わかるでしょうか。 アイコンを押すと何が表示されるのか、イメージできなかったという人もいるのではないかと思います。 アイコンやボタンなどの要素は、誰にでも伝わるものをデザインしなければなりません。クリエイティビティを重視するあまり、デザインを必要以上に省略する、変にひねるなどといったことはやめましょう。 2)よく使われる要素は使いやすい場所に配置する ログインやログオフ、設定など、ユーザーが頻繁に使う要素は配置に気をつけましょう。 よく使われる要素を深い階層にしか置いていないと、ユーザーがサイト内を探しまわることになります。ユーザーにストレスを与えてしまうのです。 ユーザーが「やりたいこと」をすぐに実行できるよう、よく使われる要素は常にユーザーが使いやすい場所においてあるべきです。 3)共通要素は最初にデザインする ナビゲーションやボタンなど、各ページに共通している要素は最初にデザインするようにしましょう。 共通要素にもかかわらず、ページによって配置場所、色や形などが異なると、ユーザーは迷ってしまいます。「ナビゲーションが右にあったり、左にあったりする」「TOPページでは四角い赤いボタンだったものが、第二階層ではテキストリンクになっている」といったケースは悪い例です。 最初に共通要素のトンマナを決めてしまえば、ページによってパーツのデザインや配置がバラバラになったりすることもありません。 4)ユーザーは学習しようとはしない ユーザーは、サイト上で常にトライアンドエラーを繰り返しながら次に進んでいます。しかし、自分が通ってきた道は覚えていません。ユーザーはサイトの使い方を自ら学習するのではなく、行き当たりばったりで使っているのです。 ユーザーをスムーズにゴールに誘導できるよう、次の4つの要素をうまく使ってみましょう。 イラストレーション デモ インラインヒンツ アイコン なお、インラインヒンツとはフォーム入力を補助する目的で、入力ボックスの下に入れる補足のことです。具体的には以下のようなものがあります。 画像引用元：http://download.oracle.com/tech/blaf/specs/pagetemplates/helptemplates/inlinemsgtips_ex_hints.gif 5)説明のいらないインターフェイスにする 説明がなくても、ユーザーが順番通りに利用できるインターフェイスを設計しましょう。デザインを複雑にすることは避け、極力単純にしていきましょう。そして、常にサイトを使うユーザーの状況や心理を意識しながら作業することが大切です。 6)ミスを防ぐ仕様にする ユーザーのミスを事前に防ぐ仕様にしましょう。 例えば、削除ボタンを押したときに、「本当に削除しますか」と確認するといった調子です。 こうすれば、ユーザーが誤って押してしまっても一発で消えて困ることがないでしょう。 7)一度に伝えることは最高7つまでにする 心理学者のジョージ・ミラーは、人間が判断をともなわない状況で記憶できるものは約7つ（プラスマイナス2つ）までしか記憶できないという『ミラーの法則』を提唱しています。 これはサイト上でも同じことです。何かを一度に伝える場合は、7つに絞りましょう。もちろん、少なければ少ないほうがよいのです。 8)全部読んでもらえると思うな ページに情報をいっぱい盛り込んだからといって、ユーザーが上から下まで丁寧に読むわけではありません。ユーザーは、まず全体を見て次に先に見出しだけを拾い読みしてから、必要な情報だけを読んでいきます。 全てを見てもらえるわけでないことを念頭におきながら、伝えたいことが伝えられるデザインにしましょう。 9)不要な要素は排除する 余分なものは極力削り、メッセージをできるだけクリアにしましょう。 “Signal-to-Noise Ratio”という言葉をご存じでしょうか。もともとは電気用語だったものをUXに応用して使っている言葉です。 “Signal”は重要なもの、 “Noise”は余計なものを指しており、ノイズが多くなると情報がうまく伝わらなくなるという意味です。つまり、余計なものは極力排除しましょうということです。 サイトの中では適切なチャート、ラベルやアイコンなどを選び、要らないものは削ってシンプルにするべきなのです。 こちらをご覧ください。左に比べて右はごちゃごちゃしてわかりにくくなっています。 重要な情報は金額なのですが、右はスペックなどその他の情報がたくさん記載されています。 あれもこれもと情報を載せる前に、その情報が本当に必要かを問うてみてはいかがでしょうか。 ユーザーにとって本当に必要な要素は何か 成果を出したいがために、伝えたいことが増えたり、色々な要素を追加していったりしていくうちにデザインが複雑になってしまうことがあります。しかし、ユーザー側からすれば、欲しい情報以外はすべてノイズ。判断や行動を邪魔する要素になってしまうのです。 また、本当に伝えたいことを強調するには、それ以外のものがシンプルである必要があります。サイト全体が複雑になっていると、どこが強調されているのかも伝わらなくなる恐れがあるのです。 ユーザーをきちんとゴールに導くためにも、まずユーザーにとって本当に必要な要素は何かを見極めることからはじめてみてはいかがでしょうか。 一部文章・画像引用元：IMNOW『User Interface Design Concepts You Need To Know About』