UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
Javascriptのアニメーション処理を高速化するプラグインVelocity.jsの使い方 ｜ Tips Note by TAM
今回はjQueryのanimate()に比べて高速で高機能なプラグイン「Velocity.js」について調べてみました。 ■Velocity.js（公式/記事作成時最新バージョン 1.2.2） http://julian.com/research/velocity/ ■GitHub https://github.com/julianshapiro/velocity ■デモギャラリー http://codepen.io/collection/tIjGb/ Velocity.jsの主な特徴 animate()よりアニメーション処理が高速。 animate()と書き方に互換性がある。（velocity()） jQueryを読み込んでいなくても使用できる。（使用しない場合はIE8はサポート対象外） モック機能がある。 animate()よりオプションが柔軟で豊富。 ... Velocity.jsの
Webサイト制作の中心に分析を！Ptengineの便利な機能と使い方【導入編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGのアートディレクターの長岡です。 Webサイト改善のためにGoogle Analyticsなどのアクセス解析ツールを使って、数値を分析している方は多いのではないでしょうか。 ツールを使いこなせば、それなりに問題点や課題も見つかるようになるのですが、どうしても数値からでは判断できないこともあります。 そんなときに利用したいのがヒートマップツールでしょう。 アクセス解析と合わせてヒートマップを利用することで、立てた仮説や効果を視覚化して検証することができ、より深い分析につながります。 そこで、みなさんは「Ptengine」をご存知でしょうか？ Ptmindさんが開発しているヒートマップツールなのですが、実際にLIGブログで導入してみて、その多機能さに驚かされました。 今回の記事では、その「Ptengine」の便利な使い方、導入するとどのようなことができるのかを、実際に使ってみ
クラウドCMS導入によるWebサイト制作・運用のメリットとおすすめ比較まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、メディア事業部のエリーです。 わたしは前職がディレクターで、自社サービスの企画や運用などをしていました。 その頃、「新規サービスを立ち上げたい！ でもエンジニアのリソースが足りない！ とりあえず手近なCMSで作ってみよう！」という流れで、サービスのβ版をCMSで立ち上げたことがあります。 皆さんも、「サービス・サイト・ブログを立ち上げたいけど開発リソースが足りない…」というときがあるのではないでしょうか。 そんなときの選択肢として提案したいのがクラウドCMSです。 今回はクラウドCMSのメリットと、おすすめのCMSをご紹介します。 ▼もくじ クラウドCMSとは？ CMSとは？ クラウドとは？ CMSがクラウドってどういうこと？ クラウド化によるメリット6つ 1. 初期費用を抑えられる 2. スピーディーに導入できる 3. 運用コストを抑えられる 4. スペックを臨機応変に変更で
Webフォント「Google web fonts」の使い方・実装手順メモ
商用・非商用を問わず無料で利用できるWebフォント、「Google web fonts」の実装方法をさっくりメモっておきたいと思います。 Google Web Fonts Google web fontsとは Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来ます。 Googleの提供するGoogle Web Fontsはアカウント登録の必要も無く、実装が非常に簡単なそれの一つです。商用・非商用ともに無償で利用が可能と言うのもポイント:) ちなみに当サイトでも日付の表示とサイドバー・フッターの見出しにGoogle web fontsの「Coda」を使用しています。 Google web fontsの実装方法 実装の手順は3ステップ。 1.使いたいフォントを選択する 2
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nyle Engineering Blog
