Lottieでアプリにアニメーションを組み込む話（デザイナー編） - くらげだらけ
最近ではWebサービスやスマートフォンアプリにおいてもアニメーションの重要性は認識されつつあります。 機能としてのアニメーションは「FacebookアプリのLoading Placeholder」や「TwitterアプリのLikeボタンのフィードバック」のように何が起こっている（起きた）のかをわかりやすく伝えたり、「17 Live（イチナナ）」や「CASH」のSplashのようにロゴやブランドのイメージを強く印象づけたり、楽しませたりと使い方は様々です。 アニメーションをWebやアプリに組み込む方法は様々ありますが、今回は「Lottie」を使ってアプリにアニメーションを組み込む方法やメリットなどについて書こうと思います。 とはいえ今回はデザイナー編でして、AfterEffectsで簡単なアニメーションを作ってLottie用にデータを書き出すというところまでをご紹介します。 最後にアニメーシ
Developing a design environment
Since moving to San Francisco, I’ve done my fair share of job-hopping. I’ve been a communication designer, a product designer and a front-end developer. Each time my role shifted, I was always busy learning new skills but never felt like I was working on problems that I’d actually be good at solving. Fortunately, it all turned out to be great training for the job I have now, which is building out
オキテ破りの写真加工！フォトショップ無料アクション素材100個まとめ【保存版】
※ 2021年8月31日に新しい素材18種類を追加し、合計100個の無料Photoshopアクション素材となりました。 ※ 2020年1月6日に新しい素材18種類を追加し、合計92個の無料Photoshopアクション素材となります。 ※ 2019年3月6日に新しい素材16種類を追加し、合計74個の無料Photoshopアクション素材となります。 フォトショップのアクションは、デザインに自信がないというひとでも、ボタンひとつでプロ顔負けの圧倒的なデザインを作成できる便利ツールです。 そこで今回は、写真加工を手軽に楽しむことができる、無料Photoshopアクション素材100個を、カテゴリー別にまとめてご紹介します。 作業ペースを格段に上げる時短ツールとして、あらゆるスタイルの写真加工をだれでも簡単に作成できます。 すべて無料でダウンロードできるので、気に入ったアクション素材はぜひ試してみまし
「イメージと違うからやり直し！」を防ぐ「Adobe Comp CC」の使い方
デザイン業務でクライアントとやり取りをし、どのようなデザインにするのか共有した上で制作に着手しているデザイナーは少なくありません。 この場合に、ミーティングでどのようなデザインイメージにするのかを話し合い実際に制作をしていざ納品をした後で、クライアントから「イメージと違うからやり直してほしい」とい言われた経験はありませんか？ 時間を設けてミーティングを行って、数日〜数週間、時には数ヶ月かけて制作したデザインを「やり直し」と言われてしまうと、時間やコストが無駄になるだけではなく自分のモチベーションも下がってしまいかねません。 今回は、このようなトラブルを回避するためにオススメの「Adobe Comp CC」の使用方法をご紹介します。 スマートフォンやタブレット端末上でも使用できるため、外出先でも気軽にワイヤーフレームを作成することが可能です。 Adobe Comp CCとは App Stor
【2018年春】今チェックしておきたいデザインツール12選
JakeはUIデザインやWeb開発の記事を執筆するライターです。彼の仕事はあらゆるWebや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 デザイン業界の流れは速く、絶えず新しいツールが誕生しています。そのため、デザイナーとして最先端を走り続けるには、世の中の動向につねに注意する必要があります。 そこで今回は2018年現在、チェックしておきたいデザインツールを厳選してまとめました。これらのツールにはデスクトップのプログラムもありますし、SaaSのアプリやブラウザツールもあります。 いずれにせよ、このリストにはみなさんがチェックしたいと思うものが必ずあるはずです。詰まるところ、素晴らしいデジタルコンテンツを作ることにおいて、あなたのデザインスキルはさまざまな手段の一部に過ぎないのです。 Adobe XD Adob
In web design, everything hard can be easy again
Frank Chimero recently published “Everything Easy is Hard Again” — describing his journey back into web design after a three-year break. He points out that web design veterans and beginners are pretty much in the same boat today: “I had fifteen years of experience designing for web clients, she had one year, and yet some how [sic], we were in the same situation: we enjoyed the work, but were utter
Prototyping An App’s Design From Photoshop To Adobe XD — Smashing Magazine
(This article is kindly sponsored by Adobe.) There are many ways to design and create an app’s look. Learn how to transfer an app’s design from Photoshop to XD, continuing to work on it and having fun while prototyping. (This is a sponsored article.) Designing mobile apps means going through different stages: pre-planning, visual concepts, designing, prototyping, development. After defining your p
ディレクターがAdobe XDを導入する上で気を付けておくべきこと | ベイジの日報
先日、毎月開催されているAdobe XDの勉強会「Adobe XD meeting #13」に行ってきた。今回は使い方というよりディレクターなどプロジェクトを進行する人向けの内容だった。概要をまとめると以下の3点になる。 1：利用ツール集約で作業効率化 今までどの会社もドキュメント作成には表も図も配置が可能なPowerPointやExcelを使用することが多かった。中でもExcelは国内企業利用率99.4%とのこと。これは誰でもどんな環境でも使えることを意味する。逆に言うと代替えツールがなかったとも言える。 そこでXDの登場だ。 従来の制作フローだと戦略から実装まで、PowerPointやExcel、IllustratorやPhotoshopなど多くのツールが使われていた。ただこのように資料数が多くなればなるほど、いくつものツールに触れなければならなくなって大変だ。 登壇者の経験談で「急な
「FuzeDrive for Ryzen」ミニレビュー。19.99ドルで買えるHDD高速化機能は，ゲームPCのデータ読み出しをどこまで高速化できるのか
19.99ドルで買えるHDD高速化機能は，ゲームPCのデータ読み出しをどこまで高速化できるのか FuzeDrive for Ryzen Text by 石井英男 CES 2018合わせの報道関係者向け説明会で登壇した，AMDのLisa Su CEO AMDはCES 2018の開催に合わせて，2018年にリリース予定の製品の概要やロードマップを明らかにしたが（関連記事），その中に，Enmotusの「FuzeDrive」と呼ばれるHDD高速化ソリューションをAM4プラットフォーム向けに提供するという話があった。 FuzeDrive自体は，SSDなどの高速かつ小容量のストレージと，HDDなどの低速かつ大容量のストレージを組み合わせて，高速かつ大容量のストレージとして使おうという技術だ。“FuzeDrive語”では「高速かつ小容量のストレージ」を「Fast Tier」（ファストティア），「低速かつ
Adobe XDで快適！と感じたこと6つ - aicocco/かんろ
こんにちは、かんろです。 最近仕事でAdobe XDを使う機会がとても増えました。 Fireworksが開発終了になってからワイヤーやカンプはIllustrator中心で作成していて、少しのAffinity Designerを使っていた時期もあったのですが、使っていた当時は日本語入力がとても弱かったことと、周りの人とデータの共有がしにくかったのでIllustratorに戻りました。 作業の流れは、ワイヤーを書きカンプ、そしてモックアップを作りながらプロトタイプを作っていくようなイメージで進めています。これを1ファイルで済ますことができるのが個人的にとても便利！ あと、なんといっても軽いのがうれしい！起動がめんどくさくないというのが地味に大きいです。 そんなAdobe XD、気になってはいたけどまだ使ってない、でも気になる！という人向けに、個人的に良いな、便利だな、と思った機能を改めてまとめ
無料でアニメーションバナーも作れる超有能ツール！Google Web Designerの基本｜アナグラム株式会社
皆さんはバナー作成の際、どのようなツールを使用していますか？PhotoshopやIllustrator等の有料のグラフィックデザインソフトは、社内に導入していないケースやデザインの技術がなく利用していない人も多いのではないでしょうか。 フリー素材サイトでダウンロードした画像をリサイズし入稿するのも良いですが、テキストを一文加えるだけで印象が変わり、アニメーションを加えることで広告をより目立たせることができます。 2016年6月にFlash形式のディスプレイ広告がGoogle アドワーズへアップロードできなくなり、2017年1月以降Flash形式のディスプレイ広告が廃止されました。Flash形式と同じく動きのある広告は、HTML5広告を利用することが推奨されています。Google Web Designerでは工数もかけずにGoogle ディスプレイネットワークキャンペーン向けのHTML5広告
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Sketch無料リソースの2021年決定版！】Sketch用UIキット、ワイヤーフレームキット55選【Sketchユーザーダウンロード必須！】
Adobe is releasing a free XD plan to win the UX design wars
InVision acquires design visibility tool Wake | TechCrunch
An in-depth look at Prototyping in Sketch
Bootstrap 4で実装されているデザインシステム要素すべてをデザイン素材にした無料素材 -Bootstrap Design System