Dialog と Popover #2 | blog.jxck.io
Intro showModalDialog() は今から考えれば、確かにひどい API だった。 しかし、何か Modal を開き、ユーザにインタラクションをさせ、閉じたらそこで入力された値や選択された結果を取得し、処理を進めたいユースケース自体は、規約への同意取得や、 Cookie バナー、ログインなど多々ある。 そういった場面では、ライブラリなどを用いて実装する必要があったが、 Modal を実装するのは実際にはそんなに簡単ではなかった。 Modal, Dialog, Modal Dialog 最初に、用語を少し整理しておこう。 Modal Dialog Modal Dialog non-Modal Dialog Dialog とは、そもそも「対話」という意味であり、 UI の文脈では入力や選択を求める「対話的な UI」のことを指す。 既に実装されている alert(), confir
2022年、Webデザインの新しいトレンド「クレイモーフィズム」のスタイルをさまざまな要素に適用できるCSS
クレイモーフィズムはWebデザインの新しいトレンドの一つで、クレイ粘土みたいなもこもこの質感にシャドウを加えてフラットなデザインに奥行きを与えます。メタバースなどの影響でデザインやイラストにも3Dの人気が高まり、最近ローンチしたスタートアップでも使用しているのを見かけます。 クレイモーフィズムのスタイルをさまざまな要素に適用できるCSSを紹介します。 clay.css clay.css -GitHub 「クレイモーフィズム」とは clay.cssの特徴 clay.cssのデモ clay.cssの使い方 「クレイモーフィズム」とは 「クレイモーフィズム（Claymorphism）」は、UIデザインのフレッシュで新しいコンセプトです。呼び名はMichał Malewicz氏によって作られたもので、デザイナーはUIデザインへのこのアプローチの可能性を探求することに興奮しています。 メタバースやN
Google Developers Japan: AMP の新機能、2018 年第 4 四半期
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
どんな生年月日の入力フォームがわかりやすいのか
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 生年月日の表記方法は国によって異なります。さらに、生年月日のフォームは年、月、日という３つのデータで構成されているためわかりにくくなりがちです。生年月日の入力フォーマットがわかりにくい場合、ユーザーを苛立たせることになります。 わかりにくいフォーマット ユーザーは、誕生月が最初に来るフォーマット（月/日/年）か、誕生日が最初に来るフォーマット（日/月/年）のどちらかに慣れています。そのため、フォームがいつものフォーマットと異なると混乱してしまいます。 生年月日でユーザーがよく見るフォームは、「月/日/年」か「日/月/年」です。「MM」が「月」、「DD」が「日」を表していることを知っているユーザーもいますが、混乱したり無視するユーザーもいます。
Material design transition
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Page Transition with Loader
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
20+ CSS Page Transitions
Page transitions play a crucial role in enhancing the user experience and adding a touch of dynamism to your website. With the right CSS page transition effects, you can create seamless and visually captivating transitions between different pages or sections of your website. If you're looking to incorporate stunning page transitions into your web projects, you're in luck! We are thrilled to presen
グーグルが期待するWeb AR サイトから現実空間に商品など表示
グーグルが期待するWeb AR サイトから現実空間に商品など表示 今後、スマートフォンでは、多くの人々がARを体験できるようになります。スマートフォン画面を通して見た景色に、自由にデジタルオブジェクトを置ける時代がやってきます。 Googleは多くのユーザーにこうした体験を提供するため、Webブラウザで体験できるARコンテンツを模索しています。最新のプロトタイプである「Article」では、Webページに画像と同じように埋め込まれた3Dモデルを閲覧したり、スマートフォンカメラを通して現実世界に3Dモデルを表示したりといった機能が盛り込まれています。 Webページに組み込める3Dモデルビューワー Articleは、PC・スマートフォンを問わずあらゆるブラウザで利用できる3Dモデルビューワーです。 3Dモデルは、pngやgifの画像と同じようにWebページに組み込むことができます。モデルの下に
page-transitions-travelapp - ネイティブレベルのUXを体感できるWebアプリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ハイブリッドアプリやPWAなど、Webアプリケーションをスマートフォンのネイティブアプリ風に使う技術が発展しています。ネイティブアプリと異なり、インストールの手間がなく、プラットフォーマーによる縛りもないのがWebの魅力と言えます。 そんなWeb技術を駆使して作られたのがpage-transitions-travelappです。旅行アプリのデモで、ネイティブ風の画面遷移が魅力となっています。 page-transitions-travelappの使い方 実際の動きについてはこちらのデモを見るのが良いでしょう。表示もまるでネイティブアプリです。 別な画面に遷移したときの動きに注目です。 デスクトップもサポートされています。 デスクトップの場合はサイドバーが表示されます。 デスクトップ
[ページ遷移しないWebシステム] JavaScriptによるWindow Framework - Qiita
Webアプリケーションを構築するにあたって、ユーザインタフェイスの作成は苦労する部分です。現在の一般的な開発手法においては、サーバサイドからHTMLデータを送信することによって、表示部分の書き換えを行っています。そのたびにページ遷移が起こり、ユーザの体験を著しく損なっているのが現状です。 それを回避手段はJavaScriptによってクライアント側でページの書き換えを行うことです。しかしサーバサイド側のプログラム言語とクライアントのJavaScriptを連携させるのは、システムの複雑化を招き開発を困難にします。 これらの問題点を解決する方法として以下の二点を提示します １ サーバサイドはデータ管理のみに集中し、表示に関するデータを送らない ２ クライアントサイドは表示とユーザの入出力を能動的に管理し、必要に応じてサーバ側とデータのやりとりを行う 今回は２の部分に着目して必要なものを用意します
![[ページ遷移しないWebシステム] JavaScriptによるWindow Framework - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4ee5bf8bf3581058986f2e729802c86fc8bc986f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUUzJTgzJTlBJUUzJTgzJUJDJUUzJTgyJUI4JUU5JTgxJUI3JUU3JUE3JUJCJUUzJTgxJTk3JUUzJTgxJUFBJUUzJTgxJTg0V2ViJUUzJTgyJUI3JUUzJTgyJUI5JUUzJTgzJTg2JUUzJTgzJUEwJTVEJTIwSmF2YVNjcmlwdCVFMyU4MSVBQiVFMyU4MiU4OCVFMyU4MiU4QldpbmRvdyUyMEZyYW1ld29yayZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NDE2ZTI0MmU0MTc2MjA5Mzk1MWQ0MGNjMWRlN2E3OTA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBTb3JhS3VtbyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Yjk0NjVmMTkzYTcxZDMxMTQwNDAxY2FlNTVkYTdkZmQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D39de18962ec34daf12ec838de2d1a3cd)
どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS
アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 ユニバーサル スライダー、ポップアップ、アコーディオン、メニュー、パララックス、ジャスチャーなど、さまざまなUIパターンを簡単に実装できます。 ピュアHTML HTMLのdata属性を使用して、インターフェイスをレイアウトし、インタラクションを定義します。 互換性 React、VueJS、Angu
なぜ、ユーザー体験においてWebフォントが重要なのか？
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 Bill Gates氏は「コンテンツは王様だ」と言いました。オンラインのユーザー体験において、これは紛れもない真実です。しかし、素晴らしいユーザー体験を提供することは、単に素晴らしいコンテンツを発信することだけではありません。便利で使いやすいフォーマットでコンテンツを提供することも意味するのです。これによって、読みにくいことが原因でユーザーがサイトから離脱することを防ぎ、閲覧やインタラクションを促進することができます。 そのため、Webサイトにおけるタイポグラフィは、デザイナーの仕事の中でも非常に重要です。適切なフォントを選択したり、そのフォントを正確に表示したりする作業は、ほかのデザインの作業以上にユーザー体験を大きく左右します。 『タイポグラフィの完璧な
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Thumbnail to fullscreen page transition
Expanding card page transition effect
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT