UI flows の紹介 | SIOS Tech. Lab

こんにちは、サイオステクノロジーの馬場です。

私は、アプリなどの UI 設計が好きで、それを仕事にしています。

まず、中心となる状況または概念を思い浮かべながら、
お気に入りのスケッチブックに、お気に入りのペンで落書きします。

この落書きによって、自分の脳内イメージが、自分の視覚を通じて、自分にフィードバックされます。

ぐるぐるフィードバックしているうちに、まとまってきた気がしたら、
チームにシェアしてフィードバックを得ます。

チーム内で共通イメージが見えてきた気がしたら、そのイメージを起点として、
今度は、純粋にロジカルに、UI (情報) のフローを展開・整理し始めます。

この記事では、この「フローの展開・整理」の際に、私が使っているツールを紹介します。

1 整理法 UI flows
2 ツール uiflow / guiflow
3 おすすめポイント
4 蛇足
5 次回予告
6 2020年6月8日メモ

整理法 UI flows

まず、 UI flows と呼ばれる整理法があります。

A shorthand for designing UI flows:
https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows

( RoR の DHH を擁した 37signals の Signal v. Noise という有名ブログより )

上記ブログ記事を読めば、すぐ分かるほど簡単な話で、
「見るもの」と、それに対して「すること」のフロー、
まさにそれだけを書き出すためのシンプルな整理法です。

ランチ中に思いついたら、ナプキンに描けるくらいシンプルです。

ツール uiflow / guiflow

ランチ中ならナプキンに描いても良いのですが、自分のデスクに戻ったら、
そこからは、書きながら、考えながら、書きながら、考えながら … をやりたいですよね。

偉い人がそのためのツールを作ってくれています。

もう保守されない画面遷移図は嫌なので、
UI Flow図を簡単にマークダウンぽく書くエディタ作った:
https://qiita.com/hirokidaichi/items/ff54a968bdd7bcc50d42

uiflow (コマンド) :
- https://github.com/hirokidaichi/uiflow
- 「マークダウンぽい」記法で書いたテキストファイルを、
  UI flows の画像ファイルに変換するコマンドです。　
guiflow (その GUI 版) :
- https://github.com/hirokidaichi/guiflow
- 「マークダウンぽい」記法で書いている隣に、
  UI flows がリアルタイムにプレビューされるエディタです。

例えば、遷移の矢印の付け替えは、以下で済みます:

ユーザーがすること
==> 次のページ

↓

ユーザーがすること
==> 別のページ

蛇足

私の emacs の設定は以下です。

▼ ~/.emacs.d/init.el (に追記)

(autoload 'uiflow-mode "uiflow-mode.el" nil t)
(add-to-list 'auto-mode-alist '("\\.uiflow$" . uiflow-mode))
(add-hook 'uiflow-mode-hook
          '(lambda ()
             (add-hook 'after-save-hook 'uiflow-compile nil 'make-it-local)
             ))

▼ uiflow-mode.el

(defun uiflow-mode ()
  "uiflow Mode "
  (interactive)
  (kill-all-local-variables)
  (setq mode-name "uiflow")
  (setq major-mode 'uiflow-mode)
  (run-hooks 'uiflow-mode-hook)
  )
(defun uiflow-compile ()
  (let ((in buffer-file-name)
        (out (replace-regexp-in-string "\\.uiflow$" ".uiflow.png" buffer-file-name)))
    (shell-command (concat "uiflow -f png -i " in " -o " out))
    )
  )

(provide 'uiflow-mode)

この uiflow-mode.el は出典を見つけられなかったので、私が見よう見まねで書いたものかもしれません。