Goodpatch Advent Calendar 2017では、Goodpatchのメンバーが興味を持っている分野や、利用している技術などについて書いていきます。 ダウンロードのプログレスバーやボタンを押した時のフィードバックなど、アニメーションはアプリに欠かせない要素の一つです。今回は Shape Shifter というツールをご紹介したいと思います。 Shape Shifterとは? alexjlockwood/ShapeShifter にもあるとおり、 SVG 形式のアイコンのアニメーションを作成するためのツールです。 Shape Shifter の画面構成 まずは Shape Shifter の画面構成を見てみましょう。この記事では下図の名称で呼ぼうと思います。 プレビュー画面 アニメーションのプレビューを確認できます。 左からスローモーション、巻き戻し、再生、早送り、繰り返しの
こんにちは! デザイナーのすーちゃんです。 雪を見ないと冬っぽさを感じられません。東京は全然雪が降らないので、年末実家に帰るのが楽しみです! さて今回は、今さら聞けないかもしれない、SVGアニメーション用のSVGファイルの作り方をご紹介したいと思います! どういったところでSVGアニメーションが使われているの? まずは、どういった部分にSVGが使われているか見てみましょう! carborocco 最初のローディングやロゴマークが表示される部分がSVGアニメーションみたいです。静止画で見るよりも、ロゴのイメージが湧いてきますね! SERIO VERIFY スクロールに合わせて線が伸びていったり、描いているみたいにイラストが表示されたり……。これもSVGで表現されています。よりストーリー性があって、つい最後まで見てしまいますね! 上で挙げたサイトのように、ストーリー性を持たせたり、強く印象づけ
こんにちは、Komerco事業部デザイナーの藤井(@kenshir0f)です。 主にKomercoのサービスデザイン全般とView周りの開発を担当しております。 今回はKomercoの開発チームで実践している「デザインとエンジニアリングをつなげる取り組み」についてお話します。 なぜデザイナーが実装に入るのか Komercoではユーザーさんへスピーディーに価値を届けるための取り組みを積極的に採用しています。 素早くリリースすることによって、早い段階でフィードバックをもらうことができるほか、 手戻りなどの失敗リスクを最小限に抑えることもできます。 デザイナーがデザインして、エンジニアが実装する、という流れの中で、 実機でのデザイン確認や細かい調整などで想定以上に工数がかかることがあるため、 見た目に関する部分はデザイナーが実装に入ることで、デザイン確認や調整の時間を巻き取とっています。 実践し
日本人が間違えやすい英語 ver. 20210930 ガイ ナット nathaniel.guy@gmail.com 以下に、日本人が間違いやすい英語の例を纏めてみました。主に英語上級レベルの方向けの記事として書きましたが、どのレベルの方でも是非、ご自身の英語力を磨くために参照いただければと思います。 なお、このガイドを作成するに当たり、友達の藤本さんと野口さんに助言いただきました事を、深く感謝致します。 更新(11月16日):読んでくださった皆さん、シェアしてくださった皆さん、ありがとうございます!この記事は私の期待以上に皆さんにシェアしていただいて、本当に嬉しいです。追加してほしいパターン、エラーの指摘、ご感想などを知らせたい方は、ご遠慮なく上記のメルアドへ連絡ください。 例:開始・終了時刻を述べるときの「from」 誤) “Today we will have visitors fro
Circle Controller HUE/360 Ver.0.1.3 © 2012 SAUCER.JP
更新日: 2020年9月27日公開日: 2015年10月8日滑らかで美しい表現ができる!SVGアニメーションを使ってみよう Airbnb の模写(写経)で登場してくる SVG 形式の画像。Webデザイナー志望の方や単価をあげたいWebデザイナーの方にとっては、「SVG」必須ですよね。 今回は SVG 画像だからできる SVG アニメーション・・・・・・・についてご紹介させて頂きます。 参考: CSS-TRICKS SVG アニメーションは、SVG画像をベースに CSS や JavaScript で動きや装飾を加える表現手法の一つになります。 メリットとしては、軽量でスケーラブルな SVG 画像に好みのアニメーションを加えられるという点。普段 Web を見ている限りではどれがSVGアニメーションで、どれがSVGアニメでないのか区別はつきにくいですが、SEOや美しさ、滑らかさを求めるとSVGア
線や塗りなど描画が美しいSVGアニメーションの作り方ロゴやアイコンなどをWebサイトで拡大・縮小しても劣化させたくない場合に使用されるSVG画像。SVGには、gifのように画像をアニメーションさせることができ、gifに比べて滑らかな動きを表現できます。今回はXML形式とCSS3でアニメーションをつけて、ロゴやアイコン、図形などをリッチに見せる方法をサンプル解説とともにご紹介します。 SVGについての詳しい説明や作り方に関しては、こちらの記事をごらんください。 TIPS Vol.34 SVGの作り方 TIPS vol.64 SVGのデータ作成で気をつけるポイント SVGはベクター形式の画像。 jpgやpngなどの形式の画像と違いパスデータで構成されており、そのパスの情報をXML形式で持っているためコード上での編集が可能です。 そのため、XML形式のアニメーションタグを使ってアニメーションをつ
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう(参考「SVGで始めるマイクロインタラクション入門」)。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法(コーダー向け) コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く