レスポンスが気持ちいいボタンのUIアニメーション10選
アプリやサイトなどのボタンや小さいディテールで、気持ちのいいアニメーションがあると目を引きます。 過剰なアニメーションはユーザーの目的の妨げになるので気をつけたいところですが、うまく活用すればユーザーはあなたのプロダクトをもっと触れたいと思う要素にも成り得ます。 とはいえ、いざこういったものを作るとなると、どう動かせばいいのかわからないものです。そこで今回はそんなアニメーションのインスピレーション……
アプリやサイトなどのボタンや小さいディテールで、気持ちのいいアニメーションがあると目を引きます。 過剰なアニメーションはユーザーの目的の妨げになるので気をつけたいところですが、うまく活用すればユーザーはあなたのプロダクトをもっと触れたいと思う要素にも成り得ます。 とはいえ、いざこういったものを作るとなると、どう動かせばいいのかわからないものです。そこで今回はそんなアニメーションのインスピレーション……
レスポンシブなウェブデザインを洗練する中で、私たちは分量(=行の長さ)と、人の読み方の関係性を重視してきました。「理想的な分量」を考えるのが当たり前になったことにより、「大きい画面にはフォントサイズを大きく、そして小さい画面にはフォントサイズを小さくする」といったことが推奨されるようになりました。確かに、適切な分量はユーザーの閲覧体験を向上させますが、それは優れたタイポグラフィーに対する規則の1つ……
モバイルフォームのボタンをどこに置くかは、ユーザーのタスクの完了と効率に影響します。もしボタンがユーザーが予期するところに置かれていなければ、ユーザーはタスクを放棄し、フォームから離れてしまうかもしれません。ボタンを探すのに余計に数秒かかっただけでも、ユーザーはイライラし、戻るボタンを押すことがあります。そのため、フォームの入力を完了したら、ボタンはユーザーの目の前に表れるべきです。多くのモバイル……
削除したくないものを消してしまったときのいらだたしい気持ちは誰もが知っているでしょう。削除してしまったものはたいていの場合は復元できず、ユーザーはまた一からスタートしなければなりません。このことを防ぐため、何かを削除しようとするときには確認用のウィンドウを表示することが大切です。ところが、確認用のウィンドウがあっても、ユーザーは間違って削除してしまうことがあります。例えば、確認用のダイアログを読ま……
通常、ユーザーがインターネット上のテキストを一言一句丁寧に読むということは、よほどコンテンツに興味がある場合以外、ありえません。ほとんどの場合、ハイライトされたキーワードや、意味あり気な見出し、短い段落やリストにざっと目を通す程度です。自分が探し求めている情報を探すのに必死で、それ以外の関係ない情報は全部飛ばしてしまいます。ですから、簡単に飛ばし読みできなさそうな文章や、ユーザーにとって無関係そう……
スキューモーフィズムはフラットデザインへの道を示し、フラットデザインは… 何かその中間的なものへの方法を示します。近年採用されているテクニックの1つに、パララックス・スクローリングと呼ばれる、サイトに奥行きの錯覚を加える視覚効果があります。 本記事では、パララックスを皆さんのサイトに採用する際に検討するべき項目をいくつかご紹介します。フォアグラウンドとバックグラウンドの両方のコンテンツを異なる速度……
ビジュアルの一貫性は非常に重要で、視覚的に統一感のあるページを構築することは暗黙の了解となっています。この記事では、バランスとビジュアルの一貫性をUIに取り入れようとする際に参考になる情報をまとめてみました。 当サイトの最初のゲスト記事として、OSSMedia Ltd.のデザイナー、Ava GarciaがUIデザインにおけるビジュアル的一貫性の重要性と、その一貫性を達成しやすくするためのいくつかの……
「存在しさえすれば、どこに配置されていようとかまわない」UXを理解していない人の多くが、ボタンのことをこう考えがちです。UXでは細部こそが重要であり、特にボタンの位置は重要です。ボタンはドアノブのようなものです。ドアノブが一定の位置についてなければ、効果的にドアを使うことはできません。常に決まった位置についているからこそ、手がありさえすれば別に考えたりしないでドアを通ることができるのです。ドアノブ……