TECH MEDIA

テックメディア


開発環境/ツール
ブログ

Visual Studio Codeで「UI Flows」を描こう!

Visual Studio
目次
  1. 01|はじめに
  2. 02|インストール
  3. 03|使ってみよう!
  4. 04|まとめ

冷房なしではこの夏を乗り切れる気がしません。
どうも、エンジニアの堀です。

毎度おなじみ、Visual Studio Codeの拡張機能の紹介コーナーです!

1. はじめに

みなさん「画面遷移図」書いてますか?

私は過去に Excel や PowerPoint、Visio、Cacoo、draw.io など、様々なツールやWebサービスで作られた画面遷移図を見てきました。どれも良し悪しあるのですが、書くのが大変だったり、保守しにくいというような印象を持っていました。

そこで今回は、 37 signals で紹介されている UI Flows と呼ばれる画面遷移を表現する方法を Visual Studio Code で作れる便利な拡張機能があるので紹介したいと思います!

かんたんに説明するとUI Flow は「ユーザーが見るもの」とそれに伴い「ユーザーがすること」を繋げていくものとなっています。

2. インストール

前提として、「Visual Studio Code 」を使いますので事前にインストールしておいてください。
今回使う拡張機能は「Vscode UiFlow」と呼ばれるものになります。

拡張機能追加のアイコンをクリックして「uiflow」で検索するとヒットすると思います。

3. 使ってみよう!

新規でファイルを作成し、言語を「UIFlow」にします。

今回は拡張機能の作者がサンプルコードを載せていましたので、これを試してみたいと思います。

[Home]
welcome
news
--
click signin
==> SignIn

[SignIn]
--
submit
==> Dashboard

[Dashboard]
inbox
--
click signout
==> Home

コピペしてプレビュー表示すると、ちゃんと開きましたね!

4. まとめ

画面遷移図の作成に消耗している方は、是非一度このような便利ツールを活用してみてはいかがでしょうか?PNGやSVGでの出力にも対応しています。テキストベースであるためバージョンも管理しやすく、おすすめです。

興味がある方はぜひお試しください!

RECRUIT 採用情報

「eビジネスに関わる全ての人を幸せにする」
私達とともに新たな時代をつくりませんか?