これで迷わない！Modal、Dialog、Drawerの違い
ベン図で表すと以下のようになります。 （あまり一般的でない名称のコンポーネントも便宜上使用しています。） 以降、詳しく解説します。 Modal Modal は、ユーザに特定のアクションを求めるために、ユーザのインタラクション（操作）を中断させる UI コンポーネントです。 難しい表現をするならば、ユーザの操作を「モードに移行」させるコンポーネントと言えます。 もともと、「Modal」という英単語はこちらで言及されているように形容詞です。 そのため、「Modal な〇〇（名詞）」という意味が本来は適切な使い方です。例えば「Modal な Dialog」や「Modal な Drawer」などです。 今日では単に「Modal」だけで使われることが多いので注意が必要です。 Modal はユーザの操作を制限し、ユーザが特定のタスクに集中して対処しなければならない状態を作り出します。 ユーザは「モーダ
htmxとは何なのか？ その背景にある思想について - Qiita
先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
やめてほしい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分の内容ですが、スライド資料から読み取れないことも解説してますので、公
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
画面遷移がすごいサイトのまとめ | バシャログ。
TVKで再放送されているあぶデカにハマっているgamiです。あの時代の関内・馬車道あたり物騒すぎるでしょ…。 さて、以前にも紹介しました、気になるデザインを共有するDesignClipという社内のチャットグループより、画面遷移がシームレスでこいつぁすげえや！となったものを幾つか紹介できればと思います。チェケラ！ 佐久間徹設計事務所 デザインはすごくシンプルで動きもいいと印象によく残ります。 仕事一覧から仕事詳細へ 一覧の写真をクリックするとコンテンツの後ろでニュッと大きくなる感じが好き。 下位ページへ グローバルメニューに注目してるといつの間にかコンテンツが変わってる。 Orenda Security セキュリティ会社のサイト。シャッターのような動きからのロゴアニメーションはまさに鍵をかけてるように感じました。 スタジオスプーン株式会社 四方のボタンをクリックすると、その方向から背景がスラ
デザイナーの僕がいかにしてビデオゲームのUIから「インタラクション・デザイン」を学ぶのか | 超ゲームウォーカー!
普段、インターネット上ではただのゲーム好きとして活動（？）しておりますが、本職はWebサービスやスマートフォンアプリのUIデザイナーをやらせていただいております コウノ アスヤ（@asuyakono）です。 退勤後はイベントに登壇！土日はコンセプトデザインで習作！みたいな同僚を横目に、仕事の時間以外はもっぱら家にこもってゲームを遊び、プレイ後に感想を記事にしてネットに公開することが多いです。それがこのブログです。このブログではいつも「良いも悪いも正直に。なるべく平易な文で。」をモットーに書いてますが、記事のボリュームを考えたり、専門的すぎないように気をつけていると、どうしてもなくなく端折らざるを得ない話題というものがあります。 それは、ゲームにおける「インタラクション・デザイン」のことです。 「友達が少ない」「インドア」「両親が共働き」の３本揃いで、物心ついた時から１人で黙々とビデオゲーム
チャットボットのUX：価値ある会話デザインの方法
Jenniferは、UX戦略、研究、およびデザインの取り組みを15年間にわたって行ってきました。ユーザーを楽しませる、より強いブランドを構築しています。 。 チャットボットはすべて同じではありません。では、チャットボットの良し悪しを決めるものは何でしょうか。 良いチャットボットとは、ユーザーがより効率的に何かを達成できるようにしてくれるものです。中でも優れたものは、チャット体験自体を楽しくしてくれます。一方で悪いボットは、ユーザーの時間を無駄にしたり、意味が通らない返答をしたり、ユーザーをイライラさせたりして、離脱率を高めてしまう可能性があります。 誰も好んで悪いチャットボットを作ろうとはしません。しかし、過去にチャットボットをデザインした経験がないと、開発の大変さに気づかなかったり、あるいは技術がすべてだと思ってしまっているかもしれません。その結果、ユーザー体験を向上するどころか、損ねる
フロントエンドエンジニアなら押さえておきたい！最近登場した注目のJavaScript＆CSSライブラリ8選
Webデザイナーやフロントエンドエンジニアにとって、日々登場するフレームワークやライブラリをキャッチアップすることはとても大切です。 なぜなら、そうしたフレームワークやライブラリによって業務が効率化すれば、他の作業に時間を割くことができるからです。 しかし、フレームワークやライブラリが続々と登場するあまり、キャッチアップに追いついていないひともいるのではないでしょうか。 今回は、最近登場した注目のJavaScriptとCSSのライブラリを紹介していきます。 中には簡単なコードを挿入するだけで驚くほどの機能を実装できるものもあるので、ぜひ確認してみてください。 最近登場した注目のJavaScript＆CSSフレームワーク 1. AOS https://michalsnik.github.io/aos/ AOS(Animate on Scroll)は、スクロールしながら要素をアニメーションでふ
説明なしでもわかるUIを実現するために！マイクロインタラクションの基本を理解しよう
こんにちは。TechAcademyの小嶋です。 皆様は「マイクロインタラクション」という言葉をご存知でしょうか。 誰にでもわかりやすいUI/UXを目指したもので、Webサービスやアプリなど様々な場面で使われています。 朝起きてアラームを解除するところから夜スマホの充電を開始してから寝るまで、数多くのマイクロインタラクションに触れています。 今回は、マイクロインタラクションの基本概念と利用するメリットを解説します。 あらゆるサービスに応用できる概念なので、ぜひこの機会に覚えておきましょう。 マイクロインタラクションとは:誰でも直感的に何をすればいいかがわかるデザイン マイクロインタラクションとは、「ヒューマンセンタードデザイン(人間中心のデザイン)」と呼ばれるデザイン手法の1つで、「今どのような状況で、次にどう行動すれば良いのかを直感的なUIで伝える」ことを目的としています。 説明書を読まず
[JS]マイクロインタラクションを簡単に！よく使うUIエレメントに操作している感覚をアニメーションで与えるスクリプト -Tilt
カード、パネル、ボタンなど、よく使うUIエレメントをユーザーの操作に応じてふわりと浮かせ、アニメーションでぐりぐりと動かして視差効果を与えるJavaScriptの超軽量ライブラリ（jQueryのプラグインも可）を紹介します。 CSSアニメーションが苦手なグラデーションやシャドウでも60fpsの滑らかな動きを実現します。 Tilt.js -GitHub このアニメーションGIFは軽量化のためコマを落としているので、実際の滑らかな動きは下記のデモでお楽しみください。 Tilt.jsの使い方 Tilt.jsは単体でも、jQueryのプラグインとしても動作します。 ※スクリプトがそれぞれ異なります。 vanilla-tilt.js -単体版 Tilt.js -jQueryのプラグイン版 基本書式 HTMLに「data-tilt」を加え、当スクリプトを外部ファイルとして記述します。
![[JS]マイクロインタラクションを簡単に！よく使うUIエレメントに操作している感覚をアニメーションで与えるスクリプト -Tilt](https://cdn-ak-scissors.b.st-hatena.com/image/square/725c3bf66a12921823f06acb252f0fc74725f6e0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017013001.png)
インタラクションの参考にしたいUIアニメーション５選
MatthieuはUpLabsの創設者で、MaterialPaletteとWOW.js.のクリエイター。 良いユーザー体験のためには格好良いデザインだけではなく、仕組みや構造、使いやすさにも気を配る必要があります。近年ではUXデザインの重要性が叫ばれ、こういった考え方も徐々に浸透してきてはいますが、だからといってビジュアルやインタラクションのデザインを軽視してもいいと言うわけでもありません。 この記事では過去にも何度か取り上げている、UIコンセプトギャラリーサイトのUpLabsからまたいくつかのUIコンセプトを実装コード付きでご紹介します。ユーザーがサイトを使うときの心地よさを演出するためのヒントがたくさん詰まっていますので、是非参考にして下さい。 ※各項目ごとにCodePenを埋め込んでいるため、読み込みに少し時間がかかる場合があります UpLabsのオススメUIコンセプト５選 1. カ
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事