手描きスケッチ風のUI要素

 (wiredjs.com)
4 ポイント 投稿者 GN⁺ 2024-06-01 | 1件のコメント | WhatsAppで共有
  • Wired Elementsは、ワイヤーフレーム、モックアップ、遊び心のあるUIに適した手描き風の共通UI要素コレクション
  • 各要素にはランダム性があり、同じコンポーネントでもレンダリングのたびにまったく同一には見えない
  • デモではwired-elementコントロールでrough.jsが描いたスケッチ風の円を切り替え、動作の仕組みを示している
  • Vue、Svelte、React向けのCodeSandboxサンプルがあり、Reactでは別途wrapper componentsを使用する
  • 使い方や要素ごとのAPIはGitHubドキュメントで確認でき、全要素はcomponent showcaseで見ることができる

スケッチ風UIコンポーネント

  • Wired Elementsは、手描きのようなスケッチスタイルの共通UI要素セット
  • ワイヤーフレームやモックアップのように完成前の雰囲気を出したり、手描きテイストのUIを作るときに活用できる
  • 各要素は十分なランダム性を持って描かれるため、レンダリングごとにまったく同じ図形には見えない
  • 簡単なデモは、wired-elementコントロールを使ってrough.jsで描かれたスケッチ風の円を変更する仕組み

サンプルとドキュメント

関連記事

1件のコメント

 
GN⁺ 2024-06-01
Hacker Newsのコメント

  • 見た目がよくて、妙に郷愁を誘う。ひとつフィードバックすると、チェックボックスを切り替えるたびに、チェック印が毎回手で描き直されたように少しずつ変わるのを期待していた
    ノイズを少し入れれば 2.0 の機能としてよさそう

    • ノイズを入れるとレンダリングのたびに見た目が変わるだろうし、それが良いことかはよくわからない

  • この用途なら Balsamiq Wireframes がいちばん良い: https://balsamiq.com/wireframes/
    コードを書かなければならないなら、手早くラフに作るという趣旨が失われる

    • こういうものは、顧客に今見ているものが完成品ではなく 動くプロトタイプ だと示すのに役立つかもしれない
      昔の Swing の「napkin look&feel」のようにデザインを差し替えられるなら、もっとしっくりくる: https://napkinlaf.sourceforge.net/
      ただ、Web では「テーマを変えてデザインを差し替える」という発想はずっと前に消えたように思う
    • 携帯電話で手描きスタイルのワイヤーフレームを作るなら、これがある: https://www.tinyux.app
      小さなタッチ画面でドラッグ＆ドロップを使いたくなかったので、非標準 UX を採用した
    • https://wireframesketcher.com/ が本当に好き
      クラウド依存がなく、永久ライセンスが $99。こういう製品はだんだん珍しくなっている
    • Balsamiq が好き。この種のワイヤーフレームスタイルは「これはただのスケッチです」と伝えられるので、「フォントがちょっと微妙ですね」みたいな質問を避けるのに役立つ
    • Balsamiq は本当に速くて簡単。昔、サードパーティ製の後処理ツールが Balsamiq Mockups をコードに変換してくれたのを覚えているが、まだ残っているのだろうか
      調べてみたら名前は napkee で、オープンソース化はされたものの、もうほぼ 10 年近く手が入っていないようだ

  • 10年ほど前に流行っていた Balsamiq を思い出す

    • 今でも Balsamiq はとても有用だと思う
    • 今でもモックアップを作るとき最初に使うツールだ。利害関係者に 製品の動作 を伝えるのに最も強力だと感じる
    • そう、それを言おうと思ったらすでに出ていた
      記憶が正しければ、Balsamiq の創業者 Peldi が当時これについてブログに書いていたと思う。私も好きだ。さらに昔に流行った Comic Sans フォントもぼんやり思い出す
    • X Window マネージャーにも、同じやり方でスキンを当てられるものがなかったっけ？
    • ほぼ毎日使っている

  • 昔は、これが完成した動作インターフェースではないとユーザーに理解してもらうために スケッチ風モックアップ を使っていた。今ではその意味は失われたのだろうかと思う

    • それがまさに目的だ。モックアップソフトウェアを作るためのものだ

  • 手描き感のある要素なら Excalidraw がいちばん良い: https://excalidraw.com/
    UX とやりたい作業、特にアーキテクチャ図や低忠実度モックアップを素早く仕上げられる点にすぐ惚れ込んだ。すべてのデータをブラウザのローカルに保存するので、オフライン作業も簡単

    • tldraw.com も素晴らしい

  • 以前の議論: https://news.ycombinator.com/item?id=17146451 (650ポイント、コメント121件)

    • 展開すると次のとおり: Show HN: Wired-elements – UI web components with a hand drawn, sketchy look - https://news.ycombinator.com/item?id=17146451 - 2018年5月 (コメント120件)
      これ、または非常によく似たものについての別スレッドもあった気がする。誰か見つけたら一覧に追加できる

  • スケッチ風 UI 要素は良いが、スケッチ風テキストフォント は嫌い。普通のサンセリフフォントとスケッチ風 UI は、スタイル的に一緒に使いにくいものなのだろうか？

    • 個人的にはフォントは気に入ったが、こういう「手書き」フォントはいつも スケッチっぽいのに規則的 という不気味の谷にはまる
      特定のグリフが単体でどれだけスケッチっぽく見えても、毎回まったく同じに見える
    • ショーケースの多くの項目は通常のフォントを使っているので参考になる: https://wiredjs.com/showcase
    • 筆記体フォントなら、少なくとも右に傾いているべきだ

  • このプロジェクトに触発されて、手描きスタイルのモックアップを素早く作れる VSCode プラグイン WireText を作った
    https://gitlab.com/saxion.nl/42/wiretext-code/-/blob/main/RE...

  • 美的感覚の面で気に入っている。かわいい。フィードバックを得るのにより有用かどうかはあまり気にしていない

    • 見た目だけが欲しくて JS の部分が不要なら PaperCSS を使えばよい

  • 個人的には、このスタイルは実製品に使いたくなるくらい十分良いと思う。あるいは製品のベータ版で使って、正式リリース時に変えるのもありかもしれない
    ただ、追加作業が多すぎる気もする

    • デザインの仕事を始めたばかりの頃、カスタマーサクセスチームの一部を対象に 低忠実度プロトタイプ のユーザーテストを行った
      視覚表現は、こちらが見せているものはまだ変わりうるのだと伝える意図だったのに、「スケッチっぽい感じがすごくいい」というフィードバックを受けた。それ以降、デザイン工程の段階表示としてその表現に頼らなくなった
    • ベータやアルファビルドでこのスタイルを使うのには理由がある。得られる フィードバックの種類 が変わるのだ
      昔、「未完成に見えるようにすること」に関する記事を読んだことがあり、おそらく AWT look and feel の文脈だったと思う。関連して xkcd スタイルのグラフもある: https://mathematica.stackexchange.com/questions/11350/xkcd-s... ( https://news.ycombinator.com/item?id=4597977 ) そして https://www.chrisstucchio.com/blog/2014/why_xkcd_style_graph...
      製品が完成して見えると、受け取るフィードバックも完成品だという前提で出てくる
      以前、JavaScript の内部ロジックを作業しているときに、見栄えの良いヘッダーを使ってしまった失敗がある。以前使っていた引き伸ばした GIF より良く、CSS グラデーションまで入っていた
      「このワークフローのページ順は正しいか？ この機能に必要な UI 要素はページにあるか？ 足りない機能はないか？」を確認したかったのに、返ってきたフィードバックは、青色とグラデーションが暗い側から明るい側へ行くべきか、その逆かという話だった
      さらに調べると、その look and feel は https://napkinlaf.sourceforge.net で、そこから次のブログ記事につながる: Don’t make the Demo look Done - https://headrush.typepad.com/creating_passionate_users/2006/...