View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に利用できる JSフレームワークでの対応も進んでいる 2024年6月リリースのChrome 126とEdge 126でJ
UX向上の鍵「タグ絞り込み検索」の実装とその利点 | CMS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
コンテンツ量の多いメディアサイトや商品情報の多いカタログサイトなどでの目的のコンテンツを探すこと考えるとタイトルにある「タグ絞り込み検索機能」がオススメである。今回は、この機能について深掘りして紹介していきます。 Instagram や X の ハッシュタグ 検索が一般的になったことから「タグ検索」という言葉も SNS を利用している多くの人にも「そのコンテンツに関するキーワード検索」ということが伝わるようになったのではないでしょうか。 そんなタグを一覧で表示する手法として「タグクラウド」というものがあります。 今回紹介する タグ絞り込み検索機能 の出発点となる UI がタグクラウドです。 タグ絞り込み検索機能の出発点、タグクラウドとは？ タグクラウドは、ウェブサイトのコンテンツや記事に関連付けられたタグ（キーワード）を視覚的に表示する手法です。これらのタグは、通常、ウェブページ上で雲のよ
モバイルにおけるステップインジケーターはどうあるべきか
フォームが複数ページに渡る場合、ステップインジケーターは必要不可欠です。ステップインジケーターはユーザーに対して自分たちが今どのステップにいて、あとどのくらいのステップが残っているかを示す役割があります。 画面上のスペースが限られているためモバイルフォームで、ステップインジケーターを提示することは困難です。デスクトップと同じインジケーターをモバイルフォームで使用すると、可読性と可視性の問題が生じてしまいます。 直線型 vs 放射型 無理やり狭いスペースに各ステップのタイトルを収めると、テキストサイズが小さくなりユーザーが読みにくくなります。さらに一度にあまりに多くのステップ名と番号が表示されるため、可視性も下がります。結果、視覚的なノイズが発生し、ユーザーが現在いるステップを把握することが難しくなってしまいます。 モバイルフォームには放射型のインジケーターを使用してください。こちらの方がユ
UI/UX デザイナーを雇わない方がいい理由 ｜ブログ｜root｜芯を問い、成長に貢献する
UsabilityHour.com の創設者である、クレイグ・モリソ氏によるゲストポストをお届けします。 UXデザイナーとUIデザイナーは完全に違う役割を果たすから、一人の人間に両方の仕事を任すべきじゃない。 ふー、ついに言ってしまいました！ みなさん言いたいことはあるかと思いますが、その怒りをぶつける前に、まず説明させてください。 この2年間、私は二つのスタートアップでリード UX/UIデザイナーとして働いてきました。 また、どちらのポジションにいるときも多くのインタビューを受けしました。 次第に、どういう現象が起きているのかがようやくはっきりと見えてきました。 世間、特にスタートアップの創設者は、ユーザーエクスペリエンス・デザインが、本質的に何なのかを理解していないのです。もちろん、重要だということは把握していますが。使いやすいインターフェイスを持つというのは、デジタルプロダクトを売り
Web UXを作れるサーバサイド人材が少ない？！問題 | F's Garage
昨今、ネイティブアプリ全盛が故に、WebサービスのUXを作れるエンジニアが少なくなってるんじゃないか説がある。 また、受託からWebサービスが主流になったことで、一つのソースコードをこねくり回す機会が増え、新規にWeb UIを作り込む頻度が低くなり、そもそも鍛えられていないんじゃないか説もある。 例えば、商品登録画面のような何かのテキスト情報と一緒に登録する画像アップロードを考えてみる。 その際に、「入力確認画面」が必要だと仮定する。また、それなりに秘匿性を意識すべき企業用途のサービスだとする。 書きながら2002年の案件を思い出してるので、なんか古い話だったらゴメンよ。 １．いつどこに画像を保存するのか？ post or ajax ? ２．Webサーバに置くのか？S3に上げてしまうのか？今時ないかもしれないがObject Databaseに登録する？Webサーバに置いたらロードバランサー
なぜ優れたユーザー体験においてデフォルトが重要なのか
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デフォルトとは、初めから導入されている初期値や初期設定のことです。一見大したことないように思えますが、デフォルトはユーザーの決断を左右大きな力を持っています。 この記事では、アプリでより優れたユーザー体験を生み出すために、あらかじめ用意された入力フィールドやデフォルト設定をどのように利用するべきか述べていきます。 入力フィールドのデフォルト値 フォーム入力が長いことが原因で、ユーザーはフォーム入力がより簡単なサイトへ移ってしまうことがあります。適切なデフォルト値を提供することで、ユーザーがすべての選択肢を選ぶ手間を省くことができます。 大半のユーザーが必要なものにする もし事前に決めることが可能な場合は、あらかじめ値をフィールドに入れておくことをおすすめします。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
