iPhone アプリでの Haptic Feedback による効果的なマイクロインタラクション｜Keisuke Tada
iPhone には Haptic Feedback という振動によるフィードバックの仕組みがあり、それを自分の開発しているアプリに組み込むことが可能です。しかし、いざ組み込もうと思うと、使いどころがなかなか悩ましいといったことがあると思います。 この悩みを解決できるように、Haptic Feedback の考え方や実際の事例をもとに、どういう時に Haptic Feedback を用いると効果的かということを iOSDC Japan 2018 で発表しました。 発表で用いたスライドは下記ですが、メインの事例紹介がすべて動画だったのでこの記事内ですべて紹介します。 Haptic Feedback とは 今回取り上げるのは、iPhone 6s 以降の端末に搭載の Taptic Engine を用いた触覚フィードバックについての話です。 例えば App Store でアプリをインストールする際に
【公式】山本珈琲 オンラインショップ｜コーヒー・コーヒーギフトの通販は1950年創業の山本珈琲
レギュラーコーヒー 【増量キャンペーン4/15～4/22】イタリアンブレンド 100ｇ+ 50ｇ（豆・粉）【期間限定】 475円（税込）
Icons - Lordicon
© 2018 - 2023 All Rights Reserved | Lordicon Sp. z o.o (Ltd) | Made in Poland
UIモーション 02：理解のための動き｜鈴木慎吾 / TSUMIKI INC.
この記事で取り上げたように、UIに動きを取り入れる際は大きく２つの目的があります。 １つ目は「理解のための動き」です。利用者は動きを通じてシステムの状態や変化、情報の構造や関係性、操作方法についての理解を得ることができます。２つ目は「演出としての動き」です。グラフィック要素と共に使用されることが多く、モチベーションや達成感や愛着など利用者の感情に働きかけます。 今回の記事では１つ目の「理解のための動き」について、具体例を交えながら深めていきたいと思います。 動きによって何の理解を助けるのか？UIの動きによって何の理解を助けるのか？ 理解のための動きの目的をさらに複数に分けると、大きく以下の４種類に分類することができます。 アクションの結果を伝える システムの状態や変化を伝える 操作方法の理解を助ける 情報の構造や関係性の理解を助ける 具体的な事例を元に説明していきます。 1. アクションの
スマホ用の気持ちいいインタラクションを豊富に備えた、オープンソースのUIコンポーネント -Cuberto
スマホアプリ用の気持ちいいインタラクションを豊富に備えた、オープンソースのUIコンポーネントを紹介します。タップやスワイプなど、ユーザーの操作に反応するアニメーションは、見ているだけでも楽しめます。 GitHub Open Source Collection ここで紹介するUIコンポーネントは、ロンドンの制作会社「Cuberto」によるもので、MITライセンスで商用のプロジェクトでも無料で利用できます。 Bubble Icon Tab Bar -GitHub 現在位置のアイコンをバブル状にするタブ。 Balloon Picker -GitHub 風船がふわふわ浮かびながら追従するカスタムピッカー。 Fluid Card -GitHub タップすると、アニメーションで拡張するカード。 Liquid Swipe -GitHub 流体のアニメーションでスワイプ。 Rubber Range Pic
東京2020オリンピック・パラリンピック競技大会エンブレムを発表 >>TOKYO 2020
Olympics.comで、オリンピック選手やスポーツイベントに関する記事など、最新のオリンピックニュースを見つけよう - 旬のスポーツ情報をチェック。
かわいい系デザインに使えるCSSいろいろ
2015年2月18日 CSS 過去に書いた「かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました」という記事でかわいい系デザインの作り方を紹介しました。今回はかわいい系第二弾！CSSだけでできるかわいい小技をいくつか紹介します。すべてデモ付きなのでイメージしやすいかな？と思います。デモ画面内にある「HTML」「CSS」タブでコードが表示されるので、コピペして使ってくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 キラキラ系テキスト マーカーでラインを引く ステッチ風ボックス リボン 画像をハート型で切り抜く ハートの鼓動 ラブビーム 1. キラキラ系テキスト 某ギャル雑誌（もう刊行されてないのかな？）で毎回見かけていたこの白抜き＋明るい色のシャドウ。CSSでは text-shadow を用いて表現できます。ポイントは文字を白に設定し、シャドウの横位置・縦位置と
UI Interactions
copy.ui-arrow-02 { position: relative; width: 30px; height: 30px; border: none; background-color: transparent; transition: transform 0.3s ease; } .ui-arrow-02:before, .ui-arrow-02:after { content: ''; background-color: #2980b9; position: absolute; top: 50%; width: 1px; height: calc(70% - 1px); margin-top: -35%; } .ui-arrow-02:before { left: 50%; margin-left: -25%; transform: rotate(-45deg); } .ui-
CSSアニメーションもこれなら手軽！DOM要素にマイクロインタラクションを与えるJavaScriptライブラリ -Micron
ページ上のさまざまなDOM要素にマイクロインタラクションを簡単に与えることができるJavaScriptのライブラリを紹介します。 実装は非常に簡単、カスタマイズ性にも優れており、CSSで要素をアニメーションさせ、JavaScriptでインタラクティブな動作をコントロールできます。 インタラクションを与える 要素に「data-micron」を加えるだけで、インタラクションを与えることができます。 バインド インタラクション 「data-micron-bind="true"」で、他の要素にも簡単にバインドできます。 コントロール インタラクション エフェクト、スピード、イージングなどは、data属性で簡単に変更できます。 Micron.jsのデモ ライブラリを実際に使用して、Micron.jsをボタンに適用してみました。 ボタンをクリックすると、基本となる12種類のアニメーションを楽しめます。
クリックで波紋を出すエフェクト（Ripple Effect）実装メモ - Qiita
javascript エフェクト要素をクリックした座標を中心とした位置に移動させます。 エフェクトのアニメーション自体はcssで表現しています。 エフェクトを発動させるためのclassを付け替えます。 $(function() { var $clickable = $('.ripple'); /* mousedownだと直ぐに発動し、clickだとマウスボタンを離した時に発動する */ $clickable.on('mousedown', function(e) { var _self = this; var x = e.offsetX; var y = e.offsetY; var $effect = $(_self).find('.ripple__effect'); var w = $effect.width(); var h = $effect.height(); /* クリックした
Twitterのハートマーク機能こと「いいね」のエフェクトがどうなっているのか調べてみた
Twitterハートマークのエフェクト 僕はまた、ハートマークのエフェクトは、アイコンフォントなどに何かしらのエフェクトをかけているのかと思っていました。 けれど、調べてみたら、背景に画像を使って、アニメーションをしているだけでした。 画像の場所は以下。 https://abs.twimg.com/a/1457681967/img/t1/web_heart_animation.png 以下がその画像です。 で、上の画像を用いてCSSでアニメーションをしたのが以下になります。（トリガーはマウスオーバーになっています） .heart { width: 100px; height: 100px; background: url(https://nelog.jp/wp-content/uploads/2016/03/heart_animation.png) no-repeat; backgroun
ClockMaker Labs - Interaction Design × Web Technology
Portfolio website of IKEDA Yasunobu a.k.a ClockMaker / Web Designer and Frontend Engineer from Tokyo, Japan.
LINEアニメスタンプにも利用できる！ APNGやWebPへ変換可能なアプリ「アニメ画像に変換する君」をリリース - ICS MEDIA
LINEアニメスタンプにも利用できる！ APNGやWebPへ変換可能なアプリ 「アニメ画像に変換する君」をリリース GIF画像に変わり得る新世代のアニメーション画像形式として、APNG（エーピング）とWebP（ウェッピー）があります。それらの画像ファイルを簡単に作成できるデスクトップアプリケーション「アニメ画像に変換する君」を弊社が開発し、無償でリリースしています。 ▲ デスクトップアプリケーション「アニメ画像に変換する君」 主な用途としてLINEアニメーションスタンプの制作に利用できます。LINEアニメーションスタンプはAPNG形式が採用されており、Adobe AnimateやPhotoshop等のソフトで制作したアニメーションをAPNG形式に変換する必要があります。 このアプリケーションを使えば、簡単な手順でLINEアニメーションスタンプ用のAPNG形式に変換できます。 ▲「アニメ画像
今風のローディングアニメーション（ローディングエフェクト）の考え方とサンプル例｜ツーブロッカ
こんにちは。 今日は今風のカッコいいローディングアニメーション（ローディングエフェクト）の作り方についての考え方とサンプルをブログに書きたいと思います。 何も言わずにサンプルをコピペすれば即導入できる仕様になっておりますので、とにかくイケてるやつ作って！と言われた可哀想な方は是非ともお役立ていただければ幸いです。そのかわり広告をワンクリックしてね。 最近のローディングアニメーションとちょっと昔のアニメーションスマートなデザイン、カッコイイWebサイトにはカッコいいローディングアニメーションがつきものです。 クリックした途端にスルスルっと動くアニメーションに「このサイトはいいぞ！」と予感したことがある方は多いはずです。 これが面白いことに、そういう派手目な演出のローディングアニメーションって「Webサイト」独自の概念で、アプリでは見かけませんね。諸説、いろんな考えがあると思いますがUIではな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
argyleink/transition.css
LittleSnippets.net - A free collection of CSS3/HTML snippets. New entries crafted and added daily.
コピペで簡単！サイト制作のアクセントになるパーティクル(粒子・分子)エフェクト・アニメーション14選！【CSS/JS】
UI Interactions of the week #125
手順2.シェイプトゥイーンアニメーション作成｜Adobe「Flash CS3 Professional」の利用方法 （FLASHの作成）｜PC利用Tips集｜PC・ネットワークの利用方法｜利用方法｜東京経済大学情報システム課
CSSで実装出来るフリップカードアニメーション集【回転・反転など、タイルデザインなど様々】
