タグ インタラクション
人気順 5 users 10 users 100 users 500 users 1000 usersデジタル庁デザインシステムβ版
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。 デジタル庁のミッションである「誰一人取り残されない、... 続きを読む
HTML要素をグラフィカルにアニメーション化できるJavaScriptライブラリ「Theatre.js」を使ってみた! - paiza開発日誌
どうも、まさとらん(@0310lan)です! 今回は、HTML要素を簡単にアニメーション化できるJavaScriptライブラリをご紹介します。 初期設定はJavaScriptで書きますが、実際のアニメーション作りに関してはタイムラインエディタを利用した直感的な操作で実現しているのが大きな特徴です。ちょっとしたインタラクションから3... 続きを読む
サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable
公開日 : 2021年10月14日 カテゴリー : ユーザビリティ / アクセシビリティ / ユーザーインターフェース (UI) / ユーザーエクスペリエンス (UX) ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化するインタラクションがあります。たとえ... 続きを読む
Adobe製品を使わない"デザイナー"?「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは | アンドエンジニア
Webサイト制作では通常、「デザイナーの作ったデザインをエンジニアが実装する」という分業体制が一般的。 しかし、今回なめサンは、サイトの見た目・動きのデザインから開発まで、すべてひとりで行っている。 優れたアニメーションやインタラクション(ユーザー操作へのフィードバック)をデザインし、自ら実装するエン... 続きを読む
[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス
<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイ... 続きを読む
広野 萌 on Twitter: "パスワードフォームのUIとインタラクションについて考える度、わりと毎回同じ結論・同じ仕様にたどり着くので、デザインするとき自分が正解としていること9点まとめて
パスワードフォームのUIとインタラクションについて考える度、わりと毎回同じ結論・同じ仕様にたどり着くので、デザインするとき自分が正解としていること9点まとめてみた。みんなで車輪の再発明やめよ〜!(以下ひとつずつ解説) https://t.co/2S3PlFeQzC 続きを読む
これなら簡単!CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions | コリス
ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクション... 続きを読む
今週のコンピュータサイエンス研究 140字での論文解説 まとめ 8/3-8/9|マンガでわかるHCI(ヒューマン・コンピュータ・インタラクション)|note
このnoteでは、最新のコンピュータサイエンスの研究を140字でゆるく解説しつつ、気になる論文にはこういう研究もあるよと2-3個似てる研究を紹介しています。 分野の中の人も外の人も、実務で忙しい人もそうでない人も、小学生も大学生も、「なるほど、最先端ではこんなことがおきてるんだな。ふむふむ」と感じてもらえた... 続きを読む
UIの使いづらさにイラッとする!これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface | コリス
使いにくいUI、間違いやすいインタラクション、誤解されるデザインパターンを再現したUser Inyerfaceを紹介します。ベルギーの制作会社「Bagaar」による、使いにくい最悪なユーザインターフェイスを楽しむゲームで...記事の続きを読む 続きを読む
Adobe XDの自動アニメーションとドラッグジェスチャー機能を使って、UIのインタラクションを実装したまとめ | コリス
Adobe XDの2018年10月のアップデートで使えるようになった新機能「自動アニメーション」「ドラッグジェスチャー」を使用して、Webサイトやスマホアプリで見かけるUIのさまざまなアニメーションやインタラクションの実装を紹介します。 Adobe XDの「自動アニメーション機能」はかなり簡単にさまざまなエフェクトやトラン... 続きを読む
効果的なUXライティングのための16のルール | UX MILK
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 UXライティングとは、プロダクトとユーザー間のインタラクションを支援し、プロダクト内のユーザーを導くUIのコピーライティングのことを指します。UIのコピーには、ボタンやメニューラ... 続きを読む
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るためのズルいCC活用テクニック(Adobe MAX JAPAN 2018発表資料) - ICS MEDIA
ウェブやアプリで、マイクロインタラクションの需要が高まっています。ボタンタップ時やページ遷移時に、小気味よい演出を加えるのが粋というもの。UIにインタラクションとして動きを加えることで、操作方法を理解するヒントを与えられます。 2018年11月20日(火)に開催されたAdobe MAX JAPAN 2018(場所:パシフィコ横... 続きを読む
デザインの参考になる!最近のスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ | コリス
最近のスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利ですね。 Mobbi...記事の続きを読む 続きを読む
Vue.jsの勉強にもいい!UIコンポーネントやインタラクションを実装するチュートリアルがまとめられた -Vue.js Examples | コリス
Vue.jsでさまざまなUIコンポーネントやインタラクションを実装するチュートリアルやリソースがまとめられたVue.js Examplesを紹介します。 ページやアプリのレイアウトをはじめ、スクロールコンテンツ、カード型...記事の続きを読む 続きを読む
Google Developers Japan: 機械学習がこれからの Web 体験とインタラクション・デザインの可能性を押し広げる
.app 1 #DevFest16 1 #DevFest17 1 #DevFest18 1 #hack4jp 3 A/B Testing 1 A4A 4 Actions on Google 12 Addy Osmani 1 ADK 2 AdMob 31 Ads 15 Ads API 3 AdWords API 3 Agency 1 AIY 3 AIY Vision Kit 2 ALPN 1 AMP 64 AMP Cache 5 AMP for Email 1 AMP Story 2 amp-bind 1 AMPHTML Ads 1 Analytics 9 Andorid 10 Andro... 続きを読む
[JS]スマホに最適化された優れもの!さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2 | コリス
チャートやグラフは、さまざまなスマホアプリで見かけます。 スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。 Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます... 続きを読む
Web Animations APIとは?ブラウザのネイティブAPIで広がるアニメーションの世界 | ヌーラボ
Cacoo 開発チームの山岸です。ウェブにおけるアニメーション・インタラクションが好きなので今回は Web Animations API を紹介します。 Web Animations API (以下 WAAPI)とは これまでの CSS Transitions / Animations や SVG Animation を JavaScript で実現するための API です。WAAPI によりアニメーションにおける統... 続きを読む
デザインシステムの定義と作成方法、導入事例 | UX MILK
JerryはUXPinのコンテンツストラテジストです。過去に、Braftonでのクライアント向けのコンテンツ戦略、広告代理店のDBB San Franciscoでの経験があります。 デザインシステムは、ビジュアルやインタラクションだけに関するトレンドではありません。しかし、間違いなくルック&フィールに影響を与えています。なぜなら、Webにおけるトレンドを生み出すデザイン原則やツール、ライブラリー、... 続きを読む
音声インターフェースを使うと性格が悪くなる?|mirka
驚きと不快感の伴うインタラクションだったが、自分的なポイントは2つある。 1. ユーザの指示を理解したのに従わないという、ロボット原則に反するようなデザインに疑問を感じた 2. 人間に対しては言わないであろう「うるさい」という言葉が口をついてしまった 今回は、この (2) について考えてみたい。 技術精度が上がり、より人間に近い音声アシスタントがあらゆるところに組み込まれていく時代。ユーザの性格を... 続きを読む
CSSアニメーションもこれなら手軽!DOM要素にマイクロインタラクションを与えるJavaScriptライブラリ -Micron | コリス
ページ上のさまざまなDOM要素にマイクロインタラクションを簡単に与えることができるJavaScriptのライブラリを紹介します。 実装は非常に簡単、カスタマイズ性にも優れており、CSSで要素をアニメーションさせ、JavaScriptでインタラクティブな動作をコントロールできます。 インタラクションを与える 要素に「data-micron」を加えるだけで、インタラクションを与えることができます。 バ... 続きを読む
協調フィルタリングで声優の流行を可視化する - Qiita
出演者が大勢いる声優イベントに参加すると、当然自分が知らない声優さんもいらっしゃいます。そんな時、出演者の立ち位置や評価を俯瞰できるといいなーと思うことがあったので、簡単に作ってみました。 大体以下のようなテーマで取り組みました。 ある声優がどのようなクラスタに属していて誰に支持されているのかがわかる その声優の流行がわかる 1.は声優とファンのインタラクションを利用して声優をベクトル化できればク... 続きを読む
デザインの神は細部に宿る!最近のWebサイトで見かけるナビゲーションのアイデアのまとめ | コリス
Webサイトをデザインする時にナビゲーションをどうするか、けっこう頭を悩ませると思います。コンテンツを見せるために、サイトの構造を伝えるために、ページを移動するために、ナビゲーションはデザインで重要なアイテムです。 最近のWebサイトで見かける新鮮なアイデアが取り入れられたナビゲーションを紹介します。デザインなどの見た目だけでなく、操作性やインタラクションも非常によくできているものばかりです。 N... 続きを読む
アニメーションをWebサイトに導入するためのテクニック | UX MILK
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事は こちら をご参照ください。 機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の1つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、... 続きを読む
脱jQueryのためにしたこと - Qiita
脱jQueryという主張をよく耳にします。 私の個人プロジェクト「 Beautifl - Flash Gallery 」のリニューアルでも、依存しまくっていたjQueryの採用をやめました。 サイトを立ち上げたのは8年前の2009年。当時は最盛期だったjQueryをふんだんに使って、インタラクションの充実したRIAの開発に挑戦していました(参照:「 wonderflのギャラリーサイトBeautif... 続きを読む
最近のWebサイトで見かける便利な機能や仕掛け、気持ちいいアニメーションを実装するCSSやスクリプトのまとめ | コリス
最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。 イラスト: Girls ...記事の続きを読む 続きを読む