コピペで使える！ CSS Animationだけで実現するキャラクターアニメーション - ICS MEDIA
みなさんは、CSSアニメーションどのように使っていますか？ ウェブサイトのちょっとした演出でCSSトランジションを使用している方が多いと思いますが、類似のCSSアニメーションはどういった使い道があるのかよくわかっていない方も多いのではないでしょうか。実は、CSSアニメーションを使うとキャラクターアニメーションを作ることができます。 今回はシンプルな変形アニメーションを組み合わせて、1枚の画像で実現できるキャラクターアニメーションを制作しました。オリジナルのキャラクターをアニメーションさせていますが、CSSのコードのコピー&ペーストで他のキャラクター（画像）にも簡単に適応できます。 商用・個人問わず無料で利用できるMITライセンスで公開していますので、ウェブサイトやコンテンツ制作に是非ご活用ください。 伸びるアニメーション 上方向に「ぷるんっ」と伸びるアニメーションです。scale()でタイ
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
LINEのアニメーションスタンプはこう作る！ APNGファイルの作り方を徹底解説 - ICS MEDIA
▲メイン画像（「アニメーションスタンプ制作ガイドライン」より引用） ▲トークルームタブ画像（「アニメーションスタンプ制作ガイドライン」より引用） デザイン カラーモードはRGB 画像サイズは幅320×高さ270px以内（幅、高さのどちらかが270px以上あれば、横長や縦長の画像の制作も可能） 背景は透過 アニメーションのない余白部分は削除 APNGファイルの最初のフレーム画像がLINE STOREまたはスタンプショップの販売時や静止時に表示される 再生時間（1つのAPNGファイルあたり） 最大再生時間は4秒 最大フレーム（コマ）数は5〜20フレーム 1〜4回ループ可能（再生時間4秒を超えない範囲内） データ容量（1つのAPNGファイルあたり） 300KB以下 詳しくは「アニメーションスタンプ制作ガイドライン」をご覧ください。この記事の情報もガイドラインの更新にあわせて随時アップデートしてい
CSSスプライトとstepsを使ってアニメーション画像を作ろう
2023年7月25日 CSS CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 ↑私が10年以上利用している会計ソフト！ steps の記述方法 steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば5段階で変化させるなら、steps(5) と記述します。 .element { animation: img-move 5s steps(5); } @keyframes img-move
Googleのマテリアルデザインの「動き」がどのような法則に従っているのかがよくわかるムービー「Material Design Motion」
Googleが2014年に公開した「マテリアルデザイン」は、単純な「OSのデザイン」ではなく実用性に加えて「素材」や「現実の感覚」を取り入れた独特のデザインフレームワークになっています。アニメーションを用いて、「動き」にもこだわることでプロダクトの品質を向上させているとのことですが、マテリアルデザインの「動き」がどのような法則にのっとっているのか、わかりやすいムービーが公開中です。 まず、マテリアルデザインの「動き」はどのような点で他のアプリやソフトウェアデザインと異なるのか？というこだわりの概要は以下のムービーからサクッと理解できます。 Material Design Motion - YouTube マテリアルデザインは、現実世界を生きている私たちのような「命」が感じられることが特徴です。 反応がよく、自然で、意識的。 そして、意図を持って動きます。 スマートフォンのスクリーンの形をし
汎用性のあるロゴマークデザイン3つのポイント｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは。watataniです。 東京オリンピックのエンブレム騒動はデザイナーにとって改めていろいろな課題を残しましたがロゴマークデザインはもはやデザイナーだけの範疇ではありません。 参加資格を問わないロゴマークデザインのコンペティションはあちらこちらで今も常に行われております。オリジナリティーはもちろんのこと、コンセプトやクオリティーが高いのに落選したり、自社のロゴマーク作ってみたけど、又は制作をお願いしてみたけど、なんか使いづらかったりなんてことありませんか？ せっかく作ったロゴマークが活かせないなんて悲しいですよね？ 今回はドワンゴのキャラクター・ロゴデザインのレギュレーション担当から見た汎用性のあるロゴデザイン3つのポイントをご紹介したいと思います。 ロゴマークのデザインコンペを例に取って考察して行きましょう 様々なタイプの作品が応募され、どれも個性的でインパクトのある作品が多い
WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。 プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。 以下では、そう思うに至った理由について述べたいと思います。 この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。 Blisk（ブリスク）とは Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。 現在は、Wi
ご訪問ありがとうございます。—前田高志
このブログは役目を終えたので閉鎖しました。 永らくご愛読いただき本当にありがとうございました。 2016年2月。任天堂を退社し、まずやったことは文字で「デザインの力」を伝えることでした。 長年ゲームの魅力を伝える仕事をしてきました。これからはデザインだ。どうせ書くなら出し惜しみなし、誰も書かないことを書こう。 次第に「デザインってすごいんですね」と言ってもらえることが増え、デザインを志す方、デザインが好きな方、お仕事をご一緒する人とたくさんつながりを持てました。 今も個人のnoteも続けていますし、株式会社NASUと前田デザイン室の仲間とともにプロダクトやプロジェクトを起点に情報発信を絶え間なく続けています。 これは、このブログを立ち上げた時の気持ちと一切変わりません。 「デザインの力を伝える」 ただ、この１点です。 引き続き、これからも応援よろしくお願い致します。 デザイナー 前田高志
Bootstrap 対応！パワフルなアニメーションボタンを簡単実装しよう。Codrops Animocons
あらゆるサイトで利用されているボタンは、小さいですがユーザーが直接操作を行う重要なパーツ要素のひとつです。ボタンをデザインをするとき、見た目だけでなく押したときのエフェクトの作成に迷ってしまうという人も少なくないでしょう。 今回、Animocons というCodropsによるアニメーションボタンを使い、Bootstrapを使う感覚で、HTMLとクラス名を書くだけでアニメーションつきのボタンが簡単に実装できるようにしました。 注目が集まっているアニメーションを利用した、動きにアクセントのあるボタンデザインを作成してみてはいかがでしょう。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル 使い方は簡単で、クラスつきのHTMLを書くと、その要素がアニメーションボタンになります。 ※ アイコンに
イラストや絵で線の描き方、空間のつくり方、動きの表現、なぜこう描くとうまくなるのかがよく分かる -アニメーターが教える線画デザインの教科書
絵の描き方を扱った本の多くは「こう描けばうまくなるよ」というものが多い中、「なぜこう描くとうまくなるのか」と絵の上達方法をくわしく、そして分かりやすく徹底的に解説されたオススメの本を紹介します。 映画攻殻機動隊やヱヴァンゲリヲン新劇場版など、数多くの商業作品に携わったプロのアニメーターが解説する、ペン・筆・アプリ・液タブに頼らない線画デザインの手法や理論を学ぶことができます。 刊行されている線画デザインの教科書は現在、2種類。 アニメーターが教える線画デザインの教科書 Amazonでみる アニメーターが教える線画デザインの教科書 2: キャラクター創造編 Amazonでみる 本書は頭の中で描いたイメージをどのように線画デザインで表現するか、線の使い方、空間のつくり方、動きの表現方法など、こう描くとなぜうまくなるのか、その手法と理論をしっかり身につけることができます。 それぞれ内容は異なりま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マテリアル デザインのガイドライン（日本語版）