InVision

InVision Studioを使ってサイトのアニメーションを作った話

InVision Studioを使ってサイトのアニメーションを作った話

こんにちは。デザイナーのkatoです。 業務でアニメーション付きのサイトをデザインすることになり、InVison Studioというデザインツールを使ってアニメーションを作成したので、使い方や機能など解説したいと思います。 InVison Studioとは? プロトタイピングツールで有名なInVisonが開発したデザインツールが「InVison Studio」です。2018年にアーリーアクセス版が提供されましたが、現在では誰でもダウンロードして使うことができます。 XD

スキ
10
UIデザイナー版:働き方改革!〜デザインツール編〜

UIデザイナー版:働き方改革!〜デザインツール編〜

はじめまして。 Sansanのプロダクトデザイナーをしていますちゃんあべこと阿部です。 もみあげが長くて昔は、ルパンと呼ばれていました。何も盗めない奥手なボーイです。 去年所属していた医療系のスタートアップから、Sansanに転職しました。社員数も桁違いに多いので、最初は戸惑いましたが、最近では慣れつつ日々を過ごしています。(ここについては別記事て執筆予定) 以前のスタートアップと比べると、人数規模の違いからか、進んでいるプロジェクトは比較にならないほど多く、その中でも

スキ
19
【イベントレポート】エンジニアが持ちたい名刺を作ってみた。

【イベントレポート】エンジニアが持ちたい名刺を作ってみた。

小澤です。TechBowlを設立して1年4ヶ月。メンバーも増えてきた&オフィス移転も重なったので名刺を刷新しました。 いい感じの名刺作ってくれる人いないかな〜・技術のサラダボウル(TechBowl)をうまく表現してほしい ・エンジニア同士が名刺交換する時もわいわい話せる感じにしたい ・なんか、こう、エンジニアっぽい、いい感じにしたいよね ざ、雑。。。。。最初はこんな感じで始まりました。 「あ、、1人いますよ。めちゃくちゃおすすめが!」という弊社エンジニア大木のささやきが

スキ
17
InVision Studioを使ってみた #1

InVision Studioを使ってみた #1

sketchに変わるプロトタイプ作成ツールとしてInVision Studioを使ってみた感想を書いていこうと思う。 ・・・いきなり超肝心な部分でバグがあると気づいた。 Prototype作成時に、画面内に日本語が含まれていると正常に描写されない。 ・日本語が含まれていない場合 ・日本語が含まれている場合 ただし、ネイティブデスクトップアプリ上では問題なくProtoType確認ができる。ただ、Webで確認できないとはなんなのだろうか・・・。元々こちらがメインでやって

スキ
2
いちばん詳しい Sketch / XD / Figma / Studio の比較  〜6. まとめ

いちばん詳しい Sketch / XD / Figma / Studio の比較 〜6. まとめ

Sketch, XD, Figma, Studio を比較する連載記事の6番目です。今回で終わりです。 1. 導入と背景知識 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル 5. プロトタイピングとコラボレーション 6. まとめ    ◀イマココ 今回はまとめです。各ツールの総括と、補足的な情報、ここまで比較しての結論などを書きます。 各ツールの総括 各ツールについて、特徴などの総括です。詳細はいままでのnoteでぜひ。 Sketch: ★

スキ
112
いちばん詳しい Sketch / XD / Figma / Studio の比較  〜5. プロトタイピングとコラボレーション

いちばん詳しい Sketch / XD / Figma / Studio の比較 〜5. プロトタイピングとコラボレーション

Sketch, XD, Figma, Studio を比較する連載記事の5番目です。 1. 導入と背景知識 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル 5. プロトタイピングとコラボレーション    ◀イマココ 6. まとめ 今回はデザインに画面遷移やアニメーションをつける「プロトタイピング」機能と、複数人での作業や情報共有の機能についでです。 プロトタイピング機能とは 画面遷移やアニメーション、インタラクションを作成する機能です。UIデ

スキ
76
いちばん詳しい Sketch / XD / Figma / Studio の比較  〜4. シンボルとスタイル

いちばん詳しい Sketch / XD / Figma / Studio の比較 〜4. シンボルとスタイル

Sketch, XD, Figma, Studio を比較する連載記事の4番目です。 ※ 2019年5月追記: XDのシンボルについての大幅なアップデートに対応して、内容をかなり修正しました。 1. 導入と背景知識 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル    ◀イマココ 5. プロトタイピングとコラボレーション 6. まとめ 今回はUIツールの肝とも言える、「シンボル」の機能や管理性能、「スタイル」の機能、デザインシステム・コン

スキ
137
いちばん詳しい Sketch / XD / Figma / Studio の比較  〜3. デザイン機能比較

いちばん詳しい Sketch / XD / Figma / Studio の比較 〜3. デザイン機能比較

Sketch, XD, Figma, Studio を比較する連載記事の3番目です。 1. 導入と背景知識 2. 基本項目の比較 3. デザイン機能比較    ◀イマココ 4. シンボルとスタイル 5. プロトタイピングとコラボレーション 6. まとめ 今回は基本的なデザイン作成に関する機能についての比較です。 操作感・UI ツールの操作のしやすさ、UIについての評価です。まず、基本的な操作感・キーボードショートカット・UIの構成はどのツールもかなり似ています(XDは

スキ
112
いちばん詳しい Sketch / XD / Figma / Studio の比較 〜2. 基本項目の比較

いちばん詳しい Sketch / XD / Figma / Studio の比較 〜2. 基本項目の比較

Sketch, XD, Figma, Studio を比較する連載記事の2番目です。 1. 導入と背景知識 2. 基本項目の比較    ◀イマココ 3. デザイン機能比較 4. シンボルとスタイル  5. プロトタイピングとコラボレーション 6. まとめ 今回は料金や利用環境など、各ツールの基本的な項目についての比較を紹介します。 対応デバイス環境 Figmaのみ、ブラウザ上で動くWebアプリケーションです。MacOS, Windows用のデスクトップアプリもあります

スキ
114
いちばん詳しい Sketch / XD / Figma / Studio の比較  〜1. 導入と背景知識

いちばん詳しい Sketch / XD / Figma / Studio の比較 〜1. 導入と背景知識

平田です。普段は個人のブログに記事を書いているので、ちゃんとしたnoteを書くのはこれが初めてです。 Sketch, Adobe XD, Figma, InVision Studio について徹底的に比較を行ったので、知見をまとめたいと思います。量がかなり多いので、いくつかの記事に分けて紹介します。 1. 導入と背景知識    ◀イマココ 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル 5. プロトタイピングとコラボレーション 6. まとめ 今回

スキ
365