UI flows の紹介

★★★ イベント情報 ★★★
◇【参加登録受付中】Kong Summit, Japan 2022◇
今年は12月15日に開催決定!最新情報とデモとともにKongと事例/ユースケースのご紹介などAPIエコノミーやマイクロサービスに関心のある開発者の方にとっては必見です。ぜひお申し込みください!イベントの詳細・お申込はこちら

★★★ Live配信告知 ★★★
◇11月29日開催 19:00~ 世界一わかりみの深いクラウドネイティブon Azure◇
テーマは「Web App for ContainersとKeycloakで最速OpenID Connect」です!

◇11月30日開催 17:00〜 知ってると ちょっと便利なコマンド集◇
知っていると少し効率の上がるようなコマンドをいくつかご紹介します!

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

私は、アプリなどの 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 版) :

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

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

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

 

おすすめポイント

まず、整理法としての 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





ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!


ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

3人がこの投稿は役に立ったと言っています。

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる