アニメーションはウェブサイトやアプリ、ゲームのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションにたいして苦手意識を持っている方も少なくないでしょう。今回は私たちがアニメーションを作る時に用いている、簡単に「いい感じ」に仕上げるテクニックを紹介します。 CSS Transitionなどは、始めと終わりの状態を指定することで、中間の状態を自動的に補完しアニメーションさせられます。本記事のデモはCSS版、GSAP版、Anime.js版の3種類で作成しています。お使いの技術にあわせて参考にしてください。 CSS版：CSSアニメーションを中心に作成したサンプル。演出の精度は簡易的。 GSAP版：JSライブラリGSAPジーサップを用いたサンプル。演出の精度が高め。 Anime.js版：JSライブラリAnime.jsを用
この記事は Chromium Browser アドベントカレンダー 24 日目の記事です。 内容の一部は Chromium の Git レポジトリの renderer/core/dom フォルダの README ファイル （英語）が元になっています。README の想定読者は Chrome の開発者でしたが、この記事の想定読者は一般の Web 開発者です。この記事の一部は README ファイルに還元（バックポート）する予定です。 この記事は詳細な API の使用方法などには深入りしません。雰囲気で理解するのを目的としています。記事には読者への課題がいくつか含まれていますが雰囲気で理解するにあたって必須ではありません。 課題への解答・記事へのフィードバック・Typo などを発見しましたら GitHub Issue の方へお願いします。 更新: [2019-07-06 Sat]: Link
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・
【重要】サービス終了のお知らせ 平素よりPetalica Paintをご利用いただきありがとうございます。 誠に勝手ながら、この度Petalica Paintは、2025年7月31日をもちまして、サービスを終了させていただくこととなりました。これまで長きにわたりご愛顧いただきましたこと、心より感謝申し上げます。 以下に、サービス終了に関する詳細についてご案内いたします。 サービス終了日: 2025年7月31日 16:00（日本標準時間） サービス終了に伴う対応: サービス終了日時以降は全てのサービスがご利用いただけなくなります。 お問い合わせ: サービス終了に関するご質問やご不明点がございましたら、以下の窓口までお問い合わせください。 お問い合わせフォーム 突然のお知らせとなり、皆様にはご迷惑をおかけいたしますこと、深くお詫び申し上げます。 サービス終了まで残り短い期間ではございますが、引
【DeNA TechCon 2017】「ログ分析で支えるゲームパラメータ設計」…『逆転オセロニア』の事例をもとにバランス調整法を伝授 ディー・エヌ・エー（DeNA）<2432>は、2月10日、渋谷ヒカリエにて、技術者向けの大規模イベント「DeNA Technology Conference 2017」を開催した。 本イベントは、「多岐にわたるDeNAの技術的チャレンジに焦点を当て、広く世に公開することで、技術進歩・進化に役立つこと」を目的に、2016年より同社が技術者向けに主催している。第2回となる2017年は、ゲームなど既存の事業におけるチャレンジのみならず、人工知能(AI)など今後注力をしていく分野を含め、ゲストスピーカーやDeNAのエンジニアが5つのステージ・31のセッションで公演を行う。 本稿では、14時40分より、E-STAGEにて実施された、「ログ分析で支えるゲームパラメータ設
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は sessionstack blog に投稿されている、How JavaScript works シリーズの一記事 "How JavaScript works: memory management + how to handle 4 common memory leaks" の和訳です。投稿されたのは Alexander Zlatkov, 原文はこちらです。翻訳については許諾いただいています。 メモリ管理もしくはC言語におけるメモリ解説他、用語なども怪しい箇所は多分にありますので、間違いがありましたら修正のご指摘・編集リクエス
ここまでランキングのあるべき方向性と、実行可能なアプローチについて考察してきた。そして、いよいよプロトタイピングと実験の時間だ。残念ながら自分はサーバーサイドのコードが書けないので、ここからは開発チームに託すことになる。 妄想や実証不能なものをオーダーするのは非効率だと思う。ある程度はクラスをモデリングしておくと、エンジニアとディスカッションしやすい（ように思える）。 とりあえずnoteでのランキングは、様々な試行錯誤や実験が予想される。そのため、以下のような要素が必須となる。 ・工数最小 ・あらゆるランキングを表現できる ・拡張しやすい 今回はDecoratorパターンとCommandパターンを混ぜたような実装で、柔軟性のあるランキング計算システムのコンセプトを描いてみた。下手なコードでも、設計がある方がエンジニアさんに説明しやすい。 設計イメージとしては、まずランキングの各処理を同じイ
この記事はドット絵 Advent Calendar 2017の12月8日分で寄稿させていただきました。adventar.org 今回は数あるドット絵制作用ツールの中でもアニメーション制作に特化したAsepriteを利用し実際にアニメーションを作るまでの過程を紹介します。Asepriteについてはアケルさんが打ち方講座を記事にしてくださっているので今回はその補完的な役割として考えてください。 qiita.com 今回使用しているAsepriteはv1.2.5-beta2のものです。Asepriteには興味ないけどアニメーションには興味あるよって人はアニメーションについての知識の項から読み始めてね。 目次 目次 Asepriteの基本部分 スプライトシートを作る 画面の見方 スプライトシート パレット プレビュー ツール タイムライン その他の機能 アニメーションについての知識 制作方法 逐次
TAP TO START CLICK TO START サウンドをオンにしてお楽しみください Turn up the volume and enjoy
Webサイトやアプリを作る際に設計図として欠かせないワイヤーフレーム。各画面で何を伝えたいかを一緒に開発するエンジニアやディレクターに伝えるコミュニケーションツールとして大事な役割を持っています。 一方で、ワイヤーフレーム作成の段階でグラフィック要素を多くしてしまったり、色やロゴ、複雑なフォントを多用するなど、ついデザインを作り込んでしまったことはないでしょうか。こうした問題は、特に初心者のデザイナーの方に陥りがちかと思います。 しかし、作り込んだからといって良いワイヤーフレームと言えるとは限りません。むしろWebサイトやアプリの方向性の合意を関係者内で早めにとり、そのあとで細かく作り込む方が、効率よくデザインを進めることが出来ます。 この記事では、素早くワイヤーフレームを作るためにrootでも使っているデザインツール「Whimsical」をご紹介します。 直感的な操作が可能なデザインコラ
ネット上では、誰がオリジナルの作者なのかもはやわからなくなっているミーム画像、ミームGIFが出回っている。エンジニアたちは、このようなミームを拡散するのが大好きで、知乎などのQ&Aサイトに、そのようなミームを集めたまとめ記事が投稿されることがある。 誰の著作物かもはやわからなくなっているミーム ネット上にはミーム画像、ミーム動画が存在している。元々は誰かの著作物なのだろうが、改変されることを繰り返して、もはや原著作者が誰だかわからなくなっているような画像、動画だ。あるいは原著作者が、勝手に二次利用されることを容認、黙認しているものだ。 ミームとは遺伝子に対応するものとして、遺伝学者リチャード・ドーキンスが作った言葉。文化も遺伝子と同じように、模倣を繰り返しながら継承されていくというものだ。ミームは、ミミック（模倣）、メモリー（記憶）などの言葉から作った言葉だという。 エンジニアたちは自虐的
DOMはHTMLの木構造(あとXMLも）やイベント等をプログラムから操作するためのAPIです。DOMの実装者として有力なのがウェブブラウザであり、ブラウザが提供するDOMのAPIを用いてJavaScriptプログラムからウェブページを制御するというのがDOMの極めてメジャーな使い道です。 近年知名度を増してきたReactやVueなどのライブラリも、もちろんこのDOMを用いて実装されています（Reactだとreact-domというあからさまな名前のパッケージがDOMを扱う部分を担当しています）。 この記事では、DOMで提供されるAPIを用いて木構造にノードを挿入する方法全38種類を列挙します。 ノードの挿入とは DOMにおいて基本的な操作のひとつがノードの挿入です。ノードというのは木構造の最小構成単位であり、要素ノードやテキストノードなどの種類があります。例えば<u>は</u>というのはu要
これまでベンチャー企業でBtoCのWebサービスをPMしたり、大企業で会員数が半端ないCtoC事業のWebサービス及びアプリのPMを担ってきました、たばてぃしゃちょーです。 ハンドルネームの通り社長業もやっていて、アフィリエイトでそこそこ稼いでいます。 アフィリエイトに関する過去記事はこちら。 blog.gahara.me この度、10月20日にAmazonの値下げを通知するWebサービスをイラク日報村を作ったカリスマ@alea12と一緒にリリースしました。 Amazonで安くなったら即通知 Cupio cupio.jp 競合が多数ひしめき合う中、今更Amazonのアフィリエイトwwwwwww って思うかもしれません。私も思います。 今回は企画からリリースまでにやった事となぜこのサービスを作ることになったのかを書いていきます。 スモールスタートの仕方を学びたかったり、Webサービスを作って
本稿は（序）（破）（Q）のシリーズの3番目の記事になります。 本稿では前回（破）で説明したAtomic Designを導入する際に工夫した点をふまえた実装例をJSフレームワークを使用する場合と使用しない場合の２つの場合について紹介します。 シリーズ（序）ではAtomic Designの概要 シリーズ（破）ではAtomic Designの導入に際して工夫した点 について説明していますので、そちらをご覧ください。 実装例題材 下のサイトテンプレートを題材に実装していきます。 https://html5up.net/prologue シチュエーションとしては、デザイナーからもらったデザインカンプをエンジニアが実装する想定で説明します。 コンポーネントの分割 エンジニアはデザインカンプをAtomic Designのコンポーネント単位に分割していきます。 コンポーネントの分割フロー図は（破）で以下の
WEB+DB PRESS Vol.107掲載のオブジェクトベース設計によるUIデザイン改善を読んだ。デジタルなサービスのUIを設計していく上で、とても参考になる知見なのでまとめてみる。 オブジェクトベースUI設計とはユーザーがやること（タスク）の手順をそのまま画面に反映させるのではなく、ユーザーの関心対象（オブジェクト）を画面とデータに対応させながら考えていく手法。 オブジェクトベースUI設計の良いところこのオブジェクトベースUI設計は、特に複雑なタスク＆要求が混在する業務利用アプリケーション（SaaS / B向けサービス）のUIデザイン改善、運用で活かしやすいという印象を受けた。 大規模なシステム、膨大なデータと連携しながら、多様なユーザーニーズに応えやすいUIを実現するにはどうすれば良いか。 要件に散在する情報をオブジェクトとして捉えることで、その場しのぎではないUIデザインが作りやす
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く