TikTokのUIとインタラクションの観察｜鈴木慎吾 / TSUMIKI INC.

2024/02/05 6 users TikTok Tsumiki 鈴木慎吾 アクション 観察

今までちゃんと使ったことがなかったTikTokを最近がっつり触ったところ、UIやインタラクションの細かな作り込みに気づくことが多く、発見の連続でした。今後の機能開発やUIデザインの参考にもできそうなので記事にまとめます。 調査期間：2024/1/22 - 1/29 使用環境：iPhone 15、iOS17 1. アクションなしの没入体験TikTo... 続きを読む

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

2023/07/27 9 users ギャラリ コンポーネント アニメーション レイアウト アイデア

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

ユーザーのインタラクションを伴うさまざまなUIコンポーネントをCSSで実装できる軽量フレームワーク -Ellegant CSS

2023/04/09 16 users トグル モーダル UIコンポーネント CSS フレームワーク

ハンバーガーメニューを使用したスマホ用のナビゲーション、アニメーションで表示されるモーダル、要素を表示・非表示するトグル、要素を切り替えるスイッチなど、ユーザーのインタラクションを伴うUIコンポーネントをCSSで実装できるフレームワークを紹介します。 Ellegant CSS Ellegant CSS -GitHub Ellegant CSSの特... 続きを読む

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) ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化するインタラクションがあります。たとえ... 続きを読む

変幻自在なグラフィック表現！CSS, SVG, Canvasでマスクを使いこなせ - ICS MEDIA

2021/07/02 15 users canvas SVG CSS アニメーション マスク

近年、ウェブ技術の発展により、画像の一部だけを表示する「マスク表現」がよく見られるようになりました。一言でマスクと言っても、アニメーションやインタラクションとの組み合わせによりさまざまな表現が可能です。 また、どの技術を用いるかという選択も重要になります。マスク表現はCSS, SVG, Canvas APIといった技... 続きを読む

プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.5 | コリス

2021/06/08 12 users コリス UX Micro-Tips UIデザイナー 印象 知識

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第5弾は、ユーザーエクスペリンスやインタラクションに関するテクニックです。 UI & UX Micro-Tips: Volume Five. by Marc Andrew 下記... 続きを読む

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

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

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

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

2020/06/11 9 users 論文 コンピュータサイエンス 実務 大学生 小学生

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

マンガでわかるHCI: 公衆衛生とデータ可視化の歴史｜マンガでわかるHCI（ヒューマン・コンピュータ・インタラクション）｜note

2020/03/20 30 users HCi Note 公衆衛生 マンガ ヒューマン・コンピュータ

新型コロナウイルス感染症については、必ず1次情報として 厚生労働省 や 首相官邸 のウェブサイトなど公的機関で発表されている発生状況やQ&A、相談窓口の情報もご確認ください。※非常時のため、すべての関連記事に本注意書きを一時的に出しています。 さて、世界は今コロナ一色ですね。 日本では少し落ち着きを取り戻し... 続きを読む

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

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

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

Adobe XDステート機能を使いこなそう！ - ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 - ICS MEDIA

2020/03/05 11 users ポパー カルーセル ICS MEDIA ハンバーガーメニュー

Adobe XDステート機能を使いこなそう！ ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 AdobeXD2019年11月の大型アップデートで「ステート機能」が登場し、リッチなインタラクションを作成しやすくなりました。従来はアートボードを複数枚組み合わせて表現するしかなかったのですが、ステート機能の登場によ... 続きを読む

コンピュータサイエンスでPhDプログラムに留学したい方へのアドバイス｜マンガでわかるHCI（ヒューマン・コンピュータ・インタラクション）｜note

2020/03/05 11 users HCi Note コンピュータサイエンス マンガ アドバイス

だいぶ音沙汰がなくてすいません... _(. _ .)_ というのも、実は12月ごろから、アメリカでは絶賛就活シーズンでして（Facultyなどのアカデミア就活）、もう忙しいのもあり、ずっと宙ぶらりんの状態が続くのもあり（大体11月ごろから始まって、最終的に決まるのは、4-5月なのです。  長すぎ笑）、博論を書いたりもしない... 続きを読む

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

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

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

広野 萌 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にインタラクション... 続きを読む

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

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

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

マンガでわかるHCI: クラウドソーシングの歴史｜マンガでわかるHCI（ヒューマン・コンピュータ・インタラクション）｜note

2019/09/02 39 users HCi CROWD 群衆 アウトソーシング 外注

クラウドソーシングの歴史クラウドソーシングという言葉。おそらく既にいろいろなところで聞いたことがあるかもしれません。 クラウドソーシングという言葉自体は、「外注」という意味のアウトソーシングと、「群衆」という意味のクラウド（雲やクラウドコンピューティングのCloudではなくCrowdの方）をかけて作られた言... 続きを読む

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

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

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

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

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

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

マンガでわかるHCI: ユビキタス・コンピューティングってなに？｜マンガでわかるHCI（ヒューマン・コンピュータ・インタラクション）｜note

2019/08/11 26 users HCi ユビキタス Note マンガ かんたん

ユビキタス・コンピューティングってなに？前回は、「ユビキタス」という言葉について紹介しました（前回の記事はこちら： 「マンガでわかるHCI: ユビキタスってなに？」）。 カンタンに振り返ると、ユビキタスなテクノロジーというのは、 私たちの生活の中に融け込まれ、もはや空気のように、意識しなくてもそこにある... 続きを読む

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

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

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

マンガでわかるHCI: ユビキタスってなに？｜マンガでわかるHCI（ヒューマン・コンピュータ・インタラクション）｜note

2019/08/04 23 users ユビキタス UBIQUITOUS HCi Note 辞書

ユビキタスってなに？ 突然ですが、みなさんはユビキタス（Ubiquitous）っていう言葉を知っていますか？ 大抵の人は、「ユビキタス？なにそれ？聞いたことないよ。」という感じかと思います。辞書で検索しても「偏在的な」とか出てきて、ますますよくわからなくなってきます。 ところが、この「ユビキタス」という言葉、... 続きを読む

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

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

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

マンガでわかるHCI （ヒューマン・コンピュータ・インタラクション) - はじめました｜マンガでわかるHCI｜note

2019/07/21 19 users HCi Note マンガ ヒューマン・コンピュータ 鈴木

はじめまして、アメリカの大学でコンピュータ・サイエンスの研究をしている鈴木 遼（@ryosuzk）と言います。 僕の研究分野は、特に、ヒューマン・コンピュータ・インタラクション（Human-Computer Interaction、略してHCI）というのですが、コンピュータ・サイエンスの中でも正直（よくわからない）少し変わった研究分野... 続きを読む