Origami Studio — Origami Studio 3
Introducing Canvas. A new way to visually layout your Origami prototypes with freeform drawing tools, text editing, and visual components. Easily edit dynamic layouts. Changes automatically respond, making it faster to iterate on your work. See how Build interactive components. Visually layout your components in the Canvas and combine with powerful interactions in the Patch Editor. See how
「ユーザーテストガイドライン VERSION 2.0」を公開しました！ –
都では、令和3年9月にユーザーテストガイドラインを公開し、「テストしないものはリリースしない」を合言葉に、都庁内でサイトやアプリ、システムなどのデジタルサービスを開発する時は、ユーザーテストを実践する取組を進めてきました。 より良いサービスを創るには、利用者の声を聴き、それを反映させるサービスデザインの取組を徹底することが大切です。この取組を更に進めるため、この度、「ユーザーテストガイドラインVERSION 2.0」としての改訂を行いました。
最新版で比較するAdobe XDとFigmaの違い - デザイン機能編 - ICS MEDIA
近年、UI/UXデザインで活躍するデザインツールとしてAdobe XD、Figma、Sketch、InVisionなどさまざまなツールが登場しています。本記事では日本での人気が高い「Adobe XD」と近年盛り上がりを見せている新進気鋭のデザインツール「Figma」にフォーカスして機能の紹介、比較をします。 UI/UXデザインツールには、大きく分けてデザイン機能とプロトタイプを作成し共有する機能の2種類の機能があります。今回の記事では、デザイン機能に重点を置いて紹介します。 Adobe XDを使っているけどFigmaも気になっている方や、その逆という方のデザインツール選定のヒントになればと思います。 Adobe XDとは？ Adobe XDとは、2017年に正式リリースされたUI/UXデザインツールです。IllustratorやPhotoshopと操作感が似ておりAdobeユーザーであれば
Retina Support for Web Prototypes | Inside Design Blog
Now you can easily mock up your web prototypes for retina displays! InVision will display any image at 50% – doesn’t matter if it’s a screen or a background – and all you have to do is use the prescribed high-resolution modifier: @2x (for example: file_name@2x.png) Fine print: Use ONLY when necessary as full page retina images may double your project’s loading time and viewing on slower internet c
Framer Web CheatSheetを制作しました｜Shintaro Nakajima｜note
FramerWeb先日本リリースとなり、これまでのFramerシリーズの集大成になりそうなFramer Web. ・Figmaのようにweb上で同時編集できる ・Figmaのデザインを直接インポートとして動かせる ・旧Framer（classic）の柔軟さと、Framer Xのコンポーネント部品の使いまわしやすさが融合など良い点はたくさんあるのはわかってたんですが、CoffeeScriptからReactベースになり、いまいちキャッチアップできてなかったので、連休中のお勉強も兼ねて、CheatSheetを作成しました。この記事ではこのCheatSheetを作ったいとについて触れたいと思います。 👇CheatSheetのファイルはこちらから。 基本コンセプト：デザインをちょっと動かしたい時にコピペしてすぐ使えるコードスニペット集。このシートに載ってるインラタクションは2分で完成できる！を目指
PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売
私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク
FigmaではじめるUI（Web）デザイン｜Part1｜Nao Komura｜note
Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。 そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く（人のこと言えないですが......）、初心者にはUIデザインのツールとしてはまだまだ馴染みの薄いツールなのかなと思います。 というより、昨今はデザインツールが多すぎてシンドいことこの上ないですね。一度効率化の味を知ると更なる効率化を追い求めてしまいますし、そんな現状だと日頃から使用しているツールを変えるのも一苦労です。 ......さて、今回は初心者〜中級者くらいまでに向けてFigmaで作るUIデザイン入門的な記事を書いていこうと思
Figmaの使い方、全力でまとめました。｜hikaru-takase /Loglass
最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。 私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。 導入編アカウント登録 figmaの公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが名前と職業を聞かれるぐらいで簡単に登録できます。またgoogleアカウントを持ってる人であれば、そちらからすぐにログインできるのでおすすめ。 ログイン後はfigmaのダッシュボードが表示されます。 webブラウザでほぼすべての機能が使えるのがfigmaの特長でもあります。 Desktop Appをインストールする やはり
画面遷移図が簡単に作れる！「Overflow」とはどんなツール？ | Web Design Trends
デザインを作成したら、フィードバックをもらい改善するサイクルを短期間で繰り返すというスタイルがアジャイル型のプロダクト開発ではとても重要です。 最近では、プロトタイプを使ってデザインのフィードバックをもらうような作業フローも増えてきましたが、プロトタイプだと一度に1画面しか確認できないため全体像を掴みづらかったり、かといってすべての画面を画像で書き出しただけでは画面間の相互関係が分からないという課題があります。 そんな時に役立つのが画面遷移図です。今回ご紹介する「Overflow」は、画面遷移図の作成に特化したツールで、美しい画面遷移図が簡単に作れるというのが大きなポイントとなっています。 今回は、画面遷移図作成に特化したツール「Overflow」についてご紹介していきたいと思います。 Overflowとは Overflowは、画面遷移図作成ツールです。画面遷移図とは、アプリやWebのデザ
Webサイトのプロトタイプ制作に使える無料オンラインツール
2016年3月19日 Webサイト制作, 便利ツール Webサイトを制作する際に大切なものの多くは、制作開始する前の段階にあります。サイトの設計・計画がうまくいっていないサイトは、制作開始後、様々なトラブルに見舞われることでしょう…。ということで今回はモックアップ・プロトタイプと呼ばれる設計画面を作成できるオンラインツールをいくつか紹介します。サイトの大まかな動きをチーム内でシェアしたり、フィードバックしあったりと、便利に使えるものばかりです！ ↑私が10年以上利用している会計ソフト！ 2016年3月16日 追記：Adobeがリリースしたプロトタイピングツールも試してみました！→ Adobe Experience Design（XD）を使ってアプリのプロトタイプを作ってみた ViewFlux ViewFluxはデザイン画像のシェアやフィードバックが簡単に行えるツール。必要なページのデザイン
Pixateに変わるプロトタイピングツールとは？５つのツールを徹底比較！ | CyberAgent Developers Blog
みなさん、初めまして。AbemaTVデザイナーの竹原です。 AbemaTVは、無料で楽しめるインターネットテレビ局として、スマートフォンやPC、AppleTV、AndroidTVなど様々なデバイスで提供している動画サービスです。今回は開発現場でUIを制作する時に使用する【プロトタイピングツール】についてまとめます。 デザイナーの役割とプロトタイピングツールの必要性 ネイティブアプリの開発現場では、デザイナーは静的なデザインを作るだけでなく遷移や動きのイメージをエンジニアやプロデューサーと共有する事が求められています。プロトタイピングツールを使うことで、全体のストーリー設計を早い段階からメンバーと共有でき課題を洗い出せることで、制作の効率をあげることに繋がります。2010年Sketchが登場して以来、新しいプロトタイピングツールも次々と登場しています。ここ数年のプロトタイピングツールの変化と
さよならSketch、こんにちはFramer X｜KANTA YAMAGATA｜note
Jorn van Dijk（@jornvandijk）のリツイートから2ヶ月近く経った先日、ようやくFramer X βの招待が届きました。Trailerが格好良すぎてReactとシームレスになるのかという期待で一杯だったので嬉しかったです。実際、AirbnbやFacebookのデザイナーもこんな感じでした。とりあえず動画を観ていただけたら。 タイトルはUSノリですが、正直Sketchはある1プロジェクトで使ったことがあるだけです。Figmaなどの他のデザインツールは使ったことがないです。なのでここでは比較を行いません。以前からあるFramerとの差分の紹介を中心にしていきます。Framerはなぜか日本では使われていない印象がありますが、これがデザイン環境の向上に少しでも参考になれば幸いです。 Linking複数画面の遷移をつくるには、FramerではFlowComponentを利用したコ
実務で活かせる！プロトタイピングの具体的な進め方とは？｜Goodpatch Blog グッドパッチブログ
プロトタイピングには、コミュニケーションとコラボレーションが生まれること、デザインプロセスを最適化でき、ユーザーへのフォーカスを常に保てるなど、たくさんのメリットがあります。また、開発フェーズや目的、オーディエンスによってプロトタイプのカタチは異なるという点についてもお話しました･･･ と、色々理想を語りましたが、実際どうやるのかまだモヤモヤしている方もいるかと思います。 そこでこの記事では、実務でもすぐに使えるように、プロトタイピングの具体的な進め方をご紹介します！ プロトタイピングのプロセス さっそく、プロトタイピングのプロセスについて考えましょう。 言うまでもなく、プロトタイピングは全体の開発のプロセスに沿って行われるため、それ固有の、あるいは単体で考えるべきプロセスではありません。 突然、動きを確認できるようなプロトタイプを作り始めるのではなく、前のフェーズで議論を行い、明確になっ
デザインおよびプロトタイプの共有
Adobe XD ユーザーガイド はじめに Adobe XD の新機能 よくある質問 Adobe XD でのデザイン、プロトタイプ、共有 カラーマネジメント 必要システム構成 ハードウェアとソフトウェアの要件 Adobe XD、Big Sur、Apple Silicon | macOS 11 ワークスペースの基本 Adobe XD でのアプリ言語の変更 UI デザインキットへのアクセス Adobe XD のアクセシビリティ ショートカットキー ヒントとテクニック デザイン アートボード、ガイド、レイヤー アートボードの基本を学ぶ グリッドとガイドを使う スクロール可能なアートボードの作成 レイヤーの操作 スクロールグループを作成する シェイプ、オブジェクト、パス オブジェクトの選択、サイズ変更および回転 オブジェクトの移動、分散および整列 オブジェクトのグループ化、ロック、複製、コピー、お
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【作り方の参考にも】WEB・アプリ制作に便利なワイヤーフレーム無料ツール11選【サンプル多数/テンプレート】
User flow diagramming tool for design teams | Overflow
Prototyping VUI with Adobe XD for Alexa Day 2019
Prott - Prototyping tool for Web iOS Android apps