Wireflow: ユーザーフロープロトタイプ向けの無料オンラインオープンソースツール

 (wireflow.co)
4 ポイント 投稿者 GN⁺ 2023-12-21 | 1件のコメント | WhatsAppで共有
  • Wireflowは、複雑なデザインツールや別途キットなしでユーザーフロープロトタイプをすばやく作成できる無料のオンラインツール
  • 100種類以上のグラフィック/カードと113個のフローを提供し、Web要素、インタラクション、一般的なユースケースをすぐに組み合わせられる
  • リアルタイムコラボレーションとライブチャットをサポートし、同僚を招待して同じアプリ内でフローを一緒に設計できる
  • プロジェクト/ルームのアクセス権限を公開または非公開で管理でき、ズーム・コネクター・元に戻すなどの基本編集機能を備える
  • 1か月未満で作られたサイドプロジェクト的なプロトタイプであり、アイデア検証には成功したものの、バグの可能性が残っている

ユーザーフロー設計をすばやく始めるツール

  • Wireflowは、ユーザーフロープロトタイプを作成するための無料・オンライン・オープンソースツール
  • Photoshop、Illustrator、ワイヤーフレーム、またはユーザーフローキットを購入しなくても、初期のプロジェクト企画やブレインストーミングを進められるようにすることが目的
  • 100種類以上のグラフィック/カードを提供し、Web要素、インタラクション、一般的なユースケースを含む
  • 選択可能なフローは113個で、10カテゴリから選べる
    • All
    • Article
    • Blog
    • Features
    • Gallery
    • Header
    • Misc
    • Multimedia
    • Sign In
    • Social

コラボレーションとアクセス制御

  • リアルタイムコラボレーションを前提に、同僚を招待して同じプロジェクトで一緒に作業できる
  • 内蔵ライブチャットにより、設計中でも同じアプリ内でチームメンバーと会話できる
  • プロジェクトまたはルーム単位でアクセス権限を定め、公開/非公開を設定できる

編集機能とオープンソース構成

  • 基本編集ツールは、ユーザーフローをすばやく配置・修正するために必要な機能を提供する
    • ズーム
    • コネクターと矢印
    • キャンバス移動
    • 元に戻す/やり直し
    • ヘッダー削除
    • ヘッダーテキスト編集
    • 前面へ移動/背面へ移動
    • キーボードショートカット
  • Wireflowは完全なオープンソースプロジェクトで、GitHubで確認できる
  • 技術スタックはNode.js、Meteor.js、React.jsで構成される
    • Node.js: Chrome V8 JavaScriptエンジンベースのJavaScriptランタイム
    • Meteor.js: 純粋なJavaScriptでWeb・モバイルアプリを作るためのプラットフォーム
    • React.js: ユーザーインターフェース構築のための宣言的JavaScriptライブラリ

プロジェクトの状態

  • 当時進行していた他の主要プロジェクトと並行してすばやく作られたサイドプロジェクトで、開発期間は1か月未満
  • 現在の状態は、シンプルだが有用なアプリアイデアを検証した無料プロトタイプに近く、バグがある可能性がある

関連記事

1件のコメント

 
GN⁺ 2023-12-21
Hacker News の意見

  • 最初に見た感じでは便利そうだが、メンテナンスされているのかは分からない
    GitHub の main ブランチは何年も更新されていない: https://github.com/vanila-io/wireflow

    • もともと Wireflow は Meteor で作られていて、その頃はデータを保存する方法があった
      その後 React で書き直されたが、まだデータ保存の方法はなく、メンテナーたちが時間の大半を費やす別のプロジェクトもできた
      なので、こういうツールに興味のある人がいるのか、Wireflow にもっと貢献したい人がいるのか、似たツール関連の新しい話題が Wireflow のメンテナンスへの関心を高めるきっかけになるのかが気になっている
      Wireflow のメンテナーの一人としての考え

  • クリックしてすぐ描き始められ、画像としてエクスポートできた
    ログインも登録も不要なんて本当に良い

    • 登録不要なのは良い
      ただ、「描く」とはどういう意味なのか分からないし、実際に描画ツールがあるべきなのかも気になる
      サイトマップを作るためのテンプレート集のように見えるが、モバイルデザインパターンまでカバーしようとしているツールなのかも分からない
      1か月足らずで作ったのは理解できるが、Principle(https://principle.app/) のようなものを数日学べば、残りの作業を2週間以内に終わらせ、最後にはインタラクティブなフルスケールのプロトタイプを作ることもできそうに見える

  • かっこよさそう
    GitHub README 内の YouTube 動画リンクが開かない: https://youtu.be/zm0XbLmXtXY
    最新のデモ動画を見たい

  • これをどう配布しようとしているのか少し混乱している
    インストール可能な Web アプリのように紹介されているが、Android 版 Chromeでは完全に壊れているように見える
    スマホで確認して何を期待していたのかは分からないが、少なくともタブレットでは動くべきだと思う
    スマホでの用途はプロジェクト編集ではなく閲覧程度かもしれないし、実務で使うなら会議の合間に変更点を確認してメールスレッドや Teams チャットに返信する必要があるかもしれない
    アプリデザインの何度目かの修正版 PDF エクスポートを抱えて格闘し続けなければならないなら最悪で、誰もがそういうものを嫌っている

  • 実際に賢く縮小したワイヤーフレームを基にこうしたフロー図を作るアイデアについて、以前に記事を書いたことがある: https://medium.com/proof-of-concept/the-story-of-a-true-ux-t...
    いつか自分の小さな UX アプリ(https://www.tinyux.app)にもこういうものを入れたいが、まだ手を付けられていない
    フロー、ページ、コンポーネントのどの視点から始めても、最終的に同じ単一の信頼できる情報源を使うようにできれば本当に素晴らしいと思う
    以前 UX デザイナーの集まりでこのビジョンとコンセプトを発表したときは反応がとても良かったが、ワイヤーフレームを操作する Vim 風のテキストコマンドのプロトタイプを見せると、みんなぽかんとした表情になった
    期待値があれほどずれていたのは今でも笑える

  • 似たプロジェクトで Vue.js で書かれたものを知っている人はいますか？

  • 機能サイドバーに permisions とあるが、permissions のタイプミスに見える

  • 本当に便利そう
    フォークしてゲームデザインアイコン向けに作るのは簡単だろうか

    • このプロジェクトの目的が分からない
      画面を追加することはできるが、基本的なグラフィックでテキストしか変更できない
      画面間の関係も追加できるが、クリック可能ではない
      なのでサイトマップのように見えるが、それがすべてなのか？

  • ユーザーフローのプロトタイプとは何ですか？

    • ユーザーが何らかのタスクを完了するためにたどるすべてのステップのこと
      通常は完成デザインではなく、ワイヤーフレームのような低忠実度の形で、プロトタイプというのは Figma のプロトタイプのようにクリックして遷移を確認できるという意味である可能性が高い
      例えばログインフォームなら、初期状態 → エラー状態 → 送信中状態 → 成功状態を示すことができ、こういうものを「ユーザーログインフロー」と呼べる

  • “It have built in live chat which give you ability to communicate with your team mate and still be in the same app while you collaborating in real-time.”
    文法を指摘したいわけではないが、関係者が見ているなら、この文は少し直したほうがいいと思う