Sketch はもういらない？ デザインツール Figma の紹介
Figma：https://www.figma.com/ （2019 年 12 月 1 日 ： 古くなって意味消失してた部分を編集しました） Figma とは デザインツール、Figma をご存知でしょうか。 一言で表すならば、コラボレーション機能満載の Sketch です。 本記事を公開した 2017 年時点では、あまり知名度が高くなかったものの、2019 年時点ではだいぶユーザーが増えたように感じます。Google Trends で、Sketch と XD、そして Figma の今と昔を比較してみます。 2017 年 2019 年 （純粋には比較できませんが）2 年前は Sketch と Figma に約 25 倍も開きがありました。ですが現時点では約 10 倍くらいでしょうか。日本ではなんと逆転しています。（タイトルの通り！） そこでもう少し Figma に頑張ってもらうべく、本記事
Froont – responsive web design tool
Design in the browser Design by modifying hundreds of ready made designs or start from scratch. Prepare your assets in Photoshop or Sketch and move them online right away. All you need is a web browser. Deliver faster Publish responsive pages with your own domain name or export your work to host it yourself. FROONT is great for decision making, prototyping and publishing single page websites. A vi
【2017年版】海外のプロトタイピングツール11選（機能比較表つき）
Webサイトやアプリの制作過程において欠かせないプロトタイピングツール。海外のサービスも含めると、その種類は多岐に渡ります。 そのため、「それぞれのツールの特徴ってなんだっけ？」と混乱することも多いでしょう。特に海外の新しいツールの情報を仕入れても、結局「いつもの」ツールに留まってしまいがちです。しかし、自らのスキルや制作したいプロトタイプレベルによって最適なツールを使い分けることは、デザイン業務の可能性を広げます。 そこで今回は制作したいプロトタイプの度合いに応じて、海外のプロトタイピングツールをご紹介していきます。 シンプルなプロトタイプ制作におすすめ ここでは、シンプルなプロトタイプ制作を行う際に推奨したいプロトタイピングツールをご紹介します。「使用感や見た目の心地よさの追求」までは行わない想定をしているので、簡易なアニメーション設定を行うことができるサービスを取り上げます。 １.P
2017年最新版！プロトタイピングツールのまとめ | Supership Tech Blog
Supership デザイナーの若林です。アプリやWebサイトのUI/UXに携わっています（と言っても3月入社の新人ほやほやです）。 最近プロトタイピングツールが増えていますが、実際どれが一番実務に適しているんだろう？と気になっていたところ、良い機会をいただいたのでデザイナー観点で実際に（ざっくり）触った感想と比較をしてみたいと思います。 代表的なツールと種類・トランジション型（遷移）：Prott、Adobe XD、inVision、CanvasFlip、Marvel ・インタラクション型（アニメーション）：Origami Studio、Framer ・複合型：CRAFT + inVision、protopie、Principle、flinto、atomic 大まかにこのような分類で上記のようなツールが代表的かと思います。現在、当チームでは主に「Sketch」でUI制作、「Prott」でプ
おすすめのプロトタイピングツール5選(2016年5月時点) - Money Forward Developers Blog
こんにちは、デザイナーの大橋です。 昨今のプロダクトデザインの制作フローにおいて、プロトタイピングは必須の作業の一部になっていると思います。 そこで今回は、世の中にあるプロトタイピングツールの中で定番のものから最新の分析までできちゃうツールまで、いくつか紹介したいと思います。 その前に、そもそもプロトタイプを作るメリットとは？ 個人的な意見ですが、下記の二点があると思います。 エンジニアとの認識合わせができる 事前に懸念点を発見し、開発やデザインに入る前にある程度の課題を解決する マネーフォワードでのプロトタイピング toB、toCサービス共に積極的に利用しています。 プロトタイプを作成したら、デザインチームやプロダクトの開発チーム内に共有。 チーム内レビューやユーザーテストを繰り返し、トライ&エラーで、ブラッシュアップしていっています。 プロトタイピングを開発期間に、最初から組み込む事で
モバイルアプリに！Webサイトに！Marvelで簡単プロトタイプ作成 - AGN Web!
WebサイトやアプリUIなどの、設計やデザインの共有に役立つデザインカンプ。 弊社ではまず、一枚絵の状態のカンプ作成から始めるパターンが多いのですが、大まかなページの動きも合わせて伝えられたら…というのを常々思っていました。 コードを書くのがあまり得意ではない、私のようなデザイナーでも簡単に使える プロトタイピングツールを探していたのですが、 そんな中、先日Webクリエイタ―ボックス様で無料で使えるモバイルアプリ制作用のプロトタイピングツールというまさにタイムリーな記事が！ その中でも、おすすめされていたMarvelというブラウザアプリがなんだか使いやすそう…。 実際に試してみて、わかりやすく、そして本当に簡単にプロトタイプができましたので、今回はMarvelの基本的な使い方をご紹介したいと思います。 https://marvelapp.com/ 基本無料で プロジェクト無制限作成 共有U
プロトタイピングツールでデザインの作業効率を上げる - astamuse Lab
アスタミューゼデザイン部のMatsumotoです。 ここ最近astamuse.comとastaIDのスマホ最適化の取り組みに合わせて、プロトタイピングツールを実験的に使い始めました。 ツールを使い始めてからまだあまり月日が経っていませんが、とにかく便利！ ストレスなく今までのデザインプロセスが改善しそう！ ということで、今回はプロトタイピングツールを使う利点や、実際のサービス開発において、どう作業効率がUPしたのかについて紹介させていただきます。 目次 プロトタイピングツール概要 ツールを使用するようになった経緯 ツールを使う目的 使ってみた3つのサービス比較 何が変わった？ まとめ 参考サイト プロトタイピングツール概要 そもそもプロトタイピングとは何？ プロトタイピング（Prototyping）とは、実働するモデル（プロトタイプ）を早期に製作する手法およびその過程を意味する。その目的は
Framer Studioを使ってみました - ゆんこブログ
最近、ちょいちょい耳にするFramer.js。 アニメーションを作るのに適してるライブラリ・・・というくらいしか知りませんが、試しに使ってみようと思いました。 Framer Studio なるCUIツールがあるので、お試し版でダウンロードしてみました。 Framer Studioで何が出来るのかがわかる動画 SketchのオブジェクトをFramer Studioにドラッグアンドドロップするだけで、JSのオブジェクトが生成されちゃうっていう。これはヤバイ。 Framer Studio - Basics on Vimeo Framer.jsの特徴 アニメーションに特化したJavascriptらしい・・・。coffescriptもいけるようです。 他のライブラリよりは比較的簡単そうなので、学習コストはそこまでかからないように見える。見える・・・。見え（ry Google、Apple、Facebo
F8で発表されたプロトタイピングツール Origami Studioの気になる機能いくつか - よりぶろ
Facebookの開発者向けイベントF8でOrigami Studioが発表されましたので、ビデオの中から気になった機能をざっとまとめてみました。 Rapid Prototyping Made Easy with Origami Studio - Videos - 開発者向けFacebook ちなみに年内には無料でリリースされるようです。楽しみ〜！ ページのスクロール 複数のスクリーンを1つのフォルダにまとめて、それに対してScroll Xを適用。スクロールのタイプをPageにすることで、区切られたスクロールが可能。 Alert Viewがめっちゃ簡単に追加できる 中の文言も編集できます Screen Transition パッチ Origamiの鬼門だった画面遷移が作りやすくなってる。これは嬉しい。 Grid / Listのループ Adobe XDと似てますな という感じで、他にも紹介が
Facebookのプロトタイピングツール、Origami Studio発表
UX MILK編集長。株式会社メンバーズ LXグループ所属。LX（ラーニングエスペリエンス）にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / Twitter。 近年アプリ制作者の間では、UIだけでなくアプリのUXを検証すべく、プロトタイピングツールの需要が年々高まっています。国内ではPrott、国外ではInvisionやPixate、Flintoなどがありますが、最近だとAdobeもAdobe XDというツールを発表するなど、大手も積極的に業界に参戦しています。 そんな中、Facebookの開発者向けイベント「F8」にてFacebookのプロトタイピングツール「Origami Studio」についてのプレゼンテーションがありました。FacebookやFacebook Messengerのみならず、Instagramやその関連アプリなど、多数
SINAP | 注目のプロトタイピングツールまとめ-アプリのUIデザイン
こんにちは。デザイナーの飯山です。 夏の暑さも都内では落ち着きすっかり秋めいてきました。9月のシルバーウィークの過ごし方に想像を膨らませる今日この頃です。 さて、今回は数多くあるプロトタイピングツールの中から注目の�ツールをまとめてご紹介したいと思います。「なぜ？」「なにそれ？」という方もいらっしゃるかもしれないので、シナップでのプロトタイピング活用事例について少し触れたいと思います。 SINAPではR&D活動に取り組んでいます。新しい技術や制作手法を用いてトライ&エラーを繰り返すR&D活動では、アジャイル型の開発で進めていることもあり各種プロトタイピングツールをその時の目的に応じて使用しています。 R＆D活動の近況はSINAP Journalでも掲載していて、SINAPのR&Dチームのひとつで取り組んでいるブラウザで読める電子書籍公開サービス『パン』β版にも掲載されてるのでご興味ある方は
Designer’s toolkit: road testing prototyping tools
Subscribe to our mailing list and stay up to date on our latest thought leadership and learning opportunities. This post — “Designer’s toolkit: road testing prototyping tools” — was originally published on July 29, 2013. We’ve all been there: you’ve got a few days to throw together a prototype. For expedience’s sake, you go to one of your large, well-known prototyping tools to get the job done. Th
プロトタイプの忠実度について
今回はプロトタイプの忠実土について考えます。 目的・プロセスで考えるプロトタイピングは4つのカテゴリーに分けられます。 スケッチワイヤーフレームモクアップ実装スケッチは素早くコンセプトを具体化することに適しており、ワイヤーフレームでは情報構造の骨格を検討、モックアップについてはビジュアルの訴求力の検証やステークホルダーへのプレゼンテーションに効果的です。 このように、プロトタイピングといっても「ビジュアル・機能性」の忠実度の異なる方法（基本的には忠実度が高いほどプロトタイプに費やすコストは大きくなる）を要求に応じて、適切に選択をしなければなりません。 ビジュアル・機能性の忠実度についてプロトタイピングの手法から以下の４つの組み合わせに分類すると。以下のように整理できます。 Low Visual + Low Functionality（左下：ビジュアル 低＋機能性 低） 素早く、低予算で何度
Prototyperを使ったモックアップ主導のUI設計プロセス
ユーザーインターフェイスを設計するためのワイヤーフレームとモックアップの取捨選択とプロトタイピングに適したモックアップツールを記載しています。 UI設計はUXデザインプロセスの4段階目 アプリやWebサービス、サイトなどを作っていく全体の流れは以下のプロセスを行っています。基本的なUXデザインのプロセス通りですが、コンセプトやアイディアの前に調査（理解）を重視している点と、ワイヤフレームではなくインタラクティブなモックアップを作成している点が多少異なるかもしれません。その他のプロセスにご興味がありましたら詳細は問題解決型UXデザインアプローチを御覧ください。 理解 アイディア ストーリー UI ビジュアルデザイン 開発 フィードバック 今回は上記の中で画面の要素やレイアウトを検討する「UI」フェイズの「モックアップ」に関してを、整理していきながら記載していきたいと思います。このUIフェイズ
プロトタイプが閉じたデザインを切り開く : could
12月12日、名古屋にて WCAN 2015 Winter が開催されました。今年はスクリーンが 32:9 という超ワイドスクリーンがある会場でした。今までにないスライドデザインで困難なところが幾つかありましたが、良い経験をさせてもらいました。会場や観客に応じてスライドデザインは工夫していますが、その大切さを改めて痛感したイベントでした。 登壇内容も含め、イベント全体に関するレポートを参加した方々が公開しています。ぜひこちらも参考にしてください。一緒に登壇した佐藤歩さん（@ahomu）の「HTML6 でも CSS4 でもない Web 技術のゆくえ – WCAN 2015 Winter に登壇してきました」も必読です。 WCAN 2015 Winterに参加してきました – LOGzeudon WCAN 2015 Winterに参加しました – focusmark.jp WCAN 2015
あたかもプロのようにプロトタイプを活用する方法
http://www.yasuhisa.com/could/article/wcan-prototype-design/ プロトタイプはスマートフォン向けの Web サイトやアプリケーションの制作では欠かせないツール。しかし、聞いたことがあるけど使っていない、使いどころが分からないという理由で活用できていない人も少なくありません。また、国内外、切り口が異なるプロトタイプツールが無数にあることから、どれを選べば良いのか分かり難いです。 現存のワークフローを変えなければプロトタイプは活用できないのでしょうか？無数に登場するほどプロトタイプツールが溢れているのはなぜでしょうか？プロトタイプツールの見分けどころはあるのでしょうか？そもそもプロトタイプは本当に必要なのでしょうか？そんな疑問に答えながら、プロトタイプの使い所を紹介します。Read less
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MVPに達していないプロダクトを使用したユーザーテストで有効な結果を出す方法 | ajike switch
Craft Manager | InVision
feb19
Adobe Creative Cloud | Details and products | Adobe
