世界を動かす技術を、日本語で。

HNに表示: 私が使う機能だけを備えたUIデザインツールを4年間かけて作りました

概要

  • Vecti はクレジットカード不要で無料利用可能
  • プランのアップグレード時のみカード情報が必要
  • 年間払いは月額払いより最大 20%割引
  • プランの自動更新、いつでもキャンセル可能
  • ダウングレードしても作業内容は保持

Vectiの料金とプラン利用について

  • Vecti は無料で開始可能、期間や回数の制限なし
  • カード情報の入力は 有料プラン へアップグレード時のみ
  • 月額・年額の 2種類の支払いサイクル を選択可能
  • 年額払いは 最大20%の割引、一括前払いでお得
  • プランは 自動更新、キャンセルで次回更新停止
  • プロフェッショナルプランの残期間は 返金不可
  • ダウングレードしても 作業内容やプロジェクトは保持
    • ただし、5件以上のプロジェクトがある場合は新規作成不可
    • プロフェッショナル機能は利用不可
  • 学生・教員向けの 無料プラン あり、要連絡
  • 非営利団体向けの 割引はなし
  • 誰でも 無料プラン の利用が可能

Vecti開発者からのメッセージ

  • Vecti はソロ開発者が2007年からのUI/UX経験を活かして開発
  • 従来のデザインツールの 過剰な機能 に疑問を持ち、必要十分な機能に特化
  • 実装した主な機能
    • ピクセルパーフェクトな グリッドスナップ
    • 高速な キャンバスレンダラー
    • 共有アセットライブラリ
    • エクスポート/プレゼンテーション機能
  • あえて コラボレーション機能プラグインエコシステム、エンタープライズ機能は未実装
  • EU内で 開発・ホスティング、欧州プライバシー規則に準拠
  • 無料プラン (クレジットカード不要、編集者1名で永続利用可)を提供
  • プライバシー方針
    • 基本的なアクセス解析 (ページビュー、リファラー)のみ
    • アプリ内での ユーザー行動追跡やセッション録画は一切なし
    • 必要最小限の サードパーティスクリプト のみ使用
  • ソロデザイナーや小規模チーム 向けのシンプルなツールを志向
  • フィードバック歓迎、技術スタックや設計方針、今後の展望など質問も受付中
  • 詳細・問い合わせ先:https://vecti.com

Hackerたちの意見

これは https://github.com/penpot/penpot と比べてどうなの?

この質問ありがとう。比較してもらえて光栄だよ。しばらくpenpotをフォローしてきたけど、彼らのやってることには感謝してる。主な違いはレンダリングエンジンにある。PenpotはSVGエンジンに依存しているから、プロジェクトの複雑さが増すとパフォーマンスが制限されるんだ。VectiはキャンバスとWebAssembly(Figmaと同じアーキテクチャ)で作られてるから、複雑で重いデザインシステムを遅延なしで扱えるパフォーマンスの利点があるんだ。

発表おめでとう!デザインツールを作るのに10年もかかったよ。完成度はバラバラだけど、40個近くのプロトタイプを作ったかな。でも、共有できるレベルには達したことがなかった。ほんとに難しいことだから、続けてきたあなたに拍手を送りたい。

ありがとう、あなたの言いたいことがよくわかる。私もエンジンを少なくとも3回は全部書き直して、やっとパフォーマンスと全体の結果に満足できたよ。長い学びの経験だったね。開発者として、このプロジェクトはソフトウェアエンジニアリングの観点から私のあらゆる欲求を満たしてくれた :)

あなたのプロトタイプは公開されているものや、見ることができるものはあるの?

もしかして明らかかもしれないけど、これが画像編集ソフトなのか、Reactビルダーなのか、HTML/CSSデザイナーなのか、よくわからないんだけど…何を作るものなの?

これはfigmaに似たワイヤーフレームツールだよ。そこでウェブサイトやアプリのデザインを作って、それをプログラマーに渡してHTMLやReact、Flutter、WPFなどで実装してもらう感じ。

「少しの機能しか使っていないのに、残りはほとんど邪魔になっていた。数年前、私は自分が欲しいデザインツールを作ることにした。だから、実際に必要なもので Vecti を作ったんだ…」ジョエル・スパルスキーが言った(意訳だけど)、誰もがプログラムの機能の20%しか使わないけど、問題はみんなが使う20%が違うから、"無駄のない"バージョンを出しても大抵の人には合わないってこと。あなたが本当にクールなものを作ったみたいだけど、個人的に重要だと思う機能が他の潜在的なユーザーにも必要だと思う根拠は何なの?これは明らかに個人的な趣味プロジェクトじゃなくて、ビジネスにしようとしているように見えるから、どのように顧客調査や市場検証を行ったのか気になるな。

成功するプロダクト戦略は「自分が好きなものを作って、他の人も好きか見てみる」だと思う。それで十分な顧客がいれば、そこから慎重に拡張していける。いわゆる「正直に失敗する」方法だね。Apple II はその一例だと思う。

もっとアプリに機能トグルがあればいいなって思う。

HTMLとCSSが90%の機能を削除しても、開発者には1%しか影響しない気がする。そしたら、実際に良いウェブブラウザができるんじゃないかな。

Joel Spolskyが言った(意訳だけど)ことによると、みんなが使うプログラムの機能は20%だけなんだ。でも問題は、みんなが使ってる20%がそれぞれ違うから、「無駄のない」バージョンを出しても大多数の人に合うわけじゃない。俺にとっては、すごく得意なことを少数のアプリがやる方がいいと思う。すごく特定のユーザー向けに磨かれたツールには何も問題ない。彼らは大規模にはならないかもしれないけど、それも全然いい。もしかしたら、なれるかもしれないけどね。Google Docsは、機能的にはWordPadやTextEditに近いのに、MS Wordよりもずっと人気があるから。

「みんなが使ってる20%は違う」って言うけど、俺の経験では、人々が使うものは提示されるフローの使いやすさや良さによってかなり変わるよ。100の同じオプションがあったら、20を使うかもしれないし、誰も同じ20を選ばない。でも、25のオプションがあって、そのうち20がすごく良い体験を提供してたら、ほぼ90%の人が文句なしにその20を選ぶと思う。

ちょっとウェブ検索したら、あなたはおそらく2001年にJoel Spolskyが出したニュースレターをパラフレーズしてるみたいだね。彼はExcel(彼がプロダクトマネージャーだった)やWordのようなソフトウェアについて話してた。もしかしたら、UIデザインのような狭いタスクに特化したツールの方が「肥大化」しにくいのかも?

ソフトウェアの問題は、全てのユーザーを100%満足させようとすることかもね。「たった」20%でいいのに。それに、すべてがミニマム/マキシマムの問題になる必要はないよ。

時々、何年も、時には数十年も続けているゲーム開発者に出会うことがある。彼らは少数の熱心なファンと共に、ニッチなゲームを作っていて、そのニッチにぴったりはまるから自給自足できている。正直、これが最終的に目指したいことなんだ。自分が愛するニッチな製品を作って、ちょうどいい人数の人がそれを愛してくれることで、持続可能に生きていけるように。誰かを喜ばせようとするのではなく、その製品がどうあるべきかに同意する少数の人たちのためにね。

もっと多くの人がPhotoshopよりInstagramを求めてるのかもね。写真を撮って、10個のフィルターから選ぶだけ。調整できる設定は約12個。対してPhotoshopは何千ものオプションがある。多くの人がTrader Joe's(限られた選択肢)を大きなスーパーマーケットより好むのと同じように。

これがオープンソースになる可能性はある?それともセルフホスティング版は出るのかな?UIを作ったり扱ったりする新しい変わった方法を探しているから、モッディングツールに興味があるんだ。

オープンソースでセルフホストのオプションを探してるなら、https://penpot.app/をチェックしてみて!

頑張って!これが俺が支持するソフトウェアデザインの哲学だ!自分のデザインユーティリティを作ってる者として、君のクオリティには感心してるよ。

これは商業製品だから、他の競合製品と比べたくなるのは自然だよね。なんでこれを使う必要があるの?Figmaの方がいいじゃん。サイドパネルやフローティングツールバーはFigmaからそのまんまパクってるし、訴訟が怖いレベル。FigmaのUIはすごくクリーンで、機能を押し付けてこないように頑張ってる。ホワイトボードやプレゼンテーション、開発モードは全部メニューの裏に隠れてるし。「プラグインサポートなし」って、逆にアピールポイントになるのが謎。Figmaの人気の使い方、インタラクティブプロトタイプやSVG作成、HTML/CSSエクスポートなんかは、このツールでは無理だし。あと、これが一人でメンテナンスされてるって問題もあるよね。コンポーネントはFigmaユーザーにとって必須だし、SVGや画像の扱いも重要だし(テストしたらSVGがバグってた)、選択色やカラーパレットも大事。メンテナがバグ探しに忙しい中、これらの機能をいつ見られるの?技術的にはすごい製品だけど、市場戦略が見えないな。俺はソフトウェアの無駄な機能が嫌いで、コンピュータの操作をスムーズにするために機能を削ったり無効にしたりしてるけど、Figmaは最後にクリーンアップしたいプログラムかも。

これにはスペースがあるよ。あなたがネガティブに挙げてることは、実はポジティブな面でもある。大手競合と機能が同じか似てる?それはプラスだよ。一人の開発者?特定の消費者にとってはプラスだね。

人は最初は意味がわからないものを出すことが多いけど、何かを試さなきゃその分野に入れないじゃん。顧客を集めて、みんなが何を求めてるか見てみるべきだよ。初日からFigmaと競争するつもりだなんて言ってないし、ただ出してるだけだよ。あなたのコメント—質問してるだけとか建設的な批評をしてるって言えるかもしれないけど、いろんなレベルでネガティブな前提を持ってるよね。あなたの見解を批判することもできるけど、なんで初日からFigmaと競争できる製品を持つべきだと思うの?それに対する答えを彼が持ってると思う?

ちょっとポイントを見失ってるかも。すべてのツールがFigmaである必要はないし、正直それは良いことだと思う。Figmaをしばらく使ってるけど、確かにパワフルだよね。でも、どんどん複雑になって、全体的に肥大化してる。簡単な作業でも複数のメニューをナビゲートしなきゃいけなくて、新しいユーザーには学習曲線が急だし(俺も理解するのに時間がかかったし、知り合いも同じ経験をしてた)。時々、アイデアをスケッチしたり、タスクを作ったりするだけで、そんな余計なことに悩まされたくないんだ。「プラグインサポートなし」ってのは実際に意味があると思う。Figmaはメンテが悪いプラグインのせいで遅くなったりクラッシュしたりしたことがあるから。プラグインの互換性やセキュリティの問題を気にせず、ただ動くツールがあるってのは価値があるよね。そう、これは一人の開発者と大企業の比較だけど(俺の理解では)、だからこそ美しいんだよ。あと、これをFigmaと比較するのは不公平な気もするけど(でも聞いてないしね :)))。でも、これがFigmaと比較されるってことは、作られたものの質を示してるよね。誰もがエンタープライズ機能を必要としてるわけじゃない。私たちの中には、摩擦のないクリーンで速いキャンバスを求めてる人もいる。Figmaの新機能は、全市場を独占しようとする試みのように感じる。彼は素晴らしい仕事をしたと思う。いい仕事だね。これには価値がある。

意見ありがとう。Figmaがあなたに合ってるのは嬉しいし、Figmaを潰そうとしてるわけじゃないよ :) Figmaのようなアイコニックな製品と比較されるなんて、本当に光栄に思ってる。私はこのプロジェクトを、パンデミック中に自分の欲求を満たすための個人的な取り組みとして始めたんだ。UXデザインの分野に貢献したいという気持ちからだけど、同時にこれ以上一人で開発を続けるつもりはないよ。あなたが挙げた機能のいくつかは、現在開発中で、すぐにリリースされる予定だよ。

これだね。Figmaをヘビーユーザーとして使ってるけど、なんでみんなこの製品に月12ドルも払いたがるのか理解できない。Figmaの方が価格競争力あるし、もっと広く使われてるのに。

サイドパネルとフローティングツールバーは、Figmaからそのままパクってる(訴訟が怖いくらい)。いや、企業はデザインをパクったからって訴えることはできないよ(試みることはできるけど、法的根拠はないから)。業界がそんな風に動いてなくて本当に良かった。

これって、Joel Spolskyが25年前に書いた問題そのものじゃない?多くのソフトウェア開発者は古い「80/20ルール」に惑わされてるみたい。80%の人が20%の機能を使うって、すごく理にかなってるように思えるよね。だから、自分は20%の機能だけ実装すれば、80%の売上が得られるって自分を納得させる。でも、実際には同じ20%じゃないんだよね。みんなが使う機能はバラバラだし。

TrelloはJiraの機能が20%にも満たないのに、成功した製品だよ。

それでも80%のコピーを売れる。これがその引用のポイントだね。売上を少なくすることに決めれば、数百万ドルの製品を持つことができる。もしそれを10億ドルの製品にしようとしたら、全ての人に向けたものが必要になるけどね。

あなたのウェブサイトデザインが好きだよ。特にヒーロー画像を越えた後のほとんどのセクションの二カラムレイアウトが。画像を全部見てしまった。残念なのは、実際に試してみようとか、どう役立つのかを理解するモチベーションがあまり湧かなかったこと。私はバックエンドのソフトウェアエンジニアだから、プロっぽいランディングページを簡単に作る方法を常に探してる。だからいつも考えてるのは…選べるテンプレートがあって、それにただ情報を埋め込むだけでいいのか?昨日、figma.siteで見つけたFigmaのテンプレートを使って、Chromeのデベロッパーツールでヒーローテキストとナビバーを編集したら、すぐに結果が出た…なんか気に入った。タイポグラフィ、スペーシング、色の使い方、詳細なデータプレゼンテーション(箇条書き、二カラムレイアウトなど)、埋め込む画像が私のスタートポイント(アマチュアデザイナーとして)。デザインを調整するのに何時間もかけるより、既存のコンポーネントデザインをコピーして終わらせたいな。これが役に立てばいいけど。

Figmaやほとんどのベクターアプリに対する一番の不満は、グループの扱い方だね。イラストレーターだけがグループのアイソレーションを提供しているみたい。グループをダブルクリックして入ると、その中の要素だけを編集できる。すごくシンプルな機能だけど、ベクター作業のワークフローを大幅に改善するんだ。Figma、Sketch、Affinity Designerがこれを実装しなかった理由が全然わからない。