株式会社ライデン（RYDEN Inc.）は、クリエイティブと戦略の両面から「長期に渡って利益を創出できる強靭なブランド」づくりを支援し、クリエイティブにおける最高のビジネスパートナーとしてクライアントに伴走します。

※本記事に出てくるアニメーションは全てCSSで作られています はじめまして、新卒エンジニアの yui540(@yui540)です。普段は、pixivFANBOXというサービスのCSSエンジニアをしています。 今回は、私がコーディング&ページ演出のアニメーションを担当させていただいたPIXIV TECH FES. の LP(第一弾)の CSSアニメーションの実装方法を一部解説します。 第一弾 conference.pixiv.co.jp 第二弾 conference.pixiv.co.jp とその前に、「PIXIV TECH FES.って何？」という方もいると思うので、簡単にご説明します。 PIXIV TECH FES. は、私たちピクシブのエンジニアが普段からお世話になっている方や、 お話ししてみたい方をお招きして、サービス開発で得た技術的知見とピクシブの未来についてお話しするテックカンフ

ウクライナ出身のWeb開発者で、WordPressとITライティングに情熱を注いでいます。自身のブログを運営しており、記事、チュートリアルを通じて役立つ情報を発信しています。記事に関する感想などをメールでお知らせください。 私たちが競争社会で人の目を引いて生き残るには、他の人よりさらに多くの努力が必要となります。これが現代の、オンラインというジャングルで生き抜くためのまず最初のルールです。ただし、それは必ずしも、何かを新しく作り直したり、人より多くのお金を持っていなければならないというわけではありません。 重要なのは、大きなアイデアを取り巻くすべてのあわただしさの中でも、細かい部分のディテールに目を向けているかということです。それによって、違いを生み出すことができるのです。たとえ基本的な構造と従来のデザインをしたごく普通のWebサイトであったとしても、目立たせることは可能です。それには、ユ

Jolinaは、アメリカやイギリス、オーストラリアの複数のスタートアップを相手にしているデジタルマーケティングの戦略家です。 長いアニメーションの歴史の中で明らかになったものがあるとすれば、それは動く画像はいつだってユーザーの心を掴めるということです。アニメーションの目新しさは薄れたものの、今ではエンターテイメント以外の目的でも使われることが多くなりました。実際、時代を問わない魅力と汎用性を最大限に活用することで、Webサイトのユーザーに好ましく魅力的な体験を作り出すことができます。 しかし、特にUXデザインの立場から見ると、アニメーションはすべてが同様に作られているわけではありません。いくつかのアニメーションは、問題を解決せず、むしろ新たに生み出してしまっています。善意から作られていても、間違ったアニメーションはユーザーの目的の邪魔をし、インターフェイスを乱し、Webサイトに悪影響を与え

Portfolio website of IKEDA Yasunobu a.k.a ClockMaker / Web Designer and Frontend Engineer from Tokyo, Japan.

BeautiflはFlash(ActionScript 3.0)のオープンソースの秀作を集めたギャラリーサイト。Webクリエイターのインスピレーションを刺激するクールな作品をピックアップしています。

ENCRY is a multi-disciplined international holding company specializing in the creation of high-tech products in the telecommunications field, as well as decentralized and distributed services. OWN De-INFRASTRUCTURE ENCRY platform infrastructure is designed for developing and testing of our solutions, based on classic decentralization and cryptographic principles. Being coupled with other technolo

Sponsored by ##company##","script_id":"_bsa_srv-CE7D653Y_0","platforms":["desktop","mobile"],"viewable":true},"ads":[{"active":"1","ad_via_link":"https://discover.buysellads.com/carbon?utm_source=svgartista-net-custom&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=custom","asset:image":"563b33185b6426eabf560dcbc5fb5adc5c8de263","asset:logo":"3518ed6ff5f0a627fbb8718f4de46d7c2a592e4b","backgro

AboutAnimista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use. Animista started out as a small side-project of mine. As I was increasingly using CSS animations, I thought it would come in handy to have them organised in a meaningful and accessible way so that they can be easily reused on different projects. The idea wa

こんにちは。WebGLのお勉強1週間目くらいの絵描き系エンジニア「ゆき」です。最近Qiita界隈でもタピオカが流行っているらしいので、今日は勉強中の技術をフルに活用してタピオカを作ってみました。 ここで試せます（スマホ未対応）： https://tapioca-pixi.firebaseapp.com この記事の内容と想定読者 この記事ではJavaScriptの描画エンジンの定番の一つであるPIXI.jsと、物理演算ライブラリのmatter.jsを使って、タピオカを可愛くふわふわさせる表現のアプローチとポイントを解説します。 物理エンジンと描画エンジンの連携方法 シェーダーによるオリジナルの表現 物理演算で表現したいものを作るためのチップスいくつか シェーダー(glsl)周りは結構独特なので別途もうちょっとちゃんとした解説記事を書く予定です。この記事はどちらかというと駆け足のネタ記事になっ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 CSS で実装する要素の移動（アニメーション）に関しての簡単な説明から、パフォーマンスに関連する事象を深掘って説明していきます。この辺りの話はややこしいので、自身でも整理をつけるためにまとめました。 長い記事になりますが、CSS のアニメーション（パフォーマンス関連）を深く理解するための手助けになれば幸いです。 既にご存知の方はどこか間違っている点などあればご指摘宜しくお願いいたします。 要素の移動について 要素を縦横にアニメーションを伴って動かしたい場合 transition を適応させた要素に対して right, left,

You have a goal. We figure out the rest. From strategy and concept through design, build, and launch, we co-own the creative and technical vision alongside you. Best for brands and agencies who want a thought partner, not just a vendor. You have a brief. We make it real. You bring the strategy or creative direction. We take it from there: designing, prototyping, and building something that exceeds

FRONTL1NEによく訪れていただいている読者の方なら一度は「デモシーン」や「メガデモ」、「デモパーティ」や「64K Intro」みたいな単語を見かけたことがあると思います。 これらは全て、コンピューターを使った遊びの一つである「デモシーン」というサブカルチャーに繋がっています。 この記事ではデモシーンを知らない方々のために楽しいデモシーンの世界を紹介します。 デモシーンとは何か ↑ デモシーンについて知りたいならデモシーンのドキュメンタリーであるMoleman 2を見ることを強くおすすめします。(日本語字幕あります) 日本では「デモシーン」よりも「メガデモ」という言葉を聞いたことある人が多いと思います。 「デモシーン」とはコンピューターを使用した遊びの一つで、コンピューターがリアルタイムに映像や音楽を生成するプログラムを作ったり、それを見て楽しんだりします。 このプログラム(作品)を「

皆さん、はじめまして。 セガ・インタラクティブ 第一研究開発部 デザイン技術セクション テクニカルアーティストの鈴木です。モーションデザイナーとして、アーケードゲームのガンゲームをメインに10年ほど携わった後、テクニカルアーティストとしてモーション作業周りのサポートをしています。最近では「HOUSE OF THE DEAD ～SCARLET DAWN～」のサポートを行いました。また、採用活動業務も担当するようになりました。 ゲーム歴は長く、電子ゲームやファミコンなどに触れて、現在もゲームを楽しんでいます。 はじめに ゲームアニメーションとは ゲームアニメーションを創ることの面白さ 映像アニメーションを創る面白さ ゲームアニメーションを創る面白さ ゲームアニメーションの難しい点 モノが干渉した表現(当たった感じの表現)と気持ちよさ リアクション原則 カメラシェイク ウエイト オブジェクトシェ

Googleのマテリアルデザインガイドラインからモーションデザイン項目についての翻訳まとめです。 モーションデザインとは何ぞや？の参考にどうゾ。

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 読み込みが長過ぎると皆こうしたくなります。 画像：Gal Shir システムのステータスを視覚化することは、UIデザインの指針の中でも最も重要なものの１つです。 良いインタラクションデザインはフィードバックを与える アプリやWebサイトから即座に反応があれば１番良いですが、読み込みが遅いときもあります。反応が遅いのは、インターネットの接続が悪いせいかもしれませんし、オペレーションそのものに時間がかかっている可能性もあります。そのような場合、デザイナーは、アプリが実際に作動しておりリクエストに取り組んでいるということが分かるよう、ユーザーを安心させなくてはなりません。 アニメーションによる待機表示は、何か起こっている、もしくは読み込んでいる際に、ユーザーにシステム