AIが手描きのスケッチを美しいプロトタイプに変換してくれる「uizard」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、手描きしたスケッチをAIが美しいワイヤーフレームに自動変換して、動くプロトタイプを誰でも簡単に作成できるWebサービスをご紹介します！ 現時点ではクローズドベータによる参加となりますが、すでに実用的なレベルに調整されています。これからプロトタイプを作成しようと考えている人は、ぜひ参考にしてみてください。 【 uizard 】 ■「uizard」ってどんなサービス？ 最初に「uizard」でどんなことができるのか簡単にご紹介しておきます。 このサービスのポイントは、手描きのスケッチをAIが美しいフレームワークに自動変換してくれることです。 変換方法は簡単で、手描きのスケッチをスマホのカメラで撮影するだけです！ するとAIがスケッチを分析してワイヤーフレームに変換してくれます。 さらに、PCのブラウザからプロジェクト画面を開いて自由に編集で
最近のWeb制作の勉強になる！Webサイトのワイヤーフレームやプロトタイプのまとめ
プロジェクトのメンバーでないとなかなか目にすることができないワイヤーフレームやプロトタイプ、他の人がどのように作っているか気になります。 最近のWebサイトやスマホアプリの制作で参考になりそうなワイヤーフレーム、フローチャート、プロトタイプを紹介します。 UXデザインのツールも、Adobe XDが先日ベータ版としてリリースされ、SketchもメジャーアップデートとなるSketch4がリリースされ、充実してきましたね。 Adobe XD Wireframe Kit for UX Designer for Adobe XD まずは年内にWindows版のリリースが予定されているAdobe XDで作成されたワイヤーフレーム用のキット。最近のWebサイトで使用されているコンポーネントが数多く収録されています。
Webサイトのアイデアを形にする！ワイヤーフレームやフローチャートに使える素材のまとめ
最近のWebサイトで使われているさまざまなレイアウト、ヘッダやフッタやナビゲーションやコンテンツのパターンがキット化されたワイヤーフレームやフローチャートを作成するのに役立つ無料素材を紹介します。 ランディングページや縦長ページをはじめ、コマースサイト、企業サイトなど、多種多様な案件に対応できます。スマホ用ナビゲーション100種類とかは勉強にもいいですね。 Platforma Web Wireframe Kit(.psd, .ai, .sketch) 最近のWebサイトで使用されているさまざまなコンポーネントがキット化されており、組み合わせるだけでさまざまなページのワイヤーフレームを作成できます。無料版と有料版があり、無料版でもかなりのボリュームです。 iOS Wireframe Kitも無料でダウンロードできます。
デザイナーがワイヤーフレーム作成時に気をつけるべき6つのポイント | FICCナレッジブログ | FICC
Webサイト制作時に作成する「ワイヤーフレーム」。デザイナーの方は、ディレクターからワイヤーフレームを受け取り、それを元にデザインに着手することが多いと思います。 では、デザイナーの方がディレクターにステップアップし、実際にワイヤーフレームを作成する側の立場になった際、どのような点を押さえておくべきでしょうか。“デザインのラフ案”のように作成してしまうと、トンマナを確認するものなのか、構成を確認するものなのかとクライアントが困惑してしまい、本来確認すべきポイントがかすんでしまうなどという事態に陥ります。 ワイヤーフレームの役割をきちんと理解した上で、プロジェクトの内容に応じて最適なワイヤーフレームを作成できるよう、基本的なポイントについて紹介します。 ワイヤーフレームはチーム全員のイメージを共有するツール そもそもワイヤーフレームとは、これから作り上げるWebサイトの設計図としてクライアン
ワイヤーフレームをそのまま生かして画面仕様書を作る（PowerPointのノート表示モード）
はじめに † Webサイト開発の企画設計段階では、 →ワイヤーフレーム（情報設計）作成 → ワイヤーを元にクライアントとコミュニケーション（情報構造について詰める） →個別ページの画面仕様書（外部設計書）作成 → クライアントとコミュニケーション（外部設計について詰める） と進んでいくことが多いです。 ワイヤーフレームはPowerPointでつくっていますが、その後個々の画面遷移やボタンクリック時の動きなどを画面仕様としてまとめていく際に、改めてExcelなどで作り直すのは手間もかかるし面倒です。PowerPointのノート表示を使うと、ワイヤーのパワポ文書をそのまま生かして効率的だったのでメモを残します。 ↑ 解決したいこと † ワイヤフレームは印刷して打合せすることが多いのと、皆さん持っていて共有しやすいため、PowerPointがいい。 画面仕様を書く時にワイヤーあるいはデザインカン
Diagrams for Design Projects | Gliffy
Wireframing SoftwareArrange ideas and components for apps with an easy drag-and-drop interface. Build and collaborate on a new experience. Designers, product managers, and clients can align on what's being built.Use rough wireframes for presentations and team meetings to share ideas before building a prototype.Seek feedback on high-level structure and information hierarchy.Wireframing in Gliffy Br
Web & Mobile Wireframe, Prototyping (Web, iOS, Android) and UX Tool | HotGloo
Welcome to HotGloo The #1 Wireframe & Prototyping Tool HotGloo is a UX, wireframe and prototyping tool designed to build wireframes for web, mobile and wearables. HotGloo helps to visualize planning processes, build and test drive interactions very easily. Create and share fully interactive prototypes with your team and clients and gather feedback on the process. From prototypes of the next award
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
Mockingbird has Shut Down
Mockingbird is no longer in operation. We’re hoping to open-source the code sometime in the near future. In the meantime, some simple alternatives, in a similar spirit to Mockingbird, are: Excalidraw: https://excalidraw.com TLDraw: https://www.tldraw.com If you need a more comprehensive mockup solution, you might want to check out the following: FigJam: https://www.figma.com/figjam/ MockFlow: http
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
uizard
最近のWeb制作の勉強になる！Webサイトのワイヤーフレーム・ユーザーフローのまとめ
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
Responsive Wireframes
Demo - Easel
これが無料とは！ スマートフォン向けサイトやアプリのワイヤーフレームを作成するソフトウェア -Prototyper
Adobe Fireworks CS4 * Web サイトとアプリケーションインターフェイスのプロトタイプ作成
Balsamiq. Rapid, effective and fun wireframing software. | Balsamiq
iPlotz: wireframing, mockups and prototyping for websites and applications