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要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイ... 続きを読む

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

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

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

効果的な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を紹介します。 ページやアプリのレイアウトをはじめ、スクロールコンテンツ、カード型...記事の続きを読む 続きを読む

[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2 | コリス

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

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

アニメーションを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/ ) というサービスの開発を行っています。 アプリを通してユーザに価値を届けるためには、アプリの細部のインタラクションを軽視することはできません。細かい部分に気を配り使... 続きを読む

UIデザインのアイデアを探す時にチェックしたいサイトのまとめ | コリス

2015/10/18 205 users コリス コンポーネント アニメーション レイアウト アイデア

Webサイトやアプリなど、UIデザインのアイデアを探す時に役立つサイトを紹介します。 さまざまなコンポーネントやレイアウト、インタラクションのヒントとなるアニメーション、動きがとにかく気持ちいいアニメーションなど、見てい...記事の続きを読む 続きを読む

JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ

2015/10/14 423 users anatoo ウェブページ DOM操作 パフォーマンス 意見

2015-10-14 JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて 2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがあ... 続きを読む

Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ | コリス

2015/07/06 427 users コリス Bootstrap jQuery フレームワーク

Bootstrapなどのフレームワークは無し、HTML5とCSS3のシンプルなコードをベースに、jQueryなどでいろいろなインタラクションやアイコンフォントなどを使ったレスポンシブ対応のテンプレートをTemplated...記事の続きを読む 続きを読む

UIの新鮮なアイデアをチェック！デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ | コリス

2015/07/02 151 users コリス アニメーション 工夫 気持ちいいアニメーション 意味

最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。 アニメーションを使ったインタラクションやデザインが...記事の続きを読む 続きを読む

ランディングページやポートフォリオやブログなど何でもOK！さまざまなデザインで簡単に作成できるWordPressのテーマ- Ultra | コリス

2015/05/22 193 users コリス Ultra クライアントワーク ポートフォリオ 商用

最近人気のあるさまざまなデザイン、レイアウト、エフェクト、インタラクションをカスタマイズして、企業サイト・プロダクトやアプリのランディングページ・ブログ・ポートフォリオ・ショッピングサイトなどが作成できるWordPressのテーマファイルを紹介します。 GNU ライセンスで、個人でも商用でもクライアントワークでも無料で利用できます。 ↓こんな感じのが、簡単に作成できてしまいます。 ページサンプルは... 続きを読む

人間を考慮した自動化

2014/11/09 198 users 人間 自動化 Belgium デッドライン 耐性

Brian Troutwine氏はDevOps Days Belgiumで複雑なリアルタイムシステムや人間とマシンのインタラクションについて発表した。 リアルタイムシステムは可能な限り速く動くだけでなく、デッドラインがある。システムを分類すると以下のようになる。 柔らかいシステム。デッドラインをすぎると結果の使いやすさが劣化する。 固いシステム。頻度の低いデットライン超過には耐性があるが、システム... 続きを読む

[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip | コリス

2014/10/05 265 users jQuery Strip Lightbox風 コリス 相性

スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。 フラットなデザインにも相性が非常によく、操作も快適でエレガントです！ しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Str... 続きを読む

iPhoneとMacの画面が融合する魔法のようなUI、MITメディアラボが開発（動画あり） « WIRED.jp

2014/09/27 110 users MITメディアラボ OGATA iPhoneとMac 魔法

TEXT BY LIZ STINSON VIDEO BY TANGIBLE MEDIA GROUP TRANSLATION BY RYO OGATA, HIROKO GOHARA/GALILEO WIRED NEWS (US) MITメディアラボの研究者チームが開発した「THAW」は、スマートフォンとデスクトップコンピューターが同じ処理装置を共有しているかのような、滑らかなインタラクションを可能に... 続きを読む

O'Reilly Japan - マイクロインタラクション

2014/03/04 126 users マイクロインタラクション O'Reilly Japan

UIのディテールをほんの少し工夫するだけでUXは劇的に改善します。本書では効果的なマイクロインタラクション――ひとつの作業だけをこなす最小単位のインタラクション――の意味、有効性、デザイン手法を学びます。マイクロインタラクションを「トリガー」「ルール」「フィードバック」「ループとモード」に分解して豊富な実例とともにていねいに解説し、さらにプロトタイプやドキュメント作成、テストといった実践的な手法も... 続きを読む

2013年すごいと思った研究 - yumulog | 社会人博士の日記

2014/01/04 140 users yumulog 発泡スチロール 進捗 社会人博士 研究

2014-01-04 2013年すごいと思った研究 研究 自分の研究は進捗ダメですが、2013年で「これすげー！」と思った研究をいくつか紹介します。 AquaTop display 電通大小池研の AquaTop Display。水と発泡スチロールなのでいろんなインタラクションができますね。トレたま年間大賞 はじめ、いろんなところに出てました。 LumoSpheres LumoSpheres: 複... 続きを読む

[JS]jQueryのプラグイン100選 -2013年総集編 | コリス

2013/12/24 640 users jQuery コリス パララックス スクリプト アニメーション

今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。 スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクション... 続きを読む