HTML要素をグラフィカルにアニメーション化できるJavaScriptライブラリ「Theatre.js」を使ってみた！ - paiza開発日誌

2022/11/09 135 users グラフィカル paiza開発日誌 HTML要素 操作 初期設定

どうも、まさとらん（@0310lan）です！ 今回は、HTML要素を簡単にアニメーション化できるJavaScriptライブラリをご紹介します。 初期設定はJavaScriptで書きますが、実際のアニメーション作りに関してはタイムラインエディタを利用した直感的な操作で実現しているのが大きな特徴です。ちょっとしたインタラクションから3... 続きを読む

サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable

2021/10/14 125 users ユーザーインターフェース ユーザーエクスペリエンス ウェブ

公開日 : 2021年10月14日 カテゴリー : ユーザビリティ / アクセシビリティ / ユーザーインターフェース (UI) / ユーザーエクスペリエンス (UX) ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化するインタラクションがあります。たとえ... 続きを読む

Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは | アンドエンジニア

2020/06/16 515 users アンドエンジニア デザイナー えん Adobe製品 分業体制

Webサイト制作では通常、「デザイナーの作ったデザインをエンジニアが実装する」という分業体制が一般的。 しかし、今回なめサンは、サイトの見た目・動きのデザインから開発まで、すべてひとりで行っている。 優れたアニメーションやインタラクション（ユーザー操作へのフィードバック）をデザインし、自ら実装するエン... 続きを読む

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

2020/03/19 152 users コリス Button モーダル button要素 CSS

<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイ... 続きを読む

広野 萌 on Twitter: "パスワードフォームのUIとインタラクションについて考える度、わりと毎回同じ結論・同じ仕様にたどり着くので、デザインするとき自分が正解としていること9点まとめて

2019/09/26 74 users 広野 車輪 https 結論 t.co

パスワードフォームのUIとインタラクションについて考える度、わりと毎回同じ結論・同じ仕様にたどり着くので、デザインするとき自分が正解としていること9点まとめてみた。みんなで車輪の再発明やめよ〜！（以下ひとつずつ解説） https://t.co/2S3PlFeQzC 続きを読む

これなら簡単！CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions | コリス

2019/09/13 85 users コリス interactions アロー class CSS

ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクション... 続きを読む

今週のコンピュータサイエンス研究 140字での論文解説 まとめ 8/3-8/9｜マンガでわかるHCI（ヒューマン・コンピュータ・インタラクション）｜note

2019/08/10 57 users 論文 コンピュータサイエンス 実務 大学生 小学生

このnoteでは、最新のコンピュータサイエンスの研究を140字でゆるく解説しつつ、気になる論文にはこういう研究もあるよと2-3個似てる研究を紹介しています。 分野の中の人も外の人も、実務で忙しい人もそうでない人も、小学生も大学生も、「なるほど、最先端ではこんなことがおきてるんだな。ふむふむ」と感じてもらえた... 続きを読む

UIの使いづらさにイラッとする！これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface | コリス

2019/07/11 227 users ユーザインターフェイス コリス ベルギー デザインパターン

使いにくいUI、間違いやすいインタラクション、誤解されるデザインパターンを再現したUser Inyerfaceを紹介します。ベルギーの制作会社「Bagaar」による、使いにくい最悪なユーザインターフェイスを楽しむゲームで...記事の続きを読む 続きを読む

Adobe XDの自動アニメーションとドラッグジェスチャー機能を使って、UIのインタラクションを実装したまとめ | コリス

2019/01/24 76 users コリス トラン エフェクト アニメーション 実装

Adobe XDの2018年10月のアップデートで使えるようになった新機能「自動アニメーション」「ドラッグジェスチャー」を使用して、Webサイトやスマホアプリで見かけるUIのさまざまなアニメーションやインタラクションの実装を紹介します。 Adobe XDの「自動アニメーション機能」はかなり簡単にさまざまなエフェクトやトラン... 続きを読む

効果的なUXライティングのための16のルール | UX MILK

2018/12/03 276 users UXライティング UX MILK ルール Nick プロダクト

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 UXライティングとは、プロダクトとユーザー間のインタラクションを支援し、プロダクト内のユーザーを導くUIのコピーライティングのことを指します。UIのコピーには、ボタンやメニューラ... 続きを読む

イマドキのUIデザインには欠かせない! マイクロインタラクションを作るためのズルいCC活用テクニック(Adobe MAX JAPAN 2018発表資料) - ICS MEDIA

2018/11/26 114 users マイクロインタラクション いまどき ICS MEDIA 需要

ウェブやアプリで、マイクロインタラクションの需要が高まっています。ボタンタップ時やページ遷移時に、小気味よい演出を加えるのが粋というもの。UIにインタラクションとして動きを加えることで、操作方法を理解するヒントを与えられます。 2018年11月20日（火）に開催されたAdobe MAX JAPAN 2018（場所：パシフィコ横... 続きを読む

デザインの参考になる！最近のスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ | コリス

2018/11/22 575 users コリス ギャラリ コンポーネント アニメーション レイアウト

最近のスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利ですね。 Mobbi...記事の続きを読む 続きを読む

Vue.jsの勉強にもいい！UIコンポーネントやインタラクションを実装するチュートリアルがまとめられた -Vue.js Examples | コリス

2018/10/15 447 users コリス リソース チュートリアル UIコンポーネント アプリ

Vue.jsでさまざまなUIコンポーネントやインタラクションを実装するチュートリアルやリソースがまとめられたVue.js Examplesを紹介します。 ページやアプリのレイアウトをはじめ、スクロールコンテンツ、カード型...記事の続きを読む 続きを読む

Google Developers Japan: 機械学習がこれからの Web 体験とインタラクション・デザインの可能性を押し広げる

2018/10/08 60 users 機械学習 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 | コリス

2018/08/31 151 users コリス Canvasベース React Native グラフ

チャートやグラフは、さまざまなスマホアプリで見かけます。 スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。 Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます... 続きを読む

Web Animations APIとは？ブラウザのネイティブAPIで広がるアニメーションの世界 | ヌーラボ

2018/07/13 72 users ヌーラボ ネイティブAPI アニメーション ブラウザ 世界

Cacoo 開発チームの山岸です。ウェブにおけるアニメーション・インタラクションが好きなので今回は Web Animations API を紹介します。 Web Animations API (以下 WAAPI)とは これまでの CSS Transitions / Animations や SVG Animation を JavaScript で実現するための API です。WAAPI によりアニメーションにおける統... 続きを読む

デザインシステムの定義と作成方法、導入事例 | UX MILK

2018/06/04 53 users UX MILK 定義 導入事例 デザインシステム UXPin

JerryはUXPinのコンテンツストラテジストです。過去に、Braftonでのクライアント向けのコンテンツ戦略、広告代理店のDBB San Franciscoでの経験があります。 デザインシステムは、ビジュアルやインタラクションだけに関するトレンドではありません。しかし、間違いなくルック＆フィールに影響を与えています。なぜなら、Webにおけるトレンドを生み出すデザイン原則やツール、ライブラリー、... 続きを読む

音声インターフェースを使うと性格が悪くなる？｜mirka

2018/03/14 81 users ユーザ 音声インターフェース 指示 不快感 疑問

驚きと不快感の伴うインタラクションだったが、自分的なポイントは2つある。 1. ユーザの指示を理解したのに従わないという、ロボット原則に反するようなデザインに疑問を感じた 2. 人間に対しては言わないであろう「うるさい」という言葉が口をついてしまった 今回は、この (2) について考えてみたい。 技術精度が上がり、より人間に近い音声アシスタントがあらゆるところに組み込まれていく時代。ユーザの性格を... 続きを読む

CSSアニメーションもこれなら手軽！DOM要素にマイクロインタラクションを与えるJavaScriptライブラリ -Micron | コリス

2018/01/24 50 users Micron コリス マイクロインタラクション CSS 手軽

ページ上のさまざまなDOM要素にマイクロインタラクションを簡単に与えることができるJavaScriptのライブラリを紹介します。 実装は非常に簡単、カスタマイズ性にも優れており、CSSで要素をアニメーションさせ、JavaScriptでインタラクティブな動作をコントロールできます。 インタラクションを与える 要素に「data-micron」を加えるだけで、インタラクションを与えることができます。 バ... 続きを読む

協調フィルタリングで声優の流行を可視化する - Qiita

2017/12/19 55 users Qiita クラスタ 協調フィルタリング ベクトル化 声優

出演者が大勢いる声優イベントに参加すると、当然自分が知らない声優さんもいらっしゃいます。そんな時、出演者の立ち位置や評価を俯瞰できるといいなーと思うことがあったので、簡単に作ってみました。 大体以下のようなテーマで取り組みました。 ある声優がどのようなクラスタに属していて誰に支持されているのかがわかる その声優の流行がわかる 1.は声優とファンのインタラクションを利用して声優をベクトル化できればク... 続きを読む

デザインの神は細部に宿る！最近のWebサイトで見かけるナビゲーションのアイデアのまとめ | コリス

2017/08/03 81 users コリス 細部 ナビゲーション アイデア 構造

Webサイトをデザインする時にナビゲーションをどうするか、けっこう頭を悩ませると思います。コンテンツを見せるために、サイトの構造を伝えるために、ページを移動するために、ナビゲーションはデザインで重要なアイテムです。 最近のWebサイトで見かける新鮮なアイデアが取り入れられたナビゲーションを紹介します。デザインなどの見た目だけでなく、操作性やインタラクションも非常によくできているものばかりです。 N... 続きを読む

アニメーションをWebサイトに導入するためのテクニック | UX MILK

2017/05/16 120 users アニメーション UX MILK テクニック Webサイト 現状

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事は こちら をご参照ください。 機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の１つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、... 続きを読む

脱jQueryのためにしたこと - Qiita

2017/04/18 515 users Qiita RIA jQuery Wonderfl 主張

脱jQueryという主張をよく耳にします。 私の個人プロジェクト「 Beautifl - Flash Gallery 」のリニューアルでも、依存しまくっていたjQueryの採用をやめました。 サイトを立ち上げたのは8年前の2009年。当時は最盛期だったjQueryをふんだんに使って、インタラクションの充実したRIAの開発に挑戦していました（参照：「 wonderflのギャラリーサイトBeautif... 続きを読む

最近のWebサイトで見かける便利な機能や仕掛け、気持ちいいアニメーションを実装するCSSやスクリプトのまとめ | コリス

2016/05/17 458 users コリス jQuery girls CSS スクリプト

最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。 イラスト: Girls ...記事の続きを読む 続きを読む

iOS アプリの UI でこれだけはおさえたい、読み込み中の体験を向上させる基本 UI パターン3つ - クックパッド開発者ブログ

2015/12/01 259 users iOS haveagood.holiday Holiday

2015-12-02 iOS アプリの UI でこれだけはおさえたい、読み込み中の体験を向上させる基本 UI パターン3つ ホリデー株式会社 *1 の多田です。Holiday ( https://haveagood.holiday/ ) というサービスの開発を行っています。 アプリを通してユーザに価値を届けるためには、アプリの細部のインタラクションを軽視することはできません。細かい部分に気を配り使... 続きを読む