これで迷わない！Modal、Dialog、Drawerの違い
ベン図で表すと以下のようになります。 （あまり一般的でない名称のコンポーネントも便宜上使用しています。） 以降、詳しく解説します。 Modal Modal は、ユーザに特定のアクションを求めるために、ユーザのインタラクション（操作）を中断させる UI コンポーネントです。 難しい表現をするならば、ユーザの操作を「モードに移行」させるコンポーネントと言えます。 もともと、「Modal」という英単語はこちらで言及されているように形容詞です。 そのため、「Modal な〇〇（名詞）」という意味が本来は適切な使い方です。例えば「Modal な Dialog」や「Modal な Drawer」などです。 今日では単に「Modal」だけで使われることが多いので注意が必要です。 Modal はユーザの操作を制限し、ユーザが特定のタスクに集中して対処しなければならない状態を作り出します。 ユーザは「モーダ
やめてほしいUIアニメーション
最近はクオリティの高いアプリも増え、UIの見せ方も工夫されて昔より質の高いアプリが増えましたが、低コストで開発していくとUIアニメーションは後回しにされがちですよね。 開発時間や人員の問題、UIアニメーションをやる人がいないから自分がやった人など、UIアニメーションの優先順位が低いため、手探りでやっている方も多いと思います。 今回の記事では今出ているアプリに対してあれはダメだ！と言いたいわけではなく、リリースされているアプリを触って、自分が作るときはここは気をつけようと思ったり、これはアニメーションいいなとか、実際体感して勉強していけるため、その経験が業界全体を徐々にクオリティアップしていくため、結果は惜しいアニメーションだとしても挑戦した結果でもあると思うため大事なことだと思っています。 前置きはここまでにして、今回はアニメーションの中で、あれ？と思ってしまう、そんな「これはやめてほしい
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るためのズルいCC活用テクニック(Adobe MAX JAPAN 2018発表資料) - ICS MEDIA
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るための ズルいAdobe CC活用テクニック （Adobe MAX JAPAN 2018発表資料） ウェブやアプリで、マイクロインタラクションの需要が高まっています。ボタンタップ時やページ遷移時に、小気味よい演出を加えるのが粋というもの。UIにインタラクションとして動きを加えることで、操作方法を理解するヒントを与えられます。 2018年11月20日（火）に開催されたAdobe MAX JAPAN 2018（場所：パシフィコ横浜）にて、「マイクロインタラクションを作るためのズルいCC活用テクニック」と題して登壇してきました。本記事では、スライド資料をフォローアップとして共有します。 アーカイブビデオ 公式サイトにてアーカイブビデオも公開されています。50分の内容ですが、スライド資料から読み取れないことも解説してますので、公
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
デザイナーの僕がいかにしてビデオゲームのUIから「インタラクション・デザイン」を学ぶのか | 超ゲームウォーカー!
普段、インターネット上ではただのゲーム好きとして活動（？）しておりますが、本職はWebサービスやスマートフォンアプリのUIデザイナーをやらせていただいております コウノ アスヤ（@asuyakono）です。 退勤後はイベントに登壇！土日はコンセプトデザインで習作！みたいな同僚を横目に、仕事の時間以外はもっぱら家にこもってゲームを遊び、プレイ後に感想を記事にしてネットに公開することが多いです。それがこのブログです。このブログではいつも「良いも悪いも正直に。なるべく平易な文で。」をモットーに書いてますが、記事のボリュームを考えたり、専門的すぎないように気をつけていると、どうしてもなくなく端折らざるを得ない話題というものがあります。 それは、ゲームにおける「インタラクション・デザイン」のことです。 「友達が少ない」「インドア」「両親が共働き」の３本揃いで、物心ついた時から１人で黙々とビデオゲーム
説明なしでもわかるUIを実現するために！マイクロインタラクションの基本を理解しよう
こんにちは。TechAcademyの小嶋です。 皆様は「マイクロインタラクション」という言葉をご存知でしょうか。 誰にでもわかりやすいUI/UXを目指したもので、Webサービスやアプリなど様々な場面で使われています。 朝起きてアラームを解除するところから夜スマホの充電を開始してから寝るまで、数多くのマイクロインタラクションに触れています。 今回は、マイクロインタラクションの基本概念と利用するメリットを解説します。 あらゆるサービスに応用できる概念なので、ぜひこの機会に覚えておきましょう。 マイクロインタラクションとは:誰でも直感的に何をすればいいかがわかるデザイン マイクロインタラクションとは、「ヒューマンセンタードデザイン(人間中心のデザイン)」と呼ばれるデザイン手法の1つで、「今どのような状況で、次にどう行動すれば良いのかを直感的なUIで伝える」ことを目的としています。 説明書を読まず
インタラクションの参考にしたいUIアニメーション５選
MatthieuはUpLabsの創設者で、MaterialPaletteとWOW.js.のクリエイター。 良いユーザー体験のためには格好良いデザインだけではなく、仕組みや構造、使いやすさにも気を配る必要があります。近年ではUXデザインの重要性が叫ばれ、こういった考え方も徐々に浸透してきてはいますが、だからといってビジュアルやインタラクションのデザインを軽視してもいいと言うわけでもありません。 この記事では過去にも何度か取り上げている、UIコンセプトギャラリーサイトのUpLabsからまたいくつかのUIコンセプトを実装コード付きでご紹介します。ユーザーがサイトを使うときの心地よさを演出するためのヒントがたくさん詰まっていますので、是非参考にして下さい。 ※各項目ごとにCodePenを埋め込んでいるため、読み込みに少し時間がかかる場合があります UpLabsのオススメUIコンセプト５選 1. カ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
