UI flows の紹介

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

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

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

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

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

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

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

整理法 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 がリアルタイムに プレビューされるエディタです。 　

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

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

↓

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

おすすめポイント

まず、整理法としての UI flows がシンプルであること。

その上で、ツール uiflow / guiflow のおすすめポイントは、以下です:

• 絶妙に意味の通る「マークダウンぽい」記法のおかげで、
  テキストをパターンとして整理する作業 = リファクタリング がしやすい。 　
• 当然バージョン管理できるし、差分をみれば変更の意味も分かる。 　
• お気に入りのテキストエディタで書ける！！
  • 個人的には emacs + uiflow がベストなので、 guiflow は一切使ってません。 　

興味のある方は、ぜひ、試してみてください！！

蛇足

私の 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 は出典を見つけられなかったので、私が見よう見まねで書いたものかもしれません。

次回予告

また、そのうち、
お気に入りのツールを、誰も聞いてないし、誰もついて来なくても、マニアックに紹介する 
というフォーマットで書こうと思います。(=「◯◯の紹介」シリーズ)

2020年6月8日メモ

VisualStudio Code のプラグインもあるようです (私自身は試してもいませんが…):
https://github.com/kexi/vscode-uiflow