仕様図作成にMarkdownやAdobe XDなどを活用してみる : つねづね思ふこと

«« iPhone 6→iPhone 11にしたらあまりの爆速ぶりに驚いた | ラーメンを食べきるには（天下一品祭り編） »»

仕様図作成にMarkdownやAdobe XDなどを活用してみる

2019年9月28日

仕様書を書くのに以前はExcel方眼紙を使っていました、ですが最近は流れ図を描くのには『draw.io』、プロトタイプ作成には『Adpbe XD』、文章や表の部分などは『Markdown』を使って効率化できないか試行錯誤しています。

仕様作成で画面遷移図とか書くときに、Microsoft Excelを方眼紙のように使って（以下Excel方眼紙）とかPowerPointで書いていた時期もありました。

Excel方眼紙とは、Excelを起動直後にすべてのセルの大きさをだいたい正方形に指定したうえで（たとえば行の横幅3、行の高さ18）図とかを描き始めるというものです。

Excel方眼紙については以下のようなメリットがありますけど・・・

方眼紙指定することによって罫線（枠線）の描画がしやすい
Microsoft Officeの操作で作図できるので学習コストが低い
Microsoft Officeをインストールしていたら誰でも編集できる
Excelには指定した範囲で自動的に縮小して印刷範囲に収める機能があるので、細かいことを考えなくてもよい
項番を振るのが楽（Excelの自動的割り振りを使う）

一方でExcel方眼紙には以下のようなデメリットが有ります。
この環境からそろそろ脱したほうが生産性向上になるんじゃないか？とか考えていました。

文章とか書き込んだ場合、改行（折返し）や移動・追加が難しい
Excelは相変わらず表示内容と印刷内容に差位がある
レイヤーの概念がない
修正箇所の差分がわかりにくい、gitなどのバージョン管理ツールとの相性が悪い
構成の定義ができない、WordやPowerPointのようなあとからのデザイン一括指定ができない
追記・コメントがしにくい
日本語表記チェックをしてくれない
重い

Microsoft Excel方眼紙を今後できるだけ排除して作業改善する

そもそもExcelは表計算ソフトであって、作図ツールじゃないですからね・・・。
とはいえWindows3.1の頃からずっとExcel使っていますけど、2019についてもこれらについて一向に直してくれないMicrosoftってどうなのよ？

それはともかく、最近自分は作図には以下のツールを使って脱Excelを進めています。

SVGとdraw.io

draw.ioはフローチャートや構成図・遷移図の作成に特化した無料の作図ツールです。
Web版のほか、オフライン版もあるのでやったことないですが外でも使えそうです。
システム開発向け作画に役立つ多彩なパーツが最初から用意されているのも嬉しい。
AWS/GCPなどの構成図を書きたいときに各サービスのアイコンがずらっと揃っていて、おかげさまで見栄えがちょっと良くなります！

Support – draw.io

draw.ioはレイヤーの概念もあるので、図の管理もわかりやすくグループ化できるので効率を高めてくれます。

エクスポート形式も多様。
たとえば作成した図について編集不可でもいいからOfficeで見せたいという場合は、png形式（背景透明）で出力すればいいし。
テキスト形式で保存させてgitに保存し、あとでDiffを使って比較できるようにもしたい！という場合はSVG形式で保存すればOK。

SVG形式で保存すると、修正箇所もテキストなのでわかり安いかも。

機能的に絞ってくれているおかげで動作も軽くて使いやすいです。

Adobe XD

Adobeのプロトタイプ作成ソフト。

■広告

世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書

posted with amazlet at 19.09.28

北村崇
技術評論社
売り上げランキング: 12,796

Amazon.co.jpで詳細を見る

必要な各画面（＝アートボード）を用意して
各画面ごとに各パーツを配置して
（なお使いまわしのテンプレートを当てはめることも可能）
どういう動きをするかプロパティとか画面移動先を指定して
でき上がったものをAdobeのクラウド領域へアップして（開発用に共有）
ほかのスタッフにアップしたURLを共有する
アップしたURL先では画面単位でチャット領域が用意されているので、他のスタッフはコメントしやすい！

プログラム要素はないので条件分岐とかはできませんが（プレゼンとかでは手動で操作する）、とっつきやすいです。

そんなわけで自分はアプリや管理者画面仕様書を作る際、まずはこれで大まかな操作感覚を説明したり感想をもらったりしています。

各画面パーツの作成についてPhotoshopやIllustratorを使えば多分もっと効率は良いんでしょうが、とりあえず自分としてはそんなに画質を高める必要はありません。
そういった人にも対応していて、とりあえずOfficeで加工した図やPaint.NETで作成した画像も取り込めるのはありがたい。

ただし、Adobe XDを編集できる状態でOfficeへデータを変換することはできません。
この間XDで編集したものをOfficeで共有してほしいと言われたので調べてみたのですが、PDF出力はできても（Excelはハナから諦めていましたが）PowerPointで出力する方法すら2019年08月現在どうやってもないのには困った。
PowerPointよりAdobe XDの方が資料作成ツールとして作りやすい点は多いと気がついたのですが、でもやっぱりみんなにそれを押し付けるわけにもいかんし。
チームで作業するならまだまだOfficeを引きずりそうであります？

ちなみにAdobeといえば、Creative Cloudを中心にお高い・・・デザイナー（＝プロ）じゃなければ払うのが難しい金額という印象があります。
私の財布事情では厳しい。
ですがAdobe XDは例外で、複数プロジェクトを並行しなければタダで全機能使える！というのは太っ腹でありがたい。

MarkdownとVisual Studio Code

仕様の表部分の作成とか文章による説明も、以前は図と組み合わせやすかったのでとりあえず「Excel方眼紙」を使っていました。
でも、最近はMarkdownとVisual Studio Codeの組み合わせで作成するようにしています。

Visual Studio Code - コードエディター | Microsoft Azure

Markdownだと（正直表のカスタマイズは物足りないところがありますけれど）改行については楽勝です。

Markdownはもちろん保存形式がテキストファイルなので、gitとかのバージョン管理との相性もいいのもよろしい。
Visual Studio Codeの拡張機能「テキスト校正くん」を使うと、Excelと違って文章チェックしてくれるのも素晴らしい。
PDFの出力についてもVisual Studio Codeの拡張機能「Markdown PDF」を使えば無問題です。
ただ、図の作成とかはMarkdownは作成が難しいので、draw.ioで作成した図を組み合わせて対応しています。

そんな感じでこれからも色々やり方を試してみて、改善していきたい。

■広告