MVP（Minimum Viable Product）とは？実践するメリットと検証方法
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 MVP（実用最小限の製品： minimum viable product）という考え方が広まったのは少し前のことです。MVPはFrank Robinson氏によって定義され、起業家であり学者のSteve Blank氏と、リーンスタートアップ（Lean Startup）を提唱したEric Ries氏という２人のプロダクトデザインの権威によって有名になりました。 MVPとは？ 簡単に定義すると、MVPとは、製品を提供する上で必要最小限の機能のみをもつ、もっともシンプルな製品です。しかし一般的には、「顧客価値があり、利益を生み出せる最小限のもの」と考えられています。 MVP戦略においては、価値基準を理解することが決定的に重要です。たとえば、車輪は車輪だけではユーザ
ボタンのラベルや配置順序のベストプラクティスとは | UX MILK
サイトやアプリにおける典型的なフォーム（もしくはダイアログボックス）には、通常いくつかのボタンがあります。ほとんどのケースで、ユーザーは２つの選択肢を目にします。１つはユーザーの主となるタスクを表し、一方は付随する副次的なタスク（フォームに入力した内容の取り消しやキャンセルなど）を表します。 この記事ではアクションボタンに関する基本的なUXについて概観し、デザイナーの間でよくある質問である「OKかキャンセル、どちらのボタンが最初にくるべきか」に答えます。 エラー防止 Jakob Nielsen氏のユーザビリティ・ヒューリスティックによると、「丁寧なデザインによって、最初の段階で問題が起こることを防止する」とあります。ユーザーが突発的に間違ったものを選択してしまうかもしれない状況を排除できるように努力する必要があります。 濃淡で視覚的な区別をつける ２つのボタンの違いを明確にするために、ボタ
モバイルアプリにおけるナビゲーションUIのデザインパターン
アプリのナビゲーションは、直感的で予測ができなければいけません。新規のユーザーや再訪問したユーザーが、アプリをどのように使ったら良いか迷わないよう、理解しやすくする必要があります。 しかし小さい画面という制限の中で、コンテンツの優先順位を考慮しながら、ナビゲーションを使いやすくすることは非常に難しいです。 この問題に、様々なナビゲーションを使って異なる方法で立ち向かっていますが、多様なユーザビリティの問題に、皆悩まされています。 そこでこの記事では、モバイルアプリの基本的なナビゲーションであるハンバーガーメニュー、タブバーとジェスチャーベースのナビゲーション（タップやフリックを使用したナビゲーション）の３つについて検証し、それぞれの長所と短所を説明します。 ハンバーガーメニュー 画面のスペースは、モバイル上の貴重な商品であり、画面の節約に役立つモバイルナビゲーションのパターンのうち、ハンバ
UXを向上させる５種類のアニメーションの使い方 | UX MILK
Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz。 モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how the user gets from those screens
歴史から考えるフラットデザインとマテリアルデザインの違いとは？
もし私がこれから、フラットデザインとマテリアルデザインの違いが視覚上ごくわずかであると発言しても、不愉快にならないでください。 実際、この話題についてあまり知らない人は、どちらのデザインに対しても、とても良く似ていると思うかもしれません。今回はこの問題を解決するために、両方のデザインにおけるアプローチの違いに焦点を当ててご説明します。 マテリアルデザインにいたる歴史 二つのデザインスタイルについての長い議論を始める前に、それぞれのデザインが持っているルーツを見つけることは理に適っています。多くの人がマテリアルデザインはフラットデザインをベースにしていると信じています。 しかし、どのようにして我々はフラットにたどり着いたのでしょうか？ スキューモーフィズム UIとウェブデザイン用語でスキューモーフィズムは、現実世界にあるものを模倣するアプローチを指します。アップルのリアルな質感、明るさ、派手
英語のUIにおける「Your」と「My」の使い分け
英語におけるUIのラベリングでは「Your」や「My」という言葉がよく使われ、UI要素とユーザーの関係性が直感的にわかるようになっています。言わずもがな、日本語と英語では表現は違ってきますが、この英語の使い分けの考え方は、UIをよりユーザーにわかりやすく整理するヒントにもなるかもしれません。 UIはユーザーの身体の拡張という位置づけなのでしょうか？ それとも全く別の立ち位置からユーザーに対して語りかける存在でしょうか？ これは、デザイナーがメニューなどでラベルを付ける際に、悩む問題です。 もしユーザーの拡張であるならば、ラベルは「My（私の）」という言葉が使われるでしょうし、離れた存在ならば「Your（あなたの）」という言葉が使われるでしょう。 正しい言葉で説明文を付けることで、ユーザーは探しているものを見つけやすくなります。同時に、サイトにより集められたコンテンツと、ユーザーにより作成さ
UIデザインの歴史に学ぶシャドウと奥行きの使い方
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 近年のUIデザインでは、不必要な要素を省き、機能性に焦点を当てるのがトレンドになってきています。デザインの機能面はプロダクトの成功への鍵である一方、その機能面をサポートするという意味で、ビジュアルへの細かい配慮も同じくらい重要です。 この記事では、シャドウなどの視覚的な要素がどのように処理された情報を伝達するものなのかを見ていきましょう。 UIの進化 : 疑似3Dからウルトラフラットデザイン インターフェイスにおける奥行きの幻覚 ユーザーの見るスクリーンは平らですが、デザイナーやエンジニアたちはスクリーン上の全ての物が3Dにみえるように多大など労力を割きました。疑似3D効果（シャドウ、グラデーション、ハイライト）は、ユーザーが操作可能な動作をひと目でわかるように
アンチパターンと言われるカルーセルを改善するポイント
しかし、サイトのカルーセルは果たしてユーザーの役に立つものなのでしょうか？ それとも、ただコンテンツを収納するための常套手段として利用されているだけなのでしょうか。 この問いを誰かに投げかけたとしたら、カルーセルはアンチパターン（よく陥りがちな避けるべき悪い典型例）だと答えが返ってくるでしょう。カルーセルが良いデザインだと思っていない人もいるのです。 Erik Runyon氏による調査によると、サイトの訪問者のうちの１％しかカルーセル上でクリックしないということが明らかになっており、しかもそのうちの84％の人が最初のスライドをクリックしているそうです。 Jared Smith氏は自身のサイトShould I use a carousel?で、もし選択の余地があるのなら、カルーセルを使うべきではないと言っています。おそらくSmith氏の主張はLee Duddell氏の考えからきているもので、
これからのUXデザインにおけるモーションデザインの重要性
モーションデザインとは空間の関係性や、機能性、あるいは意図を美しく流動的に説明する際に使われます。「モーション」というと大げさに聞こえるかもしれませんが、効果的に使用したものはさりげなく自然なものです。よく考えられたモーションデザインは、従来のデザイン要素よりもよりUXを高めることができるはずです。 今回はモーションデザインの基礎や、いつ、そしてなぜモーションデザインを使うべきなのか、そしてより良いUXのためにどうモーションデザインを使えば良いのかをお話ししましょう。 モーションを基盤としたデザイン モーションは物語を伝えることができます。アプリがどのように構成され、何ができるのかを表現できるのです。モーションはナビゲーションを再定義し、インタラクションに新たな深度をもたらし、より自然な体験を作り出すのです。クリックしたボタン、画面のトランジションのひとつひとつに物語があることを、モーショ
UIデザイン初心者が知っておきたい配色の理論
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 「配色」はデザイナーの持てる手法の中で最も強力な手法の一つで、様々な感情を引き起こせたり、ユーザーの注意を引いたりできます。 ですが、新しいプロジェクトを立ち上げる経験をしたことがある方ならわかるかもしれませんが、プロダクトやサービスの配色を決めるのは非常に難しいものです。 今回は基本の色彩の理論とそれがどのようにUXデザインと関係するのかについてご紹介します。これはあくまでUIやUXのデザインの範囲での色彩の理論で、包括的なデザイン論ではありませんのでご了承下さい。 色彩の理論 色彩の理論には様々な要素がありますが、基本の基本では、補色性、コントラスト、鮮やかさを考慮した色の相互作用において成り立ちます。 補色性は他の色との関係性という点から色を見る方法です。
コンバージョン率を改善する入力フォームにおける10のルール
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 Webやアプリ内のフォームは、ユーザーとの最も大切なやり取りの場の一つです。サービスへの登録や予約、フィードバック、決済処理など、ユーザーと企業間の取引を開始したり、ユーザーいにあらゆる情報を入力してもらうべく、様々なところで使われています。 ユーザーがいかに素早く正確に情報を入力し、求める情報を最後まで入力してくれるかはこのフォームの出来にかかっています。 この記事ではフォームのデザインにおいて、様々なテストやユーザーの声などから導き出された、実用的な施策を紹介します。 1. フォームは論理的に並べる フォームは対話そのものです。従って、普通の会話の様に、ユーザーとアプリの２者間でのコミュニケーションとして表現されるべきでしょう。 質問は直感的な順番にする。ユ
HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
マテリアルデザインに見る機能的なアニメーションの６つの法則
機能的なアニメーションとは、演出のみのアニメーションと違い、その意図が明確かつ論理的に校正された、控えめなアニメーションのことです。それはUIにおける認知的負荷を軽減させ、変化の見落としを防ぎ、そしてよりその空間の記憶を呼び起こしやすくさせ、何よりもUIに命を吹き込みます。 その動きは、増えたり、分かれたり、その形やサイズが変わることで、画面をさらに生き生きと見せることができます。機能的なアニメーションは、ナビゲーション上でユーザーをスムーズに移動させ、スクリーン上の要素の配置の変化を説明し、要素の階層を明確にするために使用するものです。 成功する機能的なアニメーションには、以下の６つの特徴があります。 1. レスポンスがよい UIデザインにおいてビジュアル・フィードバックはとても重要です。なぜなら、ユーザーの認知に対するごく自然な要求に訴えかけるからです。現実世界ではボタンやコントロール
Web制作の作業効率を格段にアップさせる便利なチートシートまとめ
HTML や CSS のタグやプロパティをすべて記憶することはベテランのデザイナーでも難しいものです。しかし、わからないタグやプロパティなどをいちいち検索して調べていると開発に時間がかかってしまいます。そんなときに役立つのがチートシートです。 チートシートを使えば素早く目的のものを見つけ、より効率的な開発を行うことができます。今回は Web 制作を行うときによく使う HTML、CSS、Bootstrap、WordPress、ツールに関するものを紹介します。 HTML HTML5 Cheat Sheet ダウンロードページ HTML5 のタグがまとめられているチートシートです。すべてのタグが簡潔にまとめられており、非常に見やすいです。 The HTML 5 Mega Cheat Sheet ダウンロードページ こちらも HTML5 のタグをまとめたチートシートです。ブラウザ対応、廃止されたタ
より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
